[FE] 채팅 연결 문제 해결 및 채팅 API 엔드포인트 리팩토링

[jiva-z]

개요

현재 채팅 기능에서 다음과 같은 문제점들이 발생:

1. WebSocket 연결 및 메시지 전송 문제

• 로컬 환경에서는 정상 작동하나 배포된 백엔드 주소로는 상대방에게 메시지 전송이 안되는 문제
• 현재 하드코딩된 WebSocket URL로 인한 연결 실패
• 배포 환경에서 WebSocket 연결이 되지 않는 문제

2. React DOM Warning

• isMine prop이 DOM 요소에 직접 전달되어 발생하는 경고
• styled-components에서 prop 네이밍 컨벤션 문제

3. API 엔드포인트 관리 개선 필요

• 채팅 관련 API 엔드포인트들이 컴포넌트 내부에 하드코딩되어 있음
• API 엔드포인트 중앙 관리 필요

Tasks

• 배포된 백엔드 주소로 메시지 전송이 가능하도록 WebSocket 연결 설정 수정
• WebSocket URL을 환경 변수로 관리하도록 변경
• styled-components의 prop 네이밍을 $isMine으로 수정하여 DOM 경고 해결
• 채팅 관련 API 엔드포인트를 api.js로 이동
• WebSocket 연결 실패 시 에러 처리 및 사용자 피드백 추가
• 채팅 연결 상태 관리 로직 개선

Expected Results

1. 배포 환경에서 상대방과 정상적으로 메시지 주고받기가 가능해짐
2. WebSocket이 배포된 백엔드 주소로 정상적으로 연결됨
3. React DOM 경고가 해결됨
4. API 엔드포인트가 중앙에서 관리되어 유지보수가 용이해짐
5. 사용자에게 채팅 연결 상태에 대한 적절한 피드백이 제공됨

Additional Notes

• 관련 파일:
  • src/components/chat/ChatRoom.js
  • src/components/chat/ChatMessage.js
  • src/services/api.js

Current Status

• 로컬 환경(localhost:8080)에서는 채팅이 정상 작동
• 배포된 백엔드 주소로는 상대방에게 메시지 전송이 안되는 상태
• WebSocket 연결 실패 에러 발생 중