✨ Feat: 카드 목록, 모달 내 댓글 목록에 무한 스크롤 구현

src/app/features/dashboard_Id/Card/Card.tsx

@@ -101,7 +101,6 @@ export default function Card({
         <CreateCardModal>
           <ModifyCardForm
             onClose={() => setOpenModifyCard(false)}
-            // columnId={column.id}
             currentColumn={currentColumn}
             card={card}
           />

src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx

@@ -126,7 +126,7 @@ export default function CreateCardForm({
                 width={26}
                 height={24}
                 className={cn(
-                  'pointer-events-none absolute right-0 top-1/2 -translate-y-1/2 transition-transform duration-300',
+                  'pointer-events-none absolute right-0 top-1/2 -translate-y-1/2 transition-transform duration-300 mobile:right-8',
                   isOpen && 'rotate-180',
                 )}
               />

src/app/features/dashboard_Id/Card/cardFormModals/CreateCardModal.tsx

@@ -14,7 +14,7 @@ export default function CreateCardModal({ children }: ModalProps) {
 
   return createPortal(
     <div className="fixed inset-0 flex items-center justify-center bg-black/40">
-      <div className="BG-white h-970 w-584 overflow-y-scroll rounded-16 p-32 shadow-lg [mask-image:radial-gradient(white_100%,transparent_100%)]">
+      <div className="BG-white h-970 w-584 overflow-y-scroll rounded-16 p-32 shadow-lg [mask-image:radial-gradient(white_100%,transparent_100%)] mobile:h-766 mobile:w-327 mobile:px-16 mobile:py-24">
         {children}
       </div>
     </div>,

src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx

@@ -131,7 +131,7 @@ export default function ModifyCardForm({
     >
       <h2 className="Text-black text-24 font-bold">할 일 수정</h2>
 
-      <div className="flex gap-32">
+      <div className="flex gap-32 mobile:flex-col">
         {/* 컬럼 선택 */}
         <Controller
           name="columnId"
@@ -144,13 +144,13 @@ export default function ModifyCardForm({
                   onClick={() => setIsOpenColumn((prev) => !prev)}
                   value={selectedColumn?.columnTitle ?? ''}
                   readOnly
-                  className="Input-readOnly w-217"
+                  className="Input-readOnly-217"
                   id="columnId"
                   type="text"
                   placeholder={currentColumn.columnTitle}
                 />
                 {/* 인풋에 보이는 선택된 컬럼 & 오른쪽 화살표 */}
-                <div className="absolute left-16 top-1/2 -translate-y-1/2">
+                <div className="absolute left-16 top-1/2 -translate-y-1/2 mobile:left-11">
                   <ColumnTitle title={selectedColumn.columnTitle} />
                 </div>
                 <Image
@@ -187,7 +187,7 @@ export default function ModifyCardForm({
                   onClick={() => setIsOpen((prev) => !prev)}
                   // value={selectedAssignee?.nickname ?? ''}
                   readOnly
-                  className="Input-readOnly w-217"
+                  className="Input-readOnly-217"
                   id="assigneeUserId"
                   type="text"
                 />

src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 
 import { Avatar } from '@/app/shared/components/common/Avatar'
 import Dropdown from '@/app/shared/components/common/Dropdown/Dropdown'
@@ -8,8 +8,6 @@ import { useIsMobile } from '@/app/shared/hooks/useIsmobile'
 import { useDeleteCardMutation } from '../../api/useDeleteCardMutation'
 import { Card } from '../../type/Card.type'
 import { Column } from '../../type/Column.type'
-import CreateCardModal from '../cardFormModals/CreateCardModal'
-import ModifyCardForm from '../cardFormModals/ModifyCardForm'
 import ColumnTitle from '../ColumnTitle'
 import Tags from '../Tags'
 import CommentForm from './CommentForm'
@@ -26,16 +24,16 @@ export default function CardContent({
   card: Card
   column: Column
 }) {
-  // const { id, imageUrl, title, tags, dueDate, assignee, description } = card
-  const [openModifyCard, setOpenModifyCard] = useState(false)
-  // const { title: columnTitle, id: columnId } = column
-  // const currentColumn = { columnTitle, columnId }
   const isMobile = useIsMobile()
   const { mutate: deleteCard, isPending } = useDeleteCardMutation()
 
+  const modalScrollRef = useRef<HTMLDivElement>(null)
+
   return (
-    // <div className="relative">
-    <div>
+    <div
+      className="BG-white relative max-h-764 min-h-764 w-730 overflow-auto overflow-y-scroll rounded-16 px-18 py-30 shadow-lg [mask-image:radial-gradient(white_100%,transparent_100%)] mobile:w-327 mobile:p-16 tablet:w-678 tablet:px-32 tablet:py-24"
+      ref={modalScrollRef}
+    >
       <h2 className="Text-black mb-24 text-24 font-bold mobile:mt-40 mobile:text-20">
         {card.title}
       </h2>
@@ -166,7 +164,7 @@ export default function CardContent({
         columnId={card.columnId}
         dashboardId={card.dashboardId}
       />
-      <Comments cardId={card.id} />
+      <Comments cardId={card.id} scrollRef={modalScrollRef} />
     </div>
   )
 }

src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx

@@ -14,9 +14,7 @@ export default function CardModal({ children }: ModalProps) {
 
   return createPortal(
     <div className="fixed inset-0 flex items-center justify-center bg-black/40">
-      <div className="BG-white relative max-h-764 min-h-764 w-730 overflow-auto overflow-y-scroll rounded-16 px-18 py-30 shadow-lg [mask-image:radial-gradient(white_100%,transparent_100%)] mobile:w-327 mobile:p-16 tablet:w-678 tablet:px-32 tablet:py-24">
-        {children}
-      </div>
+      <div>{children}</div>
     </div>,
     modalRoot,
   )

src/app/features/dashboard_Id/Card/cardModal/Comments.tsx

@@ -1,25 +1,46 @@
-import { format } from 'date-fns'
-import { useState } from 'react'
 import { toast } from 'sonner'
 
-import { Avatar } from '@/app/shared/components/common/Avatar'
-
-import useCommentsQuery from '../../api/useCommentsQuery'
+import { useInfiniteComments } from '../../api/useInfiniteComments'
+import { useInfiniteScroll } from '../../hooks/useInfiniteScroll'
 import { Comment as CommentType } from '../../type/Comment.type'
 import Comment from './Comment'
 
-export default function Comments({ cardId }: { cardId: number }) {
-  const { data, isLoading, error } = useCommentsQuery(cardId)
-  const comments = data?.comments
+export default function Comments({
+  cardId,
+  scrollRef,
+}: {
+  cardId: number
+  scrollRef: React.RefObject<HTMLElement>
+}) {
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isError,
+  } = useInfiniteComments(cardId)
+
+  useInfiniteScroll(fetchNextPage, hasNextPage, isFetchingNextPage, scrollRef)
 
-  if (error) {
-    toast.error(error?.message || '문제가 발생했습니다.')
+  if (isError) {
+    toast.error('댓글 불러오기 실패')
   }
   return (
-    <div className="flex w-450 flex-col gap-20">
-      {comments?.map((comment: CommentType) => (
-        <Comment key={comment.id} comment={comment} />
-      ))}
-    </div>
+    <>
+      <div className="flex w-450 flex-col gap-20">
+        {data?.pages.map((page) =>
+          page?.comments.map((comment: CommentType) => (
+            <Comment key={comment.id} comment={comment} />
+          )),
+        )}
+      </div>
+      {/* 무한 스크롤 관련 */}
+      {isFetchingNextPage && (
+        <p className="text-center text-sm text-gray-400">
+          댓글을 불러오는 중...
+        </p>
+      )}
+    </>
   )
 }

src/app/features/dashboard_Id/Column/Column.tsx

@@ -1,18 +1,31 @@
 import Image from 'next/image'
 import { useState } from 'react'
+import { toast } from 'sonner'
 
 import { cn } from '@/app/shared/lib/cn'
 
 import { useCardMutation } from '../api/useCardMutation'
-import useCards from '../api/useCards'
+import { useInfiniteCards } from '../api/useInfiniteCards'
 import Card from '../Card/Card'
 import CreateCardForm from '../Card/cardFormModals/CreateCardForm'
 import CreateCardModal from '../Card/cardFormModals/CreateCardModal'
+import { useInfiniteScroll } from '../hooks/useInfiniteScroll'
 import { useDragStore } from '../store/useDragStore'
 import type { Column as ColumnType } from '../type/Column.type'
 export default function Column({ column }: { column: ColumnType }) {
   const { id, title }: { id: number; title: string } = column
-  const { data, isLoading, error } = useCards(id)
+
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isError,
+  } = useInfiniteCards(id)
+
+  useInfiniteScroll(fetchNextPage, hasNextPage, isFetchingNextPage)
+
   const [isDraggingover, setDraggingover] = useState(false)
   const { draggingCard, clearDraggingCard } = useDragStore()
   const cardMutation = useCardMutation()
@@ -21,8 +34,8 @@ export default function Column({ column }: { column: ColumnType }) {
   const [openCreateColumn, setOpenCreateColumn] = useState(false) //page.tsx
   const [oepnConfigColumn, setConfigColumn] = useState(false)
 
-  if (isLoading) return <p>loading...</p>
-  if (error) return <p>error...{error.message}</p>
+  if (isLoading) return <p>loading...</p> // 스켈레톤 적용???⭐️
+  if (isError) return toast.error('할 일 불러오기 실패')
 
   return (
     <div
@@ -63,7 +76,7 @@ export default function Column({ column }: { column: ColumnType }) {
           <div className="BG-blue mb-7 mr-8 size-8 rounded-25"></div>
           <h2 className="mb-3 mr-12 h-21 text-18 font-bold">{title}</h2>
           <span className="Text-gray block size-20 rounded-4 bg-[#EEEEEE] pt-3 text-center text-12 font-medium leading-tight dark:bg-[#2E2E2E]">
-            {data?.totalCount}
+            {data?.pages[0]?.totalCount ?? 0}
           </span>
         </div>
         <Image
@@ -88,10 +101,11 @@ export default function Column({ column }: { column: ColumnType }) {
           />
         </div>
       </button>
-      {data?.cards.map((card) => (
-        <Card key={card.id} card={card} column={column} />
-      ))}
-
+      {data?.pages.map((page) =>
+        page.cards.map((card) => (
+          <Card key={card.id} card={card} column={column} />
+        )),
+      )}
       {/* 카드 생성 모달 */}
       {openCreateCard && (
         <CreateCardModal>
@@ -101,6 +115,19 @@ export default function Column({ column }: { column: ColumnType }) {
           />
         </CreateCardModal>
       )}
+
+      {/* 무한 스크롤 관련 */}
+      {isFetchingNextPage && (
+        <p className="text-center text-sm text-gray-400">
+          카드를 불러오는 중...
+        </p>
+      )}
+
+      {!hasNextPage && (
+        <p className="py-4 text-center text-sm text-gray-300">
+          모든 카드를 불러왔습니다
+        </p>
+      )}
     </div>
   )
 }

src/app/features/dashboard_Id/api/fetchCards.ts

@@ -3,12 +3,24 @@ import api from '@/app/shared/lib/testAxios'
 // import api from '@/app/shared/lib/axios'
 import { CardResponse } from '../type/Card.type'
 
-export async function fetchCards(
-  columnId: number,
-  size: number = 10,
-): Promise<CardResponse> {
+export async function fetchCards({
+  columnId,
+  size = 6,
+  cursorId,
+}: {
+  columnId: number
+  size?: number
+  cursorId?: number | null
+}): Promise<CardResponse> {
   const res = await api.get<CardResponse>(
-    `/${process.env.NEXT_PUBLIC_TEAM_ID}/cards?size=${size}&columnId=${columnId}`,
+    `/${process.env.NEXT_PUBLIC_TEAM_ID}/cards`,
+    {
+      params: {
+        columnId,
+        size,
+        ...(cursorId ? { cursorId } : {}), // 첫 페이지는 cursor 생략
+      },
+    },
   )
   return res.data
 }

src/app/features/dashboard_Id/api/fetchComments.ts

@@ -3,10 +3,24 @@ import api from '@/app/shared/lib/testAxios'
 // import api from '@/app/shared/lib/axios'
 import { CommentsResponse } from '../type/Comment.type'
 
-export async function fetchComments(cardId: number): Promise<CommentsResponse> {
+export async function fetchComments({
+  cardId,
+  size = 5,
+  cursorId,
+}: {
+  cardId: number
+  size?: number
+  cursorId?: number | null
+}): Promise<CommentsResponse> {
   const res = await api.get<CommentsResponse>(
-    `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments?size=10&cardId=${cardId}`,
+    `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments`,
+    {
+      params: {
+        size,
+        ...(cursorId ? { cursorId } : {}), // 첫 페이지는 cursor 생략
+        cardId,
+      },
+    },
   )
-
   return res.data
 }

src/app/features/dashboard_Id/api/useInfiniteCards.ts

@@ -0,0 +1,17 @@
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+import { CardResponse } from '../type/Card.type'
+import { fetchCards } from './fetchCards'
+
+export function useInfiniteCards(columnId: number) {
+  return useInfiniteQuery<CardResponse>({
+    queryKey: ['columnId', columnId],
+    queryFn: ({ pageParam = null }) =>
+      fetchCards({ columnId, cursorId: pageParam as number }),
+    getNextPageParam: (lastPage) => {
+      // 마지막 카드의 id를 다음 cursor로 사용
+      return lastPage.cards.length === 0 ? undefined : lastPage.cursorId
+    },
+    initialPageParam: null,
+  })
+}

src/app/features/dashboard_Id/api/useInfiniteComments.ts

@@ -0,0 +1,17 @@
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+import { CommentsResponse } from '../type/Comment.type'
+import { fetchComments } from './fetchComments'
+
+export function useInfiniteComments(cardId: number) {
+  return useInfiniteQuery<CommentsResponse>({
+    queryKey: ['comments', cardId],
+    queryFn: ({ pageParam = null }) =>
+      fetchComments({ cardId, cursorId: pageParam as number }),
+    getNextPageParam: (lastPage) => {
+      // 마지막 카드의 id를 다음 cursor로 사용
+      return lastPage.comments.length === 0 ? undefined : lastPage.cursorId
+    },
+    initialPageParam: null,
+  })
+}

src/app/features/dashboard_Id/api/usePutCardMutation.ts

@@ -3,7 +3,6 @@ import axios from 'axios'
 import { toast } from 'sonner'
 
 import { CardModifyFormData } from '../type/CardFormData.type'
-import { postCard } from './postCard'
 import { putCard } from './putCard'
 
 // ✅ 카드 수정 모달에서 사용 (CreateCardForm.tsx)