Merge commit '05b3b0675f59e3e2fe19d4c740561bbc48c739fd' into iipbs/wr/form_fuction

packages/common/business_components/src/ui/table/index.tsx

@@ -3,7 +3,7 @@ import UiPageNations from "./uiPageNations";
 
 type UiTableProps = {
   headName: React.ReactNode | undefined;
-  tableData: { [key: string]: string | number | boolean }[];
+  tableData: { [key: string]: string | number | boolean | object}[];
   headlist: UiHeadProps[];
   pageSize: number;
   total: number;
@@ -34,7 +34,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
           </TableRow>}
         </TableHeader>
         <TableBody className='text-center'>
-          {tableData?.map((el: { [key: string]: string | number | boolean }, index) => (
+          {tableData?.map((el: { [key: string]: string | number | boolean | object}, index) => (
             <TableRow key={index + "row"} >
               {headlist?.map((head) => (
                 <TableCell className="cursor-pointer" onClick={()=>cellClick && cellClick(index)} key={head.id + index}>{el[head.id]}</TableCell>

packages/common/business_components/src/ui/table/uiPageNations.tsx

@@ -1,46 +1,78 @@
-'use client'
-
+'use client';
 
 import { useEffect, useState } from "react";
-import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationLink, PaginationNext } from "./lib/pagination";
-
+import { 
+  Pagination, 
+  PaginationContent, 
+  PaginationItem, 
+  PaginationPrevious, 
+  PaginationLink, 
+  PaginationNext 
+} from "./lib/pagination";
 
 interface CommonPageNationsProps {
-    total: number;
-    cur: number;
-    pageSize: number;
+  total: number;
+  cur: number;
+  pageSize: number;
 }
 
 export default function UiPageNations(commonPageNationsProps: CommonPageNationsProps) {
-    
-    const [pageProps, setPageProps] = useState(commonPageNationsProps);
+  const [pageProps, setPageProps] = useState(commonPageNationsProps);
 
+  useEffect(() => {
+    setPageProps(commonPageNationsProps);
+  }, [commonPageNationsProps]);
 
-    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(
-        <Pagination>
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPrevious href="#" />
-          </PaginationItem>
+  return (
+    <Pagination>
+      <PaginationContent>
+
+        {/* 이전 그룹으로 이동 */}
+        <PaginationItem>
+          <PaginationPrevious 
+            href="#" 
+            onClick={() => {
+              if (startPage > 1) handlePageChange(startPage - 1);
+            }} 
+          />
+        </PaginationItem>
+
+        {/* 현재 그룹 페이지들 표시 */}
         {
-                Array.from({length:Math.ceil(commonPageNationsProps.total/commonPageNationsProps.pageSize)},(_,i)=>i+1).map((el,index)=>(
-                <PaginationItem key={index}>
-                    <PaginationLink href= '#'>{el}</PaginationLink>
-                </PaginationItem>
-                ))
-         }
-            <PaginationItem>
-                <PaginationNext href="#" />
+          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>
-         
-   
-       
-        </PaginationContent>
-      </Pagination>
-    );
+          ))
+        }
+
+        {/* 다음 그룹으로 이동 */}
+        <PaginationItem>
+          <PaginationNext 
+            href="#" 
+            onClick={() => {
+              if (endPage < totalPages) handlePageChange(endPage + 1);
+            }} 
+          />
+        </PaginationItem>
+
+      </PaginationContent>
+    </Pagination>
+  );
 }