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

[DDINGJOO]

개요

채팅방과 게임방을 완전히 분리하여, 캐치마인드를 독립적인 게임 카테고리로 운영합니다.
기존 탭 전환 방식의 버그를 해결하고, 게임에 최적화된 UI/UX를 제공합니다.

배경

현재 문제점

1. 아키텍처 문제: 채팅방 = 게임방으로 혼합되어 있음
2. 탭 전환 버그: 캔버스 언마운트로 그림 데이터 손실
3. UX 문제: 게임 원치 않는 사용자도 강제 참가
4. 공간 제약: 380x500px 모달에서 게임 진행 불편

목표

• 게임 전용 로비 및 플레이 화면 제공
• 채팅방은 순수 채팅 기능만 유지
• 게임 중 안정적인 캔버스 + 채팅 통합 UI

변경 범위

TO-BE 구조

대시보드
├── 글쓰기 연습
│   └── 채팅방 - 순수 채팅만
│
└── 🎮 게임 (NEW)
    └── 캐치마인드
        ├── 방 만들기
        └── 방 목록 → 대기실 → 게임 플레이

게임 플레이 화면 (통합 레이아웃)

┌──────────────────────────────────────────────────────────────────┐
│  🎮 방 이름  │  라운드 3/5  │  ⏱ 0:45  │  출제자: user1  │  🔴 종료 │
├────────────────────────────────────────┬─────────────────────────┤
│                                        │  💬 채팅                 │
│           🖼️ 캔버스 (540x360)          │  user2: 고양이?         │
│                                        │  🎉 user3: 호랑이! +35  │
│                                        │                         │
├────────────────────────────────────────┤                         │
│  🎨 도구바 (출제자) / 힌트 (참가자)      │  📝 [답 입력...]        │
└────────────────────────────────────────┴─────────────────────────┘

관련 문서

• 백엔드 기획서

---

하위 스토리

Backend

• [STORY] 게임 방 타입 분리 API (Backend) #178 [STORY] 게임 방 타입 분리 API

Frontend - 페이지

• [STORY] 게임 로비 페이지 구현 #179 [STORY] 게임 로비 페이지 구현
• [STORY] 게임 대기실 페이지 구현 #180 [STORY] 게임 대기실 페이지 구현
• [STORY] 게임 플레이 페이지 구현 (통합 레이아웃) #181 [STORY] 게임 플레이 페이지 구현 (통합 레이아웃) ⭐ 핵심
• [STORY] 대시보드에 게임 카테고리 추가 #183 [STORY] 대시보드에 게임 카테고리 추가

Frontend - 정리

• [STORY] 기존 채팅방에서 게임 기능 제거 #182 [STORY] 기존 채팅방에서 게임 기능 제거

Frontend - 디자인

• [STORY] 게임 UI/UX 디자인 시스템 구축 #184 [STORY] 게임 UI/UX 디자인 시스템 구축

---

구현 순서 (권장)

Phase 1: 백엔드 + 기반 작업
├── #178 [BE] 게임 방 타입 분리 API
└── #184 [FE] 게임 UI/UX 디자인 시스템 구축

Phase 2: 게임 페이지 구현
├── #183 [FE] 대시보드에 게임 카테고리 추가
├── #179 [FE] 게임 로비 페이지 구현
├── #180 [FE] 게임 대기실 페이지 구현
└── #181 [FE] 게임 플레이 페이지 구현 ⭐

Phase 3: 정리
└── #182 [FE] 기존 채팅방에서 게임 기능 제거

---

완료 조건 (AC)

• 게임 로비에서 방 목록 조회/생성/참가 가능
• 대기실에서 참가자 확인 및 대기 채팅 가능
• 게임 플레이 시 캔버스와 채팅이 동시 표시
• 탭 전환 없이 안정적인 게임 진행
• 기존 채팅방에서 게임 관련 UI 완전 제거
• 게임 종료 후 재시작/나가기 선택 가능

---

일정 (예상)

Phase	작업	담당
Phase 1	백엔드 API + 디자인 시스템	BE팀 + FE팀
Phase 2	게임 페이지 구현	FE팀
Phase 3	기존 코드 정리	FE팀

[github-actions]

Jira: MESP-204

[DDINGJOO]

✅ PR #187에서 Epic 완료 - 캐치마인드 게임 분리 및 UI/UX 전면 개선

• 게임 로비/대기실/플레이 페이지 구현
• 게임 디자인 시스템 구축
• 실시간 그리기/채팅 기능
• 타이머 및 라운드 관리