Merge pull request #6 from SWDC-Team-GG/younghyun

Dict 레이아웃 리펙토링
SWDC-Team-GG · Oct 31, 2023 · 8abee45 · 8abee45
2 parents 5f5b56d + cd77aa5
commit 8abee45
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 54 deletions.
diff --git a/src/assets/search.svg b/src/assets/search.svg
diff --git 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,29 +22,26 @@ function Dict() {
       id: 3,
       pos: "명사",
       beforeWord: "나흘",
-      similarWord: ["4일", "wkflaf", "wdijad"],
+      similarWord: ["4일", "배고파"],
       mean: "하루가 네 번 있는 시간의 길이. 곧, 네 날",
     },
   ];
   return (
     <S.DictMain>
       <S.SearchBox>
         <S.SearchImg src={search} />
-        <S.SearchBoxInput />
+        <S.SearchBoxInput placeholder="Search" />
       </S.SearchBox>
       <S.WordArea>
         {data.map((item) => (
           <S.WordBox>
-            <S.Example />
             <S.WordBoxBwSw>
               {item.beforeWord}
-              {"  "}
               {item.similarWord.map((word) => (
                 <S.SimilarWord>{word}</S.SimilarWord>
               ))}
             </S.WordBoxBwSw>
             <S.WordBoxMean>
-              {"1. "}
               <S.Blue>{item.pos}</S.Blue> {item.mean}
             </S.WordBoxMean>
           </S.WordBox>

diff --git 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;
 `;