♻️ Refactor : 채팅 cursor 값 수정 및 페이지네이션 1차 반영 #163

src/apis/chat.ts

@@ -8,10 +8,11 @@ import { authInstance } from '.';
 // 메시지 기록 조회
 export const getMessage = async (
   roomId: number,
+  cursor?: string,
 ): Promise<ChatMessageResponse[]> => {
-  const cursor = new Date(Date.now() + 9 * 60 * 60 * 1000);
+  const now = new Date(Date.now() + 9 * 60 * 60 * 1000);
   const response = await authInstance.get(`/api/v1/chat/room/${roomId}`, {
-    params: { cursor },
+    params: { cursor: cursor || now },
   });
   return response.data;
 };

src/pages/ChatPage/index.tsx

@@ -42,9 +42,21 @@ const ChatPage = () => {
   };
 
   // 채팅 내용 불러오기
-  const loadMessage = async () => {
-    const messageList = await getMessage(Number(roomId));
-    setMessages(messageList);
+  const loadMessage = async (cursor?: string) => {
+    try {
+      const messageList = await getMessage(Number(roomId), cursor);
+      setMessages((prevMessages) => [...messageList, ...prevMessages]);
+    } catch (error) {
+      toast.error('메시지를 불러오는 중 오류가 발생했습니다.');
+    }
+  };
+
+  // 채팅 무한 스크롤
+  const loadMoreMessages = () => {
+    if (messages.length > 0) {
+      const lastMessageTimestamp = messages[0].timestamp; // 첫 번째 메시지의 타임스탬프 사용
+      loadMessage(lastMessageTimestamp);
+    }
   };
 
   // 소켓 연결
@@ -126,7 +138,15 @@ const ChatPage = () => {
       <MainLayout>
         <HeaderOnlyTitle title={chatTitle} />
         <div className='fixed left-1/2 top-[93px] flex h-[calc(100vh-93px-94px)] w-custom -translate-x-1/2 overflow-hidden'>
-          <div className='overflow-y-auto'>
+          <div
+            className='overflow-y-auto'
+            onScroll={(e) => {
+              const target = e.target as HTMLDivElement;
+              if (target.scrollTop === 0) {
+                loadMoreMessages();
+              }
+            }}
+          >
             <MessageContainer
               messages={messages}
               user={user}