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<string | null>(null);
const [selectedRows, setSelectedRows] = useState<CommonCode[]>([]);
+ const [currentPageSize, setCurrentPageSize] = useState(20); // 페이지 크기 상태 추가
const queryClient = useQueryClient();
const { toast } = useToast();
@@ -503,6 +504,8 @@ const CommonCodePage = () => {
<PLMTable<CommonCode>
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<string | null>(null);
const [selectedRows, setSelectedRows] = useState<DBMenuItem[]>([]);
+ const [currentPageSize, setCurrentPageSize] = useState(20); // 페이지 크기 상태 추가
const queryClient = useQueryClient();
const { toast } = useToast();
@@ -575,6 +576,8 @@ const MenusPage = () => {
<PLMTable<DBMenuItem>
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<T extends BaseRow> {
pageSize?: number;
enableCheckbox?: boolean;
onCheckedChange?: (checkedRows: T[]) => void;
+ onPageSizeChange?: (newPageSize: number) => void; // 새로운 prop 추가
}
type CustomExpandedState = Record<string | number, boolean>;
@@ -52,7 +53,8 @@ export function PLMTable<T extends BaseRow>({
onRowClick,
pageSize = 20,
enableCheckbox = false,
- onCheckedChange
+ onCheckedChange,
+ onPageSizeChange,
}: PLMTableProps<T>) {
const [expanded, setExpanded] = useState<CustomExpandedState>({});
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
@@ -290,6 +292,18 @@ export function PLMTable<T extends BaseRow>({
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 (
<div>
<div
@@ -319,25 +333,40 @@ export function PLMTable<T extends BaseRow>({
{table.getRowModel().rows.map((row) => (
<tr
key={row.id}
- className={`transition-colors hover:bg-gray-50 ${
- row.depth > 0 ? "bg-slate-50/70" : ""
- }`}
+ className={`transition-colors hover:bg-gray-50`}
>
- {row.getVisibleCells().map((cell) => (
- <td
- key={cell.id}
- className={`py-3 px-4 border-b border-gray-200 overflow-hidden text-ellipsis ${
- row.depth > 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())}
- </td>
- ))}
+ {row.getVisibleCells().map((cell) => {
+ const isFirstCell = cell.column.id === 'expander';
+ return (
+ <td
+ key={cell.id}
+ className={`py-3 px-4 border-b border-gray-200 overflow-visible
+ ${cell.column.columnDef.meta?.className || ""}
+ ${isFirstCell ? 'relative' : ''}`}
+ style={{
+ width: cell.column.columnDef.meta?.width,
+ maxWidth: cell.column.columnDef.meta?.width,
+ textAlign: cell.column.columnDef.meta?.textAlign || 'left',
+ paddingLeft: isFirstCell ? `${row.depth * 24 + 16}px` : undefined,
+ }}
+ >
+ {isFirstCell && Array.from({ length: row.depth }).map((_, index) => (
+ <span
+ key={`line-${index}`}
+ className="absolute h-full w-px bg-gray-200"
+ style={{
+ left: `${(index + 1) * 24}px`,
+ top: 0,
+ zIndex: 1
+ }}
+ />
+ ))}
+ <div className={isFirstCell ? 'relative z-10' : ''}>
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ </div>
+ </td>
+ );
+ })}
</tr>
))}
</tbody>
@@ -345,7 +374,20 @@ export function PLMTable<T extends BaseRow>({
</div>
<div className="flex items-center justify-between py-3 text-sm text-gray-700">
- <div className="w-1/3" />
+ <div className="w-1/3 flex items-center gap-2">
+ <span>페이지당 행:</span>
+ <select
+ value={pageSize}
+ onChange={(e) => handlePageSizeChange(Number(e.target.value))}
+ className="border border-gray-200 rounded-md px-2 py-1 bg-white text-gray-700"
+ >
+ {pageSizeOptions.map((size) => (
+ <option key={size} value={size}>
+ {size}개
+ </option>
+ ))}
+ </select>
+ </div>
<div className="flex items-center justify-center gap-2 flex-1">
<button
onClick={() => {