feat [#52] 롤링페이퍼에 달린 메시지 목록에 무한 스크롤 구현

Author: cskime

src/features/message/api/messages.js

@@ -1,5 +1,8 @@
+import axios from "axios";
 import { apiClient } from "../../../api/client";
 
+let nextPage;
+
 async function getMessages({ recipientId, limit, page = 1 }) {
   const searchParams = new URLSearchParams();
   searchParams.append("page", page);
@@ -15,7 +18,23 @@ async function getMessages({ recipientId, limit, page = 1 }) {
   }
 
   const data = response.data;
+  nextPage = data.next;
+
+  return data.results;
+}
+
+async function getNextPageMessages() {
+  if (!nextPage) return;
+
+  const response = await axios.get(nextPage);
+  if (response.status !== 200) {
+    throw new Error("Message data를 가져오는데 실패했습니다.");
+  }
+
+  const data = response.data;
+  nextPage = data.next;
+
   return data.results;
 }
 
-export { getMessages };
+export { getMessages, getNextPageMessages };

src/features/message/components/messages-grid.jsx

@@ -1,6 +1,8 @@
+import { useRef } from "react";
 import { useNavigate, useParams } from "react-router";
 import styled from "styled-components";
 import Modal from "../../../components/modal/modal.jsx";
+import { useIntersectionObserver } from "../../../hooks/use-intersection-observer.jsx";
 import { media } from "../../../utils/media.js";
 import MessageCardAdd from "./message-card-add.jsx";
 import MessageCardDetail from "./message-card-detail.jsx";
@@ -22,9 +24,16 @@ const StyledRollingPaperMessagesGrid = styled.div`
   }
 `;
 
-function MessagesGrid({ isEditing, messages, onDelete }) {
+function MessagesGrid({ isEditing, messages, onDelete, onInfiniteScroll }) {
   const navigate = useNavigate();
   const { id } = useParams();
+  const infiniteScrollTargetRef = useRef();
+
+  const observerCallback = (entry) => {
+    if (!entry.isIntersecting) return;
+    onInfiniteScroll();
+  };
+  useIntersectionObserver(infiniteScrollTargetRef, observerCallback);
 
   const handleAddClick = () => {
     navigate(`/post/${id}/message`);
@@ -55,6 +64,7 @@ function MessagesGrid({ isEditing, messages, onDelete }) {
           </Modal>
         )
       )}
+      <div ref={infiniteScrollTargetRef}></div>
     </StyledRollingPaperMessagesGrid>
   );
 }

src/hooks/use-intersection-observer.jsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+function useIntersectionObserver(targetRef, callback) {
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(callback);
+    });
+
+    if (targetRef) {
+      observer.observe(targetRef.current);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [targetRef, callback]);
+}
+
+export { useIntersectionObserver };

src/pages/messages-page.jsx

@@ -4,7 +4,10 @@ import styled from "styled-components";
 import { OutlinedButton, PrimaryButton } from "../components/button/button";
 import BUTTON_SIZE from "../components/button/button-size";
 import BACKGROUND_COLOR from "../components/color/background-color";
-import { getMessages } from "../features/message/api/messages";
+import {
+  getMessages,
+  getNextPageMessages,
+} from "../features/message/api/messages";
 import MessagesGrid from "../features/message/components/messages-grid";
 import { getRecipient } from "../features/rolling-paper/api/recipients";
 import RollingPaperHeader from "../features/rolling-paper/components/header/rolling-paper-header";
@@ -113,6 +116,22 @@ function MessagesPage() {
     console.log(`Delete Message ${messageId}`);
   };
 
+  const handleInfiniteScroll = async () => {
+    const messages = await getNextPageMessages();
+    if (!messages) return;
+
+    setMessages((prev) => {
+      const newMessages = [...prev];
+
+      for (const message of messages) {
+        if (newMessages.find((value) => value.id === message.id)) continue;
+        newMessages.push(message);
+      }
+
+      return newMessages;
+    });
+  };
+
   useEffect(() => {
     async function fetchRollingPaper() {
       try {
@@ -159,6 +178,7 @@ function MessagesPage() {
                 isEditing={isEditing}
                 messages={messages}
                 onDelete={handleMessageDelete}
+                onInfiniteScroll={handleInfiniteScroll}
               />
             </div>
           </Content>