✨ feat: 모달 관련 컴포넌트 정리 및 방 만들기 모달 추가

src/App.tsx

@@ -1,20 +1,13 @@
 import "@styles/font.css";
 import GlobalStyles from "./styles/GlobalStyle";
-import Modal from "./components/ui/modal/Modal";
-import Toast from "./components/ui/toast/Toast";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./routes/router";
-import { useModalStore } from "./store/useModalStore";
 
 function App() {
-  const { showModal } = useModalStore();
-
   return (
     <>
       <GlobalStyles />
       <RouterProvider router={router} />
-      <Toast />
-      {showModal && <Modal />}
     </>
   );
 }

src/components/layout/layout/Layout.tsx

@@ -1,12 +1,16 @@
 import Header from "@components/layout/header/Header";
 import GameRoomHeader from "@components/layout/gameRoomHeader/GameRoomHeader";
 import Footer from "@components/layout/footer/Footer";
+import Modal from "@components/ui/modal/Modal";
+import Toast from "@components/ui/toast/Toast";
 import { Outlet, useLocation } from "react-router-dom";
 import { Wrapper, Container } from "./LayoutStyle";
+import { useModalStore } from "@store/useModalStore";
 
 const HIDDEN_HEADERS = "/game/room/";
 
 export default function Layout() {
+  const { showModal } = useModalStore();
   const location = useLocation();
   const pathname = location.pathname;
   const isHiddenHeader = pathname.includes(HIDDEN_HEADERS);
@@ -20,6 +24,9 @@ export default function Layout() {
         </Container>
         <Footer />
       </Wrapper>
+
+      <Toast />
+      {showModal && <Modal />}
     </>
   );
 }

src/components/ui/modal/Modal.tsx

@@ -1,10 +1,12 @@
-import { useModalStore } from "../../../store/useModalStore";
 import ModalPortal from "./ModalPortal";
