feat: ✨ integrate chat API

[ohofront]

무엇을 변경했나요?

• 채팅 목록 화면에 GET /api/chats?status=ONGOING | ENDED API 연동을 추가했습니다.
• 채팅 탭 상태를 백엔드 응답 기준인 ONGOING, ENDED로 정리했습니다.
• 채팅 상세 화면에 채팅방 헤더, 게이지바, 메시지 목록 API를 연동했습니다.
  • GET /api/chats/{voteId}
  • GET /api/chats/{voteId}/gauge
  • GET /api/chats/{voteId}/messages
• 메시지 전송 API를 연결했습니다.
  • POST /api/chats/{voteId}/messages
• 기존 퍼블리싱 컴포넌트 구조를 유지하면서 백엔드 API 응답 타입을 그대로 사용하도록 타입을 정리했습니다.
• endAt, lastMessageAt, sentAt 기준으로 남은 시간과 시간 라벨을 표시하는 유틸 함수를 추가했습니다.
• 채팅 진행 중/종료 상태에 따라 입력창 노출, 종료 안내 문구, unread badge 표시 조건을 반영했습니다.

왜 변경했나요?

• 채팅 목록과 채팅방 상세 화면을 실제 백엔드 API 데이터와 연결하여, 사용자가 참여한 투표 채팅방을 확인하고 메시지를 주고받을 수 있도록 하기 위해 변경했습니다.
• 기존 mock 데이터 기반 퍼블리싱 화면을 실제 서비스 흐름에 맞게 전환하고, 이후 WebSocket 실시간 채팅 연동을 추가하기 위한 기반을 마련했습니다.

어떻게 테스트했나요?

• pnpm build 확인 예정
• 채팅 목록 탭 전환 확인 예정
  • 투표 진행 중 탭
  • 투표 종료 탭
• 채팅방 상세 진입 확인 예정
• 메시지 목록 조회 확인 예정
• 메시지 입력 및 전송 확인 예정
• 종료된 채팅방에서 입력창이 노출되지 않는지 확인 예정

스크린샷 (UI 변경 시)

Before	After
추후 첨부	추후 첨부

체크리스트

• 빌드 확인 (pnpm build)
• 주요 흐름 직접 확인
• 불필요한 console.log 제거

[numeru]

params.chatRoomId 가 아닌지 확인 부탁드립니다!

Suggested change

	const voteId = Number(params.voteId);
	const voteId = Number(params.chatRoomId);

[ohofront]

꼼꼼한 리뷰 감사합니다! 확인해 보니 라우터 설정 파일명(chat.$chatRoomId.tsx)에 정의된 대로 chatRoomId를 사용하는 것이 맞네요. 바로 수정해서 추가 커밋 올리겠습니다.