From 0b26c87e347226e51d0002ad93dd88adca9e1f69 Mon Sep 17 00:00:00 2001
From: Jiseung <js43o@naver.com>
Date: Sun, 10 Dec 2023 19:04:31 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=EC=9D=B4=EC=A0=84=20=EB=A9=94?=
 =?UTF-8?q?=EC=8B=9C=EC=A7=80=20=ED=8E=98=EC=B9=AD=20=EC=8B=9C=20=EC=B1=84?=
 =?UTF-8?q?=ED=8C=85=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=9C=84=EC=B9=98?=
 =?UTF-8?q?=EA=B0=80=20=EC=9E=98=EB=AA=BB=20=EC=A7=80=EC=A0=95=EB=90=98?=
 =?UTF-8?q?=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Sidebar/Contents/Chatting/ChatList.tsx    | 16 +++--
 app/frontend/src/hooks/useChatting.ts         | 65 +++++++++++--------
 2 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/ChatList.tsx b/app/frontend/src/components/Sidebar/Contents/Chatting/ChatList.tsx
index 7dc536d7c..4b526d9f9 100644
--- 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
index 82cf76f24..c40b42ee0 100644
--- 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,