From 4803c91fd8f66a1e0be614da0f781eda0abb5545 Mon Sep 17 00:00:00 2001
From: Jiseung <js43o@naver.com>
Date: Sun, 10 Dec 2023 19:11:59 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=EB=B6=88=ED=95=84?=
 =?UTF-8?q?=EC=9A=94=ED=95=9C=20loading=20=EB=A1=9C=EC=A7=81=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Sidebar/Contents/Chatting/ChatList.tsx    | 10 ++--
 app/frontend/src/hooks/useChatting.ts         | 54 +++++++++----------
 2 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/ChatList.tsx b/app/frontend/src/components/Sidebar/Contents/Chatting/ChatList.tsx
index 4b526d9f9..248770542 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: (callback: () => void) => void;
+  fetchPrevMessages: () => void;
 };
 
 export function ChatList({
@@ -26,7 +26,6 @@ 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) {
@@ -60,11 +59,8 @@ export function ChatList({
   }, [chatItems, exposed]);
 
   useEffect(() => {
-    if (exposed && !loading.current) {
-      loading.current = true;
-      fetchPrevMessages(() => {
-        loading.current = false;
-      });
+    if (exposed) {
+      fetchPrevMessages();
     }
   }, [exposed, fetchPrevMessages]);
 
diff --git a/app/frontend/src/hooks/useChatting.ts b/app/frontend/src/hooks/useChatting.ts
index c40b42ee0..9a9cd94fc 100644
--- a/app/frontend/src/hooks/useChatting.ts
+++ b/app/frontend/src/hooks/useChatting.ts
@@ -50,37 +50,33 @@ export function useChatting(postId: string) {
     [postId],
   );
 
-  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;
-          }
+  const fetchPrevMessages = useCallback(() => {
+    if (lastDateRef.current === null) {
+      return;
+    }
 
-          if (messages.length === 0) {
-            lastDateRef.current = null;
-            return;
-          }
+    if (lastDateRef.current === undefined) {
+      lastDateRef.current = new Date();
+    }
 
-          lastDateRef.current = messages[messages.length - 1].date;
-          setChatItems((items) => [...messages.reverse(), ...items]);
-          callback();
-        },
-      );
-    },
-    [postId],
-  );
+    socketClient.requestPrevMessage(
+      postId,
+      lastDateRef.current,
+      (status, messages) => {
+        if (status !== 200) {
+          return;
+        }
+
+        if (messages.length === 0) {
+          lastDateRef.current = null;
+          return;
+        }
+
+        lastDateRef.current = messages[messages.length - 1].date;
+        setChatItems((items) => [...messages.reverse(), ...items]);
+      },
+    );
+  }, [postId]);
 
   const subscribeToChat = useCallback(
     () =>