refactor: useDataTable 적용

apps/cs/src/pages/groups/ui/additional-user-dialog.tsx

@@ -8,14 +8,12 @@ import {
 } from "@tanstack/react-query";
 import {
   getCoreRowModel,
-  useReactTable,
   type PaginationState,
   type RowSelectionState,
   type ColumnDef,
 } from "@tanstack/react-table";
 import {
   Button,
-  DataTable,
   Dialog,
   DialogContent,
   DialogHeader,
@@ -31,7 +29,7 @@ import {
   type UserSearchParams,
 } from "@/entities/user";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib";
+import { useAlertStore, useDataTable } from "@/shared/lib";
 import { GroupUsersApi } from "../api/group-users-service";
 
 type AdditionalUserDialogProps = {
@@ -54,7 +52,7 @@ function AdditionalUserDialog({ groupId }: AdditionalUserDialogProps) {
     {},
   );
 
-  const { data: usersList } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.USERS, userSearchQuery, pagination],
     queryFn: () =>
       UserApi.findPageUser({
@@ -107,18 +105,19 @@ function AdditionalUserDialog({ groupId }: AdditionalUserDialogProps) {
     },
   ];
 
-  const userTable = useReactTable({
-    data: usersList?.content ?? [],
-    columns: userColumns,
-    rowCount: usersList?.totalElements ?? 0,
-    state: { pagination, rowSelection: userRowSelection },
-    manualPagination: true,
-    enableRowSelection: true,
-    enableMultiRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setUserRowSelection,
-    getRowId: (row) => row.userUnqId,
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns: userColumns,
+      state: { pagination, rowSelection: userRowSelection },
+      manualPagination: true,
+      enableRowSelection: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      onRowSelectionChange: setUserRowSelection,
+      getRowId: (row) => row.userUnqId,
+    },
   });
 
   const handleAddUsers = async () => {
@@ -172,14 +171,14 @@ function AdditionalUserDialog({ groupId }: AdditionalUserDialogProps) {
           />
           <Button onClick={handleSearch}>검색</Button>
         </div>
-        <DataTable table={userTable} viewPagination />
+        {tableComponent}
         <DialogFooter>
           <Button color="white" onClick={() => setOpen(false)}>
             취소
           </Button>
           <Button
             onClick={handleAddUsers}
-            disabled={userTable.getSelectedRowModel().rows.length === 0}
+            disabled={table.getSelectedRowModel().rows.length === 0}
           >
             추가
           </Button>

apps/cs/src/pages/groups/ui/group-users-section.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   keepPreviousData,
   useQuery,
@@ -8,13 +8,12 @@ import {
 } from "@tanstack/react-query";
 import {
   getCoreRowModel,
-  useReactTable,
   type PaginationState,
   type RowSelectionState,
 } from "@tanstack/react-table";
-import { Button, DataTable } from "@common/components";
+import { Button } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib";
+import { useAlertStore, useDataTable } from "@/shared/lib";
 import { columns } from "../model/group-users-table-columns";
 import { GroupUsersApi } from "../api/group-users-service";
 import { AdditionalUserDialog } from "./additional-user-dialog";
@@ -33,7 +32,7 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
   });
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
-  const { data: groupUsersList } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.GROUP_USERS, groupId, pagination],
     queryFn: () =>
       GroupUsersApi.findPageGroupUser({
@@ -45,18 +44,22 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
     placeholderData: keepPreviousData,
   });
 
-  const table = useReactTable({
-    data: groupUsersList?.content ?? [],
-    columns,
-    rowCount: groupUsersList?.totalElements ?? 0,
-    state: { pagination, rowSelection },
-    manualPagination: true,
-    enableRowSelection: true,
-    enableMultiRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
-    getRowId: (row) => row.userUnqId,
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: { pagination, rowSelection },
+      manualPagination: true,
+      enableRowSelection: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      onRowSelectionChange: setRowSelection,
+      getRowId: (row) => row.userUnqId,
+    },
+    dataTableOptions: {
+      viewPagination: true,
+    },
   });
 
   const handleDeleteSelected = async () => {
@@ -82,6 +85,10 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
     }
   };
 
