feat: 사이트 관리 및 이미지 관리 페이지 테이블에 페이지네이션 적용

apps/cs/src/pages/image/ui/image-page.tsx

@@ -6,6 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 import {
   getCoreRowModel,
   useReactTable,
+  type PaginationState,
   type RowSelectionState,
 } from "@tanstack/react-table";
 import { Button, DataTable, Input, Label } from "@common/components";
@@ -26,10 +27,19 @@ function ImagePage() {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
   const [imageQuery, setImageQuery] = useState<ImageParams>({ keyword: "" });
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 5,
+  });
 
   const { data: imageList, refetch } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.IMAGES],
-    queryFn: () => ImageApi.getImageList(imageQuery),
+    queryFn: () =>
+      ImageApi.getImageList({
+        ...imageQuery,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
     enabled: false,
   });
 
@@ -37,10 +47,13 @@ function ImagePage() {
     data: imageList?.content ?? [],
     columns,
     state: {
+      pagination,
       rowSelection,
     },
+    manualPagination: true,
     enableMultiRowSelection: true,
     getCoreRowModel: getCoreRowModel(),
+    onPaginationChange: setPagination,
     onRowSelectionChange: setRowSelection,
   });
 
@@ -107,8 +120,8 @@ function ImagePage() {
             </div>
           </div>
         </div>
-        <div className="card !m-[1.2rem] h-[49rem] overflow-auto !p-0">
-          <DataTable table={table} onRowClick={handleRowClick} />
+        <div className="card !m-[1.2rem] h-[29.2rem] overflow-auto !p-0">
+          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
         </div>
       </div>
     </div>

apps/cs/src/pages/site/ui/site-page.tsx

@@ -4,8 +4,12 @@ import "@common/assets/styles/grid.css";
 
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type PaginationState,
+} from "@tanstack/react-table";
 import { Button, DataTable, Input, Label } from "@common/components";
 import { SiteApi, type Site, type SiteParams } from "@/entities/site";
 import { ENDPOINT } from "@/shared/config";
@@ -13,20 +17,25 @@ import { columns } from "../model/table-columns";
 
 function SitePage() {
   const router = useRouter();
-  const { data: siteList, refetch } = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.SITES],
-    queryFn: () => SiteApi.getSiteList(siteQuery),
-    enabled: false,
-  });
 
   const [siteQuery, setSiteQuery] = useState<SiteParams>({
     siteNm: "",
   });
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 5,
+  });
 
-  const table = useReactTable({
-    data: siteList?.content ?? [],
-    columns,
-    getCoreRowModel: getCoreRowModel(),
+  const { data: siteList, refetch } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.SITES],
+    queryFn: () =>
+      SiteApi.getSiteList({
+        ...siteQuery,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+    placeholderData: keepPreviousData,
+    enabled: false,
   });
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -38,10 +47,26 @@ function SitePage() {
     router.push(`/site/register/${row.siteId}`);
   };
 
+  const table = useReactTable({
+    data: siteList?.content ?? [],
+    columns,
+    rowCount: siteList?.totalElements ?? 0,
+    state: {
+      pagination,
+    },
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  });
+
   useEffect(() => {
     refetch();
   }, []);
 
+  useEffect(() => {
+    refetch();
+  }, [pagination]);
+
   return (
     <div className="card card-border !mt-6">
       <div className="card card-border">
@@ -64,8 +89,8 @@ function SitePage() {
           <h3 className="text-2xl font-medium text-label">사이트 목록</h3>
           <Button onClick={() => router.push("/site/register")}>등록</Button>
         </div>
-        <div className="card !m-[1.2rem] h-[49rem] overflow-auto !p-0">
-          <DataTable table={table} onRowClick={handleRowClick} />
+        <div className="card !m-[1.2rem] h-[29.2rem] overflow-auto !p-0">
+          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
         </div>
       </div>
     </div>