✨ feat: 버튼선택까지 게임구현

src/components/ui/selectionNumber/GuessNumber.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import * as S from "./guessNumberStyle";
 import NumberButton from "./NumberButton";
 
@@ -10,7 +11,9 @@ export default function GuessNumber() {
       <S.numberContainer>
         <S.leftContainer>
           {numbers.map((num) => (
-            <NumberButton value={num} />
+            <React.Fragment key={num}>
+              <NumberButton value={num} />
+            </React.Fragment>
           ))}
         </S.leftContainer>
         <S.rightContaider>

src/components/ui/selectionNumber/NumberButton.tsx

@@ -2,15 +2,23 @@ import { useParams } from "react-router-dom";
 import * as S from "./numberButtonStyle";
 import { useSocketStore } from "../../../store/useSocketStore";
 import { useCardIndexStore } from "../../../store/useGuessNumberStore";
+import { useModal } from "../../../hooks/useModal";
 
 export default function NumberButton({ value }: { value: number }) {
   const params = useParams();
   const roomId = Number(params.id);
   const { socket } = useSocketStore();
   const { cardIndex } = useCardIndexStore();
+
+  const { closeModal } = useModal();
   const onClickNumber = () => {
     if (!socket) return;
-    socket.emit("guessCard", { roomId, cardIndex, CardNumber: value });
+    console.log(
+      `방 ID: ${roomId}, 카드 인덱스: ${cardIndex}, 선택된 번호: ${value}`,
+    );
+    socket.emit("guessCard", { roomId, cardIndex, cardNumber: value });
+
+    closeModal();
   };
   return (
     <S.numberButton onClick={onClickNumber}>

src/pages/game/GameRoom.tsx

@@ -114,6 +114,14 @@ interface IOponnentCard {
   opponentCard: IOpponentColor[];
   userId: number;
 }
+
+interface IWrongGuess {
+  cardIndex: number;
+  cardNumber: number;
+  finalHand: IFinalHand[];
+  message: string;
+  userId: number;
+}
 export default function GameRoom() {
   const { socket, setSocket } = useSocketStore();
   const params = useParams();
@@ -140,14 +148,16 @@ export default function GameRoom() {
   const [newlyDrawn, setNewlyDrawn] = useState<IFinalHand>();
   const [opponentIndex, setOpponentIndex] = useState<number>();
   const [message, setMessage] = useState<string>();
+  const [wrongIndex, setWrongIndex] = useState<number>();
 
   console.log(
-    "타입에러방지",
+    "타입에러방지용 콘솔",
     arrangeCard,
     fieldDeck,
     opponent,
     newlyDrawn,
     message,
+    wrongIndex,
   );
   const { openModal } = useModal();
 
@@ -279,6 +289,13 @@ export default function GameRoom() {
       setOpponentIndex(index);
     };
 
+    const handleWrongGuess = async (data: IWrongGuess) => {
+      const { cardIndex, finalHand, message } = data;
+      setMessage(message);
+      setFinalHand(finalHand);
+      setWrongIndex(cardIndex);
+    };
+
     socket.on("join", handleJoin);
     socket.on("leave", handleLeave);
     socket.on("ready", handleReady);
@@ -289,6 +306,7 @@ export default function GameRoom() {
     socket.on("nowTurn", handleNowTurn);
     socket.on("drawCard", handleDrawCard);
     socket.on("opponentCard", handleOpponentCard);
+    socket.on("wrongGuess", handleWrongGuess);
 
     return () => {
       socket.disconnect();