-import SelectDeckModal from "./SelectDeckModal";
+import FirstSelect from "../modalContents/FirstSelect";
+import MakeRoom from "../modalContents/MakeRoom";
+import { useModalStore } from "../../../store/useModalStore";
 import { Inside, ModalFrame, Overlay } from "./modalStyle";
 
 const modalComponents: Record<string, React.ReactNode> = {
-  selectDeck: <SelectDeckModal />,
+  firstSelect: <FirstSelect />,
+  makeRoom: <MakeRoom />,
 };
 
 export default function Modal() {

src/components/ui/modal/modalStyle.ts

@@ -1,12 +1,13 @@
 import styled, { css } from "styled-components";
 
 const baseStyle = css`
-  width: 460px;
+  width: 480px;
   min-height: 400px;
   height: fit-content;
   border-radius: 50px;
   overflow: hidden;
   font-size: 20px;
+  padding: 45px;
 `;
 
 const modalStyles = {

src/components/ui/modalContents/FirstSelect.tsx

@@ -0,0 +1,16 @@
+import DeckChoice from "../DeckChoice/DeckChoice";
+import * as S from "./firstSelectStyle";
+export default function FirstSelect() {
+  return (
+    <S.container>
+      <S.title>처음 가져올 타이틀 조합을 선택해주세요.</S.title>
+      <S.deckContainer>
+        <DeckChoice whiteCount={4} blackCount={0} />
+        <DeckChoice whiteCount={3} blackCount={1} />
+        <DeckChoice whiteCount={2} blackCount={2} />
+        <DeckChoice whiteCount={1} blackCount={3} />
+        <DeckChoice whiteCount={0} blackCount={4} />
+      </S.deckContainer>
+    </S.container>
+  );
+}

src/components/ui/modalContents/MakeRoom.tsx

@@ -0,0 +1,61 @@
+import Input from "../input/Input";
+import Button from "../button/Button";
+import * as S from "./makeRoomStyle";
+import { FormProvider, useForm } from "react-hook-form";
+import { useModal } from "@hooks/useModal";
+import { IRoomNameSchema } from "./schema";
+import { useCreateRoomMutation } from "@hooks/useMutation";
+
+export default function MakeRoom() {
+  const methods = useForm();
+  const mutation = useCreateRoomMutation();
+  const { closeModal } = useModal();
+
+  const onClickClose = () => {
+    closeModal();
+  };
+
+  const onClickMakeRoom = async (data: IRoomNameSchema) => {
+    const result = mutation.mutate(data);
+    console.log(result);
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <S.container>
+        <S.title>방 만들기</S.title>
+        <S.inputContainer>
+          <S.label>방 이름</S.label>
+          <Input type="text" keyname="roomName" />
+        </S.inputContainer>
+        <S.warningContainer>
+          욕설이나 이용자에게 불쾌감을 줄 수 있는 단어가 포함되지 않도록 주의해
+          주세요.
+        </S.warningContainer>
+        <S.buttonContainer>
+          <Button
+            type="button"
+            size="l"
+            textcolor="white"
+            bgcolor="black"
+            onClick={onClickClose}
+            width="50%"
+          >
+            닫기
+          </Button>
+
+          <Button
+            type="button"
+            size="l"
+            textcolor="black"
+            bgcolor="green"
+            onClick={onClickMakeRoom}
+            width="50%"
+          >
+            방 만들기
+          </Button>
+        </S.buttonContainer>
+      </S.container>
+    </FormProvider>
+  );
+}

src/components/ui/modalcontents/firstSelectStyle.ts → src/components/ui/modalContents/firstSelectStyle.ts

@@ -22,9 +22,3 @@ export const deckContainer = styled.div`
   gap: 20px;
   justify-content: center;
 `;
-
-export const testBox = styled.div`
-  width: 460px;
-  border-radius: 50px;
-  background-color: var(--color-gray-0);
-`;

src/components/ui/modalcontents/makeRoomStyle.ts → src/components/ui/modalContents/makeRoomStyle.ts

@@ -34,11 +34,10 @@ export const warningContainer = styled.div`
   font-weight: 300;
   font-size: 13px;
   color: var(--color-gray-600);
+  line-height: 1.5rem;
 `;
 
-export const testBox = styled.div`
-  width: 460px;
-  height: 460px;
-  border-radius: 50px;
-  background-color: var(--color-gray-0);
+export const buttonContainer = styled.div`
+  display: flex;
+  gap: 30px;
 `;

src/pages/game/gameRoomList.tsx

@@ -2,7 +2,7 @@ import Button from "../../components/ui/button/Button";
 import * as S from "./gameRoomListStyle";
 import GameRoomCard from "../../components/ui/card/cardList/GameRoomCard";
 import { useGetGameRoomList } from "../../hooks/useQuery";
-import { useNavigate } from "react-router-dom";
+import { useModal } from "../../hooks/useModal";
 
 interface IGameRoom {
   id: number;
@@ -13,13 +13,14 @@ interface IGameRoom {
 }
 
 export default function GameRoomList() {
+  const { openModal } = useModal();
   const { data: gameRooms } = useGetGameRoomList();
   console.log("gameRooms✅", gameRooms);
-  const navigate = useNavigate();
 
-  const onClickButton = () => {
-    navigate("/test");
+  const onClickModalOpen = () => {
+    openModal("makeRoom", "white");
   };
+
   return (
     <S.container>
       <S.buttonContainer>
@@ -29,9 +30,9 @@ export default function GameRoomList() {
           bgcolor="green"
           textcolor="black"
           width="180px"
-          onClick={onClickButton}
+          onClick={onClickModalOpen}
         >
-          + 방만들기
+          + 방 만들기
         </Button>
       </S.buttonContainer>
       <S.gameroomListContainer>

src/pages/home/Home.tsx

@@ -1,57 +1,3 @@
-import useToast from "@hooks/useToast";
-import { useModal } from "../../hooks/useModal";
-
 export default function Home() {
-  const openToast = useToast();
-  const { openModal } = useModal();
-
-  const onClickModal = () => {
-    openModal("selectDeck", "white");
-  };
-
-  const onClickToast = () => {
-    openToast("나부터 시작합니다!");
-  };
-
-  const onClickToast2 = () => {
-    openToast("나부터 시작합니다!");
-  };
-
-  const onClickToast3 = () => {
-    openToast("나부터 시작합니다!");
-  };
-
-  const onClickToast4 = () => {
-    openToast("나부터 시작합니다!");
-  };
-
-  return (
-    <>
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <button onClick={onClickToast}>토스트</button>
-      <br />
-      <button onClick={onClickToast2}>토스트2</button>
-      <br />
-      <button onClick={onClickToast3}>토스트3</button>
-      <br />
-      <button onClick={onClickToast4}>토스트4</button>
-      <br />
-      <button onClick={onClickModal}>모달</button>
-    </>
-  );
+  return <>Home</>;
 }