[STORY] 게임 로비 페이지 구현

[DDINGJOO]

Parent Epic

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

개요

캐치마인드 게임 방 목록을 보여주고, 방 생성/참가가 가능한 로비 페이지를 구현합니다.

화면 설계

┌─────────────────────────────────────────────────────────────┐
│  🎮 캐치마인드                                [➕ 방 만들기]  │
├─────────────────────────────────────────────────────────────┤
│  필터: [전체 ▼] [대기중만 ☑]                    🔄 새로고침  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌───────────────────────────────────────────────────────┐ │
│  │ 🎨 초보 환영방                                         │ │
│  │ 👤 홍길동 (방장)  │  👥 2/4명  │  🟢 대기중  │  [참가]  │ │
│  └───────────────────────────────────────────────────────┘ │
│                                                             │
│  ┌───────────────────────────────────────────────────────┐ │
│  │ 🎨 고수만 오세요                                       │ │
│  │ 👤 김철수 (방장)  │  👥 4/6명  │  🔴 게임중  │  [관전]  │ │
│  └───────────────────────────────────────────────────────┘ │
│                                                             │
│  ┌───────────────────────────────────────────────────────┐ │
│  │ 🎨 아무나 ㄱㄱ                                         │ │
│  │ 👤 이영희 (방장)  │  👥 1/4명  │  🟢 대기중  │  [참가]  │ │
│  └───────────────────────────────────────────────────────┘ │
│                                                             │
└─────────────────────────────────────────────────────────────┘

방 생성 모달

┌─────────────────────────────────────┐
│  🎮 새 게임방 만들기            [X] │
├─────────────────────────────────────┤
│                                     │
│  방 이름                            │
│  ┌─────────────────────────────┐   │
│  │ 초보 환영방                  │   │
│  └─────────────────────────────┘   │
│                                     │
│  난이도                             │
│  [초급] [중급] [고급]               │
│                                     │
│  최대 인원                          │
│  ◀ 4명 ▶                           │
│                                     │
│  라운드 수                          │
│  ◀ 5라운드 ▶                       │
│                                     │
│          [취소]  [만들기]           │
└─────────────────────────────────────┘

기술 스택

• 라우트: /games/catchmind
• 상태관리: React Query (방 목록 조회)
• API: GET /chat/rooms?type=GAME&gameType=CATCHMIND

Tasks

• 게임 로비 페이지 컴포넌트 생성 (src/domains/games/pages/CatchmindLobbyPage.jsx)
• 게임 방 카드 컴포넌트 생성 (GameRoomCard.jsx)
• 방 생성 모달 컴포넌트 생성 (CreateGameRoomModal.jsx)
• 게임 방 목록 조회 API 연동
• 방 생성 API 연동
• 필터 기능 구현 (난이도, 상태)
• 자동 새로고침 (10초 간격)
• 빈 상태 UI

디자인 가이드

색상

• 대기중: #10B981 (민트)
• 게임중: #EF4444 (레드)
• 카드 배경: #FFFFFF
• 카드 hover: #F8FAFC

방 카드 정보 표시

• 방 이름 (Bold)
• 방장 닉네임
• 현재/최대 인원
• 상태 뱃지
• 참가 버튼

완료 조건 (AC)

• 게임 방 목록이 카드 형태로 표시됨
• 대기중/게임중 상태가 구분되어 표시됨
• 방 생성 모달에서 옵션 설정 가능
• 방 참가 시 대기실로 이동
• 10초마다 목록 자동 갱신

[github-actions]

Jira: MESP-206

[DDINGJOO]

✅ PR #187에서 구현 완료 - 게임 로비 페이지 (CatchmindLobbyPage.jsx)