Merge commit '8fd441bcbfadf5c0b54248e4e320863401960536' into iipbs/common/main

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

@@ -2,7 +2,7 @@
 
 function ListDiv(props: {children: React.ReactNode}) {
   return (
-    <div className="card card-border">
+    <div className="card card-border h-full">
       {props.children}
     </div>
   )

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

@@ -1,14 +1,16 @@
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
+import { useState } from "react";
 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;
   children: React.ReactNode | undefined;
   cellClick : ((index:number|undefined)=>void) | undefined;
+  onPageChange: (page: number) => void;
 }
 
 type UiHeadProps = {
@@ -16,9 +18,12 @@ type UiHeadProps = {
   title: string;
 }
 
-export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick }: UiTableProps) {
-  const cur = 1;
-
+export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange }: UiTableProps) {
+  const [cur, setCur] = useState<number>(1);
+  const handlePageChange = (page: number) => {
+    setCur(page);
+    onPageChange(page);
+  }
   return (
     <>
       {headName ? <div className="card-header">
@@ -34,7 +39,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>
@@ -43,7 +48,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
           ))}
         </TableBody>
         </Table>
-        {total <= 0 ? <></> : <UiPageNations total={total} cur={cur} pageSize={pageSize} />}
+        {total <= 0 ? <></> : <UiPageNations total={total} cur={cur} pageSize={pageSize} onPageChange={handlePageChange} />}
       </div>
     </>
   );

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

@@ -1,46 +1,77 @@
-'use client'
-
+'use client';
 
 import { useEffect, useState } from "react";
-import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationLink, PaginationNext } from "./lib/pagination";
-
+import { PaginationNext } from "./lib/pagination";
+import { PaginationLink } from "./lib/pagination";
+import { PaginationPrevious } from "./lib/pagination";
+import { PaginationItem } from "./lib/pagination";
+import { PaginationContent } from "./lib/pagination";
+import { Pagination } from "./lib/pagination";
 
 interface CommonPageNationsProps {
-    total: number;
-    cur: number;
-    pageSize: number;
+  total: number;
+  cur: number;
+  pageSize: number;
+  onPageChange: (page: number) => void;
 }
 
 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) => {
+    pageProps.onPageChange(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>
+  );
 }