채팅 목록 렌더링 및 연결 흐름 리팩토링

[0Jaemin0]

🔨 설명

채팅 목록 렌더링과 스크롤 처리 방식을 개선하고, 채팅방 이미지 표시 및 웹소켓 연결 흐름을 점검합니다.

현재 채팅 화면은 InfiniteScroll 라이브러리를 사용하고 있어 스크롤 감지와 메시지 로딩 흐름을 세밀하게 제어하기 어렵습니다. 채팅 메시지가 많아지는 상황을 고려해 Intersection Observer API와 가상 스크롤 기반으로 구조를 개선합니다.

✅ 상세 내용 및 할 일

• InfiniteScroll 라이브러리 사용 제거
• Intersection Observer API 기반 이전 메시지 로딩 구현
• 채팅 목록 가상 스크롤 적용 검토 및 구현
• 채팅방 이미지 크기 및 비율 처리 방식 개선
• 웹소켓 연결 끊김 시 재연결 처리 방식 검토
• 재연결 시 중복 연결 또는 중복 이벤트 구독이 발생하지 않는지 확인

🙋🏻 비고

• 스크롤 위치 보정은 채팅 사용성에 직접 영향을 주므로 실제 화면에서 동작을 확인합니다.
• 웹소켓 재연결 정책은 서버 동작과 충돌하지 않는 범위에서 적용합니다.