From 5ad74e9bac935b7cf0ee44e5b3cfbd871afc2313 Mon Sep 17 00:00:00 2001 From: moonhuicheol Date: Fri, 17 Jan 2025 08:33:44 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=8D=B1=EC=84=A0?= =?UTF-8?q?=ED=83=9D,=20=EB=93=9C=EB=A1=9C=EC=9A=B0,=20=EC=83=81=EB=8C=80?= =?UTF-8?q?=20=EB=8D=B1=20=EC=B6=94=EC=B8=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{Vector 3.svg => icon_backDeck.svg} | 0 src/components/ui/DeckChoice/DeckChoice.tsx | 32 +++- .../ui/DeckChoice/deckChoiceProps.d.ts | 4 - src/components/ui/bigDeck/BigDeck.tsx | 31 +++- src/components/ui/deck/BackDeck.tsx | 39 ++++- src/components/ui/deck/FrontDeck.tsx | 13 +- src/components/ui/deck/JokerDeck.tsx | 5 + src/components/ui/deck/JokerDeckStyle.ts | 12 ++ src/components/ui/deck/backDeckStyle.ts | 25 ++- src/components/ui/deck/frontDeckStyle.ts | 11 +- src/components/ui/deck/frontDeckprops.d.ts | 20 +-- src/components/ui/modal/Modal.tsx | 4 + .../ui/selectionNumber/GuessNumber.tsx | 22 +++ .../ui/selectionNumber/NumberButton.tsx | 20 +++ .../ui/selectionNumber/SelectNumber1.tsx | 5 - .../ui/selectionNumber/SelectionNumber.tsx | 40 ----- .../ui/selectionNumber/guessNumberStyle.ts | 39 +++++ .../ui/selectionNumber/numberButtonStyle.ts | 16 ++ .../ui/selectionNumber/selectNumber1Style.ts | 41 ----- .../selectionNumber/selectionNumberStyle.ts | 79 --------- src/pages/game/GameRoom.tsx | 157 +++++++++++++++++- src/pages/game/gameRoomStyle.ts | 4 +- src/pages/game/testpage.tsx | 132 +++++++++++++++ src/pages/testpage/Testpage.tsx | 9 +- src/routes/router.tsx | 7 + src/store/useGuessNumberStore.ts | 11 ++ src/store/useUserMyIdStore.ts | 11 ++ 27 files changed, 569 insertions(+), 220 deletions(-) rename src/assets/images/{Vector 3.svg => icon_backDeck.svg} (100%) create mode 100644 src/components/ui/deck/JokerDeck.tsx create mode 100644 src/components/ui/deck/JokerDeckStyle.ts create mode 100644 src/components/ui/selectionNumber/GuessNumber.tsx create mode 100644 src/components/ui/selectionNumber/NumberButton.tsx delete mode 100644 src/components/ui/selectionNumber/SelectNumber1.tsx delete mode 100644 src/components/ui/selectionNumber/SelectionNumber.tsx create mode 100644 src/components/ui/selectionNumber/guessNumberStyle.ts create mode 100644 src/components/ui/selectionNumber/numberButtonStyle.ts delete mode 100644 src/components/ui/selectionNumber/selectNumber1Style.ts delete mode 100644 src/components/ui/selectionNumber/selectionNumberStyle.ts create mode 100644 src/pages/game/testpage.tsx create mode 100644 src/store/useGuessNumberStore.ts create mode 100644 src/store/useUserMyIdStore.ts diff --git a/src/assets/images/Vector 3.svg b/src/assets/images/icon_backDeck.svg similarity index 100% rename from src/assets/images/Vector 3.svg rename to src/assets/images/icon_backDeck.svg diff --git a/src/components/ui/DeckChoice/DeckChoice.tsx b/src/components/ui/DeckChoice/DeckChoice.tsx index f488f9f..893f7ec 100644 --- a/src/components/ui/DeckChoice/DeckChoice.tsx +++ b/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 ( - + onClickDeck({ roomId, whiteCount, blackCount })} + > {deckArray.map((color, index) => ( ))} diff --git a/src/components/ui/DeckChoice/deckChoiceProps.d.ts b/src/components/ui/DeckChoice/deckChoiceProps.d.ts index cfab4bc..e69de29 100644 --- a/src/components/ui/DeckChoice/deckChoiceProps.d.ts +++ b/src/components/ui/DeckChoice/deckChoiceProps.d.ts @@ -1,4 +0,0 @@ -interface IDeckChoiceProps { - whiteCount: number; - blackCount: number; -} diff --git a/src/components/ui/bigDeck/BigDeck.tsx b/src/components/ui/bigDeck/BigDeck.tsx index 7cc8476..82b3ce6 100644 --- a/src/components/ui/bigDeck/BigDeck.tsx +++ b/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 ( 가져올 카드의 색을 선택해 주세요. - - + onClickBigDeck({ roomId, color: "white" })} + > + onClickBigDeck({ roomId, color: "black" })} + > ); diff --git a/src/components/ui/deck/BackDeck.tsx b/src/components/ui/deck/BackDeck.tsx index 5f2fa6f..546f21e 100644 --- a/src/components/ui/deck/BackDeck.tsx +++ b/src/components/ui/deck/BackDeck.tsx @@ -1,12 +1,39 @@ -import iconArrow from "@assets/images/icon_arrow_right.svg"; +import backDeck from "@assets/images/icon_backDeck.svg"; import * as S from "./backDeckStyle"; +import { useModal } from "../../../hooks/useModal"; +import { useCradIndexStore } from "../../../store/useGuessNumberStore"; -export default function BackDeck({ value, color }: IWhiteDeckProps) { - const number = value; - console.log(number); +interface IBackDeckProps { + isFlipped: boolean; + color: string; + cardIndex: number; + myHighlight?: boolean; + disabled: boolean; +} + +export default function BackDeck({ + // isFlipped, + + color, + disabled, + myHighlight, + cardIndex, +}: IBackDeckProps) { + const { openModal } = useModal(); + const { setCardIndex } = useCradIndexStore(); + console.log(cardIndex, "카드인덱스 확인"); + const onClicBackDeck = () => { + setCardIndex(cardIndex); + openModal("guessNumber", "blue"); + }; return ( - - + + ); } diff --git a/src/components/ui/deck/FrontDeck.tsx b/src/components/ui/deck/FrontDeck.tsx index 3140667..2b4ec7a 100644 --- a/src/components/ui/deck/FrontDeck.tsx +++ b/src/components/ui/deck/FrontDeck.tsx @@ -1,11 +1,16 @@ import * as S from "./frontDeckStyle"; -export default function FrontDeck({ value, color }: IWhiteDeckProps) { - const underBar = value === "6" || value === "9"; +export default function FrontDeck({ + value, + color, + myHighlight, +}: IFrontDeckProps) { + const underBar = value === 6 || value === 9; + return ( - + - {value} + {value === -1 ? "-" : value} ); diff --git a/src/components/ui/deck/JokerDeck.tsx b/src/components/ui/deck/JokerDeck.tsx new file mode 100644 index 0000000..e0775e5 --- /dev/null +++ b/src/components/ui/deck/JokerDeck.tsx @@ -0,0 +1,5 @@ +import * as S from "./JokerDeckStyle"; + +export default function JokerDeck({ pos, onClick }) { + return onClick(pos)}>선택; +} diff --git a/src/components/ui/deck/JokerDeckStyle.ts b/src/components/ui/deck/JokerDeckStyle.ts new file mode 100644 index 0000000..97f04fd --- /dev/null +++ b/src/components/ui/deck/JokerDeckStyle.ts @@ -0,0 +1,12 @@ +import styled from "styled-components"; + +export const JockerDeck = styled.button` + display: flex; + justify-content: center; + align-items: center; + width: 44px; + height: 90px; + border-radius: 8px; + background-color: var(--color-primary); + box-shadow: 2px 4px 4px 0px var(--color-gray-0); +`; diff --git a/src/components/ui/deck/backDeckStyle.ts b/src/components/ui/deck/backDeckStyle.ts index 9ac0024..d780c04 100644 --- a/src/components/ui/deck/backDeckStyle.ts +++ b/src/components/ui/deck/backDeckStyle.ts @@ -1,6 +1,6 @@ import styled from "styled-components"; -export const cardDeck = styled.div<{ color: string }>` +export const cardDeck = styled.button<{ color: string; myHighlight?: boolean }>` display: flex; flex-direction: column; justify-content: center; @@ -8,18 +8,29 @@ export const cardDeck = styled.div<{ color: string }>` width: 44px; height: 90px; border-radius: 8px; - border: 1px solid - ${({ color }) => - color === "black" ? "var(--color-gray-0)" : "var(--color-gray-999)"}; + border: ${({ myHighlight, color }) => + myHighlight + ? "2px solid red" // highlight가 true → 빨간 테두리 + : color === "black" + ? "1px solid var(--color-gray-0)" + : "1px solid var(--color-gray-999)"}; background: ${({ color }) => color === "black" ? "linear-gradient(167.45deg, var(--color-gray-600) 0.43%, var(--color-gray-999) 99.57%)" : "linear-gradient(167.4deg, var(--color-gray-0) 0.4%, var(--color-gray-200) 99.6%)"}; box-shadow: 2px 4px 4px 0px #00000040; + + &:disabled { + cursor: not-allowed; /* 마우스 커서 변경 */ + pointer-events: none; /* 클릭 이벤트 비활성화 (추가 안전장치) */ + } `; -export const img = styled.img` - color: ${({ color }) => - color === "black" ? "var(--color-gray-0)" : "var(--color-gray-999)"}; +export const img = styled.img<{ color: string }>` + ${({ color }) => + color === "black" && + ` + filter: invert(1) brightness(2); + `} `; diff --git a/src/components/ui/deck/frontDeckStyle.ts b/src/components/ui/deck/frontDeckStyle.ts index 46814a7..115fd98 100644 --- a/src/components/ui/deck/frontDeckStyle.ts +++ b/src/components/ui/deck/frontDeckStyle.ts @@ -1,6 +1,6 @@ import styled from "styled-components"; -export const cardDeck = styled.div<{ color: string }>` +export const cardDeck = styled.div<{ color: string; myHighlight?: boolean }>` display: flex; flex-direction: column; justify-content: center; @@ -8,9 +8,12 @@ export const cardDeck = styled.div<{ color: string }>` width: 44px; height: 90px; border-radius: 8px; - border: 1px solid - ${({ color }) => - color === "black" ? "var(--color-gray-0)" : "var(--color-gray-999)"}; + border: ${({ myHighlight, color }) => + myHighlight + ? "2px solid red" // highlight가 true일 때 빨간색 테두리 + : color === "black" + ? "1px solid var(--color-gray-0)" + : "1px solid var(--color-gray-999)"}; background: ${({ color }) => color === "black" ? "linear-gradient(167.45deg, var(--color-gray-600) 0.43%, var(--color-gray-999) 99.57%)" diff --git a/src/components/ui/deck/frontDeckprops.d.ts b/src/components/ui/deck/frontDeckprops.d.ts index 4b87023..7f36191 100644 --- a/src/components/ui/deck/frontDeckprops.d.ts +++ b/src/components/ui/deck/frontDeckprops.d.ts @@ -1,17 +1,5 @@ -interface IWhiteDeckProps { - value?: - | "1" - | "2" - | "3" - | "4" - | "5" - | "6" - | " 7" - | "8" - | "9" - | "10" - | "11" - | "-"; - - color: "white" | "black"; +interface IFrontDeckProps { + value: number; + color: string; + myHighlight?: boolean; } diff --git a/src/components/ui/modal/Modal.tsx b/src/components/ui/modal/Modal.tsx index 2578d09..bd93245 100644 --- a/src/components/ui/modal/Modal.tsx +++ b/src/components/ui/modal/Modal.tsx @@ -3,10 +3,14 @@ import FirstSelect from "../modalContents/FirstSelect"; import MakeRoom from "../modalContents/MakeRoom"; import { useModalStore } from "../../../store/useModalStore"; import { Inside, ModalFrame, Overlay } from "./modalStyle"; +import BigDeck from "../bigDeck/BigDeck"; +import GuessNumber from "../selectionNumber/GuessNumber"; const modalComponents: Record = { firstSelect: , makeRoom: , + myTurn: , + guessNumber: , }; export default function Modal() { diff --git a/src/components/ui/selectionNumber/GuessNumber.tsx b/src/components/ui/selectionNumber/GuessNumber.tsx new file mode 100644 index 0000000..5b907cf --- /dev/null +++ b/src/components/ui/selectionNumber/GuessNumber.tsx @@ -0,0 +1,22 @@ +import * as S from "./guessNumberStyle"; +import NumberButton from "./NumberButton"; + +export default function GuessNumber() { + const numbers = Array.from({ length: 12 }, (_, index) => index); + + return ( + + 상대 덱의 번호를 추측해주세요. + + + {numbers.map((num) => ( + + ))} + + + + + + + ); +} diff --git a/src/components/ui/selectionNumber/NumberButton.tsx b/src/components/ui/selectionNumber/NumberButton.tsx new file mode 100644 index 0000000..647ee71 --- /dev/null +++ b/src/components/ui/selectionNumber/NumberButton.tsx @@ -0,0 +1,20 @@ +import { useParams } from "react-router-dom"; +import * as S from "./numberButtonStyle"; +import { useSocketStore } from "../../../store/useSocketStore"; +import { useCradIndexStore } from "../../../store/useGuessNumberStore"; + +export default function NumberButton({ value }: { value: number }) { + const params = useParams(); + const roomId = Number(params.id); + const { socket } = useSocketStore(); + const { cardIndex } = useCradIndexStore(); + const onClickNumber = () => { + if (!socket) return; + socket.emit("guessCard", { roomId, cardIndex, CardNumber: value }); + }; + return ( + + {value === -1 ? "-" : value} + + ); +} diff --git a/src/components/ui/selectionNumber/SelectNumber1.tsx b/src/components/ui/selectionNumber/SelectNumber1.tsx deleted file mode 100644 index 9891445..0000000 --- a/src/components/ui/selectionNumber/SelectNumber1.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import * as S from "./selectNumber1Style"; - -export default function SelectNumber1() { - return 0; -} diff --git a/src/components/ui/selectionNumber/SelectionNumber.tsx b/src/components/ui/selectionNumber/SelectionNumber.tsx deleted file mode 100644 index 43c1c6d..0000000 --- a/src/components/ui/selectionNumber/SelectionNumber.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { useState } from "react"; -import * as S from "./selectionNumberStyle"; - -export default function SelectNumber() { - const [selectedNumber, setSelectedNumber] = useState(null); - - const handleSelect = (value: string) => { - setSelectedNumber(value); - }; - - const numbers = Array.from({ length: 12 }, (_, i) => i.toString()); - - return ( - - - {[0, 6].map((startIndex) => ( - - {numbers.slice(startIndex, startIndex + 6).map((number) => ( - handleSelect(number)} - > - {number} - - ))} - - ))} - - - handleSelect("-")} - > - - - - - - ); -} diff --git a/src/components/ui/selectionNumber/guessNumberStyle.ts b/src/components/ui/selectionNumber/guessNumberStyle.ts new file mode 100644 index 0000000..be5fb54 --- /dev/null +++ b/src/components/ui/selectionNumber/guessNumberStyle.ts @@ -0,0 +1,39 @@ +import styled from "styled-components"; + +export const container = styled.div` + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 30px; +`; + +export const title = styled.div` + font-weight: 500; + font-size: 24px; + color: var(--color-gray-900); +`; + +export const numberContainer = styled.div` + width: 100%; + display: flex; +`; + +export const leftContainer = styled.div` + width: 100%; + height: 100%; + display: grid; + grid-template-columns: repeat(6, 40px); + grid-template-rows: repeat(2, 40px); + gap: 10px; +`; + +export const rightContaider = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +`; diff --git a/src/components/ui/selectionNumber/numberButtonStyle.ts b/src/components/ui/selectionNumber/numberButtonStyle.ts new file mode 100644 index 0000000..1745ad0 --- /dev/null +++ b/src/components/ui/selectionNumber/numberButtonStyle.ts @@ -0,0 +1,16 @@ +import styled from "styled-components"; + +export const numberButton = styled.button` + width: 40px; + height: 40px; + background-color: var(--color-gray-999); + border-radius: 50px; + font-weight: 600; + font-size: 24px; + text-align: center; + color: var(--color-gray-0); + + &:hover { + border: 3px solid var(--color-primary); + } +`; diff --git a/src/components/ui/selectionNumber/selectNumber1Style.ts b/src/components/ui/selectionNumber/selectNumber1Style.ts deleted file mode 100644 index 634ca65..0000000 --- a/src/components/ui/selectionNumber/selectNumber1Style.ts +++ /dev/null @@ -1,41 +0,0 @@ -// import styled from "styled-components"; - -// export const NumberDetail = styled.div` -// width: 40px; -// height: 40px; -// border-radius: 40px; -// border: 1px solid var(--color-gray-999); -// display: flex; -// align-items: center; -// justify-content: center; -// color: var(--gray-0, #fff); -// background-color: var(--color-gray-999); -// margin-right: 9px; -// margin-bottom: 14px; -// font-size: 24px; -// font-weight: 600; -// `; - -import styled from "styled-components"; - -export const NumberDetail = styled.button` - width: 40px; - height: 40px; - border-radius: 40px; - border: 1px solid var(--color-gray-999); - display: flex; - align-items: center; - justify-content: center; - color: var(--gray-0, #fff); - background-color: var(--color-gray-999); - margin-right: 9px; - margin-bottom: 14px; - font-size: 24px; - font-weight: 600; - cursor: pointer; - &:hover { - border-color: var(--color-primary); - transform: scale(1.1); - box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); - } -`; diff --git a/src/components/ui/selectionNumber/selectionNumberStyle.ts b/src/components/ui/selectionNumber/selectionNumberStyle.ts deleted file mode 100644 index a5c2579..0000000 --- a/src/components/ui/selectionNumber/selectionNumberStyle.ts +++ /dev/null @@ -1,79 +0,0 @@ -import styled from "styled-components"; - -export const NumberBox = styled.div` - display: flex; - gap: 10px; - align-items: center; -`; - -export const NumberWrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; -`; - -export const NumberRow = styled.div` - display: flex; - justify-content: center; - gap: 10px; - margin-bottom: 10px; -`; - -export const HypenBox = styled.div` - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 10px; -`; - -export const NumberDetail = styled.button<{ isSelected: boolean }>` - width: 40px; - height: 40px; - border-radius: 40px; - border: 1px solid - ${({ isSelected }) => - isSelected ? "var(--color-green, #44ff92)" : "var(--color-gray-999)"}; - display: flex; - align-items: center; - justify-content: center; - color: ${({ isSelected }) => - isSelected ? "var(--gray-999, #000)" : "var(--gray-0, #fff)"}; - background-color: ${({ isSelected }) => - isSelected ? "var(--color-green, #44ff92)" : "var(--color-gray-999)"}; - font-size: 24px; - font-weight: 600; - cursor: pointer; - transition: all 0.2s ease-in-out; - - &:hover { - border-color: var(--color-primary); - transform: scale(1.1); - box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); - } -`; - -export const HypenLabel = styled.button<{ isSelected: boolean }>` - width: 40px; - height: 40px; - border-radius: 40px; - border: 1px solid - ${({ isSelected }) => - isSelected ? "var(--color-green, #44ff92)" : "var(--color-gray-999)"}; - display: flex; - align-items: center; - justify-content: center; - color: ${({ isSelected }) => - isSelected ? "var(--gray-999, #000)" : "var(--gray-0, #fff)"}; - background-color: ${({ isSelected }) => - isSelected ? "var(--color-green, #44ff92)" : "var(--color-gray-999)"}; - font-size: 24px; - font-weight: 600; - cursor: pointer; - transition: all 0.2s ease-in-out; - - &:hover { - border-color: var(--color-primary); - transform: scale(1.1); - box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); - } -`; diff --git a/src/pages/game/GameRoom.tsx b/src/pages/game/GameRoom.tsx index 10e35c6..ba518da 100644 --- a/src/pages/game/GameRoom.tsx +++ b/src/pages/game/GameRoom.tsx @@ -2,12 +2,17 @@ import { io } from "socket.io-client"; import ChattingBox from "../../components/ui/card/chatting/Chatting"; import { useSocketStore } from "../../store/useSocketStore"; import * as S from "./gameRoomStyle"; -import { useEffect, useRef, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { jwtDecode } from "jwt-decode"; import { useGetGameRoomInfo } from "../../hooks/useQuery"; import { useParams } from "react-router-dom"; import MyProfileCard from "../../components/ui/card/profileCard/ProfileCard"; import OtherProfileCard from "../../components/ui/card/profileCard/OtherProfileCard"; +import { useModal } from "../../hooks/useModal"; +import { useUserMyIdStore } from "../../store/useUserMyIdStore"; +import FrontDeck from "../../components/ui/deck/FrontDeck"; +import JokerDeck from "../../components/ui/deck/JokerDeck"; +import BackDeck from "../../components/ui/deck/BackDeck"; export interface IUser { id: number; @@ -53,19 +58,50 @@ interface IGameStartData { message: string; } +interface IFinalHand { + num: number; + color: string; + isFlipped: boolean; +} + +interface IOpponentColor { + color: string; + isFlipped: boolean; +} + +interface IFieldDeck { + blackCount: number; + whiteCount: number; +} + export default function GameRoom() { const { socket, setSocket } = useSocketStore(); const params = useParams(); const roomId = Number(params.id); - const [userMyId, setUserMyId] = useState(undefined); + const { userMyId, setUserMyId } = useUserMyIdStore(); const [myInfo, setMyInfo] = useState(undefined); const [otherInfo, setOtherInfo] = useState(undefined); - // const { setReady } = useReadyStore(); const [myReady, setMyReady] = useState(false); const [otherReady, setOtherReady] = useState(false); const { data, refetch } = useGetGameRoomInfo(roomId); const userMyIdRef = useRef(undefined); + const [finalHand, setFinalHand] = useState([]); + const [possiblePositions, setPossiblePositions] = useState([]); + const [joker, setJoker] = useState(null); + const [opponentColor, setOpponentColor] = useState( + null, + ); + const [arrangeCard, setArrangeCard] = useState(false); + const [fieldDeck, setFieldDeck] = useState(); + const [turnId, setTurnId] = useState(); + const [newPosition, setNewPosition] = useState(); + const [opponent, setOpponentCard] = useState(); + const [newlyDrawn, setNewlyDrawn] = useState(); + const [opponentIndex, setOpponentIndex] = useState(); + + const { openModal } = useModal(); + useEffect(() => { const accessToken = localStorage.getItem("accessToken"); if (!accessToken) { @@ -90,7 +126,7 @@ export default function GameRoom() { }); setSocket(newSocket); - + console.log("룸아이디", roomId); newSocket.emit("joinRoom", { roomId }, (response: IJoinRoomResponse) => { console.log(`Join room response: ${JSON.stringify(response)}`); }); @@ -134,22 +170,101 @@ export default function GameRoom() { const handleGameStart = async (data: IGameStartData) => { console.log(`${JSON.stringify(data)}`); + openModal("firstSelect", "white"); + }; + + const handleHandDeck = async (data) => { + console.log(`${JSON.stringify(data)}`); + const { arrangeCard, finalHand } = data; + setFinalHand(finalHand); + setArrangeCard(arrangeCard); + }; + + const handleArrangeCard = async (data) => { + console.log(`${JSON.stringify(data)}`); + const { finalHand, possiblePositions, jokerCard, arrangeCard } = data; + console.log("핸들어렌지 카드에서 데이터보기", data); + setFinalHand(finalHand); + setPossiblePositions(possiblePositions); + setJoker(jokerCard); + setArrangeCard(arrangeCard); + }; + + const handleOpponentColor = async (data) => { + console.log(`${JSON.stringify(data)}`); + console.log("핸들 오포넌트칼라 데이터", data); + const { opponentColorArray } = data; + console.log(opponentColorArray, "상대 칼라 확인하기"); + setOpponentColor(opponentColorArray); + }; + + const handleNowTurn = async (data) => { + console.log(`${JSON.stringify(data)}`); + const { fieldBlack, fieldWhite, message, turnUserId } = data; + setFieldDeck({ + blackCount: fieldBlack, + whiteCount: fieldWhite, + }); + setTurnId(turnUserId); + }; + + const handleDrawCard = async (data) => { + console.log(`${JSON.stringify(data)}`); + const { finalHand, message, newPosition, newlyDrawn, arrangeCard } = data; + setFinalHand(finalHand); + setNewlyDrawn(newlyDrawn); + setArrangeCard(arrangeCard); + setNewPosition(newPosition); + }; + + const handleOpponentCard = async (data) => { + console.log(`${JSON.stringify(data)}`); + const { opponentCard, message, index } = data; + setOpponentCard(opponentCard); + setOpponentColor(opponentCard); + setOpponentIndex(index); }; socket.on("join", handleJoin); socket.on("leave", handleLeave); socket.on("ready", handleReady); socket.on("gameStart", handleGameStart); + socket.on("handDeck", handleHandDeck); + socket.on("arrangeCard", handleArrangeCard); + socket.on("opponentColorArrayRevealed", handleOpponentColor); + socket.on("nowTurn", handleNowTurn); + socket.on("drawCard", handleDrawCard); + socket.on("opponentCard", handleOpponentCard); return () => { socket.disconnect(); }; }, [socket, refetch]); + useEffect(() => { + if (turnId === userMyIdRef.current) { + openModal("myTurn", "white"); + } + }, [turnId]); + const handleMyReady = () => { setMyReady((prev) => !prev); }; + const onClickJoker = (pos: number) => { + if (!joker) return; + if (!socket) return; + + const newHand = [...finalHand]; + console.log("joker카드확인", joker); + newHand.splice(pos, 0, joker); + console.log(newHand, "뉴핸드 확인"); + setFinalHand(newHand); + setPossiblePositions([]); + + socket.emit("arrangeDeck", { roomId, newOrder: newHand }); + }; + return ( @@ -165,11 +280,41 @@ export default function GameRoom() { - + + {opponentColor?.map((deck, index) => ( + + ))} + - + + {finalHand?.map((deck, index) => ( + + {possiblePositions.includes(index) && ( + + )} + + {index === finalHand.length - 1 && + possiblePositions.includes(finalHand.length) && ( + + )} + + ))} + { + if (!datas.possiblePositions.includes(pos)) return; // 가능한 위치가 아니라면 무시 + const newHand = [...finalHand]; + newHand.splice(pos, 0, datas.jokerCard); + setPreviewHand(newHand); + }; + + // 마우스가 빠져나갔을 때 (미리보기 초기화) + const handleMouseLeave = () => { + setPreviewHand(finalHand); + }; + + // 클릭 시 (실제 삽입) + const handleClick = (pos) => { + if (!datas.possiblePositions.includes(pos)) return; // 가능한 위치가 아니라면 무시 + const newHand = [...finalHand]; + newHand.splice(pos, 0, datas.jokerCard); + setFinalHand(newHand); + setPreviewHand(newHand); + }; + + return ( +
+

{datas.message}

+ +
+ {/* + previewHand를 기준으로 카드 렌더링 + 삽입 가능한 인덱스를 표현하기 위해 + 각 카드 앞쪽 + 마지막 카드 뒤쪽을 고려 + */} + {previewHand.map((card, index) => ( + + {/* + 카드 앞쪽 위치에 삽입 마커 + index 값이 possiblePositions에 있을 때만 표시 + */} + {datas.possiblePositions.includes(index) && ( + + )} + + {/* 실제 카드 표시 */} + + + {/* + 만약 마지막 카드라면, + "마지막 위치" (previewHand.length)도 + possiblePositions에 포함되어 있는지 확인해서 표시 + */} + {index === previewHand.length - 1 && + datas.possiblePositions.includes(previewHand.length) && ( + + )} + + ))} +
+
+ ); +} + +// 삽입 가능한 위치를 시각적으로 표시하는 컴포넌트 +function PositionMarker({ pos, onMouseEnter, onMouseLeave, onClick }) { + const markerStyle = { + width: "20px", + height: "40px", + backgroundColor: "rgba(0,255,0,0.2)", // 초록색 반투명 + display: "inline-block", + cursor: "pointer", + margin: "0 5px", // 카드와 약간 간격 + }; + + return ( +
onMouseEnter(pos)} + onMouseLeave={onMouseLeave} + onClick={() => onClick(pos)} + /> + ); +} + +// 실제 카드 하나를 보여주는 컴포넌트 +function CardView({ card }) { + const cardStyle = { + display: "inline-block", + padding: "10px", + border: "1px solid #ccc", + minWidth: "60px", + textAlign: "center", + }; + return ( +
+ {card.color} - {card.num} +
+ ); +} diff --git a/src/pages/testpage/Testpage.tsx b/src/pages/testpage/Testpage.tsx index e24920a..1c4bd0a 100644 --- a/src/pages/testpage/Testpage.tsx +++ b/src/pages/testpage/Testpage.tsx @@ -1,9 +1,12 @@ import Rangking from "../../components/ui/ranking/Ranking"; +import { useModal } from "../../hooks/useModal"; export default function TestPage() { + const { openModal } = useModal(); + const onClickModal = () => { + openModal("guessNumber", "blue"); + }; return ( -
- -
+
ㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㅇㄹ
); } diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 6ac6e50..5f874f2 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -9,6 +9,9 @@ import UpdateMyPage from "@pages/mypage/updateMypage/UpdateMyPage"; import GameRoom from "@pages/game/GameRoom"; import Game from "@pages/game/Game"; import Home from "@pages/home/Home"; +import Joker from "../pages/game/testpage"; +import GuessNumber from "../components/ui/selectionNumber/GuessNumber"; +import TestPage from "../pages/testpage/Testpage"; export const router = createBrowserRouter([ { @@ -57,6 +60,10 @@ export const router = createBrowserRouter([ path: "/user/mypage/updateMyPage", element: , }, + { + path: "/test", + element: , + }, ], }, ]); diff --git a/src/store/useGuessNumberStore.ts b/src/store/useGuessNumberStore.ts new file mode 100644 index 0000000..a275de5 --- /dev/null +++ b/src/store/useGuessNumberStore.ts @@ -0,0 +1,11 @@ +import { create } from "zustand"; + +interface ICardState { + cardIndex: number; + setCardIndex: (cardIndex: number) => void; +} + +export const useCardIndexStore = create((set) => ({ + cardIndex: -1, + setCardIndex: (cardIndex: number) => set({ cardIndex }), +})); diff --git a/src/store/useUserMyIdStore.ts b/src/store/useUserMyIdStore.ts new file mode 100644 index 0000000..6a1c5b4 --- /dev/null +++ b/src/store/useUserMyIdStore.ts @@ -0,0 +1,11 @@ +import { create } from "zustand"; + +interface IUserMyIdState { + userMyId: number; + setUserMyId: (userMyId: number) => void; +} + +export const useUserMyIdStore = create((set) => ({ + userMyId: 0, + setUserMyId: (userMyId: number) => set({ userMyId }), +})); From b4c8d23d967fdff0785e13a92febc28f368ef106 Mon Sep 17 00:00:00 2001 From: moonhuicheol Date: Fri, 17 Jan 2025 11:58:10 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=ED=91=B8=EC=89=AC?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/components/ui/deck/BackDeck.tsx | 4 +- src/components/ui/deck/JokerDeck.tsx | 7 +- .../ui/selectionNumber/NumberButton.tsx | 4 +- src/pages/game/GameRoom.tsx | 70 +++++++++++++++---- yarn.lock | 5 ++ 6 files changed, 71 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index f8a5c4b..4d14c6f 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@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", diff --git a/src/components/ui/deck/BackDeck.tsx b/src/components/ui/deck/BackDeck.tsx index 546f21e..7442ab0 100644 --- a/src/components/ui/deck/BackDeck.tsx +++ b/src/components/ui/deck/BackDeck.tsx @@ -1,7 +1,7 @@ import backDeck from "@assets/images/icon_backDeck.svg"; import * as S from "./backDeckStyle"; import { useModal } from "../../../hooks/useModal"; -import { useCradIndexStore } from "../../../store/useGuessNumberStore"; +import { useCardIndexStore } from "../../../store/useGuessNumberStore"; interface IBackDeckProps { isFlipped: boolean; @@ -20,7 +20,7 @@ export default function BackDeck({ cardIndex, }: IBackDeckProps) { const { openModal } = useModal(); - const { setCardIndex } = useCradIndexStore(); + const { setCardIndex } = useCardIndexStore(); console.log(cardIndex, "카드인덱스 확인"); const onClicBackDeck = () => { setCardIndex(cardIndex); diff --git a/src/components/ui/deck/JokerDeck.tsx b/src/components/ui/deck/JokerDeck.tsx index e0775e5..6312732 100644 --- a/src/components/ui/deck/JokerDeck.tsx +++ b/src/components/ui/deck/JokerDeck.tsx @@ -1,5 +1,10 @@ import * as S from "./JokerDeckStyle"; -export default function JokerDeck({ pos, onClick }) { +interface IJockerDeck { + pos: number; + onClick: (pos: number) => void; +} + +export default function JokerDeck({ pos, onClick }: IJockerDeck) { return onClick(pos)}>선택; } diff --git a/src/components/ui/selectionNumber/NumberButton.tsx b/src/components/ui/selectionNumber/NumberButton.tsx index 647ee71..9484b2e 100644 --- a/src/components/ui/selectionNumber/NumberButton.tsx +++ b/src/components/ui/selectionNumber/NumberButton.tsx @@ -1,13 +1,13 @@ import { useParams } from "react-router-dom"; import * as S from "./numberButtonStyle"; import { useSocketStore } from "../../../store/useSocketStore"; -import { useCradIndexStore } from "../../../store/useGuessNumberStore"; +import { useCardIndexStore } from "../../../store/useGuessNumberStore"; export default function NumberButton({ value }: { value: number }) { const params = useParams(); const roomId = Number(params.id); const { socket } = useSocketStore(); - const { cardIndex } = useCradIndexStore(); + const { cardIndex } = useCardIndexStore(); const onClickNumber = () => { if (!socket) return; socket.emit("guessCard", { roomId, cardIndex, CardNumber: value }); diff --git a/src/pages/game/GameRoom.tsx b/src/pages/game/GameRoom.tsx index ba518da..6e31a7a 100644 --- a/src/pages/game/GameRoom.tsx +++ b/src/pages/game/GameRoom.tsx @@ -74,6 +74,46 @@ interface IFieldDeck { whiteCount: number; } +interface IHandDeck { + finalHand: IFinalHand[]; + message: string; +} + +interface IArrangeCard { + arrangeCard: boolean; + finalHand: IFinalHand[]; + jokerCard: IFinalHand; + message: string; + possiblePositions: number[]; +} + +interface IOpponentColorArrayRevealed { + message: string; + opponentColorArray: IOpponentColor[]; +} + +interface INowTurn { + fieldBlack: number; + fieldWhite: number; + message: string; + turnUserId: number; +} + +interface IDrawCard { + arrangeCard: boolean; + finalHand: IFinalHand[]; + message: string; + newPosition: number; + newlyDrawn: IFinalHand; +} + +interface IOponnentCard { + color: string; + index: number; + message: string; + opponentCard: IOpponentColor[]; + userId: number; +} export default function GameRoom() { const { socket, setSocket } = useSocketStore(); const params = useParams(); @@ -94,11 +134,11 @@ export default function GameRoom() { ); const [arrangeCard, setArrangeCard] = useState(false); const [fieldDeck, setFieldDeck] = useState(); - const [turnId, setTurnId] = useState(); - const [newPosition, setNewPosition] = useState(); - const [opponent, setOpponentCard] = useState(); - const [newlyDrawn, setNewlyDrawn] = useState(); - const [opponentIndex, setOpponentIndex] = useState(); + const [turnId, setTurnId] = useState(); + const [newPosition, setNewPosition] = useState(); + const [opponent, setOpponentCard] = useState(); + const [newlyDrawn, setNewlyDrawn] = useState(); + const [opponentIndex, setOpponentIndex] = useState(); const { openModal } = useModal(); @@ -173,16 +213,16 @@ export default function GameRoom() { openModal("firstSelect", "white"); }; - const handleHandDeck = async (data) => { + const handleHandDeck = async (data: IHandDeck) => { console.log(`${JSON.stringify(data)}`); - const { arrangeCard, finalHand } = data; + const { finalHand, message } = data; setFinalHand(finalHand); - setArrangeCard(arrangeCard); }; - const handleArrangeCard = async (data) => { + const handleArrangeCard = async (data: IArrangeCard) => { console.log(`${JSON.stringify(data)}`); - const { finalHand, possiblePositions, jokerCard, arrangeCard } = data; + const { finalHand, possiblePositions, jokerCard, arrangeCard, message } = + data; console.log("핸들어렌지 카드에서 데이터보기", data); setFinalHand(finalHand); setPossiblePositions(possiblePositions); @@ -190,7 +230,7 @@ export default function GameRoom() { setArrangeCard(arrangeCard); }; - const handleOpponentColor = async (data) => { + const handleOpponentColor = async (data: IOpponentColorArrayRevealed) => { console.log(`${JSON.stringify(data)}`); console.log("핸들 오포넌트칼라 데이터", data); const { opponentColorArray } = data; @@ -198,7 +238,7 @@ export default function GameRoom() { setOpponentColor(opponentColorArray); }; - const handleNowTurn = async (data) => { + const handleNowTurn = async (data: INowTurn) => { console.log(`${JSON.stringify(data)}`); const { fieldBlack, fieldWhite, message, turnUserId } = data; setFieldDeck({ @@ -208,7 +248,7 @@ export default function GameRoom() { setTurnId(turnUserId); }; - const handleDrawCard = async (data) => { + const handleDrawCard = async (data: IDrawCard) => { console.log(`${JSON.stringify(data)}`); const { finalHand, message, newPosition, newlyDrawn, arrangeCard } = data; setFinalHand(finalHand); @@ -217,9 +257,9 @@ export default function GameRoom() { setNewPosition(newPosition); }; - const handleOpponentCard = async (data) => { + const handleOpponentCard = async (data: IOponnentCard) => { console.log(`${JSON.stringify(data)}`); - const { opponentCard, message, index } = data; + const { opponentCard, message, color, index, userId } = data; setOpponentCard(opponentCard); setOpponentColor(opponentCard); setOpponentIndex(index); diff --git a/yarn.lock b/yarn.lock index faca59b..9850c7f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1355,6 +1355,11 @@ lottie-web@^5.10.2: resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5" integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg== +lottie@^0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/lottie/-/lottie-0.0.1.tgz#f7a4d2a1f93006e60f1b1c6218cfba9cd1cc5f16" + integrity sha512-WdqM3pbQLzxOojtuxL9tqDgR1AeOFDLT43+dmjXl0/dhiNjf3PFzqwg7Sw4tME+DTG0DcXfAN3b1Z+HfdMf6oA== + lru-cache@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" From ca79a16ea6311d2549260159c199c4b854593e32 Mon Sep 17 00:00:00 2001 From: moonhuicheol Date: Fri, 17 Jan 2025 12:03:27 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=ED=91=B8=EC=89=AC?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/game/GameRoom.tsx | 9 ++- src/pages/game/testpage.tsx | 132 ------------------------------------ 2 files changed, 8 insertions(+), 133 deletions(-) delete mode 100644 src/pages/game/testpage.tsx diff --git a/src/pages/game/GameRoom.tsx b/src/pages/game/GameRoom.tsx index 6e31a7a..2a475a2 100644 --- a/src/pages/game/GameRoom.tsx +++ b/src/pages/game/GameRoom.tsx @@ -139,7 +139,9 @@ export default function GameRoom() { const [opponent, setOpponentCard] = useState(); const [newlyDrawn, setNewlyDrawn] = useState(); const [opponentIndex, setOpponentIndex] = useState(); + const [message, setMessage] = useState(); + console.log("타입에러방지", arrangeCard, fieldDeck, opponent, newlyDrawn); const { openModal } = useModal(); useEffect(() => { @@ -216,6 +218,7 @@ export default function GameRoom() { const handleHandDeck = async (data: IHandDeck) => { console.log(`${JSON.stringify(data)}`); const { finalHand, message } = data; + setMessage(message); setFinalHand(finalHand); }; @@ -228,6 +231,7 @@ export default function GameRoom() { setPossiblePositions(possiblePositions); setJoker(jokerCard); setArrangeCard(arrangeCard); + setMessage(message); }; const handleOpponentColor = async (data: IOpponentColorArrayRevealed) => { @@ -246,11 +250,13 @@ export default function GameRoom() { whiteCount: fieldWhite, }); setTurnId(turnUserId); + setMessage(message); }; const handleDrawCard = async (data: IDrawCard) => { console.log(`${JSON.stringify(data)}`); const { finalHand, message, newPosition, newlyDrawn, arrangeCard } = data; + setMessage(message); setFinalHand(finalHand); setNewlyDrawn(newlyDrawn); setArrangeCard(arrangeCard); @@ -259,7 +265,8 @@ export default function GameRoom() { const handleOpponentCard = async (data: IOponnentCard) => { console.log(`${JSON.stringify(data)}`); - const { opponentCard, message, color, index, userId } = data; + const { opponentCard, message, index } = data; + setMessage(message); setOpponentCard(opponentCard); setOpponentColor(opponentCard); setOpponentIndex(index); diff --git a/src/pages/game/testpage.tsx b/src/pages/game/testpage.tsx deleted file mode 100644 index d9b97a0..0000000 --- a/src/pages/game/testpage.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import React, { useState } from "react"; - -export default function Joker() { - // 초기 데이터 - const datas = { - message: "조커카드의 위치를 정해주세요.", - finalHand: [ - { color: "black", num: 1, isFlipped: false }, - { color: "white", num: 2, isFlipped: false }, - { color: "white", num: 8, isFlipped: false }, - ], - jokerCard: { - color: "white", - num: -1, - isFlipped: false, - }, - // 예시: 넣을 수 있는 위치가 0, 1, 3만 가능하다고 가정 - possiblePositions: [1, 2], - }; - - // 실제(확정) 카드 배열 상태 - const [finalHand, setFinalHand] = useState(datas.finalHand); - // 미리보기용 카드 배열 상태 - const [previewHand, setPreviewHand] = useState(datas.finalHand); - - // 해당 위치에 마우스를 올렸을 때 (미리보기) - const handleMouseEnter = (pos) => { - if (!datas.possiblePositions.includes(pos)) return; // 가능한 위치가 아니라면 무시 - const newHand = [...finalHand]; - newHand.splice(pos, 0, datas.jokerCard); - setPreviewHand(newHand); - }; - - // 마우스가 빠져나갔을 때 (미리보기 초기화) - const handleMouseLeave = () => { - setPreviewHand(finalHand); - }; - - // 클릭 시 (실제 삽입) - const handleClick = (pos) => { - if (!datas.possiblePositions.includes(pos)) return; // 가능한 위치가 아니라면 무시 - const newHand = [...finalHand]; - newHand.splice(pos, 0, datas.jokerCard); - setFinalHand(newHand); - setPreviewHand(newHand); - }; - - return ( -
-

