From 7138d0c9a3f055094d2d139673cc9fdb582a6d71 Mon Sep 17 00:00:00 2001
From: moonhuicheol <moonhuicheol@gmail.com>
Date: Fri, 17 Jan 2025 13:23:36 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=85=80=EB=A0=89=ED=8A=B8?=
 =?UTF-8?q?=20=ED=84=B4=20=EB=AA=A8=EB=8B=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/modal/Modal.tsx             |  2 ++
 src/components/ui/modal/SelectDeckModal.tsx   |  3 ---
 .../ui/modalContents/SelectTurn.tsx           | 19 ++++++++++++++++
 .../ui/modalContents/selectTurnStyle.ts       | 22 +++++++++++++++++++
 src/pages/testpage/Testpage.tsx               |  2 +-
 5 files changed, 44 insertions(+), 4 deletions(-)
 delete mode 100644 src/components/ui/modal/SelectDeckModal.tsx
 create mode 100644 src/components/ui/modalContents/SelectTurn.tsx
 create mode 100644 src/components/ui/modalContents/selectTurnStyle.ts

diff --git a/src/components/ui/modal/Modal.tsx b/src/components/ui/modal/Modal.tsx
index 140afd2..f2e4e6d 100644
--- a/src/components/ui/modal/Modal.tsx
+++ b/src/components/ui/modal/Modal.tsx
@@ -9,6 +9,7 @@ import { useEffect } from "react";
 import { useModal } from "@hooks/useModal";
 import TurnWaiting from "../modalContents/TurnWaiting";
 import GameWaiting from "../modalContents/GameWaiting";
+import SelectTurn from "../modalContents/SelectTurn";
 
 const modalComponents: Record<string, React.ReactNode> = {
   firstSelect: <FirstSelect />,
@@ -18,6 +19,7 @@ const modalComponents: Record<string, React.ReactNode> = {
   selectWhiteBlack: <BigDeck />,
   turnWaiting: <TurnWaiting />,
   gameWaiting: <GameWaiting />,
+  selectTurn: <SelectTurn />,
 };
 
 export default function Modal() {
diff --git a/src/components/ui/modal/SelectDeckModal.tsx b/src/components/ui/modal/SelectDeckModal.tsx
deleted file mode 100644
index 0d08fda..0000000
--- a/src/components/ui/modal/SelectDeckModal.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function SelectDeckModal() {
-  return <div>SelectDeckModal</div>;
-}
diff --git a/src/components/ui/modalContents/SelectTurn.tsx b/src/components/ui/modalContents/SelectTurn.tsx
new file mode 100644
index 0000000..eebcb6c
--- /dev/null
+++ b/src/components/ui/modalContents/SelectTurn.tsx
@@ -0,0 +1,19 @@
+import Button from "../button/Button";
+import * as S from "./selectTurnStyle";
+
+export default function SelectTurn() {
+  //버튼에 onClick이벤트 만들면 됩니다.
+  return (
+    <S.container>
+      <S.title>턴 종료 No, 계속 맞출거면 Yes</S.title>
+      <S.buttonContainer>
+        <Button type="button" size="l" bgcolor="black" textcolor="white">
+          No
+        </Button>
+        <Button type="button" size="l" bgcolor="green" textcolor="black">
+          Yes
+        </Button>
+      </S.buttonContainer>
+    </S.container>
+  );
+}
diff --git a/src/components/ui/modalContents/selectTurnStyle.ts b/src/components/ui/modalContents/selectTurnStyle.ts
new file mode 100644
index 0000000..b439dbc
--- /dev/null
+++ b/src/components/ui/modalContents/selectTurnStyle.ts
@@ -0,0 +1,22 @@
+import styled from "styled-components";
+
+export const container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+`;
+
+export const title = styled.div`
+  font-weight: 500;
+  font-size: 24px;
+  color: var(--color-gray-999);
+  text-align: center;
+`;
+
+export const buttonContainer = styled.div`
+  display: flex;
+  width: 100%;
+  gap: 40px;
+`;
diff --git a/src/pages/testpage/Testpage.tsx b/src/pages/testpage/Testpage.tsx
index 17d1fed..837dcaf 100644
--- a/src/pages/testpage/Testpage.tsx
+++ b/src/pages/testpage/Testpage.tsx
@@ -3,7 +3,7 @@ import { useModal } from "../../hooks/useModal";
 export default function TestPage() {
   const { openModal } = useModal();
   const onClickModal = () => {
-    openModal("guessNumber", "blue");
+    openModal("selectTurn", "blue");
   };
   return (
     <div onClick={onClickModal}>ㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㅇㄹ</div>