From 8fca4f83574ab367dcd5c59e1edd79a332cc501d Mon Sep 17 00:00:00 2001
From: pgb <gbpark@gdnsi.com>
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<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={() => {