[#2] feat : add test page

.eslintrc.js

@@ -39,5 +39,6 @@ module.exports = {
     "global-require": "off",
     "import/no-unresolved": "off",
     "no-use-before-define": "off",
+    "import/no-dynamic-require": "off",
   },
 };

src/Router.js

@@ -2,12 +2,14 @@ import React from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 import Main from "./pages/Main";
+import TestPage from "./pages/TestPage";
 
 const Router = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Main />} />
+        <Route path="/test/:step" element={<TestPage />} />
       </Routes>
     </BrowserRouter>
   );

src/pages/TestPage/buttonTexts.js

@@ -0,0 +1,35 @@
+const buttonTexts = [
+  { top: "남성(누군가의 남사친)", bottom: "여성(누군가의 여사친)" },
+  {
+    top: "오늘은 날이 따듯하니 녹을만하지",
+    bottom: "어제 열심히 만들었는데, 속상했겠다.",
+  },
+  { top: "굳이 삿포로에서?", bottom: "너무 낭만있다!" },
+  {
+    top: "붕어빵 만들다가 손이 어떻게 베여? 칼 썼어?",
+    bottom: "괜찮아? 따갑겠다.",
+  },
+  {
+    top: "당연히 가야지~ 3차까지 가자",
+    bottom: "뒷풀이 필수면, 1차까지 갔다가 집 가려고!",
+  },
+  {
+    top: "좋아! 연말이니까 약속 다 잡아~",
+    bottom: "다음에 놀자! 전 날 약속이 있어서 피곤할 것 같아",
+  },
+  {
+    top: "상관없는데~ 많아도 재밌고 적어도 재밌을 듯",
+    bottom: "친한 친구 2-3명 정도? 너무 많으면 기빨려..",
+  },
+  { top: "ㅋㅋㅋ 잘 놀고 곱게 들어가!", bottom: "괜찮아? 많이 취했어?" },
+  {
+    top: "아 이제 사적으로 둘이서 보는 일은 피해야겠다.",
+    bottom: "나를 좋게 봐줬다는 거니까 좋네네",
+  },
+  {
+    top: "오 밖에 눈 오는구나.",
+    bottom: "나한테 왜 말하지? 좋은 걸 같이 공유하고 싶은 건가",
+  },
+];
+
+export default buttonTexts;

src/pages/TestPage/index.jsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useRecoilState } from "recoil";
+import { testState } from "../../store/atoms";
+import buttonTexts from "./buttonTexts";
+import { TestHeader, TestBox } from "../../components";
+import { Background, Container, StepImage, Button } from "./styled";
+
+const TestPage = () => {
+  const { step } = useParams();
+  const navigate = useNavigate();
+  const [testData, setTestData] = useRecoilState(testState);
+  const currentStep = parseInt(step, 10);
+  const nextStep = currentStep + 1;
+
+  const handleTopButtonClick = () => {
+    if (currentStep === 0) {
+      setTestData(prevData => ({
+        ...prevData,
+        gender: "man",
+      }));
+    } else if (currentStep <= 3) {
+      setTestData(prevData => ({
+        ...prevData,
+        T: prevData.T + 1,
+      }));
+    } else if (currentStep <= 6) {
+      setTestData(prevData => ({
+        ...prevData,
+        E: prevData.E + 1,
+      }));
+    } else if (currentStep <= 9) {
+      setTestData(prevData => ({
+        ...prevData,
+        X: prevData.X + 1,
+      }));
+    }
+
+    if (nextStep <= 9) {
+      navigate(`/test/${nextStep}`);
+    } else {
+      navigate("/result");
+    }
+  };
+
+  const handleBottomButtonClick = () => {
+    if (currentStep === 0) {
+      setTestData(prevData => ({
+        ...prevData,
+        gender: "women",
+      }));
+    } else if (currentStep <= 3) {
+      setTestData(prevData => ({
+        ...prevData,
+        F: prevData.F + 1,
+      }));
+    } else if (currentStep <= 6) {
+      setTestData(prevData => ({
+        ...prevData,
+        I: prevData.I + 1,
+      }));
+    } else if (currentStep <= 9) {
+      setTestData(prevData => ({
+        ...prevData,
+        O: prevData.O + 1,
+      }));
+    }
+
+    if (nextStep <= 9) {
+      navigate(`/test/${nextStep}`);
+    } else {
+      navigate("/result");
+    }
+  };
+
+  console.log(testData);
+
+  return (
+    <>
+      <Background />
+      <TestHeader />
+      <StepImage
+        src={require(`../../assets/images/step_${step}.png`)}
+        alt="snowflake"
+      />
+      <Container>
+        <TestBox step={step} />
+        <Button onClick={handleTopButtonClick}>
+          {buttonTexts[currentStep].top}
+        </Button>
+        <Button onClick={handleBottomButtonClick}>
+          {buttonTexts[currentStep].bottom}
+        </Button>
+      </Container>
+    </>
+  );
+};
+
+export default TestPage;

src/pages/TestPage/styled.js

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+export const Background = styled.div`
+  background: #102531;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: -1;
+`;
+
+export const Container = styled.div`
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+`;
+
+export const StepImage = styled.img`
+  margin: 10vw;
+`;
+
+export const Button = styled.button`
+  width: 90vw;
+  height: 8vh;
+  margin-top: 3vh;
+  border-radius: 30px;
+  border: 1px solid white;
+  font-size: 1.2rem;
+  background: rgba(255, 255, 255, 0);
+  color: white;
+`;