Merge pull request #4 from Iam2Jo/T2-18--feature/quiz/quiz-ui

Design: Add QuizForm UI

app/page.tsx

@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import styles from './page.module.css'
+import Image from 'next/image';
+import styles from './page.module.css';
 
 export default function Home() {
   return (
@@ -91,5 +91,5 @@ export default function Home() {
         </a>
       </div>
     </main>
-  )
+  );
 }

app/quiz/components/form/QuizForm.style.ts

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+
+export const Container = styled.form`
+  width: 44.25rem;
+  margin: 0 auto;
+`;
+
+export const Title = styled.div`
+  font-size: 1.75rem;
+  margin-bottom: 2.12rem;
+`;
+
+export const InputWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.56rem;
+`;
+
+export const AnswerLabel = styled.label`
+  width: auto;
+  height: 4.375rem;
+  background-color: #000;
+  font: var(--color-white);
+  font-size: 1.25rem;
+  text-align: center;
+  display: inline-block;
+  line-height: 4.3rem;
+
+  &:hover {
+    background-color: var(--color-main-yellow);
+    font: #000;
+    box-shadow: 0px 0px 20px 0px rgba(242, 204, 0, 0.49);
+  }
+`;
+
+export const AnswerInput = styled.input`
+  display: none;
+  &:checked + label {
+    background-color: var(--color-main-yellow);
+    font: #000;
+    box-shadow: 0px 0px 20px 0px rgba(242, 204, 0, 0.49);
+  }
+`;
+
+export const BtnWrap = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const SubmitBtn = styled.button`
+  width: 15.875rem;
+  height: 3rem;
+  background-color: #000;
+  color: #fff;
+  border: 1px solid #262626;
+
+  &:hover {
+    background-color: var(--color-main-yellow);
+    font: #000;
+    box-shadow: 0px 0px 20px 0px rgba(242, 204, 0, 0.49);
+  }
+`;

app/quiz/components/form/QuizForm.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import QuizData from '../../db/QuizData';
+import * as style from './QuizForm.style';
+
+const QuizForm = () => {
+  return (
+    <style.Container>
+      <style.Title>
+        {' '}
+        Q1. 스네이프 교수님의 수업이 시작되기 10분 전, 교실 밖에서 아주 서럽게
+        울고있는 친구를 발견한 나는?{' '}
+      </style.Title>
+      <style.InputWrap>
+        <style.AnswerInput id="answer1" type="radio" name="Answer" />
+        <style.AnswerLabel htmlFor="answer1">
+          이 교수님한테 찍히면 나만 손해. 못본척 하고 교실 뒷문으로 들어간다.
+        </style.AnswerLabel>
+        <style.AnswerInput id="answer2" type="radio" name="Answer" />
+        <style.AnswerLabel htmlFor="answer2">
+          너무 슬프게 우는데.. 일단 친구를 달래주러 간다.{' '}
+        </style.AnswerLabel>
+        <style.BtnWrap>
+          <style.SubmitBtn>이전</style.SubmitBtn>
+          <style.SubmitBtn>다음</style.SubmitBtn>
+        </style.BtnWrap>
+      </style.InputWrap>
+    </style.Container>
+  );
+};
+
+export default QuizForm;

app/quiz/db/QuizData.tsx

@@ -0,0 +1,26 @@
+const QuizData = [
+  {
+    id: 0,
+    title:
+      '스네이프 교수님의 수업이 시작되기 10분 전,  교실 밖에서 아주 서럽게 울고있는 친구를 발견한 나는?',
+    answer1:
+      '이 교수님한테 찍히면 나만 손해. 못본척 하고 교실 뒷문으로 들어간다.',
+    answer2: '너무 슬프게 우는데.. 일단 친구를 달래주러 간다',
+  },
+
+  {
+    id: 1,
+    title: '늦은 밤 시험지를 물고가는 수상한 쥐를 발견했다. 이때 나는?',
+    answer1: '혹시 내일 내가 보게될 시험지인가? 따라가서 빼앗는다.',
+    answer2: '따라가서 훈계하고 시험지를 교수님께 반납한다.',
+  },
+
+  {
+    id: 2,
+    title: '마법의 지팡이가 두동강났다. 이때 나는?',
+    answer1: '다음 수업도 있으니 일단 오늘은 대충 테이프로 붙여 사용한다.',
+    answer2: '무슨 일이 생길지 모르니 당장 지팡이를 사러 다이애건 앨리로 간다.',
+  },
+];
+
+export default QuizData;

app/quiz/page.styles.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  background-color: #222;
+  color: white;
+`;
+
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+`;
+
+export const Logo = styled.div`
+  width: 11.2rem;
+  height: 5.72rem;
+  margin: 1.25rem 0 0 1.88rem;
+`;
+
+export const HatImg = styled.div`
+  width: 11.75rem;
+  height: 10.375rem;
+  margin-bottom: 3.12rem;
+  filter: drop-shadow(2px 15px 15px rgb(0, 0, 0, 0.8));
+`;

app/quiz/page.tsx

@@ -0,0 +1,24 @@
+'use client';
+import type { NextPage } from 'next';
+import Hat from '../../assets/img/Hat.svg';
+import Logo from '../../assets/img/Logo.svg';
+import * as style from './page.styles';
+import QuizForm from './components/form/QuizForm';
+
+const quiz: NextPage = () => {
+  return (
+    <style.Container>
+      <style.Logo>
+        <Logo />
+      </style.Logo>
+      <style.Content>
+        <style.HatImg>
+          <Hat />
+        </style.HatImg>
+        <QuizForm />
+      </style.Content>
+    </style.Container>
+  );
+};
+
+export default quiz;