From 8fca4f83574ab367dcd5c59e1edd79a332cc501d Mon Sep 17 00:00:00 2001 From: pgb Date: Fri, 27 Dec 2024 11:14:38 +0900 Subject: [PATCH] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=95=EA=B8=B0=EB=8A=A5?= =?UTF-8?q?=20=EC=98=B5=EC=85=98=EC=B6=94=EA=B0=80=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/codeCategoryMngList/page.tsx | 3 + plm-app/src/app/(admin)/common/menu/page.tsx | 3 + plm-app/src/components/common/Table/index.tsx | 82 ++++++++++++++----- 3 files changed, 68 insertions(+), 20 deletions(-) diff --git a/plm-app/src/app/(admin)/common/codeCategoryMngList/page.tsx b/plm-app/src/app/(admin)/common/codeCategoryMngList/page.tsx index 022075f..5d034bf 100644 --- a/plm-app/src/app/(admin)/common/codeCategoryMngList/page.tsx +++ b/plm-app/src/app/(admin)/common/codeCategoryMngList/page.tsx @@ -248,6 +248,7 @@ const CommonCodePage = () => { const [deleteAlertOpen, setDeleteAlertOpen] = useState(false); const [codeToDelete, setCodeToDelete] = useState(null); const [selectedRows, setSelectedRows] = useState([]); + const [currentPageSize, setCurrentPageSize] = useState(20); // 페이지 크기 상태 추가 const queryClient = useQueryClient(); const { toast } = useToast(); @@ -503,6 +504,8 @@ const CommonCodePage = () => { columns={columns} data={filteredCodes} + pageSize={currentPageSize} // 페이지 크기 prop 전달 + onPageSizeChange={setCurrentPageSize} // 페이지 크기 변경 핸들러 전달 onRowClick={(row) => { setSelectedCode(row); setIsOpen(true); diff --git a/plm-app/src/app/(admin)/common/menu/page.tsx b/plm-app/src/app/(admin)/common/menu/page.tsx index 5d6ae4c..41670d7 100644 --- a/plm-app/src/app/(admin)/common/menu/page.tsx +++ b/plm-app/src/app/(admin)/common/menu/page.tsx @@ -306,6 +306,7 @@ const MenusPage = () => { const [deleteAlertOpen, setDeleteAlertOpen] = useState(false); const [menuToDelete, setMenuToDelete] = useState(null); const [selectedRows, setSelectedRows] = useState([]); + const [currentPageSize, setCurrentPageSize] = useState(20); // 페이지 크기 상태 추가 const queryClient = useQueryClient(); const { toast } = useToast(); @@ -575,6 +576,8 @@ const MenusPage = () => { columns={columns} data={filteredMenus} + pageSize={currentPageSize} // 페이지 크기 prop 전달 + onPageSizeChange={setCurrentPageSize} // 페이지 크기 변경 핸들러 전달 onRowClick={(row) => { setSelectedMenu(row); setIsOpen(true); diff --git a/plm-app/src/components/common/Table/index.tsx b/plm-app/src/components/common/Table/index.tsx index 1043ffd..a7f9cb4 100644 --- a/plm-app/src/components/common/Table/index.tsx +++ b/plm-app/src/components/common/Table/index.tsx @@ -42,6 +42,7 @@ interface PLMTableProps { pageSize?: number; enableCheckbox?: boolean; onCheckedChange?: (checkedRows: T[]) => void; + onPageSizeChange?: (newPageSize: number) => void; // 새로운 prop 추가 } type CustomExpandedState = Record; @@ -52,7 +53,8 @@ export function PLMTable({ onRowClick, pageSize = 20, enableCheckbox = false, - onCheckedChange + onCheckedChange, + onPageSizeChange, }: PLMTableProps) { const [expanded, setExpanded] = useState({}); const [rowSelection, setRowSelection] = useState>({}); @@ -290,6 +292,18 @@ export function PLMTable({ setRowSelection({}); }, [currentPageIndex]); + const pageSizeOptions = [20, 50, 75, 100]; + + // 페이지 크기 변경 핸들러 + const handlePageSizeChange = (newSize: number) => { + const newPageSize = Number(newSize); + setCurrentPageIndex(0); + table.setPageSize(newPageSize); + if (onPageSizeChange) { + onPageSizeChange(newPageSize); + } + }; + return (
({ {table.getRowModel().rows.map((row) => ( 0 ? "bg-slate-50/70" : "" - }`} + className={`transition-colors hover:bg-gray-50`} > - {row.getVisibleCells().map((cell) => ( - 0 ? "text-gray-600" : "" - } ${cell.column.columnDef.meta?.className || ""}`} - style={{ - width: cell.column.columnDef.meta?.width, - maxWidth: cell.column.columnDef.meta?.width, - textAlign: cell.column.columnDef.meta?.textAlign || 'left' - }} - > - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} + {row.getVisibleCells().map((cell) => { + const isFirstCell = cell.column.id === 'expander'; + return ( + + {isFirstCell && Array.from({ length: row.depth }).map((_, index) => ( + + ))} +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+ + ); + })} ))} @@ -345,7 +374,20 @@ export function PLMTable({
-
+
+ 페이지당 행: + +