[캠퍼스] 채팅 polling 마이그레이션

[dooohun]

@claude 리뷰 요청

• Close [캠퍼스] 채팅 polling 적용 #1176

What is this PR? 🔍

• 기능 : polling 마이그레이션
• issue : [캠퍼스] 채팅 polling 적용 #1176

Changes 📝

• 채팅 polling으로 마이그레이션 적용했습니다.
• 쪽지 목록 화면, 쪽지 대화방 진입 시 polling 되도록 적용
• 화면에서 unmount 될 때 사용자 세션을 명시적으로 제거

Tanstack Query refetchInterval 기능을 사용하여 polling을 구현하였습니다.

ScreenShot 📷

N/A

Test CheckList ✅

• polling 요청 확인
• 세션 제거 확인

Precaution

N/A

✔️ Please check if the PR fulfills these requirements

• It's submitted to the correct branch, not the develop branch unconditionally?
• If on a hotfix branch, ensure it targets main?
• There are no warning message when you run yarn lint

[claude]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.

[claude]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.

[claude]

Claude finished @dooohun's task in 1m 51s —— View job

---

코드 리뷰 완료 ✅

이 PR은 SharedWorker/WebSocket 기반 채팅 시스템을 TanStack Query의 refetchInterval을 사용한 polling 방식으로 마이그레이션하는 작업입니다. 전체적으로 코드 복잡도가 크게 감소하였으며 (355 추가, 1380 삭제), 유지보수성이 향상되었습니다.

---

주요 변경사항 요약

• WebSocket/STOMP 의존성 제거 (@stomp/stompjs)
• SharedWorker 삭제 (chat.shared-worker.ts)
• useChatPolling 훅 도입 (10초 polling interval)
• IndexedDB 캐싱 로직 단순화 (chatDB.ts)
• 채팅방 퇴장 시 명시적 세션 정리

---

발견된 이슈

Severity	Location	Issue
[P1]	useChatPolling.ts:132-134	sendMessage onError에 isKoinError() 타입 가드 미사용
[P1]	useChatPolling.ts:153-155	leaveChatroom onError에 isKoinError() 타입 가드 미사용
[P2]	useChatPolling.ts:88-91	leaveRoom 에러 무시 (로깅 권장)

프로젝트 컨벤션에 따라 mutation의 onError에서는 isKoinError() 타입 가드를 사용해야 합니다. 자세한 수정 제안은 각 인라인 코멘트를 참고해주세요.

---

긍정적인 점 👍

1. 코드 복잡도 대폭 감소: SharedWorker + WebSocket 구조에서 단순한 polling 구조로 변경되어 유지보수가 쉬워졌습니다.
2. 적절한 offline 처리: isOnline 상태에 따라 polling 활성화/비활성화 및 UI 피드백이 잘 구현되어 있습니다.
3. IndexedDB 캐싱: 오프라인 상태에서도 이전 메시지를 볼 수 있도록 적절히 구현되어 있습니다.
4. 세션 정리: 채팅방 전환/unmount 시 leaveRoom을 호출하여 서버 세션을 정리하는 로직이 잘 구현되어 있습니다.
5. refetchIntervalInBackground: false: 탭이 비활성 상태일 때 불필요한 요청을 방지합니다.

---

최종 의견

전체적으로 잘 구현된 PR입니다. [P1] 이슈인 에러 핸들링 부분만 수정하면 머지해도 좋을 것 같습니다.

[ff1451]

고생하셨습니다!

[ff1451]

채팅이라는 특성을 생각해봤을 때 10초는 너무 길다고 생각이 들어요
코넥트에서는 1초마다 적용중이고, 안드로이드는 우진님께 여쭤보니 이번에 50ms마다 반복할 예정이라고 해서 다른 트랙과 논의를 해서 통일하는 것도 좋을 것 같아요

[dooohun]

요건 백엔드에서 작성해준 내용을 기준으로 작성한건데, 논의가 필요해보이네요! 논의 후 수정하겠습니다.

[claude]

Claude finished @dooohun's task in 1m 38s —— View job

---

코드 리뷰 완료 ✅

이 PR은 SharedWorker/WebSocket 기반 채팅 시스템을 TanStack Query의 refetchInterval을 사용한 polling 방식으로 마이그레이션하는 작업입니다.

---

이전 리뷰 피드백 반영 상태

이슈	상태	비고
[P1] sendMessage onError isKoinError() 미사용	✅ 수정됨	useChatPolling.ts:140-147
[P1] leaveChatroom onError isKoinError() 미사용	✅ 수정됨	useChatPolling.ts:166-172
[P2] leaveRoom 에러 무시	✅ 수정됨	useChatPolling.ts:91-97
IndexedDB 스토리지 관리	✅ 수정됨	TTL 3일, 방당 최대 50개 메시지

---

긍정적인 점 👍

1. 코드 복잡도 대폭 감소: SharedWorker + WebSocket 구조에서 단순한 polling 구조로 변경되어 유지보수가 용이해졌습니다.

2. 프로젝트 컨벤션 준수: 모든 mutation onError에서 isKoinError() 타입 가드를 올바르게 사용하고 있습니다.

3. IndexedDB 캐싱 개선:

   • TTL 3일 (CACHE_TTL_MS)
   • 방당 최대 50개 메시지 (MAX_MESSAGES_PER_ROOM)
   • 모듈 로드 시 만료 캐시 자동 정리 (cleanupExpiredCache())

4. 오프라인 처리: isOnline 상태에 따라 polling 활성화/비활성화 및 UI 피드백이 잘 구현되어 있습니다.

5. 백그라운드 최적화: refetchIntervalInBackground: false 설정으로 탭 비활성 시 불필요한 요청을 방지합니다.

---

발견된 이슈

없습니다. 이전 리뷰에서 지적된 모든 이슈가 수정되었습니다.

---

참고사항

ff1451님의 리뷰 코멘트에서 논의 중인 사항들:

1. Polling 주기 (10초): 백엔드와 논의가 필요한 사항으로, 채팅 특성상 더 짧은 주기가 필요할 수 있습니다. 이 부분은 팀 간 논의 후 조정해주세요.

2. 중복 토스트 문제: 현재 코드에서는 sendChatMessage 호출 시 페이지(index.tsx)에서 별도의 에러 토스트를 띄우지 않고, useChatPolling 훅의 mutation onError에서만 처리하고 있어 중복 문제가 해결된 것으로 보입니다.

---

최종 의견

이전 리뷰에서 지적된 모든 이슈가 잘 수정되었습니다. Polling 주기에 대한 팀 간 논의만 완료되면 머지해도 좋을 것 같습니다. 👍

[ff1451]

고생하셨습니다!