From ba592a8a194b14936ed92382991058c6051c9186 Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Sun, 11 Aug 2024 23:01:32 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9E=90=EC=9C=A0=EA=B2=8C=EC=8B=9C?=
 =?UTF-8?q?=ED=8C=90=20=EB=AC=B4=ED=95=9C=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/api/useFreeboards.js       | 15 ++++++++----
 .../FreeboardListPage/FreeboardListPage.jsx   | 23 +++++++++++--------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/frontend/src/hooks/api/useFreeboards.js b/frontend/src/hooks/api/useFreeboards.js
index b17fb5d..a998be4 100644
--- a/frontend/src/hooks/api/useFreeboards.js
+++ b/frontend/src/hooks/api/useFreeboards.js
@@ -1,10 +1,17 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
 import instance from '../../utils/axios/instance';
-import { API_URL } from '../../constants';
+import { API_URL, PAGE_SIZE } from '../../constants';
 
 export function useFreeboards(lectureId, page = 0) {
-  return useSuspenseQuery({
+  return useSuspenseInfiniteQuery({
     queryKey: ['freeboardlist', lectureId, page],
-    queryFn: () => instance.get(`${API_URL}/board?lectureId=${lectureId}&category=freeboard&pageNo=${page}`),
+    queryFn: ({ pageParam = 0 }) =>
+      instance.get(`${API_URL}/board?lectureId=${lectureId}&category=freeboard&pageNo=${pageParam}`),
+    getNextPageParam: (lastPage, allPages) => {
+      if (lastPage.data.length < PAGE_SIZE) {
+        return undefined;
+      }
+      return allPages.length + 1;
+    },
   });
 }
diff --git a/frontend/src/pages/FreeboardListPage/FreeboardListPage.jsx b/frontend/src/pages/FreeboardListPage/FreeboardListPage.jsx
index b82e64a..9cc6462 100644
--- a/frontend/src/pages/FreeboardListPage/FreeboardListPage.jsx
+++ b/frontend/src/pages/FreeboardListPage/FreeboardListPage.jsx
@@ -2,25 +2,28 @@ import { ArticleLink } from '../../components/ArticleLink';
 import ArticleBoard from '../../components/ArticleBoard/ArticleBoard';
 import { useFreeboards } from '../../hooks/api/useFreeboards';
 import { useParams } from 'react-router-dom';
+import IntersectionArea from '../../components/IntersectionArea/IntersectionObserver';
 
 export default function NoticeListPage() {
   const { lectureId } = useParams();
-  const { data } = useFreeboards(lectureId);
-  const notices = data?.data;
+  const { data, fetchNextPage, hasNextPage } = useFreeboards(lectureId);
+  const articles = data?.pages.flatMap((page) => page.data);
 
   return (
     <ArticleBoard
       title="자유게시판"
       canCreate={true}
     >
-      {notices.map?.((notice) => (
-        <ArticleLink
-          key={`${notice.id}`}
-          title={notice.title}
-          sub={`${new Date(notice.createdAt).toLocaleDateString()} ${new Date(notice.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`}
-          to={`${notice.id}`}
-        />
-      ))}
+      {articles.length &&
+        articles.map?.((notice) => (
+          <ArticleLink
+            key={`${notice.id}`}
+            title={notice.title}
+            sub={`${new Date(notice.createdAt).toLocaleDateString()} ${new Date(notice.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`}
+            to={`${notice.id}`}
+          />
+        ))}
+      {hasNextPage && <IntersectionArea onObserve={() => fetchNextPage()} />}
     </ArticleBoard>
   );
 }