Develop

package.json

@@ -14,6 +14,8 @@
     "@tanstack/react-query": "4",
     "axios": "^1.7.9",
     "jwt-decode": "^4.0.0",
+    "lottie": "^0.0.1",
+    "lottie-react": "^2.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",

src/App.tsx

@@ -1,13 +1,17 @@
 import "@styles/font.css";
 import GlobalStyles from "./styles/GlobalStyle";
+import Loading from "./components/ui/loading/Loading";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./routes/router";
+import { Suspense } from "react";
 
 function App() {
   return (
     <>
       <GlobalStyles />
-      <RouterProvider router={router} />
+      <Suspense fallback={<Loading overlay={true} />}>
+        <RouterProvider router={router} />
+      </Suspense>
     </>
   );
 }

src/components/layout/footer/FooterStyle.ts

@@ -24,6 +24,4 @@ export const StyledFooter = styled.footer<FooterProps>`
   justify-content: center;
   align-items: center;
   color: var(--color-gray-600);
-  position: fixed;
-  bottom: 0;
 `;

src/components/layout/gameRoomHeader/GameRoomHeader.tsx

@@ -1,7 +1,6 @@
 import iconExit from "@assets/images/icon_close.svg";
-import { NavLink, useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { Flex, StyledHeader, TextButton } from "./GameRoomHeaderStyle";
-
 import { useSocketStore } from "../../../store/useSocketStore";
 
 export default function GameRoomHeader() {
@@ -20,12 +19,10 @@ export default function GameRoomHeader() {
   return (
     <>
       <StyledHeader>
-        <NavLink to="/">
-          <Flex onClick={() => onClickOut(roomId)}>
-            <img src={iconExit} alt="게임방 나가기" />
-            <TextButton>나가기</TextButton>
-          </Flex>
-        </NavLink>
+        <Flex onClick={() => onClickOut(roomId)}>
+          <img src={iconExit} alt="게임방 나가기" />
+          <TextButton>나가기</TextButton>
+        </Flex>
       </StyledHeader>
     </>
   );

src/components/layout/header/Header.tsx

@@ -1,16 +1,11 @@
 import logo from "@assets/images/logo.svg";
 import Button from "@components/ui/button/Button.tsx";
 import { NavLink, useNavigate } from "react-router-dom";
-import { useEffect, useState } from "react";
 import { StyledHeader, NavList, Logo } from "./HeaderStyle.ts";
 
 export default function Header() {
-  const [isLoggedIn, setIsLoggedIn] = useState(false); // 임시 login 상태
   const navigate = useNavigate();
-
-  useEffect(() => {
-    setIsLoggedIn(false);
-  }, []);
+  const accessToken = localStorage.getItem("accessToken");
 
   const onClickMove = () => {
     navigate("./user/signup");
@@ -22,15 +17,15 @@ export default function Header() {
     <>
       <StyledHeader>
         <Logo>
-          <NavLink to="/">
+          <NavLink to="/game">
             <img src={logo} />
           </NavLink>
         </Logo>
         <NavList>
           <li>
             <NavLink to="/rank">랭킹</NavLink>
           </li>
-          {isLoggedIn ? (
+          {accessToken ? (
             <>
               <li>
                 <NavLink to="/user/mypage">마이페이지</NavLink>

src/components/layout/layout/Layout.tsx

@@ -7,22 +7,30 @@ import { Outlet, useLocation } from "react-router-dom";
 import { Wrapper, Container } from "./LayoutStyle";
 import { useModalStore } from "@store/useModalStore";
 
-const HIDDEN_HEADERS = "/game/room/";
+const GAME_ROOM = "/game/room/";
+const HIDDEN_HEADER_FOOTER = "/home";
 
 export default function Layout() {
   const { showModal } = useModalStore();
   const location = useLocation();
   const pathname = location.pathname;
-  const isHiddenHeader = pathname.includes(HIDDEN_HEADERS);
+  const isGameRoom = pathname.includes(GAME_ROOM);
+  const isHiddenHeaderFooter = pathname.includes(HIDDEN_HEADER_FOOTER);
 
   return (
     <>
       <Wrapper>
-        {!isHiddenHeader ? <Header /> : <GameRoomHeader />}
+        {isHiddenHeaderFooter ? (
+          ""
+        ) : !isGameRoom ? (
+          <Header />
+        ) : (
+          <GameRoomHeader />
+        )}
         <Container>
           <Outlet />
         </Container>
-        <Footer />
+        {!isHiddenHeaderFooter && <Footer />}
       </Wrapper>
 
       <Toast />

src/components/layout/layout/LayoutStyle.ts

@@ -2,11 +2,12 @@ import styled from "styled-components";
 
 export const Wrapper = styled.div`
   width: 100%;
-  /* height: 100%; */
+  height: 100%;
 `;
 
 export const Container = styled.main`
   width: 100%;
   height: 100%;
   padding: 50px 150px;
+  min-height: 800px;
 `;

src/components/ui/DeckChoice/DeckChoice.tsx

@@ -1,5 +1,19 @@
+import { useParams } from "react-router-dom";
+import { useSocketStore } from "../../../store/useSocketStore";
 import MiniDeck from "../miniDeck/MiniDeck";
 import * as S from "./deckChoiceStyle";
+import { useModal } from "../../../hooks/useModal";
+
+interface IInitialCards {
+  roomId: number;
+  blackCount: number;
+  whiteCount: number;
+}
+
+interface IDeckChoiceProps {
+  whiteCount: number;
+  blackCount: number;
+}
 
 export default function DeckChoice({
   whiteCount,
@@ -10,8 +24,24 @@ export default function DeckChoice({
     ...Array(blackCount).fill("black"),
   ];
 
+  const { socket } = useSocketStore();
+  const params = useParams<{ id: string }>();
+  const roomId = Number(params.id);
+  const { closeModal } = useModal();
+
+  const onClickDeck = ({ roomId, whiteCount, blackCount }: IInitialCards) => {
+    if (!socket) {
+      return;
+    }
+    console.log(roomId, whiteCount, blackCount, "룸아이디, 와이트덱, 블랙덱");
+    socket.emit("initialCards", { roomId, whiteCount, blackCount });
+    closeModal();
+  };
+
   return (
-    <S.DeckContainer>
+    <S.DeckContainer
+      onClick={() => onClickDeck({ roomId, whiteCount, blackCount })}
+    >
       {deckArray.map((color, index) => (
         <MiniDeck key={index} color={color} />
       ))}

src/components/ui/DeckChoice/deckChoiceProps.d.ts

@@ -1,4 +0,0 @@
-interface IDeckChoiceProps {
-  whiteCount: number;
-  blackCount: number;
-}

src/components/ui/bigDeck/BigDeck.tsx

@@ -1,13 +1,38 @@
+import { useParams } from "react-router-dom";
+import { useSocketStore } from "../../../store/useSocketStore";
 import * as S from "./bigDeckStyle";
+import { useModal } from "../../../hooks/useModal";
 
+interface IBigDeck {
+  roomId: number;
+  color: "white" | "black";
+}
 export default function BigDeck() {
-  // onClick함수 나중에 로직에 따라 만들기
+  const { socket } = useSocketStore();
+  const params = useParams();
+  const roomId = Number(params.id);
+  const { closeModal } = useModal();
+
+  const onClickBigDeck = ({ roomId, color }: IBigDeck) => {
+    if (!socket) return;
+    socket.emit("drawCard", { roomId, color });
+    closeModal();
+  };
+
   return (
     <S.container>
       <S.title>가져올 카드의 색을 선택해 주세요.</S.title>
       <S.bigDeckContainer>
-        <S.bigDeckButton type="button" themeType="light"></S.bigDeckButton>
-        <S.bigDeckButton type="button" themeType="black"></S.bigDeckButton>
+        <S.bigDeckButton
+          type="button"
+          themeType="light"
+          onClick={() => onClickBigDeck({ roomId, color: "white" })}
+        ></S.bigDeckButton>
+        <S.bigDeckButton
+          type="button"
+          themeType="black"
+          onClick={() => onClickBigDeck({ roomId, color: "black" })}
+        ></S.bigDeckButton>
       </S.bigDeckContainer>
     </S.container>
   );

src/components/ui/button/Button.tsx

@@ -11,6 +11,7 @@ export default function Button({
   disabled,
   width,
   playerNumber,
+  ...props
 }: IButtonProps) {
   return (
     <S.Button
@@ -22,6 +23,7 @@ export default function Button({
       textcolor={textcolor}
       width={width}
       playerNumber={playerNumber}
+      {...props}
     >
       {children}
     </S.Button>

src/components/ui/card/cardList/GameRoomCard.tsx

@@ -1,21 +1,26 @@
+import { IGameRoom } from "../../../../api/gameRoomApi";
 import { useJoinGameRoomMutation } from "../../../../hooks/useMutation";
-import { useRoomIdStore } from "../../../../store/useRoomIdStore";
 import Badge from "../../badge/Badge";
 import Button from "../../button/Button";
 import * as S from "./GameRoomCardStyle";
 
-export default function GameRoomCard({ room }: { room: IRoomProps }) {
-  const { setRoomId } = useRoomIdStore();
+export default function GameRoomCard({ room }: { room: IGameRoom }) {
   const disabled = room.currentCount === 2 ? true : false;
   const mutation = useJoinGameRoomMutation();
   const onClickJoin = (roomId: number) => {
-    setRoomId(roomId);
     mutation.mutate(roomId);
   };
 
+  const roomState = () => {
+    if (room.currentCount === 1) {
+      return "waiting...";
+    } else if (room.currentCount === 2) {
+      return "playing";
+    }
+  };
   return (
     <S.cardContainer>
-      <Badge playerNumber={room.currentCount} />
+      <Badge playerNumber={room.currentCount} status={roomState()} />
       <S.titleBox>{room.roomName}</S.titleBox>
       <S.buttonContainer>
         <Button

src/components/ui/card/chatting/Chatting.tsx

@@ -1,5 +1,6 @@
-import ChatInputBox from "../../chatInput/ChatInputBox";
 import * as S from "./ChattingStyle";
+import ChatInputBox from "../../chatInput/ChatInputBox";
+
 export default function ChattingBox() {
   return (
     <S.chat>

src/components/ui/card/chatting/ChattingStyle.ts

@@ -4,6 +4,7 @@ export const chat = styled.div`
   position: relative;
   width: 390px;
   height: 390px;
+  padding: 20px;
   border-radius: 12px;
   border: 1px solid var(--color-gray-999);
   box-shadow: 1px 1px 3px 0px #00000080;
@@ -15,8 +16,7 @@ export const chat = styled.div`
 `;
 
 export const chatInputBoxContainer = styled.div`
-  position: absolute;
-  bottom: 20px;
-  padding: 0 10px;
-  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 `;

src/components/ui/chatInput/ChatInputBox.tsx

@@ -1,18 +1,62 @@
 import Button from "../button/Button";
 import * as S from "./chatInputStyle";
+import { useSocketStore } from "@store/useSocketStore";
+import { useEffect } from "react";
+// import { useParams } from "react-router-dom";
 
 export default function ChatInputBox() {
+  const { socket } = useSocketStore();
+
+  useEffect(() => {
+    if (!socket) {
+      console.error("Socket is not connected.");
+      return;
+    }
+  }, []);
+
+  console.log("🚀 Socket:", socket);
+
+  //   const [message, setMessage] = useState("");
+  //   const params = useParams();
+  //   const roomId = Number(params.id);
+
+  //   useEffect(() => {
+  //     setMessage("");
+  //   }, []);
+
+  //   console.log(socket);
+
+  //   const onClickSendMessage = () => {
+  //     if (!socket) {
+  //       console.log("방에 연결할 수 없습니다.");
+  //       return;
+  //     }
+  //     socket.emit("message", { roomId: roomId, message }, (res: any) => {
+  //       console.log(`Message sent: ${JSON.stringify(res)}`);
+  //     });
+  //   };
+
   return (
-    <S.chatInputBox>
-      <S.chatInput
-        type="text"
-        placeholder="상대방과 채팅을 나눌 수 있습니다."
-      ></S.chatInput>
-      <S.buttonBox>
-        <Button size="xs" bgcolor="green" textcolor="black" type="button">
-          전송
-        </Button>
-      </S.buttonBox>
-    </S.chatInputBox>
+    <>
+      <S.chatLog></S.chatLog>
+      <S.chatInputBox>
+        <S.chatInput
+          type="text"
+          placeholder="상대방과 채팅을 나눌 수 있습니다."
+          // value={message}
+        ></S.chatInput>
+        <S.buttonBox>
+          <Button
+            size="xs"
+            bgcolor="green"
+            textcolor="black"
+            type="button"
+            //   onClick={onClickSendMessage}
+          >
+            전송
+          </Button>
+        </S.buttonBox>
+      </S.chatInputBox>
+    </>
   );
 }