refactor: useDataTable 적용

apps/cs/src/pages/users/ui/agency-search-dialog.tsx

@@ -5,7 +5,6 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import {
-  useReactTable,
   getCoreRowModel,
   getPaginationRowModel,
   type PaginationState,
@@ -21,7 +20,6 @@ import {
   Button,
   Input,
   Label,
-  DataTable,
 } from "@common/components";
 import {
   LwpoCodeApi,
@@ -29,6 +27,7 @@ import {
   type LwpoCodeParams,
 } from "@/entities/code";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 
 interface AgencySearchDialogProps {
   onSelectAgency: (data: { lwpoCd: string; lwpoCdNm: string }) => void;
@@ -46,7 +45,7 @@ function AgencySearchDialog({ onSelectAgency }: AgencySearchDialogProps) {
     lwpoCdNm: "",
   });
 
-  const { data, refetch } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.LWPO_CODE, pagination],
     queryFn: () =>
       LwpoCodeApi.getLwpoCodeList({
@@ -57,32 +56,45 @@ function AgencySearchDialog({ onSelectAgency }: AgencySearchDialogProps) {
     placeholderData: keepPreviousData,
   });
 
-  const table = useReactTable({
-    data: data?.content ?? [],
-    columns: [
-      {
-        accessorKey: "lwpoCd",
-        header: "기관코드",
+  const handleRowClick = (row: LwpoCode) => {
+    table.setRowSelection({
+      [row.lwpoCd.toString()]: true,
+    });
+    setSelectedAgency(row);
+  };
+
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns: [
+        {
+          accessorKey: "lwpoCd",
+          header: "기관코드",
+        },
+        {
+          accessorKey: "lwpoCdNm",
+          header: "기관명",
+        },
+      ],
+      state: {
+        pagination,
       },
-      {
-        accessorKey: "lwpoCdNm",
-        header: "기관명",
-      },
-    ],
-    state: {
-      pagination,
+      manualPagination: true,
+      enableMultiRowSelection: false,
+      getRowId: (row) => row.lwpoCd.toString(),
+      onPaginationChange: setPagination,
+      getCoreRowModel: getCoreRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
+      variant: "secondary",
     },
-    rowCount: data?.totalElements ?? 0,
-    manualPagination: true,
-    enableMultiRowSelection: false,
-    getRowId: (row) => row.lwpoCd.toString(),
-    onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
   });
 
   const handleSearch = async () => {
-    await refetch();
+    await query.refetch();
     queryClient.removeQueries({
       queryKey: [ENDPOINT.CMS_SERVICE.LWPO_CODE],
     });
@@ -94,13 +106,6 @@ function AgencySearchDialog({ onSelectAgency }: AgencySearchDialogProps) {
     setSelectedAgency(null);
   };
 
-  const handleRowClick = (row: LwpoCode) => {
-    table.setRowSelection({
-      [row.lwpoCd.toString()]: true,
-    });
-    setSelectedAgency(row);
-  };
-
   const handleSelectAgency = () => {
     if (!selectedAgency) return;
     onSelectAgency({
@@ -146,12 +151,7 @@ function AgencySearchDialog({ onSelectAgency }: AgencySearchDialogProps) {
           </div>
         </form>
 
-        <DataTable
-          table={table}
-          variant="secondary"
-          onRowClick={handleRowClick}
-          viewPagination
-        />
+        {tableComponent}
 
         <DialogFooter className="!justify-center">
           <Button

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

@@ -5,15 +5,10 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type PaginationState,
-} from "@tanstack/react-table";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
 import {
   Button,
   Checkbox,
-  DataTable,
   DateRangePicker,
   Input,
   Label,
@@ -30,6 +25,7 @@ import {
   type UserSearchParams,
 } from "@/entities/user";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { columns } from "../model/table-columns";
 
 type DateRange = {
@@ -64,7 +60,7 @@ function UsersPage() {
     queryFn: () => UserApi.selectUserSttsStats(),
   });
 
-  const { data: users, refetch } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.USERS, pagination, watch("sort")],
     queryFn: () =>
       UserApi.findPageUser({
@@ -79,25 +75,30 @@ function UsersPage() {
     queryFn: () => CodeApi.getCode("USERSTTS"),
   });
 
-  const table = useReactTable({
-    data: users?.content ?? [],
-    columns,
-    state: {
-      pagination,
+  const handleRowClick = (row: UserListResponse) => {
+    router.push(`/users/${row.userUnqId}`);
+  };
+
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+      },
+      manualPagination: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
     },
-    rowCount: users?.totalElements ?? 0,
-    manualPagination: true,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
   });
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    refetch();
-  };
-
-  const handleRowClick = (row: UserListResponse) => {
-    router.push(`/users/${row.userUnqId}`);
+    query.refetch();
   };
 
   const handlePresetDateRange = (value: string) => {
@@ -323,9 +324,7 @@ function UsersPage() {
             </div>
           </div>
         </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>
   );

apps/cs/src/pages/users/ui/zip-search-dialog.tsx

@@ -5,7 +5,6 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import {
-  useReactTable,
   getCoreRowModel,
   getPaginationRowModel,
   type PaginationState,
@@ -21,9 +20,9 @@ import {
   Button,
   Input,
   Label,
-  DataTable,
 } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { ZipApi, type Zip, type ZipSearchParams } from "../api/zip-service";
 
 interface ZipSearchDialogProps {
@@ -45,7 +44,7 @@ function ZipSearchDialog({ onSelectAddress }: ZipSearchDialogProps) {
   });
   const hasFetchedOnce = useRef(false);
 
-  const { data, refetch } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.ZIPS, pagination],
     queryFn: () =>
       ZipApi.searchZip({
@@ -57,32 +56,45 @@ function ZipSearchDialog({ onSelectAddress }: ZipSearchDialogProps) {
     enabled: false,
   });
 
-  const table = useReactTable({
-    data: data?.content ?? [],
-    columns: [
-      {
-        accessorKey: "zoneNo",
-        header: "우편번호",
+  const handleRowClick = (row: Zip) => {
+    table.setRowSelection({
+      [row.zipId.toString()]: true,
+    });
+    setSelectedAddress(row);
+  };
+
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns: [
+        {
+          accessorKey: "zoneNo",
+          header: "우편번호",
+        },
+        {
+          accessorKey: "zipAddr",
+          header: "주소",
+        },
+      ],
+      state: {
+        pagination,
       },
-      {
-        accessorKey: "zipAddr",
-        header: "주소",
-      },
-    ],
-    state: {
-      pagination,
+      manualPagination: true,
+      enableMultiRowSelection: false,
+      getRowId: (row) => row.zipId.toString(),
+      onPaginationChange: setPagination,
+      getCoreRowModel: getCoreRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
+      variant: "secondary",
     },
-    rowCount: data?.totalElements ?? 0,
-    manualPagination: true,
-    enableMultiRowSelection: false,
-    getRowId: (row) => row.zipId.toString(),
-    onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
   });
 
   const handleSearch = async () => {
-    await refetch();
+    await query.refetch();
     queryClient.removeQueries({
       queryKey: [ENDPOINT.CMS_SERVICE.ZIPS],
     });
@@ -95,13 +107,6 @@ function ZipSearchDialog({ onSelectAddress }: ZipSearchDialogProps) {
     hasFetchedOnce.current = true;
   };
 
-  const handleRowClick = (row: Zip) => {
-    table.setRowSelection({
-      [row.zipId.toString()]: true,
-    });
-    setSelectedAddress(row);
-  };
-
   const handleSelectAddress = () => {
     if (!selectedAddress) return;
     onSelectAddress({
@@ -112,8 +117,8 @@ function ZipSearchDialog({ onSelectAddress }: ZipSearchDialogProps) {
   };
 
   useEffect(() => {
-    if (hasFetchedOnce.current) refetch();
-  }, [pagination, refetch]);
+    if (hasFetchedOnce.current) query.refetch();
+  }, [pagination]);
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -195,14 +200,7 @@ function ZipSearchDialog({ onSelectAddress }: ZipSearchDialogProps) {
           </div>
         </form>
 
-        {data?.content.length && (
-          <DataTable
-            table={table}
-            variant="secondary"
-            onRowClick={handleRowClick}
-            viewPagination
-          />
-        )}
+        {query.data?.content.length && tableComponent}
 
         <DialogFooter className="!justify-center">
           <Button