✨ feat: 셀렉트 버튼 구현

src/components/ui/selectionNumber/SelectionNumber.tsx

@@ -1,47 +1,40 @@
-import Button from "../button/Button";
+import { useState } from "react";
 import * as S from "./selectionNumberStyle";
 
-export default function SelectionNumber() {
-  const numbersRow1 = [...Array.from({ length: 6 }, (_, index) => index)];
-  const numbersRow2 = ["-"];
-  const numbersRow3 = [...Array.from({ length: 6 }, (_, index) => index + 6)];
+export default function SelectNumber() {
+  const [selectedNumber, setSelectedNumber] = useState<string | null>(null);
+
+  const handleSelect = (value: string) => {
+    setSelectedNumber(value);
+  };
+
+  const numbers = Array.from({ length: 12 }, (_, i) => i.toString());
 
   return (
-    <S.Wrapper>
+    <S.NumberBox>
       <S.NumberWrapper>
-        <S.NumberBox>
-          <S.Number>
-            {numbersRow1.map((number, index) => (
-              <S.NumberDetail key={`row1-${index}`}>{number}</S.NumberDetail>
+        {[0, 6].map((startIndex) => (
+          <S.NumberRow key={`row-${startIndex}`}>
+            {numbers.slice(startIndex, startIndex + 6).map((number) => (
+              <S.NumberDetail
+                key={number}
+                isSelected={selectedNumber === number}
+                onClick={() => handleSelect(number)}
+              >
+                {number}
+              </S.NumberDetail>
             ))}
-          </S.Number>
-          <S.Number>
-            {numbersRow3.map((number, index) => (
-              <S.NumberDetail key={`row3-${index}`}>{number}</S.NumberDetail>
-            ))}
-          </S.Number>
-        </S.NumberBox>
-
-        <S.DashBox>
-          {numbersRow2.map((symbol, index) => (
-            <S.NumberDetail key={`row2-${index}`}>{symbol}</S.NumberDetail>
-          ))}
-        </S.DashBox>
+          </S.NumberRow>
+        ))}
       </S.NumberWrapper>
-      <S.ButtonWrapper>
-        <Button
-          type="button"
-          size="md"
-          bgcolor="green"
-          textcolor="black"
-          width="160px"
+      <S.HypenBox>
+        <S.HypenLabel
+          isSelected={selectedNumber === "-"}
+          onClick={() => handleSelect("-")}
         >
-          숫자 선택
-        </Button>
-      </S.ButtonWrapper>
-      <S.FooterWrapper>
-        <S.Footer></S.Footer>
-      </S.FooterWrapper>
-    </S.Wrapper>
+          -
+        </S.HypenLabel>
+      </S.HypenBox>
+    </S.NumberBox>
   );
 }

src/components/ui/selectionNumber/selectNumber1Style.ts

@@ -1,6 +1,24 @@
+// import styled from "styled-components";
+
+// export const NumberDetail = styled.div`
+//   width: 40px;
+//   height: 40px;
+//   border-radius: 40px;
+//   border: 1px solid var(--color-gray-999);
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   color: var(--gray-0, #fff);
+//   background-color: var(--color-gray-999);
+//   margin-right: 9px;
+//   margin-bottom: 14px;
+//   font-size: 24px;
+//   font-weight: 600;
+// `;
+
 import styled from "styled-components";
 
-export const NumberDetail = styled.div`
+export const NumberDetail = styled.button`
   width: 40px;
   height: 40px;
   border-radius: 40px;
@@ -14,4 +32,10 @@ export const NumberDetail = styled.div`
   margin-bottom: 14px;
   font-size: 24px;
   font-weight: 600;
+  cursor: pointer;
+  &:hover {
+    border-color: var(--color-primary);
+    transform: scale(1.1);
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+  }
 `;

src/components/ui/selectionNumber/selectionNumberStyle.ts

@@ -1,60 +1,79 @@
 import styled from "styled-components";
 
-export const Wrapper = styled.div`
-  width: 375px;
-  height: 220px;
+export const NumberBox = styled.div`
   display: flex;
-  flex-direction: column;
+  gap: 10px;
   align-items: center;
-  border-radius: 12px;
-  border: 1px solid var(--gray-999, #000);
-  background: linear-gradient(180deg, #fff 0%, #d2dfff 100%);
-  position: relative;
-  overflow: hidden;
-  padding: 23px 14px 27px 26px;
 `;
 
 export const NumberWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const NumberRow = styled.div`
   display: flex;
   justify-content: center;
+  gap: 10px;
+  margin-bottom: 10px;
 `;
-export const NumberBox = styled.div``;
-export const Number = styled.div`
+
+export const HypenBox = styled.div`
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 10px;
 `;
-export const NumberDetail = styled.div`
+
+export const NumberDetail = styled.button<{ isSelected: boolean }>`
   width: 40px;
   height: 40px;
   border-radius: 40px;
-  border: 1px solid var(--color-gray-999);
+  border: 1px solid
+    ${({ isSelected }) =>
+      isSelected ? "var(--color-green, #44ff92)" : "var(--color-gray-999)"};
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--gray-0, #fff);
-  background-color: var(--color-gray-999);
-  margin-right: 9px;
-  margin-bottom: 14px;
+  color: ${({ isSelected }) =>
+    isSelected ? "var(--gray-999, #000)" : "var(--gray-0, #fff)"};
+  background-color: ${({ isSelected }) =>
+    isSelected ? "var(--color-green, #44ff92)" : "var(--color-gray-999)"};
   font-size: 24px;
   font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    border-color: var(--color-primary);
+    transform: scale(1.1);
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+  }
 `;
-export const DashBox = styled.div`
+
+export const HypenLabel = styled.button<{ isSelected: boolean }>`
+  width: 40px;
+  height: 40px;
+  border-radius: 40px;
+  border: 1px solid
+    ${({ isSelected }) =>
+      isSelected ? "var(--color-green, #44ff92)" : "var(--color-gray-999)"};
   display: flex;
   align-items: center;
-`;
-export const ButtonWrapper = styled.div`
-  display: flex;
   justify-content: center;
-  margin-top: 10px;
-`;
-export const FooterWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  bottom: 0;
-`;
-export const Footer = styled.div`
-  width: 100%;
-  height: 9px;
-  background: linear-gradient(90deg, #fffba6 0%, #44ff92 100%);
+  color: ${({ isSelected }) =>
+    isSelected ? "var(--gray-999, #000)" : "var(--gray-0, #fff)"};
+  background-color: ${({ isSelected }) =>
+    isSelected ? "var(--color-green, #44ff92)" : "var(--color-gray-999)"};
+  font-size: 24px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    border-color: var(--color-primary);
+    transform: scale(1.1);
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+  }
 `;

src/pages/testpage/Testpage.tsx

@@ -0,0 +1,9 @@
+import Rangking from "../../components/ui/ranking/Ranking";
+
+export default function TestPage() {
+  return (
+    <div>
+      <Rangking />
+    </div>
+  );
+}

src/routes/router.tsx

@@ -8,6 +8,7 @@ import CheckPassword from "@pages/mypage/checkPassword/CheckPassword";
 import UpdateMyPage from "@pages/mypage/updateMypage/UpdateMyPage";
 import GameRoom from "@pages/game/GameRoom";
 import Game from "@pages/game/Game";
+import TestPage from "../pages/testpage/Testpage";
 import Home from "@pages/home/Home";
 
 export const router = createBrowserRouter([
@@ -57,6 +58,10 @@ export const router = createBrowserRouter([
         path: "/user/mypage/updateMyPage",
         element: <UpdateMyPage />,
       },
+      {
+        path: "/test",
+        element: <TestPage />,
+      },
     ],
   },
 ]);