페이징기능 옵션추가가

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); 

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); 

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) => (
+                {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-hidden text-ellipsis ${
-                      row.depth > 0 ? "text-gray-600" : ""
-                    } ${cell.column.columnDef.meta?.className || ""}`}
+                      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'
+                        textAlign: cell.column.columnDef.meta?.textAlign || 'left',
+                        paddingLeft: isFirstCell ? `${row.depth * 24 + 16}px` : undefined,
                       }}
                     >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
+                      {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={() => {