[Fix] 채팅방 구독 해지 로직 개선

[grimza99]

🔎 작업 사항

• 채팅방 구독 해지 로직 개선
• 채팅방 이동을 관리하는 훅 수정

❗️ 전달 사항

e.g. ) npm i 하세요 ...

➕ 관련 이슈

Summary by CodeRabbit

• Bug Fixes
  • 채팅방 전환 시 동일 방 선택에 대한 불필요한 이동을 방지합니다.
  • 채팅 다이얼로그 닫을 때 현재 방이 정확히 종료되고 잔여 메시지를 정리합니다.
  • 방 나가기 이벤트 전송과 클린업을 일관되게 수행해 안정성을 높였습니다.
• Refactor
  • 토큰 조회 방식을 정리하고 불필요한 훅을 제거해 연결 로직을 단순화했습니다.
  • 소켓 상태를 숫자 기반 leavedRoom으로 통일해 상태 처리 일관성을 개선했습니다.
• Style
  • 빈 상태 경고 영역의 중복 높이 스타일을 정리했습니다.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

채팅 다이얼로그 닫기/방 전환 시 숫자 roomId를 전달해 소켓 스토어의 leavedRoom으로 기록하도록 변경. useLeaveChatRoom 훅으로 방 떠나기 발행과 정리 실행. 토큰 획득은 커스텀 훅 제거 후 js-cookie에서 쿠키로 대체. 관련 스토어/타입/리스트 UI 정리.

Changes

Cohort / File(s)	Summary
Chat dialog trigger & page wiring src/app/(auth)/(navigationsBarLayout)/@chatDialog/page.tsx, src/features/chat/hooks/useChatDialogTrigger.ts	다이얼로그 onOpenChange에서 closeChatDialog(Number(roomId)) 호출로 변경. closeChatDialog 시그니처를 currentRoomId: number로 업데이트하고 setLeavedRoom 사용. 방 전환 시 동일 방이면 조기 반환, 이전 방 ID를 setLeavedRoom에 전달.
WebSocket leave flow src/features/chat/hooks/socket/useLeaveChatRoom.ts	파라미터 제거하고 내부에서 연결 참조/상태 사용. isLeaveRoom → leavedRoom 사용. /chat/rooms/${leavedRoom}/left로 발행하고 본문에 String(leavedRoom). 완료 후 항상 clearMessages() 실행. 의존성 [leavedRoom] 정리.
WebSocket token connect src/features/chat/hooks/socket/useConnectChatWebSocket.ts	토큰 소스 useAccessToken() 제거, js-cookie의 cookies.get('accessToken')로 대체. 가져오기/의존성 정리.
Socket store & types src/features/chat/model/useChatWebSocketStore.ts, src/features/chat/model/useChatWebSocketStore.types.ts	상태 isLeaveRoom:boolean → leavedRoom:number, 액션 setIsLeaved(boolean) → setLeavedRoom(number). INITIAL_STATE와 공개 액션 매핑 갱신.
UI components src/features/chat/ui/chatRoom/index.tsx, src/features/chat/ui/chatRoomList/index.tsx	chatRoom에 useLeaveChatRoom 훅 도입, 주석 처리된 리셋 로직 제거. chatRoomList 경고 div에서 중복 h-full 클래스 제거.
Shared auth hook removal src/shared/hooks/useAuthToken.ts, src/shared/index.ts	useAccessToken 훅 파일 및 인덱스 재익스포트 삭제. 쿠키 기반 접근으로 이관.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Dialog as ChatDialog
  participant Trigger as useChatDialogTrigger
  participant Store as ChatWebSocketStore
  participant Room as useLeaveChatRoom
  participant WS as STOMP Broker

  User->>Dialog: 닫기 (onOpenChange=false)
  Dialog->>Trigger: closeChatDialog(roomId:number)
  Trigger->>Store: setLeavedRoom(roomId)
  note over Store: leavedRoom = roomId

  Store-->>Room: leavedRoom 변경 감지
  Room->>WS: SEND /chat/rooms/{leavedRoom}/left\nbody: "{leavedRoom}"
  Room->>Room: clearMessages() (finally)

Loading

sequenceDiagram
  autonumber
  participant Hook as useConnectChatWebSocket
  participant Cookies as js-cookie
  participant WS as STOMP Client

  Hook->>Cookies: get('accessToken')
  Cookies-->>Hook: accessToken|string|undefined
  Hook->>WS: connect(headers{Authorization: Bearer <token>})
  WS-->>Hook: connected / error (기존 동일 흐름)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• [Fix] problem submit & problem git push #124 — 토큰 획득 경로를 훅/세션에서 쿠키로 전환하는 유사 변경.
• fix : chat 관련 웹소켓 로직 수정  #88 — 동일 채팅 WebSocket 모듈들에서 leave 상태/다이얼로그 방 ID 처리 변경.
• fix : 페이지별 디자인 일괄 적용 #125 — 다이얼로그 onOpenChange 핸들러/트리거 연동 관련 선행 변경.

Suggested labels

fix, refactoring

Poem

작은 발로 탁, 방을 나왔지요 🐇
숫자 ID 품에 안고 “Left!” 신호 쏘고,
쿠키 속 달빛 토큰 한 입 베어 물고,
메시지는 쓱—정리, 창은 살짝 닫고.
뛰는 심장 두근두근, 다음 방으로 고!

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/chat

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2f6b72b and 660c955.

📒 Files selected for processing (10)

• src/app/(auth)/(navigationsBarLayout)/@chatDialog/page.tsx (1 hunks)
• src/features/chat/hooks/socket/useConnectChatWebSocket.ts (1 hunks)
• src/features/chat/hooks/socket/useLeaveChatRoom.ts (2 hunks)
• src/features/chat/hooks/useChatDialogTrigger.ts (2 hunks)
• src/features/chat/model/useChatWebSocketStore.ts (2 hunks)
• src/features/chat/model/useChatWebSocketStore.types.ts (3 hunks)
• src/features/chat/ui/chatRoom/index.tsx (2 hunks)
• src/features/chat/ui/chatRoomList/index.tsx (1 hunks)
• src/shared/hooks/useAuthToken.ts (0 hunks)
• src/shared/index.ts (0 hunks)

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}