diff --git a/src/components/ui/selectionNumber/GuessNumber.tsx b/src/components/ui/selectionNumber/GuessNumber.tsx index 5b907cf..b9c606c 100644 --- a/src/components/ui/selectionNumber/GuessNumber.tsx +++ b/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() { {numbers.map((num) => ( - + + + ))} diff --git a/src/components/ui/selectionNumber/NumberButton.tsx b/src/components/ui/selectionNumber/NumberButton.tsx index 9484b2e..75e1600 100644 --- a/src/components/ui/selectionNumber/NumberButton.tsx +++ b/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 ( diff --git a/src/pages/game/GameRoom.tsx b/src/pages/game/GameRoom.tsx index 14a2853..fd29eca 100644 --- a/src/pages/game/GameRoom.tsx +++ b/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(); const [opponentIndex, setOpponentIndex] = useState(); const [message, setMessage] = useState(); + const [wrongIndex, setWrongIndex] = useState(); 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();