refactor: 코드 페이지 리팩토링

2025-05-21 15:00:16 +09:00
parent 2889de235a
commit 0539b7f1f9
18 changed files with 1164 additions and 1082 deletions
@@ -0,0 +1,70 @@
+import dayjs from "dayjs";
+import type { ColumnDef } from "@tanstack/react-table";
+import { Button } from "@common/components";
+import type { LwpoCode } from "@/entities/code";
+import { LwpoCodeManagementDialog } from "../ui/lwpocode-dialog";
+import { useState } from "react";
+
+export const columns: ColumnDef<LwpoCode>[] = [
+  {
+    id: "no",
+    header: "NO",
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const { pageIndex, pageSize } = table.getState().pagination;
+      return totalRows - (pageIndex * pageSize + row.index);
+    },
+  },
+  {
+    accessorKey: "lwpoCd",
+    header: "하위코드",
+  },
+  {
+    accessorKey: "lwpoCdNm",
+    header: "하위코드명",
+  },
+  {
+    accessorKey: "useYn",
+    header: "사용 여부",
+  },
+  {
+    accessorKey: "regDt",
+    header: "등록일",
+    cell: ({ row }) => {
+      const date = dayjs(row.original.regDt);
+      return date.format("YYYY-MM-DD");
+    },
+  },
+  {
+    id: "actions",
+    header: "관리",
+    cell: ({ row }) => (
+      <div onClick={(e) => e.stopPropagation()}>
+        <LwpoCodeManageButton
+          lwpoCd={row.original.lwpoCd}
+          upCd={row.original.upCd}
+        />
+      </div>
+    ),
+  },
+];
+
+const LwpoCodeManageButton = ({
+  lwpoCd,
+  upCd,
+}: {
+  lwpoCd: string;
+  upCd: string;
+}) => {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  return (
+    <LwpoCodeManagementDialog
+      lwpoCd={lwpoCd}
+      upCd={upCd}
+      open={dialogOpen}
+      onOpenChange={setDialogOpen}
+    >
+      <Button size="sm">관리</Button>
+    </LwpoCodeManagementDialog>
+  );
+};
@@ -1,119 +0,0 @@
-import dayjs from "dayjs";
-import { type ColumnDef } from "@tanstack/react-table";
-import { Button } from "@common/components";
-import type { UpCode } from "@/entities/code/model/upcode-interface";
-import type { LwpoCode } from "@/entities/code/model/lwpocode-interface";
-
-const UpCodeManageButton = () => {
-  return (
-    <Button
-      size="sm"
-      onClick={(e) => {
-        e.stopPropagation();
-        // 클릭 이벤트를 부모로 전파하여 onRowClick이 호출되도록 함
-        e.currentTarget.parentElement?.parentElement?.click();
-      }}
-    >
-      관리
-    </Button>
-  );
-};
-
-const LwpoCodeManageButton = () => {
-  return (
-    <Button
-      size="sm"
-      onClick={(e) => {
-        e.stopPropagation();
-        // 클릭 이벤트를 부모로 전파하여 onRowClick이 호출되도록 함
-        e.currentTarget.parentElement?.parentElement?.click();
-      }}
-    >
-      관리
-    </Button>
-  );
-};
-
-export const upCodecolumns: ColumnDef<UpCode>[] = [
-  {
-    id: "no",
-    header: "NO",
-    cell: ({ row, table }) => {
-      const isSelected = row.getIsSelected();
-      if (isSelected) {
-        return "▶";
-      }
-      const totalRows = table.getRowCount();
-      const currentPage = table.getState().pagination.pageIndex;
-      const pageSize = table.getState().pagination.pageSize;
-      return totalRows - (currentPage * pageSize + row.index);
-    },
-  },
-  {
-    accessorKey: "upCd",
-    header: "상위코드",
-  },
-  {
-    accessorKey: "upCdNm",
-    header: "상위코드명",
-  },
-  {
-    accessorKey: "cdSe",
-    header: "코드구분",
-  },
-  {
-    accessorKey: "useYn",
-    header: "사용여부",
-  },
-  {
-    accessorKey: "regDt",
-    header: "등록일",
-    cell: ({ row }) => {
-      const date = dayjs(row.original.regDt);
-      return date.format("YYYY-MM-DD");
-    },
-  },
-  {
-    id: "actions",
-    header: "관리",
-    cell: () => <UpCodeManageButton />,
-  }
-];
-
-export const lowCodecolumns: ColumnDef<LwpoCode>[] = [
-  {
-    id: "no",
-    header: "NO",
-    cell: ({ row, table }) => {
-      const totalRows = table.getRowCount();
-      const currentPage = table.getState().pagination.pageIndex;
-      const pageSize = table.getState().pagination.pageSize;
-      return totalRows - (currentPage * pageSize + row.index);
-    },
-  },
-  {
-    accessorKey: "lwpoCd",
-    header: "하위코드",
-  },
-  {
-    accessorKey: "lwpoCdNm",
-    header: "하위코드명",
-  },
-  {
-    accessorKey: "useYn",
-    header: "사용 여부",
-  },
-  {
-    accessorKey: "regDt",
-    header: "등록일",
-    cell: ({ row }) => {
-      const date = dayjs(row.original.regDt);
-      return date.format("YYYY-MM-DD");
-    },
-  },
-  {
-    id: "actions",
-    header: "관리",
-    cell: () => <LwpoCodeManageButton />,
-  }
-];
@@ -0,0 +1,64 @@
+import dayjs from "dayjs";
+import { useState } from "react";
+import type { ColumnDef } from "@tanstack/react-table";
+import { Button } from "@common/components";
+import type { UpCode } from "@/entities/code";
+import { UpCodeManagementDialog } from "../ui/upcode-dialog";
+
+export const columns: ColumnDef<UpCode>[] = [
+  {
+    id: "no",
+    header: "NO",
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const { pageIndex, pageSize } = table.getState().pagination;
+      return totalRows - (pageIndex * pageSize + row.index);
+    },
+  },
+  {
+    accessorKey: "upCd",
+    header: "상위코드",
+  },
+  {
+    accessorKey: "upCdNm",
+    header: "상위코드명",
+  },
+  {
+    accessorKey: "cdSe",
+    header: "코드구분",
+  },
+  {
+    accessorKey: "useYn",
+    header: "사용여부",
+  },
+  {
+    accessorKey: "regDt",
+    header: "등록일",
+    cell: ({ row }) => {
+      const date = dayjs(row.original.regDt);
+      return date.format("YYYY-MM-DD");
+    },
+  },
+  {
+    id: "actions",
+    header: "관리",
+    cell: ({ row }) => (
+      <div onClick={(e) => e.stopPropagation()}>
+        <UpCodeManageButton upCd={row.original.upCd} />
+      </div>
+    ),
+  },
+];
+
+const UpCodeManageButton = ({ upCd }: { upCd: string }) => {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  return (
+    <UpCodeManagementDialog
+      upCd={upCd}
+      open={dialogOpen}
+      onOpenChange={setDialogOpen}
+    >
+      <Button size="sm">관리</Button>
+    </UpCodeManagementDialog>
+  );
+};