Merge pull request #419 from js43o/enhance-chatting-3

[Fix] 새로운 채팅 참여자에 대한 정보를 동적으로 리페칭하도록 변경
boostcampwm2023 · Dec 11, 2023 · c0127c5 · c0127c5
2 parents 2e5b5a1 + 5235841
commit c0127c5
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 22 deletions.
diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/ChatList.tsx b/app/frontend/src/components/Sidebar/Contents/Chatting/ChatList.tsx
@@ -74,8 +74,8 @@ export function ChatList({
         return chatItem.messageType === 'talk' ? (
           <MemorizedTalkItem
             key={chatItem.date.toString()}
-            nickname={participantInfo?.nickname || ''}
-            profilePicture={participantInfo?.profilePicture || ''}
+            nickname={participantInfo?.nickname}
+            profilePicture={participantInfo?.profilePicture}
             contents={chatItem.contents}
             date={chatItem.date}
             isMine={chatItem.user === userId}

diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/TalkItem.tsx b/app/frontend/src/components/Sidebar/Contents/Chatting/TalkItem.tsx
@@ -7,8 +7,8 @@ import { UserChip } from '@/components';
 import * as styles from './ChatItem.css';
 
 type TalkItemProps = {
-  nickname: string;
-  profilePicture: string;
+  nickname?: string;
+  profilePicture?: string;
   contents: string;
   date: Date;
   isMine: boolean;

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/components/UserChip/index.css.ts b/app/frontend/src/components/UserChip/index.css.ts
@@ -35,3 +35,7 @@ export const profileImage = style({
   borderRadius: '50%',
   overflow: 'hidden',
 });
+
+export const unknown = style({
+  color: vars.color.grayscale200,
+});
diff --git a/app/frontend/src/components/UserChip/index.tsx b/app/frontend/src/components/UserChip/index.tsx
@@ -4,7 +4,7 @@ import { vars } from '@/styles';
 import * as styles from './index.css';
 
 type UserChipProps = {
-  username: string;
+  username?: string;
   profileSrc?: string;
 };
 
@@ -22,7 +22,9 @@ export function UserChip({ username, profileSrc }: UserChipProps) {
           <Profile width={24} height={24} fill={vars.color.morakGreen} />
         )}
       </div>
-      <span className={styles.nickname}>{username}</span>
+      <span className={`${styles.nickname} ${!username && styles.unknown}`}>
+        {username || '(알 수 없음)'}
+      </span>
     </div>
   );
 }
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([]);