refactor: useDataTable 적용

2025-06-18 17:00:18 +09:00
parent 6d6892973f
commit 3b7f8bcca7
34 changed files with 718 additions and 709 deletions
@@ -1,11 +1,10 @@
 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,
@@ -15,7 +14,7 @@ import {
  DialogTrigger,
 } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { useAlertStore, useDataTable, useMutationWrapper } from "@/shared/lib";
 import {
  menuAuthorityFormSchema,
  type MenuAuthorityFormData,
@@ -35,7 +34,7 @@ function ManagementAuthorityDialog({
  const { confirm } = useConfirm();
  const alert = useAlertStore((state) => state.setMessage);

-  const { data: menuAuthorityList } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.MENU_AUTHRTS, menuCd],
    queryFn: () => MenuAuthorityApi.getMenuAuthorityList({ menuCd }),
    enabled: !!menuCd,
@@ -52,14 +51,16 @@ function ManagementAuthorityDialog({
  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 () => {
@@ -82,9 +83,7 @@ function ManagementAuthorityDialog({
        <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}>
            저장
@@ -5,13 +5,13 @@ import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import {
  getCoreRowModel,
-  useReactTable,
  type PaginationState,
  type RowSelectionState,
 } from "@tanstack/react-table";
-import { Button, DataTable, Input, Label } from "@common/components";
+import { Button, Input, Label } from "@common/components";
 import { POSTING_TYPE, PostingDialog } from "@/entities/posting";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { BannerApi } from "../api/banner-service";
 import { createColumns } from "../model/banner-table-columns";
 import { type Banner, type BannerParams } from "../model/banner-interface";
@@ -34,7 +34,7 @@ function BannerPage() {
    pageSize: 5,
  });

-  const { data: bannerList, refetch } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.BANNERS],
    queryFn: () =>
      BannerApi.getBannerList({
@@ -45,24 +45,9 @@ function BannerPage() {
    enabled: false,
  });

-  const table = useReactTable({
-    data: bannerList?.content ?? [],
-    columns: createColumns(imageRefs),
-    state: {
-      pagination,
-      rowSelection,
-    },
-    rowCount: bannerList?.totalElements ?? 0,
-    manualPagination: true,
-    enableMultiRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
-  });
-
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-    refetch();
+    query.refetch();
  };

  const handleRowClick = (row: Banner) => {
@@ -78,6 +63,26 @@ function BannerPage() {
    return selectedImages;
  };

+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns: createColumns(imageRefs),
+      state: {
+        pagination,
+        rowSelection,
+      },
+      manualPagination: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      onRowSelectionChange: setRowSelection,
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
+    },
+  });
+
  useEffect(() => {
    const postingTargets = table
      .getFilteredSelectedRowModel()
@@ -95,7 +100,7 @@ function BannerPage() {
  }, [rowSelection]);

  useEffect(() => {
-    refetch();
+    query.refetch();
  }, [pagination]);

  return (
@@ -133,9 +138,7 @@ function BannerPage() {
            </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>
  );
@@ -5,15 +5,11 @@ import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery, useQueryClient } 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 } from "@common/components";
+import { Button } from "@common/components";
 import { PostingApi, type PostPayload } from "@/entities/posting";
-import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { useAlertStore, useDataTable, useMutationWrapper } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import {
  bannerFormSchema,
@@ -36,7 +32,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
    queryFn: () => BannerApi.getBannerInfo(sequential),
  });

-  const { data: postHistory } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, sequential],
    queryFn: () =>
      PostingApi.getPostingHistory({ pstgTrgtNo: parseInt(sequential) }),
@@ -72,15 +68,17 @@ function ModifyPage({ sequential }: { sequential: string }) {
    values: bannerDetail,
  });

