💬 채팅 시스템 (Chat System)

타임페이에서 사용자 간 실시간 메시지 전송 및 타임 전송 기능을 제공하는 핵심 시스템입니다.

---

Relevant Source Files

• src/api/chat-api.tsx
• src/api/types/chat-type.ts
• src/assets/icons/chat-creator-icon.svg
• src/components/chat/chat-input.tsx
• src/components/chat/chat-item.tsx
• src/components/chat/chat-list-item.tsx
• src/components/chat/chat-list.tsx
• src/components/chat/type.ts
• src/hooks/queries/useGetChatList.tsx
• src/hooks/queries/useSendMessages.tsx
• src/pages/chat/chat-room.tsx
• src/pages/chat/chat.tsx
• src/pages/chat/dummy.ts
• src/pages/chat/type.ts

---

1. 시스템 개요

Chat 시스템은 다음과 같은 두 가지 주요 UI로 구성됩니다:

• Chat List (채팅 목록)
• Chat Room (채팅방)

또한 WebSocket 기반 실시간 메시징 기능과 타 시스템(타임 전송, 게시글, 지원자 관리 등)과 통합되어 동작합니다.

2. 주요 기능

• 실시간 메시징 (StompJS 기반 WebSocket)
• 채팅방 생성 및 참가자 추가
• 채팅방 목록 필터링 (진행 중/완료)
• 타임 전송 기능 연동
• 프로필 및 게시글 정보 표시
• 차단, 삭제, 퇴장 처리 대응

3. Chat API 연동

제공 메서드

메서드명	설명
sendChatMessages	채팅 메시지 전송
getChatList	사용자의 채팅방 목록 조회
getChatRoomData	채팅방 정보 및 대화 내역 조회
postChatMake	새로운 채팅방 생성
postAddingNewMember	채팅방에 참여자 추가
postIdToChatRoom	게시글 기준 채팅방 조회

Sources:
src/api/chat-api.tsx

4. 채팅 목록 (Chat List)

사용자에게 참여 중인 채팅방 목록을 제공하며, 상태별(진행/완료) 필터링 기능을 지원합니다.

주요 구성 요소

• ChatList
• ChatListItem
• ToggleSwitch (상태 필터)
• useGetChatList(type) 훅

Sources:
src/pages/chat/chat.tsx
src/components/chat/chat-list.tsx
src/components/chat/chat-list-item.tsx

5. 채팅방 (Chat Room)

채팅 메시지를 실시간으로 주고받을 수 있는 메인 인터페이스입니다.

주요 기능

• 채팅 메시지 송수신
• 채팅 입력창
• 참여자 프로필 보기
• 타임 전송/신청자 추가/신고 기능 버튼
• WebSocket 구독 및 상태 관리

주요 구성 요소

• ChatItem
• ChatInput
• ChatAppBar
• Bottom Sheet 버튼 (타임 전송, 지원자 추가 등)

Sources:
src/pages/chat/chat-room.tsx
src/components/chat/chat-item.tsx
src/components/chat/chat-input.tsx

6. WebSocket 통신 구조

WebSocket 연결은 StompJS를 사용하여 다음 흐름으로 메시지를 처리합니다:

• connectHandler: 소켓 연결 및 방 구독
• sendHandler: 메시지 전송
• scrollToBottom: 최신 메시지 자동 스크롤
• /sub/room/{roomId} 구독, /chat/room/{roomId}/message 전송

Sources:
chat-room.tsx (58-64, 66-93, 179-199)

7. 데이터 타입

타입명	설명	주요 필드
ChatRoomItemType	채팅방 목록 항목	roomId, postId, postTitle 등
ChatItemType	개별 메시지	userId, msg, date 등
ChatRoomData	채팅방 상태	roomId, postId 등
ChatRoomSubMessage	소켓 메시지 구조	type, roomIdx, message 등
InputType	입력창 props	onClick, blockedRoom 등

Sources:
src/components/chat/type.ts
src/api/types/chat-type.ts
src/pages/chat/type.ts

8. 타 시스템과의 연동

• 게시글 시스템: 채팅방은 게시글과 연동되어 생성됨
• 타임 전송: 하단 버튼 클릭 시 전송 Bottom Sheet 열림
• 지원자 관리: 채팅에 새로운 인원 추가 가능
• 프로필 시스템: 프로필 클릭 시 모달로 사용자 정보 표시

Sources:
chat-room.tsx (204-227, 364-376)
chat-item.tsx (36-43)

9. 예외 처리 및 사용자 피드백

• 삭제된 게시글 알림
• 차단된 채팅방 표시
• 퇴장 알림 모달
• 삭제된 사용자 프로필 처리

Sources:
chat-room.tsx (230-236, 422-438)
chat-list-item.tsx (60-65)

10. 요약

채팅 시스템은 다음 기능들을 중심으로 구성됩니다:

💬 실시간 채팅 기능 (WebSocket 기반)
🧾 채팅방 목록 및 상태 필터
🔀 참여자 추가 및 타임 전송 기능
🚨 예외 상황 처리 및 사용자 피드백