Skip to content

Chat System

Jump to bottom
dntkd edited this page May 16, 2025 · 4 revisions

💬 채팅 시스템 (Chat System)

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

Relevant Source Files

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 기반)
🧾 채팅방 목록 및 상태 필터
🔀 참여자 추가 및 타임 전송 기능
🚨 예외 상황 처리 및 사용자 피드백

Clone this wiki locally