✨ feat: 덱선택, 드로우, 상대 덱 추측 @moonhuicheol

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",

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/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 { useCardIndexStore } 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 } = useCardIndexStore();
+  console.log(cardIndex, "카드인덱스 확인");
+  const onClicBackDeck = () => {
+    setCardIndex(cardIndex);
+    openModal("guessNumber", "blue");
+  };
   return (
-    <S.cardDeck color={color}>
-      <S.img src={iconArrow} alt="arrow" color={color} />
+    <S.cardDeck
+      color={color}
+      myHighlight={myHighlight}
+      disabled={disabled}
+      onClick={onClicBackDeck}
+    >
+      <S.img src={backDeck} alt="arrow" color={color} />
     </S.cardDeck>
   );
 }

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 (
-    <S.cardDeck color={color}>
+    <S.cardDeck color={color} myHighlight={myHighlight}>
       <S.number color={color} underBar={underBar}>
-        {value}
+        {value === -1 ? "-" : value}
       </S.number>
     </S.cardDeck>
   );

src/components/ui/deck/JokerDeck.tsx

@@ -0,0 +1,10 @@
+import * as S from "./JokerDeckStyle";
+
+interface IJockerDeck {
+  pos: number;
+  onClick: (pos: number) => void;
+}
+
+export default function JokerDeck({ pos, onClick }: IJockerDeck) {
+  return <S.JockerDeck onClick={() => onClick(pos)}>선택</S.JockerDeck>;
+}

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);
+`;

src/components/ui/deck/backDeckStyle.ts

@@ -1,25 +1,36 @@
 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;
   align-items: center;
   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);
+    `}
 `;

src/components/ui/deck/frontDeckStyle.ts

@@ -1,16 +1,19 @@
 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;
   align-items: center;
   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%)"

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;
 }

src/components/ui/modal/Modal.tsx

@@ -2,16 +2,19 @@ import ModalPortal from "./ModalPortal";
 import FirstSelect from "../modalContents/FirstSelect";
 import MakeRoom from "../modalContents/MakeRoom";
 import BigDeck from "../bigDeck/BigDeck";
-import TurnWaiting from "../modalContents/TurnWaiting";
-import GameWaiting from "../modalContents/GameWaiting";
 import { useModalStore } from "../../../store/useModalStore";
 import { Inside, ModalFrame, Overlay } from "./modalStyle";
+import GuessNumber from "../selectionNumber/GuessNumber";
 import { useEffect } from "react";
 import { useModal } from "@hooks/useModal";
+import TurnWaiting from "../modalContents/TurnWaiting";
+import GameWaiting from "../modalContents/GameWaiting";
 
 const modalComponents: Record<string, React.ReactNode> = {
   firstSelect: <FirstSelect />,
   makeRoom: <MakeRoom />,
+  myTurn: <BigDeck />,
+  guessNumber: <GuessNumber />,
   selectWhiteBlack: <BigDeck />,
   turnWaiting: <TurnWaiting />,
   gameWaiting: <GameWaiting />,

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 (
+    <S.container>
+      <S.title>상대 덱의 번호를 추측해주세요.</S.title>
+      <S.numberContainer>
+        <S.leftContainer>
+          {numbers.map((num) => (
+            <NumberButton value={num} />
+          ))}
+        </S.leftContainer>
+        <S.rightContaider>
+          <NumberButton value={-1} />
+        </S.rightContaider>
+      </S.numberContainer>
+    </S.container>
+  );
+}

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 { useCardIndexStore } from "../../../store/useGuessNumberStore";
+
+export default function NumberButton({ value }: { value: number }) {
+  const params = useParams();
+  const roomId = Number(params.id);
+  const { socket } = useSocketStore();
+  const { cardIndex } = useCardIndexStore();
+  const onClickNumber = () => {
+    if (!socket) return;
+    socket.emit("guessCard", { roomId, cardIndex, CardNumber: value });
+  };
+  return (
+    <S.numberButton onClick={onClickNumber}>
+      {value === -1 ? "-" : value}
+    </S.numberButton>
+  );
+}