refactor: useDataTable 적용

apps/cs/src/pages/module/ui/management-authority-dialog.tsx

@@ -2,15 +2,10 @@ import { useState, memo } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type RowSelectionState,
-} from "@tanstack/react-table";
+import { getCoreRowModel, type RowSelectionState } from "@tanstack/react-table";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import {
   Button,
-  DataTable,
   Dialog,
   DialogClose,
   DialogContent,
@@ -32,7 +27,7 @@ import {
   type RoleAuthorizationsData,
 } from "@/entities/role-authorization";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { useAlertStore, useMutationWrapper, useDataTable } from "@/shared/lib";
 import { createColumns } from "../model/role-authorizations-table-columns";
 import type { Authorizations } from "@/entities/authorization";
 
@@ -49,7 +44,7 @@ const ManagementAuthorityDialog = memo(
     const [isOpened, setIsOpened] = useState(false);
     const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
-    const { data: roleAuthorizationList } = useQuery({
+    const query = useQuery({
       queryKey: [ENDPOINT.USER_SERVICE.ROLE_AUTHORIZATIONS, authorizationNo],
       queryFn: () =>
         RoleAuthorizationsApi.getRoleAuthorizationsList({ authorizationNo }),
@@ -68,24 +63,24 @@ const ManagementAuthorityDialog = memo(
       resolver: zodResolver(roleAuthorizationsFormSchema),
       values: {
         roleAuthorizations:
-          roleAuthorizationList?.content.map(
-            ({ roleId, authorizationNo, useYn }) => ({
-              roleId,
-              authorizationNo,
-              authYn: useYn,
-            }),
-          ) ?? [],
+          query.data?.content.map(({ roleId, authorizationNo, useYn }) => ({
+            roleId,
+            authorizationNo,
+            authYn: useYn,
+          })) ?? [],
       },
     });
 
-    const table = useReactTable({
-      data: roleAuthorizationList?.content ?? [],
-      columns: createColumns(form),
-      state: {
-        rowSelection,
+    const { tableComponent } = useDataTable({
+      query,
+      tableOptions: {
+        columns: createColumns(form),
+        state: {
+          rowSelection,
+        },
+        getCoreRowModel: getCoreRowModel(),
+        onRowSelectionChange: setRowSelection,
       },
-      getCoreRowModel: getCoreRowModel(),
-      onRowSelectionChange: setRowSelection,
     });
 
     const handleSave = async () => {
@@ -129,9 +124,7 @@ const ManagementAuthorityDialog = memo(
                 </TableRow>
               </TableBody>
             </Table>
-            <div className="max-h-[40rem] overflow-auto">
-              <DataTable table={table} />
-            </div>
+            <div className="max-h-[40rem] overflow-auto">{tableComponent}</div>
           </div>
           <DialogFooter className="!justify-center">
             <Button size="lg" onClick={handleSave}>

apps/cs/src/pages/module/ui/module-page.tsx

@@ -3,14 +3,11 @@
 import { useRouter } from "next/navigation";
 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 { CodeSelect } from "@/entities/code";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import {
   AuthorizationsApi,
   type Authorizations,
@@ -31,7 +28,7 @@ function ModulePage() {
     pageSize: 10,
   });
 
-  const { data: authorizationsList, refetch } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS],
     queryFn: () =>
       AuthorizationsApi.getAuthorizationsList({
@@ -43,16 +40,25 @@ function ModulePage() {
     enabled: false,
   });
 
-  const table = useReactTable({
-    data: authorizationsList?.content ?? [],
-    columns,
-    rowCount: authorizationsList?.totalElements ?? 0,
-    state: {
-      pagination,
+  const handleRowClick = (row: Authorizations) => {
+    router.push(`/module/register/${row.authorizationNo}`);
+  };
+
+  const { tableComponent } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+      },
+      onPaginationChange: setPagination,
+      getCoreRowModel: getCoreRowModel(),
+      manualPagination: true,
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
     },
-    onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
   });
 
   const handleAuthorizationQueryChange =
@@ -62,15 +68,11 @@ function ModulePage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    refetch();
-  };
-
-  const handleRowClick = (row: Authorizations) => {
-    router.push(`/module/register/${row.authorizationNo}`);
+    query.refetch();
   };
 
   useEffect(() => {
-    refetch();
+    query.refetch();
   }, [pagination]);
 
   return (
@@ -113,9 +115,7 @@ function ModulePage() {
           <h3 className="text-2xl font-medium text-label">모듈API 목록</h3>
           <Button onClick={() => router.push("/module/register")}>등록</Button>
         </div>
-        <div className="card !m-[1.2rem] !p-0">
-          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
-        </div>
+        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
       </div>
     </div>
   );