Merge pull request #137 from ezcode-my/fix/chat

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

Author: grimza99

src/app/(auth)/(navigationsBarLayout)/@chatDialog/page.tsx

@@ -19,7 +19,7 @@ export default function ChatDialog({}) {
       open={!!roomId}
       onOpenChange={(open) => {
         if (!open) {
-          closeChatDialog();
+          closeChatDialog(Number(roomId));
         }
       }}
     >

src/features/chat/hooks/socket/useConnectChatWebSocket.ts

@@ -3,12 +3,12 @@ import SockJS from 'sockjs-client';
 import { Client } from '@stomp/stompjs';
 import { BASE_URL } from '@/constants/env';
 import { useEffect } from 'react';
-import useAccessToken from '@/shared/hooks/useAuthToken';
 import { sharedStompRef } from '@/shared/lib/stomp/sharedStompRef';
 import { useChatWebSocketActions } from '../../model/useChatWebSocketStore';
+import cookies from 'js-cookie';
 
 export default function useConnectChatWebSocket() {
-  const accessToken = useAccessToken();
+  const accessToken = cookies.get('accessToken');
   const chatStompRef = sharedStompRef;
   const { setIsConnected } = useChatWebSocketActions();
 

src/features/chat/hooks/socket/useLeaveChatRoom.ts

@@ -1,24 +1,22 @@
 'use client';
-import { RefObject, useEffect } from 'react';
-import { ChatRoomId } from '../../types';
+import { useEffect } from 'react';
 import useChatWebSocketStore, { useChatWebSocketActions } from '../../model/useChatWebSocketStore';
-import { Client } from '@stomp/stompjs';
+import { useConnectWebSocket } from '../..';
 
-export default function useLeaveChatRoom(
-  chatStompRef: RefObject<Client | null>,
-  chatroomId: ChatRoomId
-) {
-  const { isLeaveRoom } = useChatWebSocketStore();
+export default function useLeaveChatRoom() {
+  // chatStompRef: RefObject<Client | null>,
+  const { chatStompRef } = useConnectWebSocket();
+
+  const { leavedRoom } = useChatWebSocketStore();
   const { clearMessages } = useChatWebSocketActions();
 
   useEffect(() => {
-    if (chatroomId === 0 || !chatStompRef?.current || !isLeaveRoom) return;
-    console.log('퇴장 훅 실행');
+    if (leavedRoom === 0 || !chatStompRef?.current) return;
     if (chatStompRef.current?.connected) {
       try {
         chatStompRef.current.publish({
-          destination: `/chat/rooms/${chatroomId}/leave`,
-          body: String(chatroomId),
+          destination: `/chat/rooms/${leavedRoom}/left`,
+          body: String(leavedRoom),
         });
       } catch (err) {
         console.error('퇴장 메시지 전송 오류', err);
@@ -28,5 +26,5 @@ export default function useLeaveChatRoom(
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chatStompRef, chatroomId, isLeaveRoom]);
+  }, [chatStompRef, leavedRoom]);
 }

src/features/chat/hooks/useChatDialogTrigger.ts

@@ -1,11 +1,12 @@
 import { PATHS } from '@/constants/paths';
 import { useRouter, useSearchParams } from 'next/navigation';
+import { useChatWebSocketActions } from '../model/useChatWebSocketStore';
 
 export default function useChatDialogTrigger() {
   const searchParams = useSearchParams();
   const router = useRouter();
   const params = new URLSearchParams(searchParams.toString());
-  // const { setIsLeaved } = useChatWebSocketActions();
+  const { setLeavedRoom } = useChatWebSocketActions();
 
   const openChatDialog = () => {
     params.set(PATHS.CHAT.SEARCHPARAMS_ID, 'NaN');
@@ -17,17 +18,15 @@ export default function useChatDialogTrigger() {
   const handleSwitchRoom = (roomId: number, title: string) => {
     const params = new URLSearchParams(searchParams.toString());
     const prevRoomId = params.get(PATHS.CHAT.SEARCHPARAMS_ID);
-    if (prevRoomId && Number(prevRoomId) !== roomId) {
-      // setIsLeaved(true);
-      params.set(PATHS.CHAT.SEARCHPARAMS_ID, String(roomId));
-      params.set(PATHS.CHAT.SEARCHPARAMS_TITLE, title);
-
-      router.push(`?${params.toString()}`);
-    }
+    if (prevRoomId === String(roomId)) return;
+    setLeavedRoom(Number(prevRoomId));
+    params.set(PATHS.CHAT.SEARCHPARAMS_ID, String(roomId));
+    params.set(PATHS.CHAT.SEARCHPARAMS_TITLE, title);
+    router.push(`?${params.toString()}`);
   };
 
-  const closeChatDialog = () => {
-    // setIsLeaved(true);
+  const closeChatDialog = (currentRoomId: number) => {
+    setLeavedRoom(currentRoomId);
     params.delete(PATHS.CHAT.SEARCHPARAMS_ID);
     params.delete(PATHS.CHAT.SEARCHPARAMS_TITLE);
 

src/features/chat/model/useChatWebSocketStore.ts

@@ -13,9 +13,9 @@ const useChatWebSocketStore = create<IChatWebSocketStore>()(
           isConnected: status,
         });
       },
-      setIsLeaved: (status) => {
+      setLeavedRoom: (status) => {
         set({
-          isLeaveRoom: status,
+          leavedRoom: status,
         });
       },
 
@@ -90,7 +90,7 @@ export function useChatWebSocketActions() {
   return useChatWebSocketStore(
     useShallow((state) => ({
       setIsConnected: state.actions.setIsConnected,
-      setIsLeaved: state.actions.setIsLeaved,
+      setLeavedRoom: state.actions.setLeavedRoom,
 
       setInitRooms: state.actions.setInitRooms,
       setRooms: state.actions.setRooms,

src/features/chat/model/useChatWebSocketStore.types.ts

@@ -19,7 +19,7 @@ export interface IChatMessage {
 /** store state 인터페이스 */
 export interface IInitialState {
   isConnected: boolean;
-  isLeaveRoom: boolean;
+  leavedRoom: number;
   rooms: IChatRoom[] | [];
   initMessages: IChatMessage[] | [];
   realTimeMessages: IChatMessage[] | [];
@@ -28,7 +28,7 @@ export interface IInitialState {
 /**store 초기 상태*/
 export const INITIAL_STATE: IInitialState = {
   isConnected: false,
-  isLeaveRoom: false,
+  leavedRoom: 0,
   rooms: [],
   initMessages: [],
   realTimeMessages: [],
@@ -38,7 +38,7 @@ export const INITIAL_STATE: IInitialState = {
 interface IChatWebSocketStoreActions {
   actions: {
     setIsConnected: (status: boolean) => void;
-    setIsLeaved: (status: boolean) => void;
+    setLeavedRoom: (status: number) => void;
     setInitRooms: (rooms: IChatRoom[] | []) => void;
     setRooms: (response: IChatRoom) => void;
     setInitMessages: (message: IChatMessage[]) => void;

src/features/chat/ui/chatRoom/index.tsx

@@ -7,6 +7,7 @@ import ChatMessage from '../chatMessage/ChatMessage';
 import ChatRoomHeader from './ChatRoomHeader';
 import { useMyInfoQuery } from '@/entities/mypage/model/query';
 import { useEffect, useRef } from 'react';
+import useLeaveChatRoom from '../../hooks/socket/useLeaveChatRoom';
 
 interface ChatProps {
   roomId: number;
@@ -15,15 +16,11 @@ interface ChatProps {
 
 export default function ChatRoom({ roomId, roomTitle }: ChatProps) {
   useJoinChatRoom(roomId);
+  useLeaveChatRoom();
   const { data } = useMyInfoQuery();
   const endRef = useRef<HTMLDivElement>(null);
   const nickname = data?.data.result.nickname;
   const { initMessages, realTimeMessages } = useChatWebSocketStore();
-  // const { setIsLeaved } = useChatWebSocketActions();
-
-  // useEffect(() => {
-  //   setIsLeaved(false);
-  // }, [roomId]);
 
   useEffect(() => {
     if (endRef.current) {

src/features/chat/ui/chatRoomList/index.tsx

@@ -45,7 +45,7 @@ export default function ChatRoomList({ selectedRoomId }: IChatRoomListProps) {
             })}
           </ul>
         ) : (
-          <div className="h-full absolute top-0 left-0 w-full h-full flex items-center justify-center">
+          <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
             생성된 채팅방이 없습니다.
           </div>
         )}

src/shared/hooks/useAuthToken.ts

@@ -17,4 +17,3 @@ export type { ProblemId } from './types/problem.type.ts';
 //lib
 
 //hooks
-export { default as useAccessToken } from './hooks/useAuthToken';