From 5afc8da9a8022ccdaf34261dff99842d3bdf333b Mon Sep 17 00:00:00 2001
From: YangJinSoo94 <jschrome782@gmail.com>
Date: Tue, 1 Apr 2025 11:23:46 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=EA=B0=80=20=EB=A7=8E?=
 =?UTF-8?q?=EC=95=84=EB=8F=84=2010=EA=B0=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EB=84=98=EB=B2=84=EB=A1=9C=20=EB=8B=A4=EC=9D=8C,=EC=9D=B4?=
 =?UTF-8?q?=EC=A0=84=EC=9C=BC=EB=A1=9C=20=EB=84=98=EC=96=B4=EA=B0=80?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ui/table/index.tsx                    | 112 +++++++++++-------
 1 file changed, 70 insertions(+), 42 deletions(-)

diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx
index 9635a7e21..99199d163 100644
--- a/packages/common/business_components/src/ui/table/index.tsx
+++ b/packages/common/business_components/src/ui/table/index.tsx
@@ -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>
   );
-}
+}
\ No newline at end of file