[#15] 방탈출 추천 사용자 입력 정보 받기

src/pages/ThemeRecsQuestions.tsx

@@ -7,9 +7,17 @@ import {
     StyledLink,
 } from "../styles/ThemeRecsQuestionsStyled";
 import { IoIosArrowForward } from "react-icons/io";
+import { regions } from "../props/Regions";
+import { genres } from "../props/Genres";
+import { difficulty } from "../props/Difficulty";
 
 const ThemeRecsQuestions = () => {
     const [isVisible, setIsVisible] = useState(false);
+    const [selectedRegion, setSelectedRegion] = useState<string | null>(null);
+    const [selectedGenre, setSelectedGenre] = useState<string | null>(null);
+    const [selectedDifficulty, setSelectedDifficulty] = useState<string | null>(
+        null
+    );
 
     const handleScroll = () => {
         const bottom =
@@ -25,43 +33,39 @@ const ThemeRecsQuestions = () => {
         };
     }, []);
 
+    // 사용자 선택 핸들러
+    const handleSelect = (type: string, value: string) => {
+        if (type === "region") setSelectedRegion(value);
+        if (type === "genre") setSelectedGenre(value);
+        if (type === "difficulty") setSelectedDifficulty(value);
+        console.log(value);
+    };
+
+    // 제출
+    const submit = () => {
+        console.log(
+            selectedRegion + " " + selectedGenre + " " + selectedDifficulty
+        );
+    };
+
     return (
         <>
             <Container>
                 <div className="textBox">
                     <div className="subTitle">당신을 위한 방,</div>
                     <div className="title">어느 지역을 원하시나요?</div>
                     <div className="selectBox">
-                        <Select>
-                            <p>서울 전체</p>
-                        </Select>
-                        <Select>
-                            <p>홍대</p>
-                        </Select>
-                        <Select>
-                            <p>강남</p>
-                        </Select>
-                        <Select>
-                            <p>건대</p>
-                        </Select>
-                        <Select>
-                            <p>대학로</p>
-                        </Select>
-                        <Select>
-                            <p>신촌</p>
-                        </Select>
-                        <Select>
-                            <p>잠실</p>
-                        </Select>
-                        <Select>
-                            <p>신림</p>
-                        </Select>
-                        <Select>
-                            <p>노원</p>
-                        </Select>
-                        <Select>
-                            <p>서울 (기타)</p>
-                        </Select>
+                        {regions.map((region) => (
+                            <Select
+                                key={region.id}
+                                onClick={() =>
+                                    handleSelect("region", region.name)
+                                }
+                                isSelected={selectedRegion === region.name}
+                            >
+                                <p>{region.name}</p>
+                            </Select>
+                        ))}
                     </div>
                 </div>
                 <div className="cubeBox">
@@ -76,24 +80,17 @@ const ThemeRecsQuestions = () => {
                     <div className="subTitle">당신을 위한 방,</div>
                     <div className="title">어떤 장르를 원하시나요?</div>
                     <div className="selectBox">
-                        <Select>
-                            <p>랜덤</p>
-                        </Select>
-                        <Select>
-                            <p>감성</p>
-                        </Select>
-                        <Select>
-                            <p>공포 / 스릴러</p>
-                        </Select>
-                        <Select>
-                            <p>코믹</p>
-                        </Select>
-                        <Select>
-                            <p>추리</p>
-                        </Select>
-                        <Select>
-                            <p>모험</p>
-                        </Select>
+                        {genres.map((genre) => (
+                            <Select
+                                key={genre.id}
+                                onClick={() =>
+                                    handleSelect("genre", genre.name)
+                                }
+                                isSelected={selectedGenre === genre.name}
+                            >
+                                <p>{genre.name}</p>
+                            </Select>
+                        ))}
                     </div>
                 </div>
             </Container>
@@ -102,15 +99,17 @@ const ThemeRecsQuestions = () => {
                     <div className="subTitle">당신을 위한 방,</div>
                     <div className="title">어떤 난이도를 원하시나요?</div>
                     <div className="selectBox">
-                        <Select>
-                            <p>어려움</p>
-                        </Select>
-                        <Select>
-                            <p>보통</p>
-                        </Select>
-                        <Select>
-                            <p>쉬움</p>
-                        </Select>
+                        {difficulty.map((d) => (
+                            <Select
+                                key={d.id}
+                                onClick={() =>
+                                    handleSelect("difficulty", d.name)
+                                }
+                                isSelected={selectedDifficulty === d.name}
+                            >
+                                <p>{d.name}</p>
+                            </Select>
+                        ))}
                     </div>
                 </div>
 
@@ -120,7 +119,7 @@ const ThemeRecsQuestions = () => {
             </Container>
 
             <StyledLink to={`/themeRecsResult`}>
-                <StartBtn isVisible={isVisible}>
+                <StartBtn isVisible={isVisible} onClick={() => submit()}>
                     <div className="startBtn">
                         <p className="start">추천 받기</p>
                         <div className="icon">

src/props/Difficulty.tsx

@@ -0,0 +1,14 @@
+export const difficulty = [
+    {
+        id: 1,
+        name: "어려움",
+    },
+    {
+        id: 2,
+        name: "보통",
+    },
+    {
+        id: 3,
+        name: "쉬움",
+    },
+];

src/props/Genres.tsx

@@ -0,0 +1,26 @@
+export const genres = [
+    {
+        id: 1,
+        name: "랜덤",
+    },
+    {
+        id: 2,
+        name: "감성",
+    },
+    {
+        id: 3,
+        name: "공포 / 스릴러",
+    },
+    {
+        id: 4,
+        name: "코믹",
+    },
+    {
+        id: 5,
+        name: "추리",
+    },
+    {
+        id: 6,
+        name: "모험",
+    },
+];

src/styles/ThemeRecsQuestionsStyled.tsx

@@ -94,7 +94,7 @@ export const StartBtn = styled.div<{ isVisible: boolean }>`
     }
 `;
 
-export const Select = styled.div`
+export const Select = styled.div<{ isSelected: boolean }>`
     margin-top: 1rem;
     margin-right: 1rem;
     padding: 0.5rem 1.3rem;
@@ -103,6 +103,10 @@ export const Select = styled.div`
     border-radius: 1rem;
     border: 1px solid white;
 
+    background-color: ${(props) => (props.isSelected ? "#03ff8e18" : null)};
+    color: ${(props) => (props.isSelected ? "#03ff8e" : "#fff")};
+    border-color: ${(props) => (props.isSelected ? "#03FF8D" : "#fff")};
+
     &:hover {
         cursor: pointer;
         background-color: rgba(255, 255, 255, 0.2);