[STORY] 게임 세션 API 연동 (GameSession 모델)

[DDINGJOO]

Parent Epic

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

선행 작업

• [STORY] 프론트엔드 훅 분리 (Chat/Game) #171 [STORY] 프론트엔드 훅 분리 (Chat/Game)
• [BE] GameSession 모델 및 API 구현 완료

Story 개요

백엔드에서 GameSession 모델이 ChatRoom에서 분리되면,
프론트엔드에서 게임 세션 API를 연동하고 재접속 시 게임 상태 복구 기능을 구현합니다.

백엔드 API (예상)

```

게임 세션 생성

POST /api/chat/rooms/{roomId}/games
Request: { "gameType": "catchmind", "settings": { "totalRounds": 5, "roundDuration": 60 } }
Response: { "gameSessionId": "game-abc123", "status": "WAITING" }

게임 상태 조회 (재접속 시)

GET /api/games/{gameSessionId}
Response: {
"gameSessionId": "game-abc123",
"status": "PLAYING",
"currentRound": 2,
"roundStartTime": 1705744800000,
"serverTime": 1705744830000,
"scores": { "user1": 100 }
}

게임 시작

POST /api/games/{gameSessionId}/start

게임 종료

POST /api/games/{gameSessionId}/stop
```

Acceptance Criteria

• 게임 세션 생성 API 연동
• 게임 상태 조회 API 연동
• 페이지 새로고침/재접속 시 게임 상태 자동 복구
• 게임 종료 후 상태 정리
• /start, /stop 명령어가 새 API 사용

Tasks

• Task 5.1: [FE] gameApi.js 생성 (게임 세션 API 클라이언트)
• Task 5.2: [FE] gameService.js 생성 (서비스 레이어)
• Task 5.3: [FE] useGameWebSocket에서 게임 세션 API 연동
• Task 5.4: [FE] 재접속 시 게임 상태 복구 로직 구현
• Task 5.5: [FE] 게임 세션 생성/종료 흐름 구현
• Task 5.6: [FE/BE] 통합 테스트

재접속 복구 흐름

```

1. 페이지 로드 / WebSocket 재연결
2. GET /api/games/{gameSessionId} 호출 (localStorage에서 ID 복구)
3. 응답의 status가 "PLAYING"이면:
   • gameState 복원
   • 타이머 재계산 (serverTime - roundStartTime 기준)
   • 캔버스는 빈 상태로 시작 (그리기 데이터는 복구 불가)
4. 응답의 status가 "FINISHED" 또는 404면:
   • gameState 초기화
   • localStorage에서 gameSessionId 삭제
     ```

우선순위

🟢 보통 - 백엔드 작업 완료 후 진행

예상 작업량

• FE: 2일 (BE 완료 후)

의존성

• 백엔드 GameSession 모델 구현 완료
• 백엔드 게임 세션 REST API 구현 완료

[github-actions]

Jira: MESP-194