feat: #88/대시보드 상세 페이지 할 일 카드 무한 스크롤

next.config.mjs

@@ -4,6 +4,7 @@ const nextConfig = {
     //로컬 이미지 테스트 하기 위해 localhost를 넣었습니다.
     domains: ["sprint-fe-project.s3.ap-northeast-2.amazonaws.com", "localhost"],
   },
+  reactStrictMode: false,
 };
 
 export default nextConfig;

src/app/(after-login)/dashboard/[dashboardid]/_components/AddTaskButton.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { useModalStore } from "@/lib/store/useModalStore";
 import Button from "@/components/common/button/Button";
 import Image from "next/image";

src/app/(after-login)/dashboard/[dashboardid]/_components/Column.tsx

@@ -1,23 +1,79 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
 import { DashboardColumn, TaskCardList } from "@/lib/types";
 import { fetchTaskCardList } from "@/lib/apis/cardsApi";
 import { TOKEN_1 } from "@/lib/constants/tokens";
 import EditColumnButton from "./EditColumnButton";
 import AddTaskButton from "./AddTaskButton";
 import TaskCard from "./TaskCard";
 
-export default async function Column({ id, title }: DashboardColumn) {
-  const { cards, totalCount, cursorId } = await fetchTaskCardList({
-    token: TOKEN_1,
-    id: id,
-  });
-  const items: TaskCardList[] = cards;
+const PAGE_SIZE = 3;
+
+export default function Column({ id, title }: DashboardColumn) {
+  const [items, setItems] = useState<TaskCardList[]>([]);
+  const [cursorId, setCursorId] = useState<number | null>(null);
+  const [totalCount, setTotalCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLast, setIsLast] = useState(false);
+  const observerRef = useRef<HTMLDivElement | null>(null);
+
+  const handleLoad = async () => {
+    if (isLoading || isLast) return;
+    setIsLoading(true);
+
+    try {
+      const {
+        cards: newCards,
+        cursorId: nextCursorId,
+        totalCount,
+      } = await fetchTaskCardList({
+        token: TOKEN_1,
+        size: PAGE_SIZE,
+        cursorId,
+        columnId: id,
+      });
+
+      setItems((prev) => [...prev, ...newCards]);
+      setCursorId(nextCursorId);
+      setTotalCount(totalCount);
+
+      if (newCards.length < PAGE_SIZE || nextCursorId === null) {
+        setIsLast(true);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    handleLoad();
+  }, []);
 
-  // 해당 값 사용하게 되면(페이지네이션) 지울 테스트 코드
-  console.log(cursorId);
+  useEffect(() => {
+    if (isLast) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          handleLoad();
+        }
+      },
+      { threshold: 0.5 }
+    );
+
+    const current = observerRef.current;
+    if (current) observer.observe(current);
+
+    return () => {
+      if (current) observer.unobserve(current);
+      observer.disconnect();
+    };
+  }, [cursorId, isLoading, isLast]);
 
   return (
-    <div className="py-4 border-b border-gray-300 tablet:px-5 tablet:pt-[22px] tablet:pb-5 pc:border-b-0 pc:border-r">
-      <div className="flex flex-col gap-6 tablet:gap-[25px]">
+    <div className="h-full py-4 border-b border-gray-300 tablet:px-5 tablet:pt-[22px] tablet:pb-5 pc:border-b-0 pc:border-r">
+      <div className="flex flex-col gap-6 h-full tablet:gap-[25px]">
         <div className="flex justify-between">
           <div className="flex gap-3 items-center">
             <div className="flex gap-2 items-center">
@@ -32,11 +88,20 @@ export default async function Column({ id, title }: DashboardColumn) {
           </div>
           <EditColumnButton columnId={id} columnTitle={title} />
         </div>
-        <div className="flex flex-col gap-[10px] tablet:gap-4">
-          <AddTaskButton />
-          {items.map((item) => (
-            <TaskCard key={item.id} {...item} columnTitle={title} />
-          ))}
+        <div className="flex flex-col gap-[10px] flex-grow min-h-0 tablet:gap-4">
+          <div>
+            <AddTaskButton />
+          </div>
+          <div className="flex flex-col gap-[10px] flex-grow min-h-0 overflow-y-auto whitespace-nowrap scrollbar-hide tablet:gap-4">
+            {items.map((item, index) => (
+              <div
+                key={item.id}
+                ref={index === items.length - 1 ? observerRef : null}
+              >
+                <TaskCard {...item} columnTitle={title} />
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     </div>

src/app/(after-login)/dashboard/[dashboardid]/_components/EditColumnButton.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { useModalStore } from "@/lib/store/useModalStore";
 import { useColumnStore } from "@/lib/store/useColumnStore";
 import Image from "next/image";

src/lib/apis/cardsApi.ts

@@ -2,12 +2,21 @@ import { BASE_URL } from "@/lib/constants/urls";
 
 export async function fetchTaskCardList({
   token,
-  id,
+  size,
+  cursorId,
+  columnId,
 }: {
   token: string;
-  id: number;
+  size: number;
+  cursorId: number | null;
+  columnId: number;
 }) {
-  const res = await fetch(`${BASE_URL}/cards?size=10&columnId=${id}`, {
+  let query = `size=${size}&columnId=${columnId}`;
+  if (cursorId !== null) {
+    query += `&cursorId=${cursorId}`;
+  }
+
+  const res = await fetch(`${BASE_URL}/cards?${query}`, {
     headers: {
       Accept: "application/json",
       Authorization: `Bearer ${token}`,