🐛 이전 메시지 페칭 시 채팅 스크롤 위치가 잘못 지정되는 문제 수정

boostcampwm2023 · Dec 10, 2023 · 0b26c87 · 0b26c87
1 parent df2f6d9
commit 0b26c87
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 32 deletions.
diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/ChatList.tsx b/app/frontend/src/components/Sidebar/Contents/Chatting/ChatList.tsx
@@ -13,7 +13,7 @@ type ChatListProps = {
   chatItems: ChatMessage[];
   userId: string;
   participants: ResponseParticipant[];
-  fetchPrevMessages: () => void;
+  fetchPrevMessages: (callback: () => void) => void;
 };
 
 export function ChatList({
@@ -26,6 +26,7 @@ export function ChatList({
   const listElemRef = useRef<HTMLUListElement>(null);
   const observableRef = useRef<HTMLDivElement | null>(null);
   const exposed = useObserver(observableRef);
+  const loading = useRef(false);
 
   useEffect(() => {
     if (!listElemRef.current) {
@@ -42,6 +43,9 @@ export function ChatList({
       listElemRef.current.scrollTo({
         top: scrollHeight - prevScrollHeightRef.current,
       });
+      prevScrollHeightRef.current = scrollHeight;
+
+      return;
     }
 
     if (
@@ -51,14 +55,16 @@ export function ChatList({
       listElemRef.current.scrollTo({
         top: scrollHeight - clientHeight,
       });
+      prevScrollHeightRef.current = scrollHeight;
     }
-
-    prevScrollHeightRef.current = scrollHeight;
   }, [chatItems, exposed]);
 
   useEffect(() => {
-    if (exposed) {
-      fetchPrevMessages();
+    if (exposed && !loading.current) {
+      loading.current = true;
+      fetchPrevMessages(() => {
+        loading.current = false;
+      });
     }
   }, [exposed, fetchPrevMessages]);
 

diff --git a/app/frontend/src/hooks/useChatting.ts b/app/frontend/src/hooks/useChatting.ts
@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import SocketClient from '@morak/chat/src/client/index';
 import {
@@ -50,34 +50,37 @@ export function useChatting(postId: string) {
     [postId],
   );
 
-  const fetchPrevMessages = useCallback(() => {
-    if (lastDateRef.current === null) {
-      return;
-    }
-
-    if (lastDateRef.current === undefined) {
-      lastDateRef.current =
-        chatItems.length > 0 ? chatItems[0].date : new Date();
-    }
-
-    socketClient.requestPrevMessage(
-      postId,
-      lastDateRef.current,
-      (status, messages) => {
-        if (status !== 200) {
-          return;
-        }
+  const fetchPrevMessages = useCallback(
+    (callback: () => void) => {
+      if (lastDateRef.current === null) {
+        return;
+      }
+
+      if (lastDateRef.current === undefined) {
+        lastDateRef.current = new Date();
+      }
+
+      socketClient.requestPrevMessage(
+        postId,
+        lastDateRef.current,
+        (status, messages) => {
+          if (status !== 200) {
+            return;
+          }
 
-        if (messages.length === 0) {
-          lastDateRef.current = null;
-          return;
-        }
+          if (messages.length === 0) {
+            lastDateRef.current = null;
+            return;
+          }
 
-        lastDateRef.current = messages[messages.length - 1].date;
-        setChatItems((items) => [...messages.reverse(), ...items]);
-      },
-    );
-  }, [postId, chatItems]);
+          lastDateRef.current = messages[messages.length - 1].date;
+          setChatItems((items) => [...messages.reverse(), ...items]);
+          callback();
+        },
+      );
+    },
+    [postId],
+  );
 
   const subscribeToChat = useCallback(
     () =>
@@ -112,6 +115,14 @@ export function useChatting(postId: string) {
     lastDateRef.current = undefined;
   }, []);
 
+  useEffect(() => {
+    if (lastDateRef.current === null) {
+      return;
+    }
+
+    lastDateRef.current = chatItems.length > 0 ? chatItems[0].date : undefined;
+  }, [chatItems]);
+
   return {
     chatItems,
     resetChatItems,