From 5afc8da9a8022ccdaf34261dff99842d3bdf333b Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Tue, 1 Apr 2025 11:23:46 +0900 Subject: [PATCH 1/5] =?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/5] =?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/5] =?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]} From 2323c67131d5449e9abd0be78dcfc16bf2d65025 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Tue, 1 Apr 2025 14:20:05 +0900 Subject: [PATCH 4/5] =?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=EC=88=98=EC=A0=95=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/table/index.tsx | 13 +++++++++---- .../src/ui/table/uiPageNations.tsx | 17 ++++++++--------- 2 files changed, 17 insertions(+), 13 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..5413fbf78 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -1,4 +1,5 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components"; +import { useState } from "react"; import UiPageNations from "./uiPageNations"; type UiTableProps = { @@ -9,6 +10,7 @@ type UiTableProps = { 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(1); + const handlePageChange = (page: number) => { + setCur(page); + onPageChange(page); + } return ( <> {headName ?
@@ -43,7 +48,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa ))} - {total <= 0 ? <> : } + {total <= 0 ? <> : }
); diff --git a/packages/common/business_components/src/ui/table/uiPageNations.tsx b/packages/common/business_components/src/ui/table/uiPageNations.tsx index 99199d163..891fc4c81 100644 --- a/packages/common/business_components/src/ui/table/uiPageNations.tsx +++ b/packages/common/business_components/src/ui/table/uiPageNations.tsx @@ -1,19 +1,18 @@ '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; + onPageChange: (page: number) => void; } export default function UiPageNations(commonPageNationsProps: CommonPageNationsProps) { @@ -30,7 +29,7 @@ export default function UiPageNations(commonPageNationsProps: CommonPageNationsP const endPage = Math.min(startPage + pagesPerGroup - 1, totalPages); const handlePageChange = (page: number) => { - setPageProps({ ...pageProps, cur: page }); + pageProps.onPageChange(page); }; return ( From 8fd441bcbfadf5c0b54248e4e320863401960536 Mon Sep 17 00:00:00 2001 From: truthwing Date: Wed, 2 Apr 2025 17:45:38 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=20=EC=A0=84=EC=B2=B4=EB=A1=9C=20=EC=9E=A1=EA=B2=8C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20=EC=99=84=EB=A3=8C.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/list_div/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/business_components/src/ui/list_div/index.tsx b/packages/common/business_components/src/ui/list_div/index.tsx index a096a4c04..2c437e1af 100644 --- a/packages/common/business_components/src/ui/list_div/index.tsx +++ b/packages/common/business_components/src/ui/list_div/index.tsx @@ -2,7 +2,7 @@ function ListDiv(props: {children: React.ReactNode}) { return ( -
+
{props.children}
)