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

사전 페이지 리펙토링
SWDC-Team-GG · Nov 1, 2023 · 4bbb541 · 4bbb541
2 parents 2bbb718 + b5824eb
commit 4bbb541
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/src/pages/Dict/index.tsx b/src/pages/Dict/index.tsx
@@ -30,11 +30,15 @@ function Dict() {
   ];
   return (
     <S.DictMain>
+      <S.MainText>
+        <S.Blue>단어</S.Blue>사전
+      </S.MainText>
       <S.SearchBox>
         <S.SearchImg src={search} />
         <S.SearchBoxInput placeholder="Search" />
       </S.SearchBox>
       <S.WordArea>
+        <S.RecentText>검색기록</S.RecentText>
         {data.map((item) => (
           <Word item={item} />
         ))}

diff --git a/src/pages/Dict/style.ts b/src/pages/Dict/style.ts
@@ -5,18 +5,27 @@ export const DictMain = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 5rem;
+  gap: 2.5rem;
   width: 100%;
   margin-top: 5rem;
 `;
 
+export const MainText = styled.div`
+  font-size: 2.5rem;
+  font-weight: bold;
+`;
+
+export const Blue = styled.span`
+  color: #314fdd;
+`;
+
 export const SearchBox = styled.div`
   display: flex;
   align-items: center;
   width: 35%;
   border: 1px solid #ececec;
   border-radius: 25px;
-  background-color: #fbfbfb42;
+  background-color: #fbfbfb;
   gap: 0.5rem;
   padding: 0.75rem 1rem;
 `;
@@ -36,7 +45,10 @@ export const WordArea = styled.div`
   width: 50%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
   gap: 2rem;
 `;
+
+export const RecentText = styled.div`
+  font-size: 1.5rem;
+  font-weight: bold;
+`;
diff --git a/src/pages/Quiz/style.ts b/src/pages/Quiz/style.ts
@@ -37,7 +37,7 @@ export const Line = styled.div`
 
 export const SelectArea = styled.div`
   display: flex;
-  gap: 0.75rem;
+  gap: 0.7rem;
   flex-direction: column;
   justify-content: center;
 `;