[FE] 공고 담당자와 지원자의 채팅 기능

[KK-Hoon]

채팅 기능 구현

기능 설명

사용자 간의 실시간 1:1 채팅 기능을 제공합니다. 채용공고에 대한 문의나 일반적인 대화가 가능합니다.

주요 기능

1. 채팅방 관리

• 채팅방 생성
  • 채용공고 기반 채팅방 생성
  • 1:1 채팅방 생성
• 채팅방 목록 조회
  • 전체 채팅방 목록
  • 특정 채용공고의 채팅방 목록
• 채팅방 나가기

2. 메시지 기능

• 실시간 메시지 전송/수신
• 메시지 읽음 처리
• 메시지 삭제
• 메시지 시간 표시
• 읽음 상태 표시

3. 실시간 통신

• WebSocket 기반 실시간 통신
• STOMP 프로토콜 사용
• 자동 재연결 기능

기술 스택

• Frontend: React
• WebSocket: SockJS, STOMP
• API: RESTful API
• 인증: JWT 토큰 기반

API 엔드포인트

• POST /chat/rooms: 채팅방 생성
• GET /chat/rooms: 채팅방 목록 조회
• GET /chat/rooms/{roomId}/messages: 채팅 메시지 조회
• PUT /chat/rooms/{roomId}/read: 메시지 읽음 처리
• DELETE /chat/rooms/{roomId}: 채팅방 나가기
• DELETE /chat/messages/{messageId}: 메시지 삭제
• WebSocket: /ws-chat

데이터 구조

{
  "chatRoom": {
    "id": "number",
    "user1Name": "string",
    "user2Name": "string",
    "user1Email": "string",
    "user2Email": "string",
    "jobName": "string",
    "jobPostId": "number",
    "lastMessage": "string",
    "lastMessageTime": "string",
    "unreadCount": "number"
  },
  "message": {
    "id": "number",
    "content": "string",
    "senderId": "number",
    "sentAt": "string",
    "read": "boolean"
  }
}

UI 컴포넌트

• 채팅방 목록 (ChatRoomList)
  • 채팅방 카드
  • 읽지 않은 메시지 표시
  • 마지막 메시지 미리보기
• 채팅방 (ChatRoom)
  • 메시지 입력창
  • 메시지 목록
  • 읽음 상태 표시
• 메시지 (ChatMessage)
  • 메시지 내용
  • 전송 시간
  • 읽음 상태

상태 관리

• 채팅방 목록 상태
• 현재 채팅방 상태
• 메시지 목록 상태
• WebSocket 연결 상태

보안

• JWT 토큰 기반 인증
• WebSocket 연결 시 토큰 검증
• 메시지 권한 검증

성능 최적화

• 메시지 페이지네이션
• WebSocket 연결 최적화
• 메시지 캐싱

에러 처리

• WebSocket 연결 실패 처리
• 메시지 전송 실패 처리
• 재연결 로직

UI/UX 특징

• 모바일 친화적 디자인
• 실시간 읽음 상태 표시
• 부드러운 애니메이션 효과
• 다크 모드 지원