feat: Select Page Mark1

package.json

@@ -16,6 +16,8 @@
     "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
+        "@ramonak/react-progress-bar": "^5.2.0",
+        "framer-motion": "^11.3.30",
         "hangul-js": "^0.2.6",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

src/Router.tsx

@@ -2,6 +2,7 @@ import { Route, Routes } from "react-router-dom";
 
 import { RootLayout } from "./components/layout/RootLayout";
 import HomePage from "./pages/HomePage";
+import SelectPage from "./pages/SelectPage";
 
 import LoadingPage from './pages/ResultLoading';
 import ResultShare from "./pages/ResultShare";
@@ -17,6 +18,9 @@ export const Router = () => {
                 <Route path="/result" element={<ResultPage />}></Route>
                 <Route path="/share" element={<ResultShare />}></Route>
             </Route>
+            <Route path="/select" element={<RootLayout />}>
+                <Route index element={<SelectPage />}></Route>
+            </Route>
         </Routes>
     );
 };

src/components/display/Card.style.ts

@@ -0,0 +1,21 @@
+import styled from "@emotion/styled";
+
+export const CardElement = styled.div`
+    overflow: hidden;
+    width: 80%;
+    height: auto;
+    border-radius: 12px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+
+    img {
+        width: 100%;
+        height: auto;
+        display: block; // Removes bottom space/gap
+        transition: transform 0.3s ease;
+    }
+
+    &:hover img {
+        transform: scale(1.05);
+    }
+`;

src/components/display/Card.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import { CardElement } from "./Card.style";
+
+export interface CardProps {
+    imageUrl: string;
+}
+
+export const Card: React.FC<CardProps> = ({ imageUrl }) => {
+    return (
+        <CardElement>
+            <img src={imageUrl} alt="Card Image" />
+        </CardElement>
+    );
+};

src/components/layout/RootLayout.tsx

@@ -4,7 +4,7 @@ import styled from "@emotion/styled";
 
 export const Layout = styled.main`
     width: min(100%, 800px);
-
+    height: 100vh;
     margin: 0px auto;
     padding: 1.25rem;
 `;

src/constants/Question.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+interface Question {
+    text: string;
+    imageUrl: string;
+    option: React.ReactNode[];
+}
+
+export const questions: Question[] = [
+    {},
+    {
+        text: "공놀이 좋아해?",
+        imageUrl: "https://cdn.pixabay.com/photo/2015/01/26/22/40/child-613199_640.jpg",
+        option: ["역시 체육은 공놀이지", "응 아니야"],
+    },
+    {
+        text: "어떻게 운동하는게 좋아?",
+        imageUrl: "https://cdn.pixabay.com/photo/2015/01/26/22/40/child-613199_640.jpg",
+        option: ["운동은 좀 복작복작해야지", "꼭 사람이 많을 필요는 없지"],
+    },
+    {
+        text: "장비빨 잘받아?",
+        imageUrl: "https://file2.nocutnews.co.kr/newsroom/image/2024/08/01/202408011205387201_0.jpg",
+        option: [
+            <>
+                장비따윈 필요 없어. <br /> 최고의 장비는 바로 나!
+            </>,
+            "인간은 도구를 사용해야지",
+        ],
+    },
+    {
+        text: "운동하면서 부딛히는거 괜찮아?",
+        imageUrl: "https://cdn.pixabay.com/photo/2015/01/26/22/40/child-613199_640.jpg",
+        option: ["좀 부딛히는게 재밌지", "내 몸에 손대지마"],
+    },
+    {
+        text: "마주보면서 운동하는거 어때?",
+        imageUrl: "https://file2.nocutnews.co.kr/newsroom/image/2024/08/01/202408011205387201_0.jpg",
+        option: [
+            <>
+                내 눈을 바라봐. <br /> 난 당신 얼굴이 궁금하다
+            </>,
+            "난 앞만 봐",
+        ],
+    },
+    {
+        text: "어디서 운동하는게 좋아?",
+        imageUrl: "https://cdn.pixabay.com/photo/2015/01/26/22/40/child-613199_640.jpg",
+        option: ["바깥 공기가 좋아", "미세먼지 극혐"],
+    },
+    {
+        text: "경쟁 좋아해?",
+        imageUrl: "https://cdn.pixabay.com/photo/2015/01/26/22/40/child-613199_640.jpg",
+        option: ["행복은 성적순이지~", "행복은 성적순이 아니야!"],
+    },
+];

src/pages/SelectPage.style.ts

@@ -0,0 +1,114 @@
+import { motion } from "framer-motion";
+
+import styled from "@emotion/styled";
+
+export const SelectPageWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
+export const SelectPageContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 8vh;
+    overflow: hidden;
+    height: 100%;
+`;
+
+export const Item = styled(motion.div)`
+    position: relative;
+    background-color: #fff;
+    width: min(80vw, 400px);
+
+    aspect-ratio: 3 / 4; /* 가로 세로 비율을 4:3으로 설정 */
+    border-radius: 20px;
+    background-size: cover;
+    background-position: center;
+`;
+
+export const ItemWrapper = styled(motion.div)`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+`;
+export const CardWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+    height: auto;
+`;
+
+export const CardContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3rem;
+`;
+
+export const OptionWrapper = styled.div`
+    position: fixed;
+    bottom: 3rem;
+    width: min(100%, 800px);
+    display: flex;
+    justify-content: space-between;
+`;
+
+export const OptionContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+export const OptionLeft = styled(motion.div)`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 10px 20px;
+    overflow: hidden; /* 내용이 넘치면 숨김 */
+    white-space: nowrap; /* 텍스트를 한 줄로 유지 */
+    text-overflow: clip; /* 텍스트가 넘치면 그냥 잘라냄 */
+    background-color: #d9d9d9;
+    color: #000;
+    border-radius: 0 15px 15px 0;
+`;
+
+export const OptionRight = styled(motion.div)`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 10px 20px;
+    overflow: hidden; /* 내용이 넘치면 숨김 */
+    white-space: nowrap; /* 텍스트를 한 줄로 유지 */
+    text-overflow: clip; /* 텍스트가 넘치면 그냥 잘라냄 */
+    background-color: #37cdcd;
+    color: #fff;
+    border-radius: 15px 0 0 15px;
+`;
+
+export const ModalOverlay = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.7); /* 반투명 검정 배경 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000; /* 다른 요소 위에 표시되도록 설정 */
+`;
+
+export const ModalContent = styled.div`
+    background: transparent; /* 배경을 투명하게 설정 */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    color: #fff; /* 텍스트를 흰색으로 설정 */
+`;