+  useEffect(() => {
+    setPagination({ ...pagination, pageIndex: 0 });
+  }, [groupId]);
+
   return (
     <div className="flex-1">
       <div className="card card-border">
@@ -99,7 +106,7 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
           </div>
         </div>
         <div className="card !m-4 h-[calc(100vh-25.5rem)] overflow-auto !p-0">
-          <DataTable table={table} viewPagination />
+          {tableComponent}
         </div>
       </div>
     </div>

apps/cs/src/pages/groups/ui/groups-section.tsx

@@ -2,13 +2,10 @@
 
 import { useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type PaginationState,
-} from "@tanstack/react-table";
-import { Button, DataTable } from "@common/components";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+import { Button } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { columns } from "../model/groups-table-columns";
 import { GroupsApi } from "../api/groups-service";
 import { GroupsDialog } from "./groups-dialog";
@@ -23,7 +20,7 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
     pageSize: 10,
   });
 
-  const { data: groupsList, refetch } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.GROUPS, pagination],
     queryFn: () =>
       GroupsApi.findPageGroup({
@@ -33,34 +30,39 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
     placeholderData: keepPreviousData,
   });
 
-  const table = useReactTable({
-    data: groupsList?.content ?? [],
-    columns,
-    rowCount: groupsList?.totalElements ?? 0,
-    state: { pagination },
-    manualPagination: true,
-    enableMultiRowSelection: false,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    getRowId: (row) => row.groupId,
-  });
-
   const handleRowClick = (row: { groupId: string }) => {
     table.setRowSelection({ [row.groupId]: true });
     handleSelectedGroup(row.groupId);
   };
 
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: { pagination },
+      manualPagination: true,
+      enableMultiRowSelection: false,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      getRowId: (row) => row.groupId,
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
+    },
+  });
+
   return (
     <div className="flex-1">
       <div className="card card-border">
         <div className="card-header">
           <h3 className="text-2xl font-medium text-label">그룹 목록</h3>
-          <GroupsDialog onSuccess={refetch}>
+          <GroupsDialog onSuccess={query.refetch}>
             <Button>등록</Button>
           </GroupsDialog>
         </div>
         <div className="card !m-4 h-[calc(100vh-25.5rem)] overflow-auto !p-0">
-          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
+          {tableComponent}
         </div>
       </div>
     </div>

apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx

@@ -2,11 +2,10 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
-import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { getCoreRowModel } from "@tanstack/react-table";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import {
   Button,
-  DataTable,
   Dialog,
   DialogClose,
   DialogContent,
@@ -22,7 +21,7 @@ import {
   type MenuAuthorityFormData,
 } from "@/entities/menu-authority";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { useAlertStore, useDataTable, useMutationWrapper } from "@/shared/lib";
 import { createColumns } from "../model/group-menu-authority-table-columns";
 
 type MenuAuthorityDialogProps = {
@@ -34,7 +33,7 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) {
   const alert = useAlertStore((state) => state.setMessage);
   const [open, setOpen] = useState(false);
 
-  const { data: menuAuthorityList } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.MENU_AUTHRTS, groupId],
     queryFn: () => MenuAuthorityApi.getGroupMenuAuthorityList({ groupId }),
     enabled: open && !!groupId,
@@ -51,14 +50,16 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) {
   const form = useForm<MenuAuthorityFormData>({
     resolver: zodResolver(menuAuthorityFormSchema),
     values: {
-      menuAuthority: menuAuthorityList?.content ?? [],
+      menuAuthority: query.data?.content ?? [],
     },
   });
 
-  const table = useReactTable({
-    data: menuAuthorityList?.content ?? [],
-    columns: createColumns(form),
-    getCoreRowModel: getCoreRowModel(),
+  const { tableComponent } = useDataTable({
+    query,
+    tableOptions: {
+      columns: createColumns(form),
+      getCoreRowModel: getCoreRowModel(),
+    },
   });
 
   const handleSave = async (e: React.MouseEvent) => {
@@ -85,9 +86,7 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) {
         <DialogHeader>
           <DialogTitle>그룹별 메뉴 권한</DialogTitle>
         </DialogHeader>
-        <div className="max-h-[40rem] overflow-auto">
-          <DataTable table={table} />
-        </div>
+        <div className="max-h-[40rem] overflow-auto">{tableComponent}</div>
         <DialogFooter className="!justify-center">
           <Button size="lg" onClick={handleSave}>
             저장