[Feat] 채팅 기능 추가

[bae-suho]

채팅 기능 사용처

• 매물 1:1 채팅(WebSocket/STOMP) - 매물 관심자 ↔ 매물 등록자 간 실시간 채팅
• AI 챗봇(SSE fetch-based) - 계약서 분석 결과 기반 질의 응답

확정 사항

• WebSocket 인증: STOMP CONNECT 프레임에 Authorization: Bearer 헤더 포함
• 토큰 만료 처리: 클라이언트에서 만료 전 선제적 재연결 → 재연결 후 채팅 히스토리 API 재호출
• 채팅 히스토리: 프론트 저장X, 커서 기반
• AI 챗봇 SSE 방식: fetch 방식 (요청 단위로 연결 열고 닫기 방식)
• AI SSE 응답 형식: data: {"chunk": "...", "done": false} / done: true일때만 messageId 포함
• AI 챗봇 SSE와 기존 SSE 분리: 기존 /v2/sse/connection 글로벌 SSE와 분리
• 다중탭 동기화: 기존 글로벌 분석 상태 sse 연결처럼 단일탭으로 상정하고 개발

라우트 경로

• 매물 채팅방 목록: /chat/property/rooms
• 매물 1:1 채팅방: /chat/property/[roomId]
• AI 챗봇: /chat/ai/[contractId]

진입점

• 매물 상세 → 하단 1:1 채팅 버튼
• 내 매물 관리 → 우측 상단 채팅 목록 버튼
• 보관함 → 분석 결과 페이지 → 우측 하단 플로팅 버튼 (AI 챗봇)

구현 기능 목록

내 매물 페이지

• 채팅 목록 이동 버튼(우측 상단)
• 미읽음 메시지 수 뱃지

채팅방 목록 페이지

• 상대 프로필 사진, 이름
• 마지막 채팅 내용
• 미읽음 메시지 수
• 시간

채팅방 페이지

• 헤더

  • 왼쪽: 뒤로가기 버튼
  • 타이틀: 상대방 이름
  • 오른쪽: 옵션 버튼(나가기 등)

• 매물 정보 카드(헤더 아래 고정)

  • 매물 썸네일, 제목, 가격
  • 클릭 시 매물 상세로 이동
  • 매물 상태가 숨김, 삭제인 경우 삭제된 매물 처리

• 메시지 목록

  • 날짜 구분선
  • 메시지 전송 시간
  • 상대방 읽음 표시
  • 위로 스크롤 시 이전 메시지 로드 (커서 기반)
  • 전송 실패 시 재전송/취소 버튼
  • 빈 상태 안내 문구

• 미디어

  • 이미지 미리보기 + 크게 보기
  • 동영상 썸네일 미리보기 + 크게 실행

• 입력 영역

  • 메시지 입력 필드
  • 첨부하기 버튼
  • 전송 버튼