페이지네이션 리스트가 많아도 10개 페이지넘버로 다음,이전으로 넘어가도록 수정

2025-04-01 11:23:46 +09:00
parent 27499977d7
commit 5afc8da9a8
1 changed files with 70 additions and 42 deletions
@@ -1,50 +1,78 @@
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
-import UiPageNations from "./uiPageNations";
+'use client';

-type UiTableProps = {
-  headName: React.ReactNode | undefined;
-  tableData: { [key: string]: string | number | boolean }[];
-  headlist: UiHeadProps[];
-  pageSize: number;
+import { useEffect, useState } from "react";
+import { 
+  Pagination, 
+  PaginationContent, 
+  PaginationItem, 
+  PaginationPrevious, 
+  PaginationLink, 
+  PaginationNext 
+} from "./lib/pagination";
+
+interface CommonPageNationsProps {
  total: number;
-  children: React.ReactNode | undefined;
-  cellClick : ((index:number|undefined)=>void) | undefined;
+  cur: number;
+  pageSize: number;
 }

-type UiHeadProps = {
-  id: string;
-  title: string;
-}
+export default function UiPageNations(commonPageNationsProps: CommonPageNationsProps) {
+  const [pageProps, setPageProps] = useState(commonPageNationsProps);

-export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick }: UiTableProps) {
-  const cur = 1;
+  useEffect(() => {
+    setPageProps(commonPageNationsProps);
+  }, [commonPageNationsProps]);
+
+  const totalPages = Math.ceil(pageProps.total / pageProps.pageSize);
+  const pagesPerGroup = 10;
+  const currentGroup = Math.floor((pageProps.cur - 1) / pagesPerGroup);
+  const startPage = currentGroup * pagesPerGroup + 1;
+  const endPage = Math.min(startPage + pagesPerGroup - 1, totalPages);
+
+  const handlePageChange = (page: number) => {
+    setPageProps({ ...pageProps, cur: page });
+  };

  return (
-    <>
-      {headName ? <div className="card-header">
-        <h3 className="text-2xl font-medium text-label">{headName}</h3>
-        </div> : <></>}
-      <div className="card !m-[1.2rem] max-h-[40rem] overflow-auto !p-0r">
-        <Table>
-          <TableHeader>
-          {children ? <>{children}</> : <TableRow>
-            {headlist?.map((head) => (
-              <TableHead key={head.id}>{head.title}</TableHead>
-            ))}
-          </TableRow>}
-        </TableHeader>
-        <TableBody className='text-center'>
-          {tableData?.map((el: { [key: string]: string | number | boolean }, index) => (
-            <TableRow key={index + "row"} >
-              {headlist?.map((head) => (
-                <TableCell className="cursor-pointer" onClick={()=>cellClick && cellClick(index)} key={head.id + index}>{el[head.id]}</TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableBody>
-        </Table>
-        {total <= 0 ? <></> : <UiPageNations total={total} cur={cur} pageSize={pageSize} />}
-      </div>
-    </>
+    <Pagination>
+      <PaginationContent>
+
+        {/* 이전 그룹으로 이동 */}
+        <PaginationItem>
+          <PaginationPrevious 
+            href="#" 
+            onClick={() => {
+              if (startPage > 1) handlePageChange(startPage - 1);
+            }} 
+          />
+        </PaginationItem>
+
+        {/* 현재 그룹 페이지들 표시 */}
+        {
+          Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i).map((pageNum) => (
+            <PaginationItem key={pageNum}>
+              <PaginationLink 
+                href="#" 
+                isActive={pageNum === pageProps.cur}
+                onClick={() => handlePageChange(pageNum)}
+              >
+                {pageNum}
+              </PaginationLink>
+            </PaginationItem>
+          ))
+        }
+
+        {/* 다음 그룹으로 이동 */}
+        <PaginationItem>
+          <PaginationNext 
+            href="#" 
+            onClick={() => {
+              if (endPage < totalPages) handlePageChange(endPage + 1);
+            }} 
+          />
+        </PaginationItem>
+
+      </PaginationContent>
+    </Pagination>
  );
-}
+}