-  const table = useReactTable({
-    data: postHistory?.content ?? [],
-    columns,
-    state: {
-      rowSelection,
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        rowSelection,
+      },
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onRowSelectionChange: setRowSelection,
    },
-    enableMultiRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
  });

  const handleDeletePostingHistory = async () => {
@@ -122,7 +120,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
              이력삭제
            </Button>
          </div>
-          <DataTable table={table} />
+          {tableComponent}
        </div>
      </div>
    </div>
@@ -5,13 +5,11 @@ import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import {
  getCoreRowModel,
-  useReactTable,
  type PaginationState,
  type RowSelectionState,
 } from "@tanstack/react-table";
 import {
  Button,
-  DataTable,
  Input,
  Label,
  Select,
@@ -23,6 +21,7 @@ import {
 import { CodeSelect } from "@/entities/code";
 import { BoardApi, type BoardParams } from "@/entities/board";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { type Board } from "@/entities/board";
 import { columns } from "../model/table-columns";

@@ -39,7 +38,7 @@ function BbsPage() {
    pageSize: 10,
  });

-  const { data: boardList, refetch } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.BOARD_SERVICE.BBS],
    queryFn: () =>
      BoardApi.getBoardList({
@@ -50,32 +49,37 @@ function BbsPage() {
    enabled: false,
  });

-  const table = useReactTable({
-    data: boardList?.content ?? [],
-    columns,
-    state: {
-      pagination,
-      rowSelection,
-    },
-    rowCount: boardList?.totalElements ?? 0,
-    manualPagination: true,
-    enableMultiRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
-  });
-
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-    refetch();
+    query.refetch();
  };

  const handleRowClick = (row: Board) => {
    router.push(`/bbs/register/${row.bbsId}`);
  };

+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+        rowSelection,
+      },
+      manualPagination: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      onRowSelectionChange: setRowSelection,
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
+    },
+  });
+
  useEffect(() => {
-    refetch();
+    query.refetch();
  }, [pagination]);

  return (
@@ -134,9 +138,7 @@ function BbsPage() {
            </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>
  );
@@ -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>
@@ -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>
@@ -3,18 +3,15 @@
 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 {
  ContentsApi,
  type Contents,
  type ContentsParams,
 } from "@/entities/content";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { columns } from "../model/table-columns";

 function ContentsPage() {
@@ -28,7 +25,7 @@ function ContentsPage() {
    pageSize: 5,
  });

-  const { data: contentsList, refetch } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.CONTENTS],
    queryFn: () =>
      ContentsApi.getContentsList({
@@ -42,27 +39,33 @@ function ContentsPage() {

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-    refetch();
+    query.refetch();
  };

  const handleRowClick = (row: Contents) => {
    router.push(`/contents/register/${row.contsSn}`);
  };

-  const table = useReactTable({
-    data: contentsList?.content ?? [],
-    columns,
-    rowCount: contentsList?.totalElements ?? 0,
-    state: {
-      pagination,
+  const { tableComponent } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+      },
+      onPaginationChange: setPagination,
+      getCoreRowModel: getCoreRowModel(),
+      manualPagination: true,
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
+      variant: "secondary",
    },
-    onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
  });

  useEffect(() => {
-    refetch();
+    query.refetch();
  }, [pagination]);

  return (
@@ -89,14 +92,7 @@ function ContentsPage() {
            등록
          </Button>
        </div>
-        <div className="card !m-[1.2rem] !p-0">
-          <DataTable
-            table={table}
-            onRowClick={handleRowClick}
-            variant="secondary"
-            viewPagination
-          />
-        </div>
+        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
      </div>
    </div>
  );
@@ -2,15 +2,11 @@

 import { useEffect, useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type PaginationState,
-} from "@tanstack/react-table";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
-import { Button, DataTable, Input, Label } from "@common/components";
+import { Button, Input, Label } from "@common/components";
 import { AttachmentApi, type AttachmentParams } from "@/entities/attachment";
-import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { useAlertStore, useDataTable, useMutationWrapper } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import { createColumns } from "../model/table-columns";

@@ -26,7 +22,7 @@ function FilePage() {
    pageSize: 10,
  });

-  const { data: attachmentsList, refetch } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.ATTACH_SERVICE.ATTACHMENTS],
    queryFn: () =>
      AttachmentApi.getAttachmentsList({
@@ -42,7 +38,7 @@ function FilePage() {
    mutationFn: (atflId: string) =>
      AttachmentApi.deleteAttachmentByAtflId(atflId),
    onSuccess: () => {
-      refetch();
+      query.refetch();
      alert("삭제되었습니다.");
    },
  });
@@ -53,16 +49,20 @@ function FilePage() {
    }
  };