{datas.message}

- -
- {/* - previewHand를 기준으로 카드 렌더링 - 삽입 가능한 인덱스를 표현하기 위해 - 각 카드 앞쪽 + 마지막 카드 뒤쪽을 고려 - */} - {previewHand.map((card, index) => ( - - {/* - 카드 앞쪽 위치에 삽입 마커 - index 값이 possiblePositions에 있을 때만 표시 - */} - {datas.possiblePositions.includes(index) && ( - - )} - - {/* 실제 카드 표시 */} - - - {/* - 만약 마지막 카드라면, - "마지막 위치" (previewHand.length)도 - possiblePositions에 포함되어 있는지 확인해서 표시 - */} - {index === previewHand.length - 1 && - datas.possiblePositions.includes(previewHand.length) && ( - - )} - - ))} -
-
- ); -} - -// 삽입 가능한 위치를 시각적으로 표시하는 컴포넌트 -function PositionMarker({ pos, onMouseEnter, onMouseLeave, onClick }) { - const markerStyle = { - width: "20px", - height: "40px", - backgroundColor: "rgba(0,255,0,0.2)", // 초록색 반투명 - display: "inline-block", - cursor: "pointer", - margin: "0 5px", // 카드와 약간 간격 - }; - - return ( -
onMouseEnter(pos)} - onMouseLeave={onMouseLeave} - onClick={() => onClick(pos)} - /> - ); -} - -// 실제 카드 하나를 보여주는 컴포넌트 -function CardView({ card }) { - const cardStyle = { - display: "inline-block", - padding: "10px", - border: "1px solid #ccc", - minWidth: "60px", - textAlign: "center", - }; - return ( -
- {card.color} - {card.num} -
- ); -} From 6fd5aac670e770cec9954b07bbba070084e1943e Mon Sep 17 00:00:00 2001 From: moonhuicheol Date: Fri, 17 Jan 2025 12:05:19 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=ED=91=B8=EC=89=AC?= =?UTF-8?q?=EC=97=90=EB=9F=AC=EC=88=98=EC=A0=95=203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/game/GameRoom.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/pages/game/GameRoom.tsx b/src/pages/game/GameRoom.tsx index 2a475a2..14a2853 100644 --- a/src/pages/game/GameRoom.tsx +++ b/src/pages/game/GameRoom.tsx @@ -141,7 +141,14 @@ export default function GameRoom() { const [opponentIndex, setOpponentIndex] = useState(); const [message, setMessage] = useState(); - console.log("타입에러방지", arrangeCard, fieldDeck, opponent, newlyDrawn); + console.log( + "타입에러방지", + arrangeCard, + fieldDeck, + opponent, + newlyDrawn, + message, + ); const { openModal } = useModal(); useEffect(() => {