refactor: useDataTable 적용

apps/cs/src/pages/code/ui/lwpocode-section.tsx

@@ -1,13 +1,10 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type PaginationState,
-} from "@tanstack/react-table";
-import { Button, DataTable, Input, Label } from "@common/components";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+import { Button, Input, Label } from "@common/components";
 import { LwpoCodeApi, type LwpoCodeParams } from "@/entities/code";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { columns } from "../model/lwpocode-table-columns";
 import { LwpoCodeManagementDialog } from "./lwpocode-dialog";
 
@@ -25,7 +22,7 @@ function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
     pageSize: 10,
   });
 
-  const { data: lwpoCodeList, refetch } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.LWPO_CODE, upCd, pagination],
     queryFn: () =>
       LwpoCodeApi.getLwpoCodeList({
@@ -38,23 +35,29 @@ function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
     placeholderData: keepPreviousData,
   });
 
-  const table = useReactTable({
-    data: lwpoCodeList?.content ?? [],
-    columns,
-    rowCount: lwpoCodeList?.totalElements ?? 0,
-    state: { pagination },
-    manualPagination: true,
-    enableMultiRowSelection: false,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    getRowId: (row) => row.lwpoCd,
+  const { tableComponent } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: { pagination },
+      manualPagination: true,
+      enableMultiRowSelection: false,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      getRowId: (row) => row.lwpoCd,
+    },
+    dataTableOptions: { viewPagination: true },
   });
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    refetch();
+    query.refetch();
   };
 
+  useEffect(() => {
+    setPagination({ ...pagination, pageIndex: 0 });
+  }, [upCd]);
+
   return (
     <div className="flex-1">
       <div className="card card-border">
@@ -88,7 +91,7 @@ function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
           </LwpoCodeManagementDialog>
         </div>
         <div className="card !m-4 h-[calc(100vh-35rem)] overflow-auto !p-0">
-          <DataTable table={table} viewPagination />
+          {tableComponent}
         </div>
       </div>
     </div>

apps/cs/src/pages/code/ui/upcode-section.tsx

@@ -1,13 +1,10 @@
 import { useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type PaginationState,
-} from "@tanstack/react-table";
-import { Button, DataTable, Input, Label } from "@common/components";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+import { Button, Input, Label } from "@common/components";
 import { UpCodeApi, type UpCode, type UpCodeParams } from "@/entities/code";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { columns } from "../model/upcode-table-columns";
 import { UpCodeManagementDialog } from "./upcode-dialog";
 
@@ -25,7 +22,7 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
     pageSize: 10,
   });
 
-  const { data: upCodeList, refetch } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.UP_CODE, pagination],
     queryFn: () =>
       UpCodeApi.getUpCodeList({
@@ -36,18 +33,6 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
     placeholderData: keepPreviousData,
   });
 
-  const table = useReactTable({
-    data: upCodeList?.content ?? [],
-    columns,
-    rowCount: upCodeList?.totalElements ?? 0,
-    state: { pagination },
-    manualPagination: true,
-    enableMultiRowSelection: false,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    getRowId: (row) => row.upCd,
-  });
-
   const handleRowClick = (row: UpCode) => {
     table.setRowSelection({ [row.upCd]: true });
     handleSelectedUpCd(row.upCd);
@@ -55,9 +40,23 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    refetch();
+    query.refetch();
   };
 
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: { pagination },
+      manualPagination: true,
+      enableMultiRowSelection: false,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      getRowId: (row) => row.upCd,
+    },
+    dataTableOptions: { onRowClick: handleRowClick, viewPagination: true },
+  });
+
   return (
     <div className="flex-1">
       <div className="card card-border">
@@ -91,7 +90,7 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
           </UpCodeManagementDialog>
         </div>
         <div className="card !m-4 h-[calc(100vh-35rem)] overflow-auto !p-0">
-          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
+          {tableComponent}
         </div>
       </div>
     </div>