[STORY] 게임 플레이 페이지 구현 (통합 레이아웃)

[DDINGJOO]

Parent Epic

• [EPIC] 캐치마인드 게임 분리 및 UI/UX 전면 개선 #177 [EPIC] 캐치마인드 게임 분리 및 UI/UX 전면 개선

개요

캔버스와 채팅이 동시에 표시되는 Split-View 통합 레이아웃의 게임 플레이 페이지를 구현합니다.
기존 탭 전환 방식의 버그를 해결하고, 몰입감 있는 게임 경험을 제공합니다.

핵심 변경점

항목	AS-IS (기존)	TO-BE (개선)
레이아웃	탭 전환 (채팅/게임)	Split-View (동시 표시)
캔버스 크기	340x200px	540x360px
탭 전환 버그	캔버스 언마운트 → 그림 손실	항상 마운트 → 상태 유지
채팅	탭으로 분리	우측에 항상 표시

화면 설계

┌──────────────────────────────────────────────────────────────────┐
│  🎮 초보 환영방  │  라운드 3/5  │  ⏱ 0:45  │  출제자: 홍길동  │ 🔴 │
├────────────────────────────────────────┬─────────────────────────┤
│                                        │  💬 채팅                 │
│                                        │ ─────────────────────── │
│                                        │  김철수: 고양이?         │
│           🖼️ 캔버스                     │  🔴 이영희: 강아지       │
│           (540 x 360px)                │  💬 김철수: 뭐지 ㅋㅋ    │
│                                        │  🎉 이영희: 호랑이! +35  │
│     [비눗방울 오버레이 - 추측 표시]      │                         │
│                                        │                         │
├────────────────────────────────────────┤ ─────────────────────── │
│  🎨 색상팔레트 | 굵기 | 🗑️ 지우기       │  📝 [답/메시지 입력...]   │
└────────────────────────────────────────┴─────────────────────────┘
         캔버스 영역 (65%)                      채팅 영역 (35%)

상세 요구사항

1. 헤더

• 방 이름
• 라운드 정보 (현재/전체)
• 타이머 (남은 시간, 10초 이하 빨간색 + 펄스)
• 현재 출제자 표시
• 게임 종료 버튼 (방장만)

2. 캔버스 영역 (좌측 65%)

출제자 UI

• 제시어 배너 (상단, 눈에 띄게)
• 그리기 도구: 색상 팔레트, 굵기 조절, 지우기
• 캔버스 초기화 버튼

참가자 UI

• 캔버스 관람 모드 (그리기 불가)
• 힌트 표시 영역

비눗방울 오버레이

• 모든 추측이 캔버스 위에 비눗방울로 표시
• 아래에서 위로 떠오르는 애니메이션
• 정답: 골드 비눗방울 + 컨페티 효과
• 오답: 파란색 비눗방울

3. 채팅 영역 (우측 35%)

메시지 타입 구분

💬 일반 채팅: 기본 스타일
🔴 오답: 빨간 점 + 흐리게
🎉 정답: 골드 배경 + 볼드 + 점수 표시
🔔 시스템: 라운드 시작/종료, 힌트 등

입력창

• 출제자: 비활성화 (답 힌트 방지)
• 참가자: 활성화 (답/채팅 입력)

4. 라운드 전환

라운드 종료 시:
┌──────────────────────────────────────┐
│                                      │
│         ✅ 정답: 호랑이               │
│                                      │
│            3... 2... 1...            │
│                                      │
│         다음 출제자: 김철수           │
│                                      │
└──────────────────────────────────────┘

5. 게임 종료 화면

┌──────────────────────────────────────┐
│                                      │
│         🎮 게임 종료!                 │
│                                      │
│         🥇 이영희: 120점             │
│         🥈 김철수: 95점              │
│         🥉 홍길동: 80점              │
│                                      │
│     [🔄 다시하기]    [🚪 나가기]      │
│                                      │
└──────────────────────────────────────┘

기술 스택

• 라우트: /games/catchmind/:roomId/play
• 캔버스: HTML5 Canvas API
• WebSocket: 기존 useChatWebSocket 확장
• 상태: 게임 상태, 캔버스 데이터, 채팅 메시지

Tasks

페이지 구조

• 게임 플레이 페이지 컴포넌트 (CatchmindPlayPage.jsx)
• Split-View 레이아웃 구현 (65:35)

캔버스 영역

• 캔버스 컴포넌트 리팩토링 (GameCanvas.jsx)
• 캔버스 크기 확대 (540x360)
• 그리기 도구 컴포넌트 (DrawingTools.jsx)
• 비눗방울 오버레이 컴포넌트 (BubbleOverlay.jsx)
• 제시어 배너 컴포넌트 (WordBanner.jsx)

채팅 영역

• 게임 채팅 컴포넌트 (GameChat.jsx)
• 메시지 타입별 스타일 적용
• 출제자 입력 비활성화 로직

게임 로직

• 타이머 동기화 (serverTime 기반)
• 라운드 전환 오버레이 (RoundTransition.jsx)
• 게임 종료 모달 (GameEndModal.jsx)
• 정답 시 컨페티 효과

상태 관리

• 캔버스 상태 부모 컴포넌트로 끌어올리기
• 그리기 히스토리 관리 (재접속 시 복원용)

디자인 가이드

색상

--canvas-border: #10B981;      /* 민트 - 게임 중 */
--canvas-border-danger: #EF4444; /* 빨강 - 시간 10초 이하 */
--correct-answer-bg: #FEF3C7;  /* 연한 골드 */
--correct-answer-text: #F59E0B; /* 골드 */
--wrong-answer: #9CA3AF;       /* 그레이 */
--bubble-correct: linear-gradient(135deg, #FFD700, #FFA500);
--bubble-normal: linear-gradient(135deg, #E0F2FE, #BAE6FD);

애니메이션

• 타이머 10초 이하: 펄스 애니메이션
• 정답 시: 컨페티 폭발 (3초)
• 비눗방울: ease-out 3초 상승
• 라운드 전환: 페이드 인/아웃

타이포그래피

• 제시어: Pretendard Bold 28px
• 타이머: JetBrains Mono 24px
• 점수: JetBrains Mono 16px

완료 조건 (AC)

• 캔버스와 채팅이 동시에 표시됨
• 출제자만 그리기 가능
• 참가자 추측이 비눗방울로 표시됨
• 정답 시 골드 효과 + 컨페티
• 타이머가 서버 시간과 동기화됨
• 라운드 전환 시 카운트다운 오버레이
• 게임 종료 시 최종 순위 모달
• 재접속 시 캔버스 상태 복원

[github-actions]

Jira: MESP-208

[DDINGJOO]

✅ PR #187에서 구현 완료 - 게임 플레이 페이지 (CatchmindPlayPage.jsx) with 통합 레이아웃