[STORY] 게임 대기실 페이지 구현

[DDINGJOO]

Parent Epic

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

개요

게임 시작 전 참가자들이 대기하며 채팅할 수 있는 대기실 페이지를 구현합니다.

화면 설계

┌─────────────────────────────────────────────────────────────────┐
│  ← 나가기     🎮 초보 환영방     👥 3/4명     ⚙️ 설정 (방장만)  │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────────────────────────┐  ┌──────────────────────────┐ │
│  │      참가자 목록             │  │       대기 채팅           │ │
│  │                             │  │                          │ │
│  │  👑 홍길동 (방장)            │  │  홍길동: 안녕하세요~      │ │
│  │  👤 김철수                   │  │  김철수: 게임 ㄱㄱ        │ │
│  │  👤 이영희                   │  │  이영희: 준비됐어요!      │ │
│  │  ⏳ 대기중...                │  │                          │ │
│  │                             │  │                          │ │
│  └─────────────────────────────┘  │                          │ │
│                                   ├──────────────────────────┤ │
│                                   │ 📝 [메시지 입력...]  전송 │ │
│                                   └──────────────────────────┘ │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│  게임 설정: 5라운드 | 60초                                      │
│                                                                 │
│                    [🎮 게임 시작] (방장만, 2명 이상)             │
└─────────────────────────────────────────────────────────────────┘

기능 요구사항

1. 참가자 목록

• 방장 표시 (👑)
• 실시간 입/퇴장 반영
• 최대 인원 대비 현재 인원 표시

2. 대기 채팅

• WebSocket 실시간 채팅
• 시스템 메시지 (입장/퇴장 알림)
• 게임 시작 전까지만 활성화

3. 게임 시작 (방장)

• 최소 2명 이상일 때만 활성화
• 클릭 시 게임 플레이 화면으로 전환

4. 방 나가기

• 방장이 나가면 다음 사람이 방장
• 모두 나가면 방 삭제

기술 스택

• 라우트: /games/catchmind/:roomId/waiting
• WebSocket: 기존 chatWebSocketService 재사용
• 상태: 참가자 목록, 채팅 메시지

Tasks

• 대기실 페이지 컴포넌트 생성 (CatchmindWaitingPage.jsx)
• 참가자 목록 컴포넌트 (ParticipantList.jsx)
• 대기 채팅 컴포넌트 (WaitingChat.jsx)
• WebSocket 연결 및 실시간 참가자 동기화
• 게임 시작 버튼 (방장 권한 체크)
• 방 나가기 기능
• 방장 변경 이벤트 처리
• 게임 시작 이벤트 수신 시 플레이 화면 전환

디자인 가이드

레이아웃

• 좌측: 참가자 목록 (30%)
• 우측: 대기 채팅 (70%)
• 하단: 게임 설정 + 시작 버튼

색상

• 방장 닉네임: #F59E0B (골드)
• 게임 시작 버튼: #10B981 (민트)
• 비활성 버튼: #9CA3AF (그레이)

완료 조건 (AC)

• 참가자 목록 실시간 업데이트
• 대기 채팅 정상 동작
• 방장만 게임 시작 버튼 표시
• 2명 미만일 때 시작 버튼 비활성화
• 게임 시작 시 플레이 화면으로 자동 전환
• 방장 퇴장 시 다른 참가자가 방장 됨

[github-actions]

Jira: MESP-207

[DDINGJOO]

✅ PR #187에서 구현 완료 - 게임 대기실 페이지 (CatchmindWaitingPage.jsx)