-  const table = useReactTable({
-    data: attachmentsList?.content ?? [],
-    columns: createColumns(handleDeleteAttachment),
-    rowCount: attachmentsList?.totalElements ?? 0,
-    state: {
-      pagination,
+  const { tableComponent } = useDataTable({
+    query,
+    tableOptions: {
+      columns: createColumns(handleDeleteAttachment),
+      state: {
+        pagination,
+      },
+      onPaginationChange: setPagination,
+      getCoreRowModel: getCoreRowModel(),
+      manualPagination: true,
+    },
+    dataTableOptions: {
+      viewPagination: true,
    },
-    onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
  });

  const handleAttachmentQueryChange =
@@ -72,11 +72,11 @@ function FilePage() {

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-    refetch();
+    query.refetch();
  };

  useEffect(() => {
-    refetch();
+    query.refetch();
  }, [pagination]);

  return (
@@ -108,9 +108,7 @@ function FilePage() {
        <div className="card-header">
          <h3 className="text-2xl font-medium text-label">파일 목록</h3>
        </div>
-        <div className="card !m-[1.2rem] !p-0">
-          <DataTable table={table} viewPagination />
-        </div>
+        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
      </div>
    </div>
  );
@@ -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>
@@ -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>
@@ -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>
@@ -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}>
            저장
@@ -5,13 +5,13 @@ import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import {
  getCoreRowModel,
-  useReactTable,
  type PaginationState,
  type RowSelectionState,
 } from "@tanstack/react-table";
-import { Button, DataTable, Input, Label } from "@common/components";
+import { Button, Input, Label } from "@common/components";
 import { POSTING_TYPE, PostingDialog } from "@/entities/posting";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { ImageApi } from "../api/image-service";
 import { columns } from "../model/image-table-columns";
 import { type Image, type ImageParams } from "../model/image-interface";
@@ -32,7 +32,7 @@ function ImagePage() {
    pageSize: 5,
  });

-  const { data: imageList, refetch } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.IMAGES],
    queryFn: () =>
      ImageApi.getImageList({
@@ -43,30 +43,35 @@ function ImagePage() {
    enabled: false,
  });

-  const table = useReactTable({
-    data: imageList?.content ?? [],
-    columns,
-    state: {
-      pagination,
-      rowSelection,
-    },
-    rowCount: imageList?.totalElements ?? 0,
-    manualPagination: true,
-    enableMultiRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
-  });
-
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-    refetch();
+    query.refetch();
  };

  const handleRowClick = (row: Image) => {
    router.push(`/image/register/${row.imgSn}`);
  };

+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+        rowSelection,
+      },
+      manualPagination: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      onRowSelectionChange: setRowSelection,
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
+    },
+  });
+
  useEffect(() => {
    const postingTargets = table
      .getFilteredSelectedRowModel()
@@ -84,7 +89,7 @@ function ImagePage() {
  }, [rowSelection]);

  useEffect(() => {
-    refetch();
+    query.refetch();
  }, [pagination]);

  return (
@@ -121,9 +126,7 @@ function ImagePage() {
            </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>
  );
@@ -5,15 +5,11 @@ import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery, useQueryClient } 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 } from "@common/components";
+import { Button } from "@common/components";
 import { PostingApi, type PostPayload } from "@/entities/posting";
-import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { useAlertStore, useMutationWrapper, useDataTable } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import { imageFormSchema, type ImageFormData } from "../model/image-interface";
 import { columns } from "../model/posting-table-columns";
@@ -33,7 +29,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
    queryFn: () => ImageApi.getImageInfo(sequential),
  });

-  const { data: postHistory } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, sequential],
    queryFn: () =>
      PostingApi.getPostingHistory({ pstgTrgtNo: parseInt(sequential) }),
@@ -68,15 +64,17 @@ function ModifyPage({ sequential }: { sequential: string }) {
    values: imageDetail,
  });

-  const table = useReactTable({
-    data: postHistory?.content ?? [],
-    columns,
-    state: {
-      rowSelection,
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        rowSelection,
+      },
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onRowSelectionChange: setRowSelection,
    },
-    enableMultiRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
  });

  const handleDeletePostingHistory = async () => {
@@ -118,7 +116,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
              이력삭제
            </Button>
          </div>
-          <DataTable table={table} />
+          {tableComponent}
        </div>
      </div>
    </div>
@@ -1,13 +1,8 @@
 import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type RowSelectionState,
-} from "@tanstack/react-table";
+import { getCoreRowModel, type RowSelectionState } from "@tanstack/react-table";
 import {
  Button,
-  DataTable,
  Dialog,
  DialogTrigger,
  DialogContent,
@@ -16,6 +11,7 @@ import {
  Input,
 } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { BoardApi, type BoardPopup } from "@/entities/board";
 import { columns } from "../model/board-table-columns";

@@ -30,21 +26,23 @@ function BoardSearchDialog({
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
  const [bbsNm, setBbsNm] = useState("");

-  const { data: boardList, refetch } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.BOARD_SERVICE.BBS],
    queryFn: () => BoardApi.getBoardPopupList({ bbsNm }),
    enabled: false,
  });

