chore: 퀴즈 페이지 리펙토링

SWDC-Team-GG · Nov 1, 2023 · 11ba20a · 11ba20a
1 parent 20b9524
commit 11ba20a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/src/pages/Quiz/index.tsx b/src/pages/Quiz/index.tsx
@@ -3,9 +3,13 @@ import * as S from "./style";
 
 function Quiz() {
   const { data, subject, question } = {
-    data: [1, 2, 3, 4],
-    subject: "퀴즈",
-    question: "당신은 살아 있습니까?",
+    data: [
+      "독서로 도를 전한 세 명의 인물",
+      "독서를 해야 하는 세 가지 이유",
+      "독서를 하는 세 가지 방법",
+    ],
+    subject: "이럴 땐 사자성어",
+    question: "독서삼도(讀書三到)의 뜻은?",
   };
 
   return (

diff --git a/src/pages/Quiz/style.ts b/src/pages/Quiz/style.ts
@@ -5,40 +5,39 @@ export const QuizBox = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 5rem;
+  gap: 2rem;
   width: 100%;
-  height: 100vh;
+  height: 88vh;
 `;
 
 export const TitleBox = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5rem;
 `;
 
 export const SmallTitle = styled.span`
-  font-size: 17px;
-  color: #000000;
-  font-weight: bold;
+  color: #999;
+  letter-spacing: -1px;
 `;
 
 export const MainTitle = styled.p`
   font-size: 30px;
-  color: #004ce0;
-  font-weight: bold;
+  color: #3084f2;
+  letter-spacing: -1px;
 `;
 
 export const Line = styled.div`
-  width: 5%;
-  height: 0.5%;
-  background-color: #3084f2;
+  width: 2rem;
+  height: 2.5px;
+  background-color: #3195dd;
 `;
 
 export const SelectArea = styled.div`
   display: flex;
-  gap: 0.5rem;
+  gap: 0.75rem;
   flex-direction: column;
   justify-content: center;
 `;