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

[DDINGJOO]

Parent Epic

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

선행 작업

• [STORY] WebSocket 메시지 도메인 분리 #170 [STORY] WebSocket 메시지 도메인 분리

Story 개요

현재 useChatWebSocket.js 훅을 채팅 전용과 게임 전용으로 분리하여
책임을 명확히 하고 유지보수성을 개선합니다.

현재 구조

```
src/domains/freetalk/hooks/
└── useChatWebSocket.js (채팅 + 게임 혼합)
- messages[], isConnected
- gameState, receivedDrawing
- correctAnswerBubble, shouldClearCanvas
```

변경 후 구조

```
src/domains/chat/hooks/
└── useChatWebSocket.js (채팅 전용)
- messages[], isConnected
- connect(), disconnect()
- sendMessage()

src/domains/catchmind/hooks/
├── useGameWebSocket.js (게임 전용)
│ - gameState, isGameActive
│ - startGame(), stopGame()
│ - sendDrawing(), clearDrawing()
├── useGameState.js (게임 상태 관리)
│ - currentRound, scores, currentDrawerId
└── useTimer.js (타이머 전용)
- remainingTime, isRunning
```

Acceptance Criteria

• useChatWebSocket은 채팅 메시지만 관리 (TEXT, USER_JOIN, USER_LEAVE, SYSTEM)
• useGameWebSocket은 게임 상태만 관리 (GAME_, ROUND_, DRAWING, SCORE 등)
• useTimer는 독립적으로 타이머만 관리
• 기존 기능 모두 정상 동작 (회귀 없음)
• FreeTalkPage에서 두 훅 조합하여 사용

Tasks

• Task 3.1: [FE] useTimer 훅 생성 (타이머 전용)
• Task 3.2: [FE] useGameState 훅 생성 (게임 상태 관리)
• Task 3.3: [FE] useGameWebSocket 훅 생성 (게임 WebSocket)
• Task 3.4: [FE] useChatWebSocket 훅에서 게임 관련 코드 제거
• Task 3.5: [FE] FreeTalkPage/GameModePanel 훅 연결 수정
• Task 3.6: [FE] 통합 테스트 및 회귀 검증

기술 명세

useTimer.js

```javascript
export function useTimer(roundStartTime, roundDuration, serverTime) {
const [remainingTime, setRemainingTime] = useState(roundDuration);
// 서버-클라이언트 시간 차이 보정
// 100ms 간격 업데이트
return remainingTime;
}
```

useGameWebSocket.js

```javascript
export function useGameWebSocket(roomId, userId) {
const [gameState, setGameState] = useState(null);
const [receivedDrawing, setReceivedDrawing] = useState(null);

// Game domain 메시지만 처리
const handleGameMessage = (message) => {
    switch (message.messageType) {
        case 'GAME_START': ...
        case 'ROUND_START': ...
        case 'DRAWING': ...
    }
};

return { gameState, receivedDrawing, startGame, stopGame, sendDrawing };

}
```

우선순위

🟡 중간 - 안정화 및 확장성 개선

예상 작업량

• FE: 2일

[github-actions]

Jira: MESP-190