From 232e188e9da64eac3555bb0201bea8788ca89326 Mon Sep 17 00:00:00 2001
From: hojpegmafia <theghtjd@gmail.com>
Date: Wed, 12 Aug 2026 11:50:35 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=EC=A0=84=EC=B2=B4=20=EA=B8=B0?=
 =?UTF-8?q?=EC=97=AC=EB=8F=84=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AC=B4?=
 =?UTF-8?q?=ED=95=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/all-contribution-page.tsx | 42 ++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/pages/all-contribution-page.tsx b/src/pages/all-contribution-page.tsx
index 316fbfa..46d1e5a 100644
--- a/src/pages/all-contribution-page.tsx
+++ b/src/pages/all-contribution-page.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { getAllContributions } from '../apis/contribution';
 import logo from '../assets/icons/logo.svg';
@@ -82,6 +83,7 @@ function ContributionFeedCard({ feed }: { feed: ContributionFeed }) {
 }
 
 export default function AllContributionPage() {
+  const loadMoreRef = useRef<HTMLDivElement>(null);
   const {
     data,
     isPending,
@@ -102,6 +104,29 @@ export default function AllContributionPage() {
       lastPage.hasNext ? lastPage.nextCursor : undefined,
   });
 
+  useEffect(() => {
+    const target = loadMoreRef.current;
+
+    if (!target) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (
+          entry?.isIntersecting &&
+          hasNextPage &&
+          !isFetchingNextPage
+        ) {
+          void fetchNextPage();
+        }
+      },
+      { rootMargin: '200px 0px' },
+    );
+
+    observer.observe(target);
+
+    return () => observer.disconnect();
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+
   if (isPending) {
     return (
       <div className='flex min-h-[calc(100dvh-56px)] items-center justify-center bg-[#F9FBFB]'>
@@ -152,16 +177,13 @@ export default function AllContributionPage() {
           </p>
         )}
 
-        {hasNextPage && (
-          <button
-            type='button'
-            onClick={() => fetchNextPage()}
-            disabled={isFetchingNextPage}
-            className='mt-5 flex h-12 w-full items-center justify-center rounded-full bg-white text-sm font-bold text-main-green2 shadow-lg shadow-black/5 disabled:cursor-not-allowed disabled:opacity-60'
-          >
-            {isFetchingNextPage ? '불러오는 중...' : '더 보기'}
-          </button>
-        )}
+        <div
+          ref={loadMoreRef}
+          className='flex min-h-12 items-center justify-center'
+          aria-live='polite'
+        >
+          {isFetchingNextPage && <LoadingSpinner />}
+        </div>
       </div>
     </div>
   );