✨ 입장/퇴장 메시지 수신 시 모각코 정보 리페칭

- useChatting 훅에서 join/leave 조건을 판별하기 위한 userIdRef 선언
boostcampwm2023 · Dec 10, 2023 · 9e974da · 9e974da
1 parent 4803c91
commit 9e974da
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 16 deletions.
diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/index.tsx b/app/frontend/src/components/Sidebar/Contents/Chatting/index.tsx
@@ -57,6 +57,7 @@ export function Chatting({
         participatedRef.current.nickname,
         participatedRef.current.id,
       );
+      leaveRoom();
       resetChatItems();
       participatedRef.current = undefined;
     }
@@ -72,13 +73,7 @@ export function Chatting({
     leaveRoom,
   ]);
 
-  useEffect(() => {
-    if (!userData) {
-      return;
-    }
-
-    return () => leaveRoom(userData.id);
-  }, [userData, leaveRoom]);
+  useEffect(() => () => leaveRoom(), [leaveRoom]);
 
   if (!userData) {
     return (

diff --git a/app/frontend/src/hooks/useChatting.ts b/app/frontend/src/hooks/useChatting.ts
@@ -5,14 +5,18 @@ import {
   ChatMessage,
   StatusType,
 } from '@morak/chat/src/interface/message.interface';
+import { useQueryClient } from '@tanstack/react-query';
 
 import { URL } from '@/constants';
+import { queryKeys } from '@/queries';
 
 const socketClient = new SocketClient(URL.SOCKET, URL.SOCKET_PATH);
 
 export function useChatting(postId: string) {
   const [chatItems, setChatItems] = useState<ChatMessage[]>([]);
+  const userIdRef = useRef<string | null>(null);
   const lastDateRef = useRef<Date | null | undefined>(undefined);
+  const queryClient = useQueryClient();
 
   const sendMessage = (message: string, userId: string) => {
     socketClient.sendMessage({
@@ -82,29 +86,46 @@ export function useChatting(postId: string) {
     () =>
       socketClient.subscribeToChat(
         (status: StatusType, msgs: ChatMessage[]) => {
-          if (status === 200) {
-            setChatItems((items) => [...items, ...msgs]);
+          if (status !== 200) {
+            return;
+          }
+
+          setChatItems((items) => [...items, ...msgs]);
+          if (msgs.length === 1 && msgs[0].messageType === 'notification') {
+            queryClient.invalidateQueries({
+              queryKey: queryKeys.mogaco.detail(postId).queryKey,
+            });
           }
         },
       ),
-    [],
+    [postId, queryClient],
   );
 
   const joinRoom = useCallback(
-    (userId: string, callback?: () => void) =>
+    (userId: string, callback?: () => void) => {
+      if (userIdRef.current) {
+        return;
+      }
+
+      userIdRef.current = userId;
       socketClient.joinRoom({ user: userId, room: postId }, (status) => {
         if (status === 200) {
           subscribeToChat();
           callback?.();
         }
-      }),
+      });
+    },
     [postId, subscribeToChat],
   );
 
-  const leaveRoom = useCallback(
-    (userId: string) => socketClient.leaveRoom({ user: userId, room: postId }),
-    [postId],
-  );
+  const leaveRoom = useCallback(() => {
+    if (!userIdRef.current) {
+      return;
+    }
+
+    socketClient.leaveRoom({ user: userIdRef.current, room: postId });
+    userIdRef.current = null;
+  }, [postId]);
 
   const resetChatItems = useCallback(() => {
     setChatItems([]);