[STORY] UI 컴포넌트 분리 (Chat/Catchmind)

[DDINGJOO]

Parent Epic

• [EPIC] 채팅방/캐치마인드 게임 분리 및 연동 개선 #168 [EPIC] 채팅방/캐치마인드 게임 분리 및 연동 개선

선행 작업

• [STORY] 프론트엔드 훅 분리 (Chat/Game) #171 [STORY] 프론트엔드 훅 분리 (Chat/Game)

Story 개요

현재 GameModePanel.jsx에 혼합된 채팅/게임 UI를 각 도메인별 컴포넌트로 분리합니다.
재사용성과 테스트 용이성을 개선합니다.

현재 구조

```
src/domains/freetalk/components/
├── GameModePanel.jsx (채팅 + 게임 + 캔버스 혼합, 700줄+)
├── ChatInput.jsx
├── ChatRoomModal.jsx
└── DrawingCanvas.jsx
```

변경 후 구조

```
src/domains/chat/components/
├── ChatRoom.jsx (채팅방 컨테이너)
├── ChatMessages.jsx (메시지 목록)
├── ChatInput.jsx (입력창)
└── ChatBubble.jsx (메시지 버블)

src/domains/catchmind/components/
├── CatchmindGame.jsx (게임 컨테이너)
├── DrawingCanvas.jsx (그리기 캔버스)
├── DrawingTools.jsx (그리기 도구)
├── GuessInput.jsx (정답 입력)
├── ScoreBoard.jsx (점수판)
├── Timer.jsx (타이머 표시)
├── WordDisplay.jsx (단어 표시 - 출제자용)
└── GuessBubbles.jsx (추측 버블 표시)

src/domains/freetalk/components/
├── FreeTalkRoom.jsx (채팅 + 게임 통합 뷰)
└── GameModePanel.jsx (리팩토링 - 위 컴포넌트 조합)
```

Acceptance Criteria

• 채팅 컴포넌트는 게임 로직 없이 독립 동작
• 게임 컴포넌트는 채팅 로직 없이 독립 동작
• GameModePanel은 분리된 컴포넌트 조합으로 재구성
• 기존 UI/UX 동일하게 유지
• 다크모드 정상 동작

Tasks

• Task 4.1: [FE] src/domains/chat/ 디렉토리 구조 생성
• Task 4.2: [FE] src/domains/catchmind/ 디렉토리 구조 생성
• Task 4.3: [FE] ChatRoom, ChatMessages, ChatInput 컴포넌트 분리
• Task 4.4: [FE] Timer 컴포넌트 분리 (재사용 가능)
• Task 4.5: [FE] ScoreBoard 컴포넌트 분리
• Task 4.6: [FE] DrawingCanvas, DrawingTools 컴포넌트 분리
• Task 4.7: [FE] GuessInput, GuessBubbles 컴포넌트 분리
• Task 4.8: [FE] CatchmindGame 컨테이너 컴포넌트 생성
• Task 4.9: [FE] GameModePanel 리팩토링 (조합 구조)
• Task 4.10: [FE] UI/UX 검증 및 다크모드 테스트

컴포넌트 Props 설계

Timer.jsx

```typescript
interface TimerProps {
remainingTime: number;
totalTime: number;
showProgress?: boolean;
size?: 'small' | 'medium' | 'large';
}
```

ScoreBoard.jsx

```typescript
interface ScoreBoardProps {
scores: Record<string, number>;
currentDrawerId?: string;
currentUserId: string;
}
```

DrawingCanvas.jsx

```typescript
interface DrawingCanvasProps {
isDrawer: boolean;
onDraw: (data: DrawingData) => void;
onClear: () => void;
receivedDrawing?: DrawingData;
brushColor: string;
brushSize: number;
}
```

우선순위

🟢 중간 - 코드 품질 및 유지보수성 개선

예상 작업량

• FE: 3일

[github-actions]

Jira: MESP-193

[DDINGJOO]

✅ PR #187에서 구현 완료 - GameChat, GameCanvas 등 게임 전용 컴포넌트 분리