From cd77aa5633e1057b2b95f035d1874b5e3c0b9353 Mon Sep 17 00:00:00 2001 From: jyh071116 Date: Tue, 31 Oct 2023 08:54:19 +0900 Subject: [PATCH] =?UTF-8?q?chore:=20Dict=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EB=A6=AC=ED=8E=99=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/search.svg | 27 ++------------------------- src/pages/Dict/index.tsx | 9 +++------ src/pages/Dict/style.ts | 35 ++++++++++++----------------------- 3 files changed, 17 insertions(+), 54 deletions(-) diff --git a/src/assets/search.svg b/src/assets/search.svg index 9adde23..f9e4da7 100644 --- a/src/assets/search.svg +++ b/src/assets/search.svg @@ -1,26 +1,3 @@ - - - - -Created by potrace 1.15, written by Peter Selinger 2001-2017 - - - - + + diff --git a/src/pages/Dict/index.tsx b/src/pages/Dict/index.tsx index c28f9f0..ce38e67 100644 --- a/src/pages/Dict/index.tsx +++ b/src/pages/Dict/index.tsx @@ -8,7 +8,7 @@ function Dict() { id: 1, pos: "명사", beforeWord: "미망인", - similarWord: ["과부", "wkflaf", "wdijad"], + similarWord: ["과부"], mean: "남편이 죽고 배우자 없이 홀로 사는 여자", }, { @@ -22,7 +22,7 @@ function Dict() { id: 3, pos: "명사", beforeWord: "나흘", - similarWord: ["4일", "wkflaf", "wdijad"], + similarWord: ["4일", "배고파"], mean: "하루가 네 번 있는 시간의 길이. 곧, 네 날", }, ]; @@ -30,21 +30,18 @@ function Dict() { - + {data.map((item) => ( - {item.beforeWord} - {" "} {item.similarWord.map((word) => ( {word} ))} - {"1. "} {item.pos} {item.mean} diff --git a/src/pages/Dict/style.ts b/src/pages/Dict/style.ts index 9060fb8..cad97aa 100644 --- a/src/pages/Dict/style.ts +++ b/src/pages/Dict/style.ts @@ -7,38 +7,33 @@ export const DictMain = styled.div` justify-content: center; gap: 5rem; width: 100%; - height: 100vh; + margin-top: 5rem; `; export const SearchBox = styled.div` display: flex; align-items: center; width: 35%; - height: 5vh; border: 1px solid #ececec; border-radius: 25px; background-color: #fbfbfb42; gap: 0.5rem; - padding: 1rem 1rem; + padding: 0.75rem 1rem; `; export const SearchBoxInput = styled.input` width: 100%; - height: 4.5vh; + font-size: 1.2rem; border: none; outline: none; - /* margin-left: 10px; */ `; export const SearchImg = styled.img` width: 4%; - height: 4vh; - /* margin-left: 10px; */ `; export const WordArea = styled.div` - width: 70%; - height: 50vh; + width: 50%; display: flex; flex-direction: column; justify-content: center; @@ -47,10 +42,10 @@ export const WordArea = styled.div` `; export const WordBox = styled.div` - width: 70%; - height: 25%; + width: 100%; + padding: 1% 0; background: #ccc; - border-radius: 10px; + border-radius: 15px; display: flex; flex-direction: column; border: 1px solid #e6e6e6; @@ -59,33 +54,27 @@ export const WordBox = styled.div` export const WordBoxBwSw = styled.div` display: flex; + align-items: center; padding: 1rem 1rem; - font-size: 21px; + font-size: 1.3rem; font-weight: bold; gap: 0.5rem; `; export const Blue = styled.span` color: #3084f2; - font-weight: bold; `; export const SimilarWord = styled.span` color: #3084f2; background-color: #e6e6e6; - padding: 0.25rem; + padding: 0.25rem 0.5rem; border-radius: 5px; - font-size: 18px; + font-size: 1.1rem; + font-weight: 400; `; export const WordBoxMean = styled.div` padding-bottom: 1rem; padding-left: 1rem; - font-size: 15px; - font-weight: lighter; -`; - -export const Example = styled.div` - color: #55f; - font-size: 10px; `;