[#15] 방탈출 테마 정보 select 색 변경

Skhuthon · Jun 29, 2024 · 91cb0c2 · 91cb0c2
1 parent e031303
commit 91cb0c2
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/src/pages/ThemeList.tsx b/src/pages/ThemeList.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, KeyboardEvent, ChangeEvent } from "react";
-import { Container } from "../styles/ThemeListStyled";
+import { Container, Select } from "../styles/ThemeListStyled";
 import { useNavigate } from "react-router-dom";
 import RoomTheme2 from "../components/RoomTheme2";
 import Pagination from "../components/BasicPagination";
@@ -10,6 +10,7 @@ import { regions } from "../props/Regions";
 const ThemeList = () => {
     const [inputKeyword, setInputKeyword] = useState("");
     const [inputRegion, setInputRegion] = useState("");
+    const [selectedRegion, setSelectedRegion] = useState<string | null>(null);
     const [take, setTake] = useState<number>(1); // 총 페이지 수
     const [page, setPage] = useState<number>(1); // 현재 페이지
     const [themeList, setThemeList] = useState<ThemeProps[]>([]);
@@ -47,6 +48,7 @@ const ThemeList = () => {
     // 지역 검색
     const handleRegionClick = (name: string) => {
         setInputRegion(name);
+        setSelectedRegion(name);
         console.log(name);
 
         const fetchData = async () => {
@@ -90,12 +92,13 @@ const ThemeList = () => {
             </div>
             <div className="categoryBox">
                 {regions.map((region) => (
-                    <div
+                    <Select
                         className="category"
                         onClick={() => handleRegionClick(region.name)}
+                        isSelected={selectedRegion === region.name}
                     >
                         {region.name}
-                    </div>
+                    </Select>
                 ))}
             </div>
 

diff --git a/src/styles/ThemeListStyled.tsx b/src/styles/ThemeListStyled.tsx
@@ -46,7 +46,7 @@ export const Container = styled.div`
         display: flex;
     }
 
-    .category {
+    /* .category {
         margin-right: 1rem;
         padding: 0.5rem 1rem;
         border: 1px solid white;
@@ -56,7 +56,7 @@ export const Container = styled.div`
     .category:hover {
         cursor: pointer;
         background: rgba(255, 255, 255, 0.3);
-    }
+    } */
 
     .themeBox {
         width: 80vw;
@@ -69,3 +69,28 @@ export const Container = styled.div`
         margin-top: 7vh;
     }
 `;
+
+export const Select = styled.div<{ isSelected: boolean }>`
+    margin-top: 1rem;
+    margin-right: 1rem;
+    padding: 0.5rem 1.3rem;
+    font-size: 1.2rem;
+    color: white;
+    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 ? "#00ff8c" : "#fff")};
+
+    &:hover {
+        cursor: pointer;
+        background-color: rgba(255, 255, 255, 0.2);
+        border-color: #ccc;
+    }
+
+    /* &:active {
+        background-color: rgba(255, 255, 255, 0.2);
+        border-color: #ccc;
+    } */
+`;