From 5afc8da9a8022ccdaf34261dff99842d3bdf333b Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Tue, 1 Apr 2025 11:23:46 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=EA=B0=80=20?= =?UTF-8?q?=EB=A7=8E=EC=95=84=EB=8F=84=2010=EA=B0=9C=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EB=84=98=EB=B2=84=EB=A1=9C=20=EB=8B=A4=EC=9D=8C,?= =?UTF-8?q?=EC=9D=B4=EC=A0=84=EC=9C=BC=EB=A1=9C=20=EB=84=98=EC=96=B4?= =?UTF-8?q?=EA=B0=80=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 ?
-

{headName}

-
: <>} -
- - - {children ? <>{children} : - {headlist?.map((head) => ( - {head.title} - ))} - } - - - {tableData?.map((el: { [key: string]: string | number | boolean }, index) => ( - - {headlist?.map((head) => ( - cellClick && cellClick(index)} key={head.id + index}>{el[head.id]} - ))} - - ))} - -
- {total <= 0 ? <> : } -
- + + + + {/* 이전 그룹으로 이동 */} + + { + if (startPage > 1) handlePageChange(startPage - 1); + }} + /> + + + {/* 현재 그룹 페이지들 표시 */} + { + Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i).map((pageNum) => ( + + handlePageChange(pageNum)} + > + {pageNum} + + + )) + } + + {/* 다음 그룹으로 이동 */} + + { + if (endPage < totalPages) handlePageChange(endPage + 1); + }} + /> + + + + ); -} +} \ No newline at end of file From f88e582b5e36b6a15871ca5b5ad48926e5d9fa22 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Tue, 1 Apr 2025 11:37:00 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20=EC=9E=98?= =?UTF-8?q?=EB=AA=BB=20commit=EC=9B=90=EB=B3=B5,=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20=EC=9E=AC=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/table/index.tsx | 112 +++++++----------- .../src/ui/table/uiPageNations.tsx | 96 ++++++++++----- 2 files changed, 106 insertions(+), 102 deletions(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 99199d163..9635a7e21 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -1,78 +1,50 @@ -'use client'; +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components"; +import UiPageNations from "./uiPageNations"; -import { useEffect, useState } from "react"; -import { - Pagination, - PaginationContent, - PaginationItem, - PaginationPrevious, - PaginationLink, - PaginationNext -} from "./lib/pagination"; - -interface CommonPageNationsProps { - total: number; - cur: number; +type UiTableProps = { + headName: React.ReactNode | undefined; + tableData: { [key: string]: string | number | boolean }[]; + headlist: UiHeadProps[]; pageSize: number; + total: number; + children: React.ReactNode | undefined; + cellClick : ((index:number|undefined)=>void) | undefined; } -export default function UiPageNations(commonPageNationsProps: CommonPageNationsProps) { - const [pageProps, setPageProps] = useState(commonPageNationsProps); +type UiHeadProps = { + id: string; + title: string; +} - 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 }); - }; +export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick }: UiTableProps) { + const cur = 1; return ( - - - - {/* 이전 그룹으로 이동 */} - - { - if (startPage > 1) handlePageChange(startPage - 1); - }} - /> - - - {/* 현재 그룹 페이지들 표시 */} - { - Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i).map((pageNum) => ( - - handlePageChange(pageNum)} - > - {pageNum} - - - )) - } - - {/* 다음 그룹으로 이동 */} - - { - if (endPage < totalPages) handlePageChange(endPage + 1); - }} - /> - - - - + <> + {headName ?
+

{headName}

+
: <>} +
+ + + {children ? <>{children} : + {headlist?.map((head) => ( + {head.title} + ))} + } + + + {tableData?.map((el: { [key: string]: string | number | boolean }, index) => ( + + {headlist?.map((head) => ( + cellClick && cellClick(index)} key={head.id + index}>{el[head.id]} + ))} + + ))} + +
+ {total <= 0 ? <> : } +
+ ); -} \ No newline at end of file +} diff --git a/packages/common/business_components/src/ui/table/uiPageNations.tsx b/packages/common/business_components/src/ui/table/uiPageNations.tsx index a7b788d71..99199d163 100644 --- a/packages/common/business_components/src/ui/table/uiPageNations.tsx +++ b/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( - - - - - + return ( + + + + {/* 이전 그룹으로 이동 */} + + { + if (startPage > 1) handlePageChange(startPage - 1); + }} + /> + + + {/* 현재 그룹 페이지들 표시 */} { - Array.from({length:Math.ceil(commonPageNationsProps.total/commonPageNationsProps.pageSize)},(_,i)=>i+1).map((el,index)=>( - - {el} - - )) - } - - + Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i).map((pageNum) => ( + + handlePageChange(pageNum)} + > + {pageNum} + - - - - - - ); + )) + } + + {/* 다음 그룹으로 이동 */} + + { + if (endPage < totalPages) handlePageChange(endPage + 1); + }} + /> + + + + + ); } \ No newline at end of file From 05b3b0675f59e3e2fe19d4c740561bbc48c739fd Mon Sep 17 00:00:00 2001 From: truthwing Date: Tue, 1 Apr 2025 13:12:17 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=EC=97=90=20obje?= =?UTF-8?q?ct=20=ED=83=80=EC=9E=85=EB=8F=84=20=EB=B0=9B=EC=9D=84=20?= =?UTF-8?q?=EC=88=98=20=EC=9E=88=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 --- packages/common/business_components/src/ui/table/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 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..d536a1f2f 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/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 } - {tableData?.map((el: { [key: string]: string | number | boolean }, index) => ( + {tableData?.map((el: { [key: string]: string | number | boolean | object}, index) => ( {headlist?.map((head) => ( cellClick && cellClick(index)} key={head.id + index}>{el[head.id]}