-  const table = useReactTable({
-    data: boardList?.content ?? [],
-    columns,
-    state: {
-      rowSelection,
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        rowSelection,
+      },
+      enableMultiRowSelection: false,
+      getCoreRowModel: getCoreRowModel(),
+      onRowSelectionChange: setRowSelection,
    },
-    enableMultiRowSelection: false,
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
  });

  useEffect(() => {
@@ -55,7 +53,7 @@ function BoardSearchDialog({
  }, [table.getSelectedRowModel().rows]);

  useEffect(() => {
-    refetch();
+    query.refetch();
  }, []);

  return (
@@ -78,13 +76,13 @@ function BoardSearchDialog({
              value={bbsNm}
              onChange={(e) => setBbsNm(e.target.value)}
            />
-            <Button onClick={() => refetch()}>
+            <Button onClick={() => query.refetch()}>
              <i className="diveicon di-search" />
              조회
            </Button>
          </div>
          <div className="h-[40rem] w-full overflow-y-auto">
-            <DataTable table={table} />
+            {tableComponent}
          </div>
        </div>
      </DialogContent>
@@ -1,13 +1,8 @@
 import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type RowSelectionState,
-} from "@tanstack/react-table";
+import { getCoreRowModel, type RowSelectionState } from "@tanstack/react-table";
 import {
  Button,
-  DataTable,
  Dialog,
  DialogTrigger,
  DialogContent,
@@ -16,6 +11,7 @@ import {
  Input,
 } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { ContentsApi, type Contents } from "@/entities/content";
 import { columns } from "../model/contents-table-colums";

@@ -30,21 +26,23 @@ function ContentSearchDialog({
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
  const [contsTtl, setContsTtl] = useState("");

-  const { data: contentList, refetch } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.CONTENTS],
    queryFn: () => ContentsApi.getContentsList({ contsTtl }),
    enabled: false,
  });

-  const table = useReactTable({
-    data: contentList?.content ?? [],
-    columns,
-    state: {
-      rowSelection,
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        rowSelection,
+      },
+      enableMultiRowSelection: false,
+      getCoreRowModel: getCoreRowModel(),
+      onRowSelectionChange: setRowSelection,
    },
-    enableMultiRowSelection: false,
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
  });

  useEffect(() => {
@@ -55,7 +53,7 @@ function ContentSearchDialog({
  }, [table.getSelectedRowModel().rows]);

  useEffect(() => {
-    refetch();
+    query.refetch();
  }, []);

  return (
@@ -78,13 +76,13 @@ function ContentSearchDialog({
              value={contsTtl}
              onChange={(e) => setContsTtl(e.target.value)}
            />
-            <Button onClick={() => refetch()}>
+            <Button onClick={() => query.refetch()}>
              <i className="diveicon di-search" />
              조회
            </Button>
          </div>
          <div className="h-[40rem] w-full overflow-y-auto">
-            <DataTable table={table} />
+            {tableComponent}
          </div>
        </div>
      </DialogContent>
@@ -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}>
@@ -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>
  );
@@ -1,13 +1,8 @@
 import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type RowSelectionState,
-} from "@tanstack/react-table";
+import { getCoreRowModel, type RowSelectionState } from "@tanstack/react-table";
 import {
  Button,
-  DataTable,
  Dialog,
  DialogTrigger,
  DialogContent,
@@ -22,6 +17,7 @@ import {
  type SearchUser,
 } from "@/entities/user-organization";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { columns } from "../model/additional-user-table-columns";

 type AdditionalUserDialogProps = {
@@ -36,18 +32,20 @@ function AdditionalUserDialog({
  const [userNm, setUserNm] = useState("");
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

-  const { data: userList, refetch } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.USER_ORGANIZATION],
    queryFn: () => UserOrganizationApi.searchUser({ userNm }),
    enabled: false,
  });

-  const table = useReactTable({
-    data: userList?.content ?? [],
-    columns,
-    state: { rowSelection },
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: { rowSelection },
+      getCoreRowModel: getCoreRowModel(),
+      onRowSelectionChange: setRowSelection,
+    },
  });

  const handleAddUsers = () => {
@@ -65,7 +63,7 @@ function AdditionalUserDialog({
  };

  useEffect(() => {
-    if (open) refetch();
+    if (open) query.refetch();
  }, [open]);

  return (
@@ -87,13 +85,13 @@ function AdditionalUserDialog({
              value={userNm}
              onChange={(e) => setUserNm(e.target.value)}
            />
-            <Button onClick={() => refetch()}>
+            <Button onClick={() => query.refetch()}>
              <i className="diveicon di-search" />
              조회
            </Button>
          </div>
          <div className="h-[40rem] w-full overflow-y-auto">
-            <DataTable table={table} />
+            {tableComponent}
          </div>
        </div>
        <DialogFooter className="!justify-center">
@@ -5,16 +5,16 @@ import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery, useQueryClient } 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 { DataTable } from "@common/components";
 import { AuthorityButton } from "@/entities/menu-authority";
 import { PostingApi, type PostPayload } from "@/entities/posting";
-import { useAlertStore, useUserStore, useMutationWrapper } from "@/shared/lib";
+import {
+  useAlertStore,
+  useUserStore,
+  useMutationWrapper,
+  useDataTable,
+} from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import {
  popupUpdateFormSchema,
@@ -39,7 +39,7 @@ function ModifyPage({ popupSn }: { popupSn: number }) {
    enabled: !!popupSn,
  });

-  const { data: postHistory } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, popupSn],
    queryFn: () => PostingApi.getPostingHistory({ pstgTrgtNo: popupSn }),
  });
@@ -70,15 +70,17 @@ function ModifyPage({ popupSn }: { popupSn: number }) {
    },
  });

-  const table = useReactTable({
-    data: postHistory?.content ?? [],
-    columns,
-    state: {
-      rowSelection,
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        rowSelection,
+      },
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onRowSelectionChange: setRowSelection,
    },
-    enableMultiRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
  });

  const handleDeletePostingHistory = async () => {
@@ -117,7 +119,7 @@ function ModifyPage({ popupSn }: { popupSn: number }) {
              이력삭제
            </AuthorityButton>
          </div>
-          <DataTable table={table} />
+          {tableComponent}
        </div>
      </div>
    </div>
@@ -5,14 +5,14 @@ import { useRouter } from "next/navigation";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {
  getCoreRowModel,
-  useReactTable,
  type PaginationState,
  type RowSelectionState,
 } from "@tanstack/react-table";
-import { Button, DataTable, Input, Label } from "@common/components";
+import { Button, Input, Label } from "@common/components";
 import { AuthorityButton } from "@/entities/menu-authority";
 import { POSTING_TYPE, PostingDialog } from "@/entities/posting";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { PopupApi } from "../api/popup-service";
 import { columns } from "../model/table-columns";
 import type { Popup, PopupParams } from "../model/popup-interface";
@@ -35,7 +35,7 @@ function PopupPage() {
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
  const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);

-  const { data: popupList, refetch } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.POPUPS],
    queryFn: () =>
      PopupApi.getPopupList({
@@ -48,25 +48,30 @@ function PopupPage() {

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-    refetch();
+    query.refetch();
  };

  const handleRowClick = (row: Popup) => {
    router.push(`/popup/register/${row.popupSn}`);
  };

-  const table = useReactTable({
-    data: popupList?.content ?? [],
-    columns,
-    rowCount: popupList?.totalElements ?? 0,
-    state: {
-      pagination,
-      rowSelection,
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+        rowSelection,
+      },
+      manualPagination: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      onRowSelectionChange: setRowSelection,
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
    },
-    manualPagination: true,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
  });

  useEffect(() => {
@@ -120,9 +125,7 @@ function PopupPage() {
            </AuthorityButton>
          </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>
  );
@@ -7,7 +7,6 @@ import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {
  getCoreRowModel,
-  useReactTable,
  type PaginationState,
  type RowSelectionState,
 } from "@tanstack/react-table";
@@ -21,7 +20,6 @@ import {
  SelectItem,
  SelectTrigger,
  SelectValue,
-  DataTable,
 } from "@common/components";
 import {
  PostApi,
@@ -32,7 +30,12 @@ import {
 } from "@/entities/post";
 import { BoardApi } from "@/entities/board";
 import { AuthorityButton } from "@/entities/menu-authority";
-import { useAlertStore, useMutationWrapper, usePrompt } from "@/shared/lib";
+import {
+  useAlertStore,
+  useMutationWrapper,
+  usePrompt,
+  useDataTable,
+} from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import { columns } from "../model/table-columns";
 import { MovePostDialog } from "./move-post-dialog";
@@ -63,7 +66,7 @@ function RecentPage() {
  });
  const [isDeletePostData, setIsDeletePostData] = useState(false);

-  const { data: recentPostList, refetch } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.BOARD_SERVICE.POSTS, pagination],
    queryFn: () =>
      PostApi.getRecentPostList({
@@ -82,23 +85,34 @@ function RecentPage() {
  const { mutate: movePost } = useMutationWrapper({
    mutationFn: (data: MovePost[]) => PostApi.movePost(data),
    onSuccess: () => {
-      alert("이동이 완료되었습니다.", refetch);
+      alert("이동이 완료되었습니다.", query.refetch);
    },
  });

-  const table = useReactTable({
-    data: recentPostList?.content ?? [],
-    columns,
-    state: {
-      pagination,
-      rowSelection,
+  const handleRowClick = (row: RecentPost) => {
+    router.push(
+      `/bbs/${row.bbsTypeCd.toLowerCase()}/${row.bbsId}/${row.pstNo}`,
+    );
+  };
+
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+        rowSelection,
+      },
+      manualPagination: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      onRowSelectionChange: setRowSelection,
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
    },
-    rowCount: recentPostList?.totalElements ?? 0,
-    manualPagination: true,
-    enableMultiRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
  });

  const isSelectedRow = table.getFilteredSelectedRowModel().rows.length > 0;
@@ -106,13 +120,7 @@ function RecentPage() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsDeletePostData(recentPostParams.delYn === "Y");
-    refetch();
-  };
-
-  const handleRowClick = (row: RecentPost) => {
-    router.push(
-      `/bbs/${row.bbsTypeCd.toLowerCase()}/${row.bbsId}/${row.pstNo}`,
-    );
+    query.refetch();
  };

  const handleRecentPostParamsChange =
@@ -160,7 +168,7 @@ function RecentPage() {
        delRsn,
      }));
    PostApi.softDeletePost(selectedPosts);
-    alert("삭제가 완료되었습니다.", refetch);
+    alert("삭제가 완료되었습니다.", query.refetch);
    setRowSelection({});
  };

@@ -177,7 +185,7 @@ function RecentPage() {
          pstNo: row.original.pstNo,
        }));
      PostApi.hardDeletePost(selectedPosts);
-      alert("삭제가 완료되었습니다.", refetch);
+      alert("삭제가 완료되었습니다.", query.refetch);
      setRowSelection({});
    }
  };
@@ -191,7 +199,7 @@ function RecentPage() {
          pstNo: row.original.pstNo,
        }));
      PostApi.restorePost(selectedPosts);
-      alert("복원이 완료되었습니다.", refetch);
+      alert("복원이 완료되었습니다.", query.refetch);
      setRowSelection({});
    }
  };
@@ -332,9 +340,7 @@ function RecentPage() {
            </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>
  );
@@ -1,8 +1,4 @@
-import {
-  getCoreRowModel,
-  useReactTable,
-  type ColumnDef,
-} from "@tanstack/react-table";
+import { getCoreRowModel, type ColumnDef } from "@tanstack/react-table";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
  Dialog,
@@ -11,7 +7,6 @@ import {
  DialogHeader,
  DialogTitle,
  Button,
-  DataTable,
  Switch,
 } from "@common/components";
 import {
@@ -20,7 +15,7 @@ import {
  type RoleAuthorizationsByRoleId,
 } from "@/entities/role-authorization";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { useAlertStore, useMutationWrapper, useDataTable } from "@/shared/lib";

 type MappingRoleDialogProps = {
  roleId: string;
@@ -37,7 +32,7 @@ function MappingRoleDialog({
  const queryClient = useQueryClient();
  const alert = useAlertStore((state) => state.setMessage);

-  const { data: authorizationList } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS],
    queryFn: () =>
      RoleAuthorizationsApi.getRoleAuthorizationsListByRoleId({
@@ -63,7 +58,7 @@ function MappingRoleDialog({

  const handleApplyAll = (authYn: "Y" | "N") => {
    mutate(
-      authorizationList?.content.map((authorization) => ({
+      query.data?.content.map((authorization) => ({
        roleId,
        authorizationNo: authorization.authorizationNo,
        authYn,
@@ -71,10 +66,12 @@ function MappingRoleDialog({
    );
  };

-  const table = useReactTable({
-    data: authorizationList?.content ?? [],
-    columns: createColumns(isPending, applyRoleAuthorization),
-    getCoreRowModel: getCoreRowModel(),
+  const { tableComponent } = useDataTable({
+    query,
+    tableOptions: {
+      columns: createColumns(isPending, applyRoleAuthorization),
+      getCoreRowModel: getCoreRowModel(),
+    },
  });

  return (
@@ -95,7 +92,7 @@ function MappingRoleDialog({
              일괄해제
            </Button>
          </div>
-          <DataTable table={table} />
+          {tableComponent}
        </div>
      </DialogContent>
    </Dialog>
@@ -3,14 +3,11 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { 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 { RoleApi, type Role, type RoleParams } from "@/entities/role";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { columns } from "../model/table-columns";

 function RolePage() {
@@ -24,7 +21,7 @@ function RolePage() {
    pageSize: 10,
  });

-  const { data: roles } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.USER_SERVICE.ROLES, pagination],
    queryFn: () =>
      RoleApi.getRoles({
@@ -34,24 +31,30 @@ function RolePage() {
      }),
  });

-  const table = useReactTable({
-    data: roles?.content ?? [],
-    columns,
-    state: {
-      pagination,
+  const handleRowClick = (row: Role) => {
+    router.push(`/role/register/${row.roleId}`);
+  };
+
+  const { tableComponent } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+      },
+      manualPagination: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
    },
-    rowCount: roles?.totalElements ?? 0,
-    manualPagination: true,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
  });

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-  };
-
-  const handleRowClick = (row: Role) => {
-    router.push(`/role/register/${row.roleId}`);
+    query.refetch();
  };

  return (
@@ -84,9 +87,7 @@ function RolePage() {
            </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>
  );
@@ -5,14 +5,11 @@ import "@common/assets/styles/grid.css";
 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 { SiteApi, type Site, type SiteParams } from "@/entities/site";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { columns } from "../model/table-columns";

 function SitePage() {
@@ -26,7 +23,7 @@ function SitePage() {
    pageSize: 10,
  });

-  const { data: siteList, refetch } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.SITES],
    queryFn: () =>
      SiteApi.getSiteList({
@@ -40,27 +37,32 @@ function SitePage() {

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-    refetch();
+    query.refetch();
  };

  const handleRowClick = (row: Site) => {
    router.push(`/site/register/${row.siteId}`);
  };

-  const table = useReactTable({
-    data: siteList?.content ?? [],
-    columns,
-    rowCount: siteList?.totalElements ?? 0,
-    state: {
-      pagination,
+  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,
  });

  useEffect(() => {
-    refetch();
+    query.refetch();
  }, [pagination]);

  return (
@@ -85,9 +87,7 @@ function SitePage() {
          <h3 className="text-2xl font-medium text-label">사이트 목록</h3>
          <Button onClick={() => router.push("/site/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>
  );
@@ -3,16 +3,12 @@
 import { useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { useQuery, useQueryClient } 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 } from "@common/components";
+import { Button } from "@common/components";
 import { PostingApi, type PostPayload } from "@/entities/posting";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { useAlertStore, useMutationWrapper, useDataTable } from "@/shared/lib";
 import { SurveyApi } from "../api/survey-service";
 import { columns as postingColumns } from "../model/posting-table-columns";
 import { columns as questionColumns } from "../model/question-table-columns";
@@ -33,13 +29,13 @@ function DetailPage({ srvySn }: { srvySn: string }) {
    queryFn: () => SurveyApi.getSurveyInfo(parseInt(srvySn)),
  });

-  const { data: postHistory } = useQuery({
+  const postHistoryQuery = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, srvySn],
    queryFn: () =>
      PostingApi.getPostingHistory({ pstgTrgtNo: parseInt(srvySn) }),
  });

-  const { data: questionList } = useQuery({
+  const questionListQuery = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.SURVEY_QUESTION, srvySn],
    queryFn: () => SurveyApi.getQuestionList({ srvySn: parseInt(srvySn) }),
  });
@@ -54,26 +50,31 @@ function DetailPage({ srvySn }: { srvySn: string }) {
    },
  });

-  const postingTable = useReactTable({
-    data: postHistory?.content ?? [],
-    columns: postingColumns,
-    state: {
-      rowSelection,
-    },
-    enableMultiRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
-  });
+  const { tableComponent: postingTableComponent, tableInstance: postingTable } =
+    useDataTable({
+      query: postHistoryQuery,
+      tableOptions: {
+        columns: postingColumns,
+        state: {
+          rowSelection,
+        },
+        enableMultiRowSelection: true,
+        getCoreRowModel: getCoreRowModel(),
+        onRowSelectionChange: setRowSelection,
+      },
+    });

-  const questionTable = useReactTable({
-    data: questionList?.content ?? [],
-    columns: questionColumns,
-    state: {
-      rowSelection,
+  const { tableComponent: questionTableComponent } = useDataTable({
+    query: questionListQuery,
+    tableOptions: {
+      columns: questionColumns,
+      state: {
+        rowSelection,
+      },
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onRowSelectionChange: setRowSelection,
    },
-    enableMultiRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
  });

  const handleDeletePostingHistory = async () => {
@@ -135,9 +136,7 @@ function DetailPage({ srvySn }: { srvySn: string }) {
            이력삭제
          </Button>
        </div>
-        <div className="card">
-          <DataTable table={postingTable} />
-        </div>
+        <div className="card">{postingTableComponent}</div>
      </div>
      <div className="card card-border">
        <div className="card-header">
@@ -148,9 +147,7 @@ function DetailPage({ srvySn }: { srvySn: string }) {
            onOpenChange={setQuestionAddDialogOpen}
          />
        </div>
-        <div className="card">
-          <DataTable table={questionTable} />
-        </div>
+        <div className="card">{questionTableComponent}</div>
      </div>
    </div>
  );
@@ -5,14 +5,14 @@ import { useRouter } from "next/navigation";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {
  getCoreRowModel,
-  useReactTable,
  type PaginationState,
  type RowSelectionState,
 } from "@tanstack/react-table";
-import { Button, DataTable, Input, Label } from "@common/components";
+import { Button, Input, Label } from "@common/components";
 import { POSTING_TYPE, PostingDialog } from "@/entities/posting";
 import { AuthorityButton } from "@/entities/menu-authority";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { SurveyApi } from "../api/survey-service";
 import type { Survey, SurveyParams } from "../model/survey-interface";
 import { columns } from "../model/survey-table-columns";
@@ -35,7 +35,7 @@ function SurveyPage() {
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
  const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);

-  const { data: surveyList, refetch } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.SURVEY, pagination],
    queryFn: () =>
      SurveyApi.getSurveyList({
@@ -46,27 +46,32 @@ function SurveyPage() {
    placeholderData: keepPreviousData,
  });

-  const table = useReactTable({
-    data: surveyList?.content ?? [],
-    columns,
-    rowCount: surveyList?.totalElements ?? 0,
-    state: {
-      pagination,
-      rowSelection,
+  const handleRowClick = (row: Survey) => {
+    router.push(`/survey/${row.srvySn}`);
+  };
+
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+        rowSelection,
+      },
+      manualPagination: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      onRowSelectionChange: setRowSelection,
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
    },
-    manualPagination: true,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
  });

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-    refetch();
-  };
-
-  const handleRowClick = (row: Survey) => {
-    router.push(`/survey/${row.srvySn}`);
+    query.refetch();
  };

  useEffect(() => {
@@ -120,9 +125,7 @@ function SurveyPage() {
            </AuthorityButton>
          </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>
  );
@@ -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 { TemplateApi } from "../api/template-service";
 import { columns } from "../model/template-table-columns";
 import type { Template, TemplateParams } from "../model/template-interface";
@@ -27,7 +24,7 @@ function TemplatePage() {
    pageSize: 5,
  });

-  const { data: templateList, refetch } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.TEMPLATE],
    queryFn: () =>
      TemplateApi.getTemplateList({
@@ -41,27 +38,32 @@ function TemplatePage() {

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-    refetch();
+    query.refetch();
  };

  const handleRowClick = (row: Template) => {
    router.push(`/template/register/${row.tmpltSn}`);
  };

-  const table = useReactTable({
-    data: templateList?.content ?? [],
-    columns,
-    rowCount: templateList?.totalElements ?? 0,
-    state: {
-      pagination,
+  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,
  });

  useEffect(() => {
-    refetch();
+    query.refetch();
  }, [pagination]);

  return (
@@ -109,9 +111,7 @@ function TemplatePage() {
            등록
          </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>
  );
@@ -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 { TermsApi } from "../api/terms-service";
 import { columns } from "../model/terms-table-columns";
 import type { TermsParams, Terms } from "../model/terms-interface";
@@ -27,7 +24,7 @@ function TermsPage() {
    pageSize: 5,
  });

-  const { data: termsList, refetch } = useQuery({
+  const query = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.TERMS],
    queryFn: () =>
      TermsApi.getTermsList({
@@ -41,27 +38,32 @@ function TermsPage() {

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-    refetch();
+    query.refetch();
  };

  const handleRowClick = (row: Terms) => {
    router.push(`/terms/register/${row.trmsSn}`);
  };

-  const table = useReactTable({
-    data: termsList?.content ?? [],
-    columns,
-    rowCount: termsList?.totalElements ?? 0,
-    state: {
-      pagination,
+  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,
  });

  useEffect(() => {
-    refetch();
+    query.refetch();
  }, [pagination]);

  return (
@@ -107,9 +109,7 @@ function TermsPage() {
          <h3 className="text-2xl font-medium text-label">약관 목록</h3>
          <Button onClick={() => router.push("/terms/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>
  );
@@ -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
@@ -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>
  );
@@ -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
@@ -1,6 +1,7 @@
 export { getCookie, setCookie, removeCookie } from "./cookie";
 export { useMutationWrapper } from "./use-mutation-wrapper";
 export { useAlertStore } from "./use-alert-store";
+export { useDataTable } from "./use-data-table";
 export { useMenuStore } from "./use-menu-store";
 export { useUserStore } from "./use-user-store";
 export { usePrompt } from "./use-prompt";
@@ -6,6 +6,12 @@ import { NoData } from "../ui/no-data";
 import type { PageableList } from "../model";
 import { matchQueryStatus } from "./match-query-status";

+type UseDataTableOptions<T> = {
+  query: UseQueryResult<PageableList<T>>;
+  tableOptions: Omit<TableOptions<T>, "data" | "rowCount">;
+  dataTableOptions?: DataTableOptions<T>;
+};
+
 type DataTableOptions<T> = {
  variant?: "default" | "secondary" | "line";
  className?: HTMLAttributes<HTMLTableElement>["className"];
@@ -13,21 +19,24 @@ type DataTableOptions<T> = {
  onRowClick?: (row: T) => void;
 };

-export const useDataTable = <T,>(
-  query: UseQueryResult<PageableList<T>>,
-  tableOptions: Omit<TableOptions<T>, "data" | "rowCount">,
-  dataTableOptions?: DataTableOptions<T>,
-) => {
+export const useDataTable = <T,>({
+  query,
+  tableOptions,
+  dataTableOptions,
+}: UseDataTableOptions<T>) => {
  const table = useReactTable({
    ...tableOptions,
    data: query.data?.content ?? [],
    rowCount: query.data?.totalElements ?? 0,
  });

-  return matchQueryStatus(query, {
-    Empty: <NoData />,
-    Success: () => {
-      return <DataTable table={table} {...dataTableOptions} />;
-    },
-  });
+  return {
+    tableComponent: matchQueryStatus(query, {
+      Empty: <NoData />,
+      Success: () => {
+        return <DataTable table={table} {...dataTableOptions} />;
+      },
+    }),
+    tableInstance: table,
+  };
 };