From e390026bfec7f18d89072433dcf2d144f8bd9d05 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 16 Jun 2025 11:08:18 +0900
Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=EA=B7=B8=EB=A3=B9=20=EC=9D=B8?=
 =?UTF-8?q?=ED=84=B0=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EB=B0=8F=20=EC=84=9C?=
 =?UTF-8?q?=EB=B9=84=EC=8A=A4=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/groups/api/group-users-service.ts   |  69 +++++++++++
 .../cs/src/pages/groups/api/groups-service.ts |  58 ++++++++++
 apps/cs/src/pages/groups/api/index.ts         |   2 +
 .../groups/model/group-users-interface.ts     | 107 ++++++++++++++++++
 .../pages/groups/model/groups-interface.ts    | 101 +++++++++++++++++
 apps/cs/src/pages/groups/model/index.ts       |   2 +
 apps/cs/src/shared/config/api.ts              |   2 +
 7 files changed, 341 insertions(+)
 create mode 100644 apps/cs/src/pages/groups/api/group-users-service.ts
 create mode 100644 apps/cs/src/pages/groups/api/groups-service.ts
 create mode 100644 apps/cs/src/pages/groups/api/index.ts
 create mode 100644 apps/cs/src/pages/groups/model/group-users-interface.ts
 create mode 100644 apps/cs/src/pages/groups/model/groups-interface.ts
 create mode 100644 apps/cs/src/pages/groups/model/index.ts

diff --git a/apps/cs/src/pages/groups/api/group-users-service.ts b/apps/cs/src/pages/groups/api/group-users-service.ts
new file mode 100644
index 000000000..69a81e366
--- /dev/null
+++ b/apps/cs/src/pages/groups/api/group-users-service.ts
@@ -0,0 +1,69 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  GroupUserService,
+  GroupUserSearchParams,
+  GroupUserList,
+  GroupUserDetailResponse,
+  GroupUserSaveData,
+  GroupUserUpdateData,
+} from "../model/group-users-interface";
+
+export class GroupUsersApiService implements GroupUserService {
+  // 그룹 사용자 목록 조회
+  public async findPageGroupUser(
+    params: GroupUserSearchParams,
+  ): Promise<GroupUserList> {
+    const response = await client.get<GroupUserList>(
+      `${ENDPOINT.CMS_SERVICE.GROUP_USERS}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  // 그룹 사용자 단건 조회
+  public async findByGroupAndUserId(
+    grpSn: number,
+    userUnqId: string,
+  ): Promise<GroupUserDetailResponse> {
+    const response = await client.get<GroupUserDetailResponse>(
+      `${ENDPOINT.CMS_SERVICE.GROUP_USERS}/${grpSn}/${userUnqId}`,
+    );
+    return response.data;
+  }
+
+  // 그룹 사용자 저장
+  public async saveGroupUser(
+    data: GroupUserSaveData,
+  ): Promise<GroupUserDetailResponse> {
+    const response = await client.post<GroupUserDetailResponse>(
+      `${ENDPOINT.CMS_SERVICE.GROUP_USERS}`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 그룹 사용자 수정
+  public async updateGroupUser(
+    grpSn: number,
+    userUnqId: string,
+    data: GroupUserUpdateData,
+  ): Promise<GroupUserDetailResponse> {
+    const response = await client.put<GroupUserDetailResponse>(
+      `${ENDPOINT.CMS_SERVICE.GROUP_USERS}/${grpSn}/${userUnqId}`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 그룹 사용자 삭제
+  public async deleteGroupUser(
+    grpSn: number,
+    userUnqId: string,
+  ): Promise<boolean> {
+    const response = await client.delete<boolean>(
+      `${ENDPOINT.CMS_SERVICE.GROUP_USERS}/${grpSn}/${userUnqId}`,
+    );
+    return response.data;
+  }
+}
diff --git a/apps/cs/src/pages/groups/api/groups-service.ts b/apps/cs/src/pages/groups/api/groups-service.ts
new file mode 100644
index 000000000..2b570c3cb
--- /dev/null
+++ b/apps/cs/src/pages/groups/api/groups-service.ts
@@ -0,0 +1,58 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  GroupService,
+  GroupSearchParams,
+  GroupList,
+  GroupDetailResponse,
+  GroupSaveData,
+  GroupUpdateData,
+} from "../model/groups-interface";
+
+export class GroupsApiService implements GroupService {
+  // 그룹 목록 조회
+  public async findPageGroup(params: GroupSearchParams): Promise<GroupList> {
+    const response = await client.get<GroupList>(
+      `${ENDPOINT.CMS_SERVICE.GROUPS}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  // 그룹 단건 조회
+  public async findById(id: number): Promise<GroupDetailResponse> {
+    const response = await client.get<GroupDetailResponse>(
+      `${ENDPOINT.CMS_SERVICE.GROUPS}/${id}`,
+    );
+    return response.data;
+  }
+
+  // 그룹 저장
+  public async saveGroup(data: GroupSaveData): Promise<GroupDetailResponse> {
+    const response = await client.post<GroupDetailResponse>(
+      `${ENDPOINT.CMS_SERVICE.GROUPS}`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 그룹 수정
+  public async updateGroup(
+    id: number,
+    data: GroupUpdateData,
+  ): Promise<GroupDetailResponse> {
+    const response = await client.put<GroupDetailResponse>(
+      `${ENDPOINT.CMS_SERVICE.GROUPS}/${id}`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 그룹 삭제
+  public async deleteGroup(id: number): Promise<boolean> {
+    const response = await client.delete<boolean>(
+      `${ENDPOINT.CMS_SERVICE.GROUPS}/${id}`,
+    );
+    return response.data;
+  }
+}
diff --git a/apps/cs/src/pages/groups/api/index.ts b/apps/cs/src/pages/groups/api/index.ts
new file mode 100644
index 000000000..3d10f342e
--- /dev/null
+++ b/apps/cs/src/pages/groups/api/index.ts
@@ -0,0 +1,2 @@
+export * from "./groups-service";
+export * from "./group-users-service";
diff --git a/apps/cs/src/pages/groups/model/group-users-interface.ts b/apps/cs/src/pages/groups/model/group-users-interface.ts
new file mode 100644
index 000000000..e26f1fa09
--- /dev/null
+++ b/apps/cs/src/pages/groups/model/group-users-interface.ts
@@ -0,0 +1,107 @@
+// 그룹 사용자 검색 파라미터 인터페이스
+export interface GroupUserSearchParams {
+  page?: number;
+  size?: number;
+  sort?: string;
+  grpSn?: number;
+  userId?: string;
+  userName?: string;
+}
+
+// 그룹 사용자 목록 응답 인터페이스
+export interface GroupUserListResponseDto {
+  grpSn: number;
+  userUnqId: string;
+  userId: string;
+  userName: string;
+  email: string;
+  mphn: string;
+  regDt: string;
+  rgtr: string;
+  mdfcnDt: string;
+  mdfr: string;
+  rgtrNm: string;
+  mdfrNm: string;
+}
+
+// 그룹 사용자 페이지 응답 인터페이스
+export interface GroupUserList {
+  content: GroupUserListResponseDto[];
+  pageable: {
+    sort: {
+      empty: boolean;
+      sorted: boolean;
+      unsorted: boolean;
+    };
+    offset: number;
+    pageSize: number;
+    pageNumber: number;
+    paged: boolean;
+    unpaged: boolean;
+  };
+  last: boolean;
+  totalPages: number;
+  totalElements: number;
+  size: number;
+  number: number;
+  sort: {
+    empty: boolean;
+    sorted: boolean;
+    unsorted: boolean;
+  };
+  first: boolean;
+  numberOfElements: number;
+  empty: boolean;
+}
+
+// 그룹 사용자 상세 응답 인터페이스
+export interface GroupUserDetailResponse {
+  grpSn: number;
+  userUnqId: string;
+  userId: string;
+  userName: string;
+  email: string;
+  mphn: string;
+  regDt: string;
+  rgtr: string;
+  mdfcnDt: string;
+  mdfr: string;
+  rgtrNm: string;
+  mdfrNm: string;
+}
+
+// 그룹 사용자 저장 데이터 인터페이스
+export interface GroupUserSaveData {
+  grpSn: number;
+  userUnqId: string;
+}
+
+// 그룹 사용자 수정 데이터 인터페이스
+export interface GroupUserUpdateData {
+  userUnqId: string;
+}
+
+// 그룹 사용자 서비스 인터페이스
+export interface GroupUserService {
+  // 그룹 사용자 목록 조회
+  findPageGroupUser: (params: GroupUserSearchParams) => Promise<GroupUserList>;
+
+  // 그룹 사용자 단건 조회
+  findByGroupAndUserId: (
+    grpSn: number,
+    userUnqId: string,
+  ) => Promise<GroupUserDetailResponse>;
+
+  // 그룹 사용자 저장
+  saveGroupUser: (data: GroupUserSaveData) => Promise<GroupUserDetailResponse>;
+
+  // 그룹 사용자 수정
+  updateGroupUser: (
+    grpSn: number,
+    userUnqId: string,
+    data: GroupUserUpdateData,
+  ) => Promise<GroupUserDetailResponse>;
+
+  // 그룹 사용자 삭제
+  deleteGroupUser: (grpSn: number, userUnqId: string) => Promise<boolean>;
+}
diff --git a/apps/cs/src/pages/groups/model/groups-interface.ts b/apps/cs/src/pages/groups/model/groups-interface.ts
new file mode 100644
index 000000000..c8d2c35fb
--- /dev/null
+++ b/apps/cs/src/pages/groups/model/groups-interface.ts
@@ -0,0 +1,101 @@
+// 그룹 검색 파라미터 인터페이스
+export interface GroupSearchParams {
+  page?: number;
+  size?: number;
+  sort?: string;
+  grpNm?: string;
+  useYn?: string;
+}
+
+// 그룹 목록 응답 인터페이스
+export interface GroupListResponseDto {
+  grpSn: number;
+  grpNm: string;
+  grpExpln: string;
+  useYn: string;
+  regDt: string;
+  rgtr: string;
+  mdfcnDt: string;
+  mdfr: string;
+  rgtrNm: string;
+  mdfrNm: string;
+}
+
+// 그룹 페이지 응답 인터페이스
+export interface GroupList {
+  content: GroupListResponseDto[];
+  pageable: {
+    sort: {
+      empty: boolean;
+      sorted: boolean;
+      unsorted: boolean;
+    };
+    offset: number;
+    pageSize: number;
+    pageNumber: number;
+    paged: boolean;
+    unpaged: boolean;
+  };
+  last: boolean;
+  totalPages: number;
+  totalElements: number;
+  size: number;
+  number: number;
+  sort: {
+    empty: boolean;
+    sorted: boolean;
+    unsorted: boolean;
+  };
+  first: boolean;
+  numberOfElements: number;
+  empty: boolean;
+}
+
+// 그룹 상세 응답 인터페이스
+export interface GroupDetailResponse {
+  grpSn: number;
+  grpNm: string;
+  grpExpln: string;
+  useYn: string;
+  regDt: string;
+  rgtr: string;
+  mdfcnDt: string;
+  mdfr: string;
+  rgtrNm: string;
+  mdfrNm: string;
+}
+
+// 그룹 저장 데이터 인터페이스
+export interface GroupSaveData {
+  grpNm: string;
+  grpExpln: string;
+  useYn: string;
+}
+
+// 그룹 수정 데이터 인터페이스
+export interface GroupUpdateData {
+  grpNm: string;
+  grpExpln: string;
+  useYn: string;
+}
+
+// 그룹 서비스 인터페이스
+export interface GroupService {
+  // 그룹 목록 조회
+  findPageGroup: (params: GroupSearchParams) => Promise<GroupList>;
+
+  // 그룹 단건 조회
+  findById: (id: number) => Promise<GroupDetailResponse>;
+
+  // 그룹 저장
+  saveGroup: (data: GroupSaveData) => Promise<GroupDetailResponse>;
+
+  // 그룹 수정
+  updateGroup: (
+    id: number,
+    data: GroupUpdateData,
+  ) => Promise<GroupDetailResponse>;
+
+  // 그룹 삭제
+  deleteGroup: (id: number) => Promise<boolean>;
+}
diff --git a/apps/cs/src/pages/groups/model/index.ts b/apps/cs/src/pages/groups/model/index.ts
new file mode 100644
index 000000000..0852eb491
--- /dev/null
+++ b/apps/cs/src/pages/groups/model/index.ts
@@ -0,0 +1,2 @@
+export * from "./groups-interface";
+export * from "./group-users-interface";
diff --git a/apps/cs/src/shared/config/api.ts b/apps/cs/src/shared/config/api.ts
index da5edaea1..54d038dbf 100644
--- a/apps/cs/src/shared/config/api.ts
+++ b/apps/cs/src/shared/config/api.ts
@@ -45,6 +45,8 @@ export const ENDPOINT = {
     SURVEY_QUESTION: "/cms-service/api/v1/srvy-qitem",
     SURVEY_ARTICLE: "/cms-service/api/v1/srvy-artcl",
     ZIPS: "/cms-service/api/v1/zips",
+    GROUPS: "/cms-service/api/v1/groups",
+    GROUP_USERS: "/cms-service/api/v1/group-users",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",

From 318bae3a1e417d9ae268d3cf7a9ddb8c5efcc917 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 17 Jun 2025 11:06:33 +0900
Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=EA=B7=B8=EB=A3=B9=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cs/app/(with-base-layout)/groups/page.tsx |   2 +
 .../api/menu-authority-service.ts             |  10 +
 apps/cs/src/entities/menu-authority/index.ts  |   7 +
 .../model/menu-authority-interface.ts         |   3 +
 .../role/api/role-service.ts                  |   2 +-
 apps/cs/src/entities/role/index.ts            |   8 +
 .../role/model/role-interface.ts              |   2 +-
 apps/cs/src/entities/site/ui/site-select.tsx  |   5 +-
 .../pages/groups/api/group-users-service.ts   |   6 +-
 .../cs/src/pages/groups/api/groups-service.ts |  21 +-
 apps/cs/src/pages/groups/api/index.ts         |   2 -
 apps/cs/src/pages/groups/index.ts             |   1 +
 .../group-menu-authority-table-columns.tsx    | 117 ++++++++++
 .../groups/model/group-users-interface.ts     |  13 +-
 .../model/group-users-table-columns.tsx       |  57 +++++
 .../pages/groups/model/groups-interface.ts    | 105 ++++-----
 .../groups/model/groups-table-columns.tsx     |  27 +++
 apps/cs/src/pages/groups/model/index.ts       |   2 -
 apps/cs/src/pages/groups/ui/group-form.tsx    | 204 ++++++++++++++++++
 .../pages/groups/ui/group-users-section.tsx   |  92 ++++++++
 apps/cs/src/pages/groups/ui/groups-dialog.tsx | 112 ++++++++++
 apps/cs/src/pages/groups/ui/groups-page.tsx   |  18 ++
 .../cs/src/pages/groups/ui/groups-section.tsx |  68 ++++++
 apps/cs/src/pages/groups/ui/index.ts          |   1 +
 .../pages/groups/ui/menu-authority-dialog.tsx | 110 ++++++++++
 apps/cs/src/pages/groups/ui/role-select.tsx   |  41 ++++
 apps/cs/src/pages/role/ui/create-page.tsx     |   3 +-
 apps/cs/src/pages/role/ui/modify-page.tsx     |   3 +-
 apps/cs/src/pages/role/ui/role-form.tsx       |   3 +-
 apps/cs/src/pages/role/ui/role-page.tsx       |   3 +-
 30 files changed, 952 insertions(+), 96 deletions(-)
 create mode 100644 apps/cs/app/(with-base-layout)/groups/page.tsx
 rename apps/cs/src/{pages => entities}/role/api/role-service.ts (95%)
 create mode 100644 apps/cs/src/entities/role/index.ts
 rename apps/cs/src/{pages => entities}/role/model/role-interface.ts (94%)
 delete mode 100644 apps/cs/src/pages/groups/api/index.ts
 create mode 100644 apps/cs/src/pages/groups/index.ts
 create mode 100644 apps/cs/src/pages/groups/model/group-menu-authority-table-columns.tsx
 create mode 100644 apps/cs/src/pages/groups/model/group-users-table-columns.tsx
 create mode 100644 apps/cs/src/pages/groups/model/groups-table-columns.tsx
 delete mode 100644 apps/cs/src/pages/groups/model/index.ts
 create mode 100644 apps/cs/src/pages/groups/ui/group-form.tsx
 create mode 100644 apps/cs/src/pages/groups/ui/group-users-section.tsx
 create mode 100644 apps/cs/src/pages/groups/ui/groups-dialog.tsx
 create mode 100644 apps/cs/src/pages/groups/ui/groups-page.tsx
 create mode 100644 apps/cs/src/pages/groups/ui/groups-section.tsx
 create mode 100644 apps/cs/src/pages/groups/ui/index.ts
 create mode 100644 apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx
 create mode 100644 apps/cs/src/pages/groups/ui/role-select.tsx

diff --git a/apps/cs/app/(with-base-layout)/groups/page.tsx b/apps/cs/app/(with-base-layout)/groups/page.tsx
new file mode 100644
index 000000000..8491e59bb
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/groups/page.tsx
@@ -0,0 +1,2 @@
+import { GroupsPage } from "@/pages/groups";
+export default GroupsPage;
diff --git a/apps/cs/src/entities/menu-authority/api/menu-authority-service.ts b/apps/cs/src/entities/menu-authority/api/menu-authority-service.ts
index 14988eee0..ec07d88ad 100644
--- a/apps/cs/src/entities/menu-authority/api/menu-authority-service.ts
+++ b/apps/cs/src/entities/menu-authority/api/menu-authority-service.ts
@@ -35,6 +35,16 @@ export class MenuAuthorityApiService implements MenuAuthorityService {
     );
     return response.data;
   }
+
+  public async getGroupMenuAuthorityList(
+    params: MenuAuthorityParams,
+  ): Promise<MenuAuthorityList> {
+    const response = await client.get<MenuAuthorityList>(
+      `${ENDPOINT.CMS_SERVICE.MENU_AUTHRTS}/group`,
+      { params },
+    );
+    return response.data;
+  }
 }
 
 export const MenuAuthorityApi = new MenuAuthorityApiService();
diff --git a/apps/cs/src/entities/menu-authority/index.ts b/apps/cs/src/entities/menu-authority/index.ts
index 2a555b77e..5a1b11606 100644
--- a/apps/cs/src/entities/menu-authority/index.ts
+++ b/apps/cs/src/entities/menu-authority/index.ts
@@ -1,2 +1,9 @@
+export { MenuAuthorityApi } from "./api/menu-authority-service";
+export {
+  menuAuthorityFormSchema,
+  type MenuAuthority,
+  type MenuAuthorityPayload,
+  type MenuAuthorityFormData,
+} from "./model/menu-authority-interface";
 export { AuthorityButton } from "./ui/authority-button";
 export { ManagementAuthorityDialog } from "./ui/management-authority-dialog";
diff --git a/apps/cs/src/entities/menu-authority/model/menu-authority-interface.ts b/apps/cs/src/entities/menu-authority/model/menu-authority-interface.ts
index b59574c2f..7f5401872 100644
--- a/apps/cs/src/entities/menu-authority/model/menu-authority-interface.ts
+++ b/apps/cs/src/entities/menu-authority/model/menu-authority-interface.ts
@@ -43,6 +43,9 @@ export type MenuAuthorityFormData = z.infer<typeof menuAuthorityFormSchema>;
 
 export interface MenuAuthorityService {
   getMenuAuthorityList(params: MenuAuthorityParams): Promise<MenuAuthorityList>;
+  getGroupMenuAuthorityList(
+    params: MenuAuthorityParams,
+  ): Promise<MenuAuthorityList>;
   getPageMenuAuthority(menuCd: number): Promise<PageMenuAuthority[]>;
   saveMenuAuthority(data: MenuAuthorityPayload[]): Promise<void>;
 }
diff --git a/apps/cs/src/pages/role/api/role-service.ts b/apps/cs/src/entities/role/api/role-service.ts
similarity index 95%
rename from apps/cs/src/pages/role/api/role-service.ts
rename to apps/cs/src/entities/role/api/role-service.ts
index d2db7e5bc..95aac330f 100644
--- a/apps/cs/src/pages/role/api/role-service.ts
+++ b/apps/cs/src/entities/role/api/role-service.ts
@@ -9,7 +9,7 @@ import type {
 } from "../model/role-interface";
 
 export class RoleApiService implements RoleService {
-  public async getRoles(params: RoleParams): Promise<RoleList> {
+  public async getRoles(params?: RoleParams): Promise<RoleList> {
     const response = await client.get<RoleList>(ENDPOINT.USER_SERVICE.ROLES, {
       params,
     });
diff --git a/apps/cs/src/entities/role/index.ts b/apps/cs/src/entities/role/index.ts
new file mode 100644
index 000000000..28fe5f7fb
--- /dev/null
+++ b/apps/cs/src/entities/role/index.ts
@@ -0,0 +1,8 @@
+export { RoleApi } from "./api/role-service";
+export {
+  roleFormSchema,
+  type Role,
+  type RoleParams,
+  type RoleFormData,
+  type RoleList,
+} from "./model/role-interface";
diff --git a/apps/cs/src/pages/role/model/role-interface.ts b/apps/cs/src/entities/role/model/role-interface.ts
similarity index 94%
rename from apps/cs/src/pages/role/model/role-interface.ts
rename to apps/cs/src/entities/role/model/role-interface.ts
index 1b9b8eea2..065d89259 100644
--- a/apps/cs/src/pages/role/model/role-interface.ts
+++ b/apps/cs/src/entities/role/model/role-interface.ts
@@ -28,7 +28,7 @@ export type RoleList = PageableList<Role>;
 export type RoleFormData = z.infer<typeof roleFormSchema>;
 
 export interface RoleService {
-  getRoles: (params: RoleParams) => Promise<RoleList>;
+  getRoles: (params?: RoleParams) => Promise<RoleList>;
   getRoleInfo: (roleId: string) => Promise<Role>;
   createRole: (data: RoleFormData) => Promise<void>;
   updateRole: (roleId: string, data: RoleFormData) => Promise<void>;
diff --git a/apps/cs/src/entities/site/ui/site-select.tsx b/apps/cs/src/entities/site/ui/site-select.tsx
index 6c5a0d005..3d56a5658 100644
--- a/apps/cs/src/entities/site/ui/site-select.tsx
+++ b/apps/cs/src/entities/site/ui/site-select.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import {
+  cn,
   Select,
   SelectContent,
   SelectItem,
@@ -12,12 +13,14 @@ import { SiteApi } from "../api/site-service";
 type SiteSelectProps = {
   placeholder?: string;
   enabledAllSite?: boolean;
+  className?: string;
 } & React.ComponentPropsWithoutRef<typeof Select>;
 
 function SiteSelect({
   defaultValue,
   placeholder = "선택",
   enabledAllSite,
+  className,
   ...props
 }: SiteSelectProps) {
   const { data: sites } = useQuery({
@@ -36,7 +39,7 @@ function SiteSelect({
 
   return (
     <Select {...props}>
-      <SelectTrigger className="w-[12rem]">
+      <SelectTrigger className={cn("w-[12rem]", className)}>
         <SelectValue placeholder={defaultValueText} />
       </SelectTrigger>
       <SelectContent>
diff --git a/apps/cs/src/pages/groups/api/group-users-service.ts b/apps/cs/src/pages/groups/api/group-users-service.ts
index 69a81e366..2a11038e6 100644
--- a/apps/cs/src/pages/groups/api/group-users-service.ts
+++ b/apps/cs/src/pages/groups/api/group-users-service.ts
@@ -58,12 +58,14 @@ export class GroupUsersApiService implements GroupUserService {
 
   // 그룹 사용자 삭제
   public async deleteGroupUser(
-    grpSn: number,
+    groupId: string,
     userUnqId: string,
   ): Promise<boolean> {
     const response = await client.delete<boolean>(
-      `${ENDPOINT.CMS_SERVICE.GROUP_USERS}/${grpSn}/${userUnqId}`,
+      `${ENDPOINT.CMS_SERVICE.GROUP_USERS}/${groupId}/${userUnqId}`,
     );
     return response.data;
   }
 }
+
+export const GroupUsersApi = new GroupUsersApiService();
diff --git a/apps/cs/src/pages/groups/api/groups-service.ts b/apps/cs/src/pages/groups/api/groups-service.ts
index 2b570c3cb..1cc06e914 100644
--- a/apps/cs/src/pages/groups/api/groups-service.ts
+++ b/apps/cs/src/pages/groups/api/groups-service.ts
@@ -5,8 +5,7 @@ import type {
   GroupSearchParams,
   GroupList,
   GroupDetailResponse,
-  GroupSaveData,
-  GroupUpdateData,
+  GroupFormData,
 } from "../model/groups-interface";
 
 export class GroupsApiService implements GroupService {
@@ -20,15 +19,15 @@ export class GroupsApiService implements GroupService {
   }
 
   // 그룹 단건 조회
-  public async findById(id: number): Promise<GroupDetailResponse> {
+  public async findById(groupId: string): Promise<GroupDetailResponse> {
     const response = await client.get<GroupDetailResponse>(
-      `${ENDPOINT.CMS_SERVICE.GROUPS}/${id}`,
+      `${ENDPOINT.CMS_SERVICE.GROUPS}/${groupId}`,
     );
     return response.data;
   }
 
   // 그룹 저장
-  public async saveGroup(data: GroupSaveData): Promise<GroupDetailResponse> {
+  public async saveGroup(data: GroupFormData): Promise<GroupDetailResponse> {
     const response = await client.post<GroupDetailResponse>(
       `${ENDPOINT.CMS_SERVICE.GROUPS}`,
       data,
@@ -38,21 +37,23 @@ export class GroupsApiService implements GroupService {
 
   // 그룹 수정
   public async updateGroup(
-    id: number,
-    data: GroupUpdateData,
+    groupId: string,
+    data: GroupFormData,
   ): Promise<GroupDetailResponse> {
     const response = await client.put<GroupDetailResponse>(
-      `${ENDPOINT.CMS_SERVICE.GROUPS}/${id}`,
+      `${ENDPOINT.CMS_SERVICE.GROUPS}/${groupId}`,
       data,
     );
     return response.data;
   }
 
   // 그룹 삭제
-  public async deleteGroup(id: number): Promise<boolean> {
+  public async deleteGroup(groupId: string): Promise<boolean> {
     const response = await client.delete<boolean>(
-      `${ENDPOINT.CMS_SERVICE.GROUPS}/${id}`,
+      `${ENDPOINT.CMS_SERVICE.GROUPS}/${groupId}`,
     );
     return response.data;
   }
 }
+
+export const GroupsApi = new GroupsApiService();
diff --git a/apps/cs/src/pages/groups/api/index.ts b/apps/cs/src/pages/groups/api/index.ts
deleted file mode 100644
index 3d10f342e..000000000
--- a/apps/cs/src/pages/groups/api/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./groups-service";
-export * from "./group-users-service";
diff --git a/apps/cs/src/pages/groups/index.ts b/apps/cs/src/pages/groups/index.ts
new file mode 100644
index 000000000..269abb44a
--- /dev/null
+++ b/apps/cs/src/pages/groups/index.ts
@@ -0,0 +1 @@
+export { GroupsPage } from "./ui/groups-page";
diff --git a/apps/cs/src/pages/groups/model/group-menu-authority-table-columns.tsx b/apps/cs/src/pages/groups/model/group-menu-authority-table-columns.tsx
new file mode 100644
index 000000000..0a56a6701
--- /dev/null
+++ b/apps/cs/src/pages/groups/model/group-menu-authority-table-columns.tsx
@@ -0,0 +1,117 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import type { UseFormReturn } from "react-hook-form";
+import { Checkbox } from "@common/components";
+import type {
+  MenuAuthority,
+  MenuAuthorityPayload,
+  MenuAuthorityFormData,
+} from "@/entities/menu-authority";
+
+export const createColumns = (
+  form: UseFormReturn<MenuAuthorityFormData>,
+): ColumnDef<MenuAuthority>[] => {
+  const getCurrentRow = (i: number) => form.watch("menuAuthority")[i];
+
+  const handleCheckedChange =
+    (i: number, key: keyof MenuAuthorityPayload) => (checked: boolean) => {
+      if (getCurrentRow(i)?.mode === "R") {
+        form.setValue(`menuAuthority.${i}.mode`, "U");
+      }
+      form.setValue(`menuAuthority.${i}.${key}`, checked ? "Y" : "N");
+    };
+
+  return [
+    {
+      accessorKey: "menuNm",
+      header: "메뉴명",
+    },
+    {
+      accessorKey: "mngAuthrtYn",
+      header: "관리권한",
+      cell: ({ row }) => {
+        return (
+          <Checkbox
+            checked={getCurrentRow(row.index)?.mngAuthrtYn === "Y"}
+            onCheckedChange={(checked) => {
+              if (checked) {
+                handleCheckedChange(
+                  row.index,
+                  "regAuthrtYn",
+                )(checked as boolean);
+                handleCheckedChange(
+                  row.index,
+                  "mdfcnAuthrtYn",
+                )(checked as boolean);
+                handleCheckedChange(
+                  row.index,
+                  "delAuthrtYn",
+                )(checked as boolean);
+                handleCheckedChange(
+                  row.index,
+                  "inqAuthrtYn",
+                )(checked as boolean);
+              }
+              handleCheckedChange(row.index, "mngAuthrtYn")(checked as boolean);
+            }}
+          />
+        );
+      },
+    },
+    {
+      accessorKey: "regAuthrtYn",
+      header: "등록권한",
+      cell: ({ row }) => {
+        return (
+          <Checkbox
+            checked={getCurrentRow(row.index)?.regAuthrtYn === "Y"}
+            onCheckedChange={(checked) => {
+              if (checked) {
+                handleCheckedChange(
+                  row.index,
+                  "inqAuthrtYn",
+                )(checked as boolean);
+              }
+              handleCheckedChange(row.index, "regAuthrtYn")(checked as boolean);
+            }}
+          />
+        );
+      },
+    },
+    {
+      accessorKey: "mdfcnAuthrtYn",
+      header: "수정권한 ",
+      cell: ({ row }) => {
+        return (
+          <Checkbox
+            checked={getCurrentRow(row.index)?.mdfcnAuthrtYn === "Y"}
+            onCheckedChange={handleCheckedChange(row.index, "mdfcnAuthrtYn")}
+          />
+        );
+      },
+    },
+    {
+      accessorKey: "delAuthrtYn",
+      header: "삭제권한",
+      cell: ({ row }) => {
+        return (
+          <Checkbox
+            checked={getCurrentRow(row.index)?.delAuthrtYn === "Y"}
+            onCheckedChange={handleCheckedChange(row.index, "delAuthrtYn")}
+          />
+        );
+      },
+    },
+    {
+      accessorKey: "inqAuthrtYn",
+      header: "조회권한",
+      cell: ({ row }) => {
+        return (
+          <Checkbox
+            checked={getCurrentRow(row.index)?.inqAuthrtYn === "Y"}
+            onCheckedChange={handleCheckedChange(row.index, "inqAuthrtYn")}
+          />
+        );
+      },
+    },
+  ];
+};
diff --git a/apps/cs/src/pages/groups/model/group-users-interface.ts b/apps/cs/src/pages/groups/model/group-users-interface.ts
index e26f1fa09..1587522a8 100644
--- a/apps/cs/src/pages/groups/model/group-users-interface.ts
+++ b/apps/cs/src/pages/groups/model/group-users-interface.ts
@@ -1,11 +1,8 @@
+import type { PageableParams } from "@/shared/model";
+
 // 그룹 사용자 검색 파라미터 인터페이스
-export interface GroupUserSearchParams {
-  page?: number;
-  size?: number;
-  sort?: string;
-  grpSn?: number;
-  userId?: string;
-  userName?: string;
+export interface GroupUserSearchParams extends PageableParams {
+  keyword?: string;
 }
 
 // 그룹 사용자 목록 응답 인터페이스
@@ -103,5 +100,5 @@ export interface GroupUserService {
   ) => Promise<GroupUserDetailResponse>;
 
   // 그룹 사용자 삭제
-  deleteGroupUser: (grpSn: number, userUnqId: string) => Promise<boolean>;
+  deleteGroupUser: (groupId: string, userUnqId: string) => Promise<boolean>;
 }
diff --git a/apps/cs/src/pages/groups/model/group-users-table-columns.tsx b/apps/cs/src/pages/groups/model/group-users-table-columns.tsx
new file mode 100644
index 000000000..1f36b9867
--- /dev/null
+++ b/apps/cs/src/pages/groups/model/group-users-table-columns.tsx
@@ -0,0 +1,57 @@
+import { Checkbox } from "@common/components";
+import { type Table, type Row, type ColumnDef } from "@tanstack/react-table";
+import { type GroupUserListResponseDto } from "./group-users-interface";
+
+export const columns: ColumnDef<GroupUserListResponseDto>[] = [
+  {
+    id: "select",
+    header: ({ table }: { table: Table<GroupUserListResponseDto> }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="전체 선택"
+      />
+    ),
+    cell: ({ row }: { row: Row<GroupUserListResponseDto> }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="행 선택"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "groupId",
+    header: "사용자ID",
+  },
+  {
+    accessorKey: "userName",
+    header: "이름",
+  },
+  {
+    accessorKey: "ogdpSeNm",
+    header: "소속",
+  },
+  {
+    accessorKey: "mphn",
+    header: "연락처",
+    cell: ({ row }) => {
+      const phone = row.getValue("mphn") as string;
+      if (!phone) return "";
+
+      const numbers = phone.replace(/\D/g, "");
+      if (numbers.length === 10) {
+        return `${numbers.slice(0, 3)}-${numbers.slice(3, 6)}-${numbers.slice(6)}`;
+      } else if (numbers.length === 11) {
+        return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7)}`;
+      } else {
+        return phone;
+      }
+    },
+  },
+];
diff --git a/apps/cs/src/pages/groups/model/groups-interface.ts b/apps/cs/src/pages/groups/model/groups-interface.ts
index c8d2c35fb..06d4cd286 100644
--- a/apps/cs/src/pages/groups/model/groups-interface.ts
+++ b/apps/cs/src/pages/groups/model/groups-interface.ts
@@ -1,56 +1,38 @@
+import { z } from "zod";
+import type { PageableList, PageableParams } from "@/shared/model";
+
 // 그룹 검색 파라미터 인터페이스
-export interface GroupSearchParams {
-  page?: number;
-  size?: number;
-  sort?: string;
-  grpNm?: string;
-  useYn?: string;
+export interface GroupSearchParams extends PageableParams {
+  keywordType?: string;
+  keyword?: string;
+  groupId?: string;
+  groupNm?: string;
+  groupSeCd?: string;
+  delYn?: string;
+  authrtId?: string;
+  siteId?: string;
+  groupExpln?: string;
+  roleId?: string;
+  mngrYn?: string;
 }
 
 // 그룹 목록 응답 인터페이스
 export interface GroupListResponseDto {
-  grpSn: number;
-  grpNm: string;
-  grpExpln: string;
-  useYn: string;
-  regDt: string;
-  rgtr: string;
+  groupId: string;
+  groupNm: string;
+  groupSeCd: string;
+  groupSeNm: string;
+  delYn: string;
+  authrtId: string;
+  groupExpln: string;
+  siteId: string;
+  mngrYn: string;
+  roleId: string;
+  roleNm: string;
   mdfcnDt: string;
-  mdfr: string;
-  rgtrNm: string;
   mdfrNm: string;
 }
 
-// 그룹 페이지 응답 인터페이스
-export interface GroupList {
-  content: GroupListResponseDto[];
-  pageable: {
-    sort: {
-      empty: boolean;
-      sorted: boolean;
-      unsorted: boolean;
-    };
-    offset: number;
-    pageSize: number;
-    pageNumber: number;
-    paged: boolean;
-    unpaged: boolean;
-  };
-  last: boolean;
-  totalPages: number;
-  totalElements: number;
-  size: number;
-  number: number;
-  sort: {
-    empty: boolean;
-    sorted: boolean;
-    unsorted: boolean;
-  };
-  first: boolean;
-  numberOfElements: number;
-  empty: boolean;
-}
-
 // 그룹 상세 응답 인터페이스
 export interface GroupDetailResponse {
   grpSn: number;
@@ -65,19 +47,20 @@ export interface GroupDetailResponse {
   mdfrNm: string;
 }
 
-// 그룹 저장 데이터 인터페이스
-export interface GroupSaveData {
-  grpNm: string;
-  grpExpln: string;
-  useYn: string;
-}
+// 그룹 저장 데이터 스키마
+export const groupFormSchema = z.object({
+  groupId: z.string().min(1, { message: "그룹 ID를 입력해주세요." }),
+  groupNm: z.string().min(1, { message: "그룹명을 입력해주세요." }),
+  groupSeCd: z.string().min(1, { message: "그룹구분을 선택해주세요." }),
+  groupExpln: z.string().optional(),
+  delYn: z.string().default("N"),
+  authrtId: z.string().min(1, { message: "권한ID를 선택해주세요." }),
+  siteId: z.string().optional(),
+  mngrYn: z.string().default("N"),
+});
 
-// 그룹 수정 데이터 인터페이스
-export interface GroupUpdateData {
-  grpNm: string;
-  grpExpln: string;
-  useYn: string;
-}
+export type GroupList = PageableList<GroupListResponseDto>;
+export type GroupFormData = z.infer<typeof groupFormSchema>;
 
 // 그룹 서비스 인터페이스
 export interface GroupService {
@@ -85,17 +68,17 @@ export interface GroupService {
   findPageGroup: (params: GroupSearchParams) => Promise<GroupList>;
 
   // 그룹 단건 조회
-  findById: (id: number) => Promise<GroupDetailResponse>;
+  findById: (groupId: string) => Promise<GroupDetailResponse>;
 
   // 그룹 저장
-  saveGroup: (data: GroupSaveData) => Promise<GroupDetailResponse>;
+  saveGroup: (data: GroupFormData) => Promise<GroupDetailResponse>;
 
   // 그룹 수정
   updateGroup: (
-    id: number,
-    data: GroupUpdateData,
+    groupId: string,
+    data: GroupFormData,
   ) => Promise<GroupDetailResponse>;
 
   // 그룹 삭제
-  deleteGroup: (id: number) => Promise<boolean>;
+  deleteGroup: (groupId: string) => Promise<boolean>;
 }
diff --git a/apps/cs/src/pages/groups/model/groups-table-columns.tsx b/apps/cs/src/pages/groups/model/groups-table-columns.tsx
new file mode 100644
index 000000000..a70b3144d
--- /dev/null
+++ b/apps/cs/src/pages/groups/model/groups-table-columns.tsx
@@ -0,0 +1,27 @@
+import { type ColumnDef } from "@tanstack/react-table";
+import { type GroupListResponseDto } from "./groups-interface";
+import { MenuAuthorityDialog } from "../ui/menu-authority-dialog";
+
+export const columns: ColumnDef<GroupListResponseDto>[] = [
+  {
+    accessorKey: "groupId",
+    header: "그룹코드",
+  },
+  {
+    accessorKey: "groupNm",
+    header: "그룹명",
+  },
+  {
+    accessorKey: "siteNm",
+    header: "사이트",
+  },
+  {
+    id: "actions",
+    header: "관리",
+    cell: ({ row }) => (
+      <div className="flex justify-center gap-2">
+        <MenuAuthorityDialog groupId={row.original.groupId} />
+      </div>
+    ),
+  },
+];
diff --git a/apps/cs/src/pages/groups/model/index.ts b/apps/cs/src/pages/groups/model/index.ts
deleted file mode 100644
index 0852eb491..000000000
--- a/apps/cs/src/pages/groups/model/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./groups-interface";
-export * from "./group-users-interface";
diff --git a/apps/cs/src/pages/groups/ui/group-form.tsx b/apps/cs/src/pages/groups/ui/group-form.tsx
new file mode 100644
index 000000000..3d8e4498f
--- /dev/null
+++ b/apps/cs/src/pages/groups/ui/group-form.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+import type { UseFormReturn } from "react-hook-form";
+import {
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Textarea,
+} from "@common/components";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/shared/ui/form";
+import { CodeSelect } from "@/entities/code";
+import { SiteSelect } from "@/entities/site";
+import { RoleSelect } from "./role-select";
+import type { GroupFormData } from "../model/groups-interface";
+
+type GroupFormProps = {
+  form: UseFormReturn<GroupFormData>;
+};
+
+function GroupForm({ form }: GroupFormProps) {
+  return (
+    <Table variant="secondary">
+      <colgroup>
+        <col width="15%" />
+        <col width="85%" />
+      </colgroup>
+      <TableBody>
+        <TableRow>
+          <TableHead>그룹코드</TableHead>
+          <TableCell className="border">
+            <FormField
+              control={form.control}
+              name="groupId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      value={field.value ?? ""}
+                      className="w-[24rem] !text-[1.3rem]"
+                      placeholder="그룹코드를 입력하세요"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableHead>그룹명</TableHead>
+          <TableCell className="border">
+            <FormField
+              control={form.control}
+              name="groupNm"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      value={field.value ?? ""}
+                      className="w-[24rem] !text-[1.3rem]"
+                      placeholder="그룹명을 입력하세요"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableHead>그룹구분</TableHead>
+          <TableCell className="border">
+            <FormField
+              control={form.control}
+              name="groupSeCd"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <CodeSelect
+                      upCd="GROUPSECD"
+                      value={field.value ?? ""}
+                      onValueChange={field.onChange}
+                      className="w-[24rem]"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableHead>그룹설명</TableHead>
+          <TableCell className="border">
+            <FormField
+              control={form.control}
+              name="groupExpln"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Textarea
+                      {...field}
+                      value={field.value ?? ""}
+                      className="h-[10rem] resize-none !text-[1.3rem]"
+                      placeholder="그룹설명을 입력하세요"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableHead>사이트</TableHead>
+          <TableCell className="border">
+            <FormField
+              control={form.control}
+              name="siteId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <SiteSelect
+                      value={field.value ?? ""}
+                      onValueChange={field.onChange}
+                      className="w-[24rem]"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableHead>관리권한</TableHead>
+          <TableCell className="border">
+            <FormField
+              control={form.control}
+              name="mngrYn"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <RadioGroup
+                      {...field}
+                      name="mngrYn"
+                      onValueChange={field.onChange}
+                    >
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="Y" id="mngrY" />
+                        <Label htmlFor="mngrY">Y</Label>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="N" id="mngrN" />
+                        <Label htmlFor="mngrN">N</Label>
+                      </div>
+                    </RadioGroup>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableHead>권한</TableHead>
+          <TableCell className="border">
+            <FormField
+              control={form.control}
+              name="authrtId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <RoleSelect
+                      value={field.value ?? ""}
+                      onValueChange={field.onChange}
+                      mngrYn={form.watch("mngrYn")}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+
+export { GroupForm };
diff --git a/apps/cs/src/pages/groups/ui/group-users-section.tsx b/apps/cs/src/pages/groups/ui/group-users-section.tsx
new file mode 100644
index 000000000..87b5ae7af
--- /dev/null
+++ b/apps/cs/src/pages/groups/ui/group-users-section.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { useState } from "react";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type PaginationState,
+  type RowSelectionState,
+} from "@tanstack/react-table";
+import { Button, DataTable } from "@common/components";
+import { ENDPOINT } from "@/shared/config";
+import { columns } from "../model/group-users-table-columns";
+import { GroupUsersApi } from "../api/group-users-service";
+
+type GroupUsersSectionProps = {
+  groupId?: string;
+};
+
+function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+  const { data: groupUsersList, refetch } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.GROUP_USERS, groupId, pagination],
+    queryFn: () =>
+      GroupUsersApi.findPageGroupUser({
+        keyword: groupId,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+    enabled: !!groupId,
+    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 handleDeleteSelected = async () => {
+    const selectedRows = Object.keys(rowSelection);
+    if (selectedRows.length === 0 || !groupId) return;
+
+    try {
+      for (const userUnqId of selectedRows) {
+        await GroupUsersApi.deleteGroupUser(groupId, userUnqId);
+      }
+      refetch();
+      setRowSelection({});
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <div className="flex-1">
+      <div className="card card-border">
+        <div className="card-header">
+          <h3 className="text-2xl font-medium text-label">그룹 사용자 목록</h3>
+          <div className="flex gap-2">
+            <Button>등록</Button>
+            <Button
+              color="red"
+              disabled={table.getSelectedRowModel().rows.length === 0}
+              onClick={handleDeleteSelected}
+            >
+              선택삭제
+            </Button>
+          </div>
+        </div>
+        <div className="card !m-4 h-[calc(100vh-25.5rem)] overflow-auto !p-0">
+          <DataTable table={table} viewPagination />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { GroupUsersSection };
diff --git a/apps/cs/src/pages/groups/ui/groups-dialog.tsx b/apps/cs/src/pages/groups/ui/groups-dialog.tsx
new file mode 100644
index 000000000..bd59f58ef
--- /dev/null
+++ b/apps/cs/src/pages/groups/ui/groups-dialog.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { memo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose,
+} from "@common/components";
+import { Form } from "@/shared/ui/form";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { GroupForm } from "./group-form";
+import { GroupsApi } from "../api/groups-service";
+import { groupFormSchema, type GroupFormData } from "../model/groups-interface";
+
+type GroupsDialogProps = {
+  groupId?: string;
+  onSuccess?: () => void;
+};
+
+const GroupsDialog = memo(
+  ({ groupId, onSuccess, ...props }: GroupsDialogProps) => {
+    const isRegistration = !groupId;
+    const { confirm } = useConfirm();
+    const alert = useAlertStore((state) => state.setMessage);
+    const [open, setOpen] = useState(false);
+
+    const form = useForm<GroupFormData>({
+      resolver: zodResolver(groupFormSchema),
+      defaultValues: {
+        mngrYn: "N",
+      },
+    });
+
+    const { mutateAsync: createGroup } = useMutationWrapper({
+      mutationFn: (data: GroupFormData) => GroupsApi.saveGroup(data),
+      onSuccess: () => {
+        alert("등록되었습니다.", () => {
+          setOpen(false);
+          onSuccess?.();
+        });
+      },
+    });
+
+    const { mutateAsync: updateGroup } = useMutationWrapper({
+      mutationFn: (data: GroupFormData) =>
+        GroupsApi.updateGroup(groupId ?? "", data),
+      onSuccess: () => {
+        alert("수정되었습니다.", () => {
+          setOpen(false);
+          onSuccess?.();
+        });
+      },
+    });
+
+    const onSubmit =
+      (callback: (data: GroupFormData) => void) =>
+      async (data: GroupFormData) => {
+        const confirmMessage = isRegistration
+          ? "등록하시겠습니까?"
+          : "수정하시겠습니까?";
+
+        if (await confirm(confirmMessage)) callback(data);
+      };
+
+    return (
+      <Dialog open={open} onOpenChange={setOpen} {...props}>
+        <DialogTrigger asChild>
+          <Button>등록</Button>
+        </DialogTrigger>
+        <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
+          <DialogHeader>
+            <DialogTitle>
+              {isRegistration ? "그룹 등록" : "그룹 수정"}
+            </DialogTitle>
+          </DialogHeader>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(
+                onSubmit(isRegistration ? createGroup : updateGroup),
+              )}
+              className="space-y-4"
+            >
+              <GroupForm form={form} />
+              <DialogFooter className="!justify-center">
+                <Button type="submit" size="lg">
+                  {isRegistration ? "등록" : "수정"}
+                </Button>
+                <DialogClose asChild>
+                  <Button type="button" color="white" size="lg">
+                    취소
+                  </Button>
+                </DialogClose>
+              </DialogFooter>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+);
+
+GroupsDialog.displayName = "GroupsDialog";
+
+export { GroupsDialog };
diff --git a/apps/cs/src/pages/groups/ui/groups-page.tsx b/apps/cs/src/pages/groups/ui/groups-page.tsx
new file mode 100644
index 000000000..96351bd90
--- /dev/null
+++ b/apps/cs/src/pages/groups/ui/groups-page.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { useState } from "react";
+import { GroupsSection } from "./groups-section";
+import { GroupUsersSection } from "./group-users-section";
+
+function GroupsPage() {
+  const [selectedGroupId, setSelectedGroupId] = useState("");
+
+  return (
+    <div className="flex">
+      <GroupsSection handleSelectedGroup={setSelectedGroupId} />
+      <GroupUsersSection groupId={selectedGroupId} />
+    </div>
+  );
+}
+
+export { GroupsPage };
diff --git a/apps/cs/src/pages/groups/ui/groups-section.tsx b/apps/cs/src/pages/groups/ui/groups-section.tsx
new file mode 100644
index 000000000..14bdc81ff
--- /dev/null
+++ b/apps/cs/src/pages/groups/ui/groups-section.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { useState } from "react";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type PaginationState,
+} from "@tanstack/react-table";
+import { DataTable } from "@common/components";
+import { ENDPOINT } from "@/shared/config";
+import { columns } from "../model/groups-table-columns";
+import { GroupsApi } from "../api/groups-service";
+import { GroupsDialog } from "./groups-dialog";
+
+type GroupsSectionProps = {
+  handleSelectedGroup: (groupId: string) => void;
+};
+
+function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  const { data: groupsList, refetch } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.GROUPS, pagination],
+    queryFn: () =>
+      GroupsApi.findPageGroup({
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+    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);
+  };
+
+  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} />
+        </div>
+        <div className="card !m-4 h-[calc(100vh-25.5rem)] overflow-auto !p-0">
+          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { GroupsSection };
diff --git a/apps/cs/src/pages/groups/ui/index.ts b/apps/cs/src/pages/groups/ui/index.ts
new file mode 100644
index 000000000..3139984a1
--- /dev/null
+++ b/apps/cs/src/pages/groups/ui/index.ts
@@ -0,0 +1 @@
+export { GroupsPage } from "./groups-page";
diff --git a/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx b/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx
new file mode 100644
index 000000000..a3095576f
--- /dev/null
+++ b/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx
@@ -0,0 +1,110 @@
+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 { useConfirm } from "@frontend-opensource/use-react-hooks";
+import {
+  Button,
+  DataTable,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@common/components";
+import {
+  MenuAuthorityApi,
+  menuAuthorityFormSchema,
+  type MenuAuthorityPayload,
+  type MenuAuthorityFormData,
+} from "@/entities/menu-authority";
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { createColumns } from "../model/group-menu-authority-table-columns";
+
+type MenuAuthorityDialogProps = {
+  groupId: string;
+} & React.ComponentProps<typeof Dialog>;
+
+function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) {
+  const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
+  const [open, setOpen] = useState(false);
+
+  const { data: menuAuthorityList } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.MENU_AUTHRTS, groupId],
+    queryFn: () => MenuAuthorityApi.getGroupMenuAuthorityList({ groupId }),
+    enabled: open && !!groupId,
+  });
+
+  const { mutateAsync: saveMenuAuthority } = useMutationWrapper({
+    mutationFn: (data: MenuAuthorityPayload[]) =>
+      MenuAuthorityApi.saveMenuAuthority(data),
+    onSuccess: () => {
+      alert("저장되었습니다.");
+    },
+  });
+
+  const form = useForm<MenuAuthorityFormData>({
+    resolver: zodResolver(menuAuthorityFormSchema),
+    values: {
+      menuAuthority: menuAuthorityList?.content ?? [],
+    },
+  });
+
+  const table = useReactTable({
+    data: menuAuthorityList?.content ?? [],
+    columns: createColumns(form),
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const handleSave = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (await confirm("저장하시겠습니까?")) {
+      const data = form.getValues("menuAuthority");
+      const filteredData = data.filter((item) => item.mode !== "R");
+      const menuAuthorityData = filteredData.map((item) => ({
+        ...item,
+        groupId,
+      }));
+      await saveMenuAuthority(menuAuthorityData);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm" onClick={(e) => e.stopPropagation()}>
+          메뉴권한
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>그룹별 메뉴 권한</DialogTitle>
+        </DialogHeader>
+        <div className="max-h-[40rem] overflow-auto">
+          <DataTable table={table} />
+        </div>
+        <DialogFooter className="!justify-center">
+          <Button size="lg" onClick={handleSave}>
+            저장
+          </Button>
+          <DialogClose asChild>
+            <Button
+              size="lg"
+              color="white"
+              onClick={(e) => e.stopPropagation()}
+            >
+              취소
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { MenuAuthorityDialog };
diff --git a/apps/cs/src/pages/groups/ui/role-select.tsx b/apps/cs/src/pages/groups/ui/role-select.tsx
new file mode 100644
index 000000000..56cd587c3
--- /dev/null
+++ b/apps/cs/src/pages/groups/ui/role-select.tsx
@@ -0,0 +1,41 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+import { RoleApi } from "@/entities/role";
+import { ENDPOINT } from "@/shared/config";
+
+type RoleSelectProps = React.ComponentPropsWithoutRef<typeof Select> & {
+  mngrYn?: string;
+};
+
+function RoleSelect({ mngrYn = "N", ...props }: RoleSelectProps) {
+  const { data: roles } = useQuery({
+    queryKey: [ENDPOINT.USER_SERVICE.ROLES],
+    queryFn: () => RoleApi.getRoles(),
+    select: (data) => {
+      return data.content.filter((role) => role.mngrYn === mngrYn);
+    },
+  });
+
+  return (
+    <Select {...props}>
+      <SelectTrigger className="w-[24rem]">
+        <SelectValue placeholder="선택" />
+      </SelectTrigger>
+      <SelectContent>
+        {roles?.map((role) => (
+          <SelectItem key={role.roleId} value={role.roleId}>
+            {role.roleName}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+export { RoleSelect };
diff --git a/apps/cs/src/pages/role/ui/create-page.tsx b/apps/cs/src/pages/role/ui/create-page.tsx
index c19d2add5..06722a5a4 100644
--- a/apps/cs/src/pages/role/ui/create-page.tsx
+++ b/apps/cs/src/pages/role/ui/create-page.tsx
@@ -3,10 +3,9 @@
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { RoleApi, roleFormSchema, type RoleFormData } from "@/entities/role";
 import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { RoleForm } from "./role-form";
-import { RoleApi } from "../api/role-service";
-import { roleFormSchema, type RoleFormData } from "../model/role-interface";
 
 function CreatePage() {
   const router = useRouter();
diff --git a/apps/cs/src/pages/role/ui/modify-page.tsx b/apps/cs/src/pages/role/ui/modify-page.tsx
index 2a9cd6f19..4042c335a 100644
--- a/apps/cs/src/pages/role/ui/modify-page.tsx
+++ b/apps/cs/src/pages/role/ui/modify-page.tsx
@@ -4,11 +4,10 @@ import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
+import { RoleApi, roleFormSchema, type RoleFormData } from "@/entities/role";
 import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import { RoleForm } from "./role-form";
-import { RoleApi } from "../api/role-service";
-import { roleFormSchema, type RoleFormData } from "../model/role-interface";
 
 function ModifyPage({ roleId }: { roleId: string }) {
   const router = useRouter();
diff --git a/apps/cs/src/pages/role/ui/role-form.tsx b/apps/cs/src/pages/role/ui/role-form.tsx
index 0dbc692d0..cd54d1e0b 100644
--- a/apps/cs/src/pages/role/ui/role-form.tsx
+++ b/apps/cs/src/pages/role/ui/role-form.tsx
@@ -13,10 +13,9 @@ import {
   TableRow,
 } from "@common/components";
 import { FormWrapper } from "@/widgets/form-wrapper";
+import { RoleApi, type RoleFormData } from "@/entities/role";
 import { FormField, FormItem, FormControl } from "@/shared/ui/form";
 import { useAlertStore, useMutationWrapper } from "@/shared/lib";
-import { RoleApi } from "../api/role-service";
-import type { RoleFormData } from "../model/role-interface";
 
 type RoleFormProps = {
   roleId?: string;
diff --git a/apps/cs/src/pages/role/ui/role-page.tsx b/apps/cs/src/pages/role/ui/role-page.tsx
index ca57084b0..f2e9273aa 100644
--- a/apps/cs/src/pages/role/ui/role-page.tsx
+++ b/apps/cs/src/pages/role/ui/role-page.tsx
@@ -9,10 +9,9 @@ import {
   type PaginationState,
 } from "@tanstack/react-table";
 import { Button, DataTable, Input, Label } from "@common/components";
+import { RoleApi, type Role, type RoleParams } from "@/entities/role";
 import { ENDPOINT } from "@/shared/config";
-import { RoleApi } from "../api/role-service";
 import { columns } from "../model/table-columns";
-import type { Role, RoleParams } from "../model/role-interface";
 
 function RolePage() {
   const router = useRouter();

From 2c9793c7beea126089203a1d3010c3d76ddd0c6a Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 17 Jun 2025 11:10:15 +0900
Subject: [PATCH 3/8] =?UTF-8?q?refactor:=20=ED=85=8C=EC=9D=B4=EB=B8=94=20?=
 =?UTF-8?q?=EB=84=98=EB=B2=84=EB=A7=81=20=EC=BD=94=EB=93=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/(post)/notice/model/notice-table-columns.tsx   | 6 ++++++
 apps/cs/src/pages/contents/model/table-columns.tsx       | 7 ++++++-
 apps/cs/src/pages/file/model/table-columns.tsx           | 7 ++++++-
 apps/cs/src/pages/image/model/image-table-columns.tsx    | 7 ++++++-
 apps/cs/src/pages/menu/model/board-table-columns.tsx     | 7 ++++++-
 apps/cs/src/pages/menu/model/contents-table-colums.tsx   | 7 ++++++-
 .../pages/module/model/authorizations-table-columns.tsx  | 7 ++++++-
 apps/cs/src/pages/recent/model/table-columns.tsx         | 6 ++++++
 apps/cs/src/pages/role/model/table-columns.tsx           | 9 +++++++--
 apps/cs/src/pages/site/model/table-columns.tsx           | 7 ++++++-
 .../src/pages/template/model/template-table-columns.tsx  | 7 ++++++-
 apps/cs/src/pages/terms/model/terms-table-columns.tsx    | 7 ++++++-
 apps/cs/src/pages/users/model/table-columns.tsx          | 7 ++++++-
 13 files changed, 79 insertions(+), 12 deletions(-)

diff --git a/apps/cs/src/pages/(post)/notice/model/notice-table-columns.tsx b/apps/cs/src/pages/(post)/notice/model/notice-table-columns.tsx
index 0926a2d9d..e6feb6952 100644
--- a/apps/cs/src/pages/(post)/notice/model/notice-table-columns.tsx
+++ b/apps/cs/src/pages/(post)/notice/model/notice-table-columns.tsx
@@ -8,6 +8,12 @@ export const columns: ColumnDef<Post>[] = [
   {
     accessorKey: "rowNo",
     header: "NO",
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
   },
   {
     accessorKey: "pstTtl",
diff --git a/apps/cs/src/pages/contents/model/table-columns.tsx b/apps/cs/src/pages/contents/model/table-columns.tsx
index 19d98a48b..714fa2230 100644
--- a/apps/cs/src/pages/contents/model/table-columns.tsx
+++ b/apps/cs/src/pages/contents/model/table-columns.tsx
@@ -8,7 +8,12 @@ export const columns = [
   columnHelper.display({
     id: "no",
     header: "NO",
-    cell: ({ row }) => row.index + 1,
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
   }),
   columnHelper.accessor("contsTtl", {
     id: "contsTtl",
diff --git a/apps/cs/src/pages/file/model/table-columns.tsx b/apps/cs/src/pages/file/model/table-columns.tsx
index 35d5507eb..fa30cb0fd 100644
--- a/apps/cs/src/pages/file/model/table-columns.tsx
+++ b/apps/cs/src/pages/file/model/table-columns.tsx
@@ -11,7 +11,12 @@ export const createColumns = (
   {
     id: "no",
     header: "NO",
-    cell: (info) => info.row.index + 1,
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
   },
   {
     accessorKey: "atflId",
diff --git a/apps/cs/src/pages/image/model/image-table-columns.tsx b/apps/cs/src/pages/image/model/image-table-columns.tsx
index 535ed16f2..8d53a9a7c 100644
--- a/apps/cs/src/pages/image/model/image-table-columns.tsx
+++ b/apps/cs/src/pages/image/model/image-table-columns.tsx
@@ -31,7 +31,12 @@ export const columns: ColumnDef<Image>[] = [
   {
     accessorKey: "imgSn",
     header: "NO",
-    cell: ({ row }) => row.index + 1,
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
   },
   {
     accessorKey: "imgTypeCd",
diff --git a/apps/cs/src/pages/menu/model/board-table-columns.tsx b/apps/cs/src/pages/menu/model/board-table-columns.tsx
index ba78b06c7..fe42a39cc 100644
--- a/apps/cs/src/pages/menu/model/board-table-columns.tsx
+++ b/apps/cs/src/pages/menu/model/board-table-columns.tsx
@@ -6,7 +6,12 @@ export const columns: ColumnDef<BoardPopup>[] = [
   {
     id: "no",
     header: "NO",
-    cell: ({ row }) => row.index + 1,
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
   },
   {
     accessorKey: "bbsNm",
diff --git a/apps/cs/src/pages/menu/model/contents-table-colums.tsx b/apps/cs/src/pages/menu/model/contents-table-colums.tsx
index 0f274210b..65a08b802 100644
--- a/apps/cs/src/pages/menu/model/contents-table-colums.tsx
+++ b/apps/cs/src/pages/menu/model/contents-table-colums.tsx
@@ -7,7 +7,12 @@ export const columns: ColumnDef<Contents>[] = [
   {
     id: "no",
     header: "NO",
-    cell: ({ row }) => row.index + 1,
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
   },
   {
     id: "contsTtl",
diff --git a/apps/cs/src/pages/module/model/authorizations-table-columns.tsx b/apps/cs/src/pages/module/model/authorizations-table-columns.tsx
index 359afab19..c99d4145c 100644
--- a/apps/cs/src/pages/module/model/authorizations-table-columns.tsx
+++ b/apps/cs/src/pages/module/model/authorizations-table-columns.tsx
@@ -7,7 +7,12 @@ export const columns: ColumnDef<Authorizations>[] = [
   {
     id: "no",
     header: "NO",
-    cell: ({ row }) => row.index + 1,
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
   },
   {
     accessorKey: "authorizationName",
diff --git a/apps/cs/src/pages/recent/model/table-columns.tsx b/apps/cs/src/pages/recent/model/table-columns.tsx
index 272a7d149..8b042d106 100644
--- a/apps/cs/src/pages/recent/model/table-columns.tsx
+++ b/apps/cs/src/pages/recent/model/table-columns.tsx
@@ -32,6 +32,12 @@ export const columns: ColumnDef<RecentPost>[] = [
   {
     accessorKey: "rowNo",
     header: "NO",
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
     meta: {
       width: 80,
     },
diff --git a/apps/cs/src/pages/role/model/table-columns.tsx b/apps/cs/src/pages/role/model/table-columns.tsx
index 5ad18bc6f..f1e586043 100644
--- a/apps/cs/src/pages/role/model/table-columns.tsx
+++ b/apps/cs/src/pages/role/model/table-columns.tsx
@@ -1,14 +1,19 @@
 import dayjs from "dayjs";
 import { useState } from "react";
+import type { Role } from "@/entities/role";
 import type { ColumnDef } from "@tanstack/react-table";
 import { MappingRoleDialog } from "../ui/mapping-role-dialog";
-import type { Role } from "./role-interface";
 
 export const columns: ColumnDef<Role>[] = [
   {
     id: "no",
     header: "NO",
-    cell: ({ row }) => row.index + 1,
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
   },
   {
     accessorKey: "roleId",
diff --git a/apps/cs/src/pages/site/model/table-columns.tsx b/apps/cs/src/pages/site/model/table-columns.tsx
index c5da01880..4418e20a0 100644
--- a/apps/cs/src/pages/site/model/table-columns.tsx
+++ b/apps/cs/src/pages/site/model/table-columns.tsx
@@ -6,7 +6,12 @@ export const columns: ColumnDef<Site>[] = [
   {
     id: "no",
     header: "NO",
-    cell: ({ row }) => row.index + 1,
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
   },
   {
     accessorKey: "siteId",
diff --git a/apps/cs/src/pages/template/model/template-table-columns.tsx b/apps/cs/src/pages/template/model/template-table-columns.tsx
index 4407469d7..86f58cb04 100644
--- a/apps/cs/src/pages/template/model/template-table-columns.tsx
+++ b/apps/cs/src/pages/template/model/template-table-columns.tsx
@@ -6,7 +6,12 @@ export const columns: ColumnDef<Template>[] = [
   {
     id: "no",
     header: "NO",
-    cell: ({ row }) => row.index + 1,
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
   },
   {
     accessorKey: "tmpltNm",
diff --git a/apps/cs/src/pages/terms/model/terms-table-columns.tsx b/apps/cs/src/pages/terms/model/terms-table-columns.tsx
index b70f47d42..f14833418 100644
--- a/apps/cs/src/pages/terms/model/terms-table-columns.tsx
+++ b/apps/cs/src/pages/terms/model/terms-table-columns.tsx
@@ -6,7 +6,12 @@ export const columns: ColumnDef<Terms>[] = [
   {
     id: "no",
     header: "NO",
-    cell: ({ row }) => row.index + 1,
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
   },
   {
     accessorKey: "trmsTtl",
diff --git a/apps/cs/src/pages/users/model/table-columns.tsx b/apps/cs/src/pages/users/model/table-columns.tsx
index 0940edea3..0b61b0569 100644
--- a/apps/cs/src/pages/users/model/table-columns.tsx
+++ b/apps/cs/src/pages/users/model/table-columns.tsx
@@ -6,7 +6,12 @@ export const columns: ColumnDef<UserListResponse>[] = [
   {
     id: "no",
     header: "No",
-    cell: ({ row }) => row.index + 1,
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
   },
   {
     accessorKey: "userId",

From 706a1db18775385d7fe976cb9695fec83f477eae Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 17 Jun 2025 14:00:35 +0900
Subject: [PATCH 4/8] =?UTF-8?q?refactor:=20LNB=20=EC=9E=91=EB=8F=99=20?=
 =?UTF-8?q?=EB=B0=A9=EC=8B=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/components/src/ui/lnb/index.tsx    | 49 ++++++++++++++++---
 1 file changed, 42 insertions(+), 7 deletions(-)

diff --git a/packages/common/components/src/ui/lnb/index.tsx b/packages/common/components/src/ui/lnb/index.tsx
index 744ddcfd1..eac98faaa 100644
--- a/packages/common/components/src/ui/lnb/index.tsx
+++ b/packages/common/components/src/ui/lnb/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { ChevronRight } from "lucide-react";
 import { getConfig } from "@common/config";
@@ -38,12 +38,47 @@ export function LNB({
   });
 
   const [openMenuIds, setOpenMenuIds] = useState<number[]>([]);
+  const userClosedMenusRef = useRef(new Set());
+  const prevPathRef = useRef(currentPath);
 
   function isPathMatched(path: string) {
     if (!path) return false;
     return currentPath?.startsWith(path);
   }
 
+  useEffect(() => {
+    if (!menuList || !currentPath) return;
+
+    const matchedMenuIds: number[] = [];
+
+    const findMatchedMenus = (items: MenuItem[]) => {
+      items.forEach((item) => {
+        if (isPathMatched(item.urlPath)) {
+          const parentIds = getParentIds(item.menuCd)(menuList);
+          matchedMenuIds.push(...parentIds, item.menuCd);
+        }
+
+        if (item.children) {
+          findMatchedMenus(item.children);
+        }
+      });
+    };
+
+    findMatchedMenus(menuList);
+
+    if (matchedMenuIds.length > 0) {
+      const filteredIds = matchedMenuIds.filter(
+        (id) => !userClosedMenusRef.current.has(id),
+      );
+      setOpenMenuIds((prev) => [...new Set([...prev, ...filteredIds])]);
+    }
+
+    if (prevPathRef.current !== currentPath) {
+      setOpenMenuIds(matchedMenuIds);
+      prevPathRef.current = currentPath;
+    }
+  }, [menuList, currentPath]);
+
   function MenuItem({ item }: { item: MenuItem }) {
     const isMatched = isPathMatched(item.urlPath);
 
@@ -74,20 +109,20 @@ export function LNB({
   }
 
   function MenuGroup({ item }: { item: MenuItem }) {
-    const hasMatchedChild = item.children?.some((child) =>
-      isPathMatched(child.urlPath),
-    );
-
-    const isOpen = openMenuIds.includes(item.menuCd) || hasMatchedChild;
+    const isOpen = openMenuIds.includes(item.menuCd);
 
     const handleOpenChange = (open: boolean) => {
       if (open) {
+        // 열 때는 부모들도 함께 열기
         if (!openMenuIds.includes(item.menuCd)) {
           const parentIds = getParentIds(item.menuCd)(menuList ?? []);
-          setOpenMenuIds([...parentIds, item.menuCd]);
+          setOpenMenuIds((prev) => [...prev, ...parentIds, item.menuCd]);
         }
+        userClosedMenusRef.current.delete(item.menuCd);
       } else {
+        // 닫을 때는 현재 메뉴만 닫기
         setOpenMenuIds((prev) => prev.filter((id) => id !== item.menuCd));
+        userClosedMenusRef.current.add(item.menuCd);
       }
     };
 

From de67befb6cc7bd42fc41e71d8726ca47b25132fd Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 17 Jun 2025 16:18:09 +0900
Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=EA=B7=B8=EB=A3=B9=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EC=9E=90=20=EC=84=A0=ED=83=9D=20=EC=82=AD=EC=A0=9C=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/entities/user/model/user-interface.ts |   1 +
 .../pages/groups/api/group-users-service.ts   |  13 +-
 .../groups/model/group-users-interface.ts     |  55 ++---
 .../groups/ui/additional-user-dialog.tsx      | 192 ++++++++++++++++++
 .../pages/groups/ui/group-users-section.tsx   |  33 ++-
 apps/cs/src/pages/groups/ui/index.ts          |   1 -
 6 files changed, 239 insertions(+), 56 deletions(-)
 create mode 100644 apps/cs/src/pages/groups/ui/additional-user-dialog.tsx
 delete mode 100644 apps/cs/src/pages/groups/ui/index.ts

diff --git a/apps/cs/src/entities/user/model/user-interface.ts b/apps/cs/src/entities/user/model/user-interface.ts
index abc48f9ae..dd250bd9e 100644
--- a/apps/cs/src/entities/user/model/user-interface.ts
+++ b/apps/cs/src/entities/user/model/user-interface.ts
@@ -20,6 +20,7 @@ export interface UserSearchParams extends PageableParams {
   grpId?: string;
   frDateYmd?: string;
   toDateYmd?: string;
+  userName?: string;
 }
 
 // 사용자 목록 응답 인터페이스
diff --git a/apps/cs/src/pages/groups/api/group-users-service.ts b/apps/cs/src/pages/groups/api/group-users-service.ts
index 2a11038e6..5af60a9ef 100644
--- a/apps/cs/src/pages/groups/api/group-users-service.ts
+++ b/apps/cs/src/pages/groups/api/group-users-service.ts
@@ -3,8 +3,9 @@ import { ENDPOINT } from "@/shared/config";
 import type {
   GroupUserService,
   GroupUserSearchParams,
-  GroupUserList,
+  GroupUserListResponseDto,
   GroupUserDetailResponse,
+  PageGroupUserList,
   GroupUserSaveData,
   GroupUserUpdateData,
 } from "../model/group-users-interface";
@@ -13,8 +14,8 @@ export class GroupUsersApiService implements GroupUserService {
   // 그룹 사용자 목록 조회
   public async findPageGroupUser(
     params: GroupUserSearchParams,
-  ): Promise<GroupUserList> {
-    const response = await client.get<GroupUserList>(
+  ): Promise<PageGroupUserList> {
+    const response = await client.get<PageGroupUserList>(
       `${ENDPOINT.CMS_SERVICE.GROUP_USERS}`,
       { params },
     );
@@ -34,9 +35,9 @@ export class GroupUsersApiService implements GroupUserService {
 
   // 그룹 사용자 저장
   public async saveGroupUser(
-    data: GroupUserSaveData,
-  ): Promise<GroupUserDetailResponse> {
-    const response = await client.post<GroupUserDetailResponse>(
+    data: GroupUserSaveData[],
+  ): Promise<GroupUserListResponseDto[]> {
+    const response = await client.post<GroupUserListResponseDto[]>(
       `${ENDPOINT.CMS_SERVICE.GROUP_USERS}`,
       data,
     );
diff --git a/apps/cs/src/pages/groups/model/group-users-interface.ts b/apps/cs/src/pages/groups/model/group-users-interface.ts
index 1587522a8..38daf6fe0 100644
--- a/apps/cs/src/pages/groups/model/group-users-interface.ts
+++ b/apps/cs/src/pages/groups/model/group-users-interface.ts
@@ -1,4 +1,4 @@
-import type { PageableParams } from "@/shared/model";
+import type { PageableList, PageableParams } from "@/shared/model";
 
 // 그룹 사용자 검색 파라미터 인터페이스
 export interface GroupUserSearchParams extends PageableParams {
@@ -7,49 +7,17 @@ export interface GroupUserSearchParams extends PageableParams {
 
 // 그룹 사용자 목록 응답 인터페이스
 export interface GroupUserListResponseDto {
-  grpSn: number;
+  mode: string;
+  groupId: string;
   userUnqId: string;
-  userId: string;
   userName: string;
-  email: string;
+  ogdpSeCd: string;
+  ogdpSeNm: string;
   mphn: string;
-  regDt: string;
-  rgtr: string;
-  mdfcnDt: string;
-  mdfr: string;
-  rgtrNm: string;
-  mdfrNm: string;
 }
 
 // 그룹 사용자 페이지 응답 인터페이스
-export interface GroupUserList {
-  content: GroupUserListResponseDto[];
-  pageable: {
-    sort: {
-      empty: boolean;
-      sorted: boolean;
-      unsorted: boolean;
-    };
-    offset: number;
-    pageSize: number;
-    pageNumber: number;
-    paged: boolean;
-    unpaged: boolean;
-  };
-  last: boolean;
-  totalPages: number;
-  totalElements: number;
-  size: number;
-  number: number;
-  sort: {
-    empty: boolean;
-    sorted: boolean;
-    unsorted: boolean;
-  };
-  first: boolean;
-  numberOfElements: number;
-  empty: boolean;
-}
+export type PageGroupUserList = PageableList<GroupUserListResponseDto>;
 
 // 그룹 사용자 상세 응답 인터페이스
 export interface GroupUserDetailResponse {
@@ -69,7 +37,8 @@ export interface GroupUserDetailResponse {
 
 // 그룹 사용자 저장 데이터 인터페이스
 export interface GroupUserSaveData {
-  grpSn: number;
+  mode: string;
+  groupId: string;
   userUnqId: string;
 }
 
@@ -81,7 +50,9 @@ export interface GroupUserUpdateData {
 // 그룹 사용자 서비스 인터페이스
 export interface GroupUserService {
   // 그룹 사용자 목록 조회
-  findPageGroupUser: (params: GroupUserSearchParams) => Promise<GroupUserList>;
+  findPageGroupUser: (
+    params: GroupUserSearchParams,
+  ) => Promise<PageGroupUserList>;
 
   // 그룹 사용자 단건 조회
   findByGroupAndUserId: (
@@ -90,7 +61,9 @@ export interface GroupUserService {
   ) => Promise<GroupUserDetailResponse>;
 
   // 그룹 사용자 저장
-  saveGroupUser: (data: GroupUserSaveData) => Promise<GroupUserDetailResponse>;
+  saveGroupUser: (
+    data: GroupUserSaveData[],
+  ) => Promise<GroupUserListResponseDto[]>;
 
   // 그룹 사용자 수정
   updateGroupUser: (
diff --git a/apps/cs/src/pages/groups/ui/additional-user-dialog.tsx b/apps/cs/src/pages/groups/ui/additional-user-dialog.tsx
new file mode 100644
index 000000000..e3a3ee7a1
--- /dev/null
+++ b/apps/cs/src/pages/groups/ui/additional-user-dialog.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+import { useState } from "react";
+import {
+  keepPreviousData,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type PaginationState,
+  type RowSelectionState,
+  type ColumnDef,
+} from "@tanstack/react-table";
+import {
+  Button,
+  DataTable,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+  Input,
+  Checkbox,
+} from "@common/components";
+import {
+  UserApi,
+  type UserListResponse,
+  type UserSearchParams,
+} from "@/entities/user";
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore } from "@/shared/lib";
+import { GroupUsersApi } from "../api/group-users-service";
+
+type AdditionalUserDialogProps = {
+  groupId?: string;
+};
+
+function AdditionalUserDialog({ groupId }: AdditionalUserDialogProps) {
+  const queryClient = useQueryClient();
+  const alert = useAlertStore((state) => state.setMessage);
+
+  const [open, setOpen] = useState(false);
+  const [userSearchQuery, setUserSearchQuery] = useState<UserSearchParams>({
+    userName: "",
+  });
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [userRowSelection, setUserRowSelection] = useState<RowSelectionState>(
+    {},
+  );
+
+  const { data: usersList } = useQuery({
+    queryKey: [ENDPOINT.USER_SERVICE.USERS, userSearchQuery, pagination],
+    queryFn: () =>
+      UserApi.findPageUser({
+        ...userSearchQuery,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+    enabled: open,
+    placeholderData: keepPreviousData,
+  });
+
+  const userColumns: ColumnDef<UserListResponse>[] = [
+    {
+      id: "select",
+      header: ({ table }) => (
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && "indeterminate")
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="전체 선택"
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="행 선택"
+        />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+    },
+    {
+      accessorKey: "userId",
+      header: "사용자ID",
+    },
+    {
+      accessorKey: "userName",
+      header: "이름",
+    },
+    {
+      accessorKey: "ogdpSeNm",
+      header: "소속",
+    },
+    {
+      accessorKey: "mphn",
+      header: "연락처",
+    },
+  ];
+
+  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 handleAddUsers = async () => {
+    const selectedRows = Object.keys(userRowSelection);
+    if (selectedRows.length === 0 || !groupId) return;
+
+    try {
+      const usersToAdd = selectedRows.map((userUnqId) => ({
+        mode: "C",
+        groupId,
+        userUnqId,
+      }));
+
+      await GroupUsersApi.saveGroupUser(usersToAdd);
+      queryClient.invalidateQueries({
+        queryKey: [ENDPOINT.CMS_SERVICE.GROUP_USERS, groupId],
+      });
+      alert("사용자 추가를 완료했습니다.", () => {
+        setOpen(false);
+        setUserRowSelection({});
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleSearch = () => {
+    setPagination({ pageIndex: 0, pageSize: 10 });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button disabled={!groupId}>사용자 추가</Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>사용자 추가</DialogTitle>
+        </DialogHeader>
+        <div className="mb-4 flex items-end gap-2">
+          <Input
+            value={userSearchQuery.userName}
+            onChange={(e) =>
+              setUserSearchQuery({
+                ...userSearchQuery,
+                userName: e.target.value,
+              })
+            }
+            className="!text-[1.3rem]"
+            placeholder="사용자 이름으로 검색"
+          />
+          <Button onClick={handleSearch}>검색</Button>
+        </div>
+        <DataTable table={userTable} viewPagination />
+        <DialogFooter>
+          <Button color="white" onClick={() => setOpen(false)}>
+            취소
+          </Button>
+          <Button
+            onClick={handleAddUsers}
+            disabled={userTable.getSelectedRowModel().rows.length === 0}
+          >
+            추가
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { AdditionalUserDialog };
diff --git a/apps/cs/src/pages/groups/ui/group-users-section.tsx b/apps/cs/src/pages/groups/ui/group-users-section.tsx
index 87b5ae7af..b736e3d13 100644
--- a/apps/cs/src/pages/groups/ui/group-users-section.tsx
+++ b/apps/cs/src/pages/groups/ui/group-users-section.tsx
@@ -1,7 +1,11 @@
 "use client";
 
 import { useState } from "react";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  keepPreviousData,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 import {
   getCoreRowModel,
   useReactTable,
@@ -10,21 +14,26 @@ import {
 } from "@tanstack/react-table";
 import { Button, DataTable } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
+import { useAlertStore } from "@/shared/lib";
 import { columns } from "../model/group-users-table-columns";
 import { GroupUsersApi } from "../api/group-users-service";
+import { AdditionalUserDialog } from "./additional-user-dialog";
 
 type GroupUsersSectionProps = {
   groupId?: string;
 };
 
 function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
+  const queryClient = useQueryClient();
+  const alert = useAlertStore((state) => state.setMessage);
+
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 10,
   });
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
-  const { data: groupUsersList, refetch } = useQuery({
+  const { data: groupUsersList } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.GROUP_USERS, groupId, pagination],
     queryFn: () =>
       GroupUsersApi.findPageGroupUser({
@@ -55,11 +64,19 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
     if (selectedRows.length === 0 || !groupId) return;
 
     try {
-      for (const userUnqId of selectedRows) {
-        await GroupUsersApi.deleteGroupUser(groupId, userUnqId);
-      }
-      refetch();
-      setRowSelection({});
+      const usersToDelete = selectedRows.map((userUnqId) => ({
+        mode: "D",
+        groupId,
+        userUnqId,
+      }));
+
+      await GroupUsersApi.saveGroupUser(usersToDelete);
+      queryClient.invalidateQueries({
+        queryKey: [ENDPOINT.CMS_SERVICE.GROUP_USERS, groupId],
+      });
+      alert("사용자 삭제를 완료했습니다.", () => {
+        setRowSelection({});
+      });
     } catch (error) {
       console.error(error);
     }
@@ -71,7 +88,7 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
         <div className="card-header">
           <h3 className="text-2xl font-medium text-label">그룹 사용자 목록</h3>
           <div className="flex gap-2">
-            <Button>등록</Button>
+            <AdditionalUserDialog groupId={groupId} />
             <Button
               color="red"
               disabled={table.getSelectedRowModel().rows.length === 0}
diff --git a/apps/cs/src/pages/groups/ui/index.ts b/apps/cs/src/pages/groups/ui/index.ts
deleted file mode 100644
index 3139984a1..000000000
--- a/apps/cs/src/pages/groups/ui/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { GroupsPage } from "./groups-page";

From 1309767de9d0cc9cbc07f6beac3dab061b41a178 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 18 Jun 2025 14:42:56 +0900
Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=EA=B7=B8=EB=A3=B9=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20>=20=EA=B7=B8=EB=A3=B9=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/entities/site/ui/site-select.tsx  |  6 +---
 .../cs/src/pages/groups/api/groups-service.ts | 14 ++++----
 .../pages/groups/model/groups-interface.ts    | 23 +++++++------
 .../groups/model/groups-table-columns.tsx     | 12 ++++++-
 apps/cs/src/pages/groups/ui/groups-dialog.tsx | 34 ++++++++++++++-----
 .../cs/src/pages/groups/ui/groups-section.tsx |  6 ++--
 apps/cs/src/pages/groups/ui/role-select.tsx   | 11 +++---
 7 files changed, 66 insertions(+), 40 deletions(-)

diff --git a/apps/cs/src/entities/site/ui/site-select.tsx b/apps/cs/src/entities/site/ui/site-select.tsx
index 3d56a5658..715943740 100644
--- a/apps/cs/src/entities/site/ui/site-select.tsx
+++ b/apps/cs/src/entities/site/ui/site-select.tsx
@@ -17,7 +17,6 @@ type SiteSelectProps = {
 } & React.ComponentPropsWithoutRef<typeof Select>;
 
 function SiteSelect({
-  defaultValue,
   placeholder = "선택",
   enabledAllSite,
   className,
@@ -34,13 +33,10 @@ function SiteSelect({
     },
   });
 
-  const defaultValueText =
-    sites?.find((item) => item.siteId === defaultValue)?.siteNm ?? placeholder;
-
   return (
     <Select {...props}>
       <SelectTrigger className={cn("w-[12rem]", className)}>
-        <SelectValue placeholder={defaultValueText} />
+        <SelectValue placeholder={placeholder} />
       </SelectTrigger>
       <SelectContent>
         {sites?.map((item) => (
diff --git a/apps/cs/src/pages/groups/api/groups-service.ts b/apps/cs/src/pages/groups/api/groups-service.ts
index 1cc06e914..1ead02087 100644
--- a/apps/cs/src/pages/groups/api/groups-service.ts
+++ b/apps/cs/src/pages/groups/api/groups-service.ts
@@ -4,7 +4,7 @@ import type {
   GroupService,
   GroupSearchParams,
   GroupList,
-  GroupDetailResponse,
+  GroupResponseDto,
   GroupFormData,
 } from "../model/groups-interface";
 
@@ -19,16 +19,16 @@ export class GroupsApiService implements GroupService {
   }
 
   // 그룹 단건 조회
-  public async findById(groupId: string): Promise<GroupDetailResponse> {
-    const response = await client.get<GroupDetailResponse>(
+  public async findGroupById(groupId: string): Promise<GroupResponseDto> {
+    const response = await client.get<GroupResponseDto>(
       `${ENDPOINT.CMS_SERVICE.GROUPS}/${groupId}`,
     );
     return response.data;
   }
 
   // 그룹 저장
-  public async saveGroup(data: GroupFormData): Promise<GroupDetailResponse> {
-    const response = await client.post<GroupDetailResponse>(
+  public async saveGroup(data: GroupFormData): Promise<GroupResponseDto> {
+    const response = await client.post<GroupResponseDto>(
       `${ENDPOINT.CMS_SERVICE.GROUPS}`,
       data,
     );
@@ -39,8 +39,8 @@ export class GroupsApiService implements GroupService {
   public async updateGroup(
     groupId: string,
     data: GroupFormData,
-  ): Promise<GroupDetailResponse> {
-    const response = await client.put<GroupDetailResponse>(
+  ): Promise<GroupResponseDto> {
+    const response = await client.put<GroupResponseDto>(
       `${ENDPOINT.CMS_SERVICE.GROUPS}/${groupId}`,
       data,
     );
diff --git a/apps/cs/src/pages/groups/model/groups-interface.ts b/apps/cs/src/pages/groups/model/groups-interface.ts
index 06d4cd286..f8cc9883f 100644
--- a/apps/cs/src/pages/groups/model/groups-interface.ts
+++ b/apps/cs/src/pages/groups/model/groups-interface.ts
@@ -34,17 +34,20 @@ export interface GroupListResponseDto {
 }
 
 // 그룹 상세 응답 인터페이스
-export interface GroupDetailResponse {
-  grpSn: number;
-  grpNm: string;
-  grpExpln: string;
-  useYn: string;
+export interface GroupResponseDto {
+  groupId: string;
+  groupNm: string;
+  groupSeCd: string;
+  groupSeNm: string;
+  groupExpln: string;
+  delYn: string;
   regDt: string;
   rgtr: string;
   mdfcnDt: string;
   mdfr: string;
-  rgtrNm: string;
-  mdfrNm: string;
+  authrtId: string;
+  siteId: string;
+  mngrYn: string;
 }
 
 // 그룹 저장 데이터 스키마
@@ -68,16 +71,16 @@ export interface GroupService {
   findPageGroup: (params: GroupSearchParams) => Promise<GroupList>;
 
   // 그룹 단건 조회
-  findById: (groupId: string) => Promise<GroupDetailResponse>;
+  findGroupById: (groupId: string) => Promise<GroupResponseDto>;
 
   // 그룹 저장
-  saveGroup: (data: GroupFormData) => Promise<GroupDetailResponse>;
+  saveGroup: (data: GroupFormData) => Promise<GroupResponseDto>;
 
   // 그룹 수정
   updateGroup: (
     groupId: string,
     data: GroupFormData,
-  ) => Promise<GroupDetailResponse>;
+  ) => Promise<GroupResponseDto>;
 
   // 그룹 삭제
   deleteGroup: (groupId: string) => Promise<boolean>;
diff --git a/apps/cs/src/pages/groups/model/groups-table-columns.tsx b/apps/cs/src/pages/groups/model/groups-table-columns.tsx
index a70b3144d..40cd9042c 100644
--- a/apps/cs/src/pages/groups/model/groups-table-columns.tsx
+++ b/apps/cs/src/pages/groups/model/groups-table-columns.tsx
@@ -1,6 +1,8 @@
 import { type ColumnDef } from "@tanstack/react-table";
+import { Button } from "@common/components";
 import { type GroupListResponseDto } from "./groups-interface";
 import { MenuAuthorityDialog } from "../ui/menu-authority-dialog";
+import { GroupsDialog } from "../ui/groups-dialog";
 
 export const columns: ColumnDef<GroupListResponseDto>[] = [
   {
@@ -19,8 +21,16 @@ export const columns: ColumnDef<GroupListResponseDto>[] = [
     id: "actions",
     header: "관리",
     cell: ({ row }) => (
-      <div className="flex justify-center gap-2">
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="flex justify-center gap-2"
+      >
         <MenuAuthorityDialog groupId={row.original.groupId} />
+        <GroupsDialog groupId={row.original.groupId}>
+          <Button size="sm" color="white">
+            수정
+          </Button>
+        </GroupsDialog>
       </div>
     ),
   },
diff --git a/apps/cs/src/pages/groups/ui/groups-dialog.tsx b/apps/cs/src/pages/groups/ui/groups-dialog.tsx
index bd59f58ef..c2032eb79 100644
--- a/apps/cs/src/pages/groups/ui/groups-dialog.tsx
+++ b/apps/cs/src/pages/groups/ui/groups-dialog.tsx
@@ -4,6 +4,7 @@ import { memo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useQuery } from "@tanstack/react-query";
 import {
   Button,
   Dialog,
@@ -15,6 +16,7 @@ import {
   DialogClose,
 } from "@common/components";
 import { Form } from "@/shared/ui/form";
+import { ENDPOINT } from "@/shared/config";
 import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { GroupForm } from "./group-form";
 import { GroupsApi } from "../api/groups-service";
@@ -22,21 +24,23 @@ import { groupFormSchema, type GroupFormData } from "../model/groups-interface";
 
 type GroupsDialogProps = {
   groupId?: string;
+  children: React.ReactNode;
   onSuccess?: () => void;
 };
 
 const GroupsDialog = memo(
-  ({ groupId, onSuccess, ...props }: GroupsDialogProps) => {
+  ({ groupId, children, onSuccess, ...props }: GroupsDialogProps) => {
     const isRegistration = !groupId;
+
     const { confirm } = useConfirm();
     const alert = useAlertStore((state) => state.setMessage);
+
     const [open, setOpen] = useState(false);
 
-    const form = useForm<GroupFormData>({
-      resolver: zodResolver(groupFormSchema),
-      defaultValues: {
-        mngrYn: "N",
-      },
+    const { data: group } = useQuery({
+      queryKey: [ENDPOINT.CMS_SERVICE.GROUPS, groupId],
+      queryFn: () => GroupsApi.findGroupById(groupId!),
+      enabled: !!groupId,
     });
 
     const { mutateAsync: createGroup } = useMutationWrapper({
@@ -60,6 +64,20 @@ const GroupsDialog = memo(
       },
     });
 
+    const form = useForm<GroupFormData>({
+      resolver: zodResolver(groupFormSchema),
+      values: {
+        groupId: group?.groupId ?? "",
+        groupNm: group?.groupNm ?? "",
+        groupSeCd: group?.groupSeCd ?? "",
+        groupExpln: group?.groupExpln ?? "",
+        delYn: group?.delYn ?? "",
+        authrtId: group?.authrtId ?? "",
+        siteId: group?.siteId ?? "",
+        mngrYn: group?.mngrYn ?? "",
+      },
+    });
+
     const onSubmit =
       (callback: (data: GroupFormData) => void) =>
       async (data: GroupFormData) => {
@@ -72,9 +90,7 @@ const GroupsDialog = memo(
 
     return (
       <Dialog open={open} onOpenChange={setOpen} {...props}>
-        <DialogTrigger asChild>
-          <Button>등록</Button>
-        </DialogTrigger>
+        <DialogTrigger asChild>{children}</DialogTrigger>
         <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
           <DialogHeader>
             <DialogTitle>
diff --git a/apps/cs/src/pages/groups/ui/groups-section.tsx b/apps/cs/src/pages/groups/ui/groups-section.tsx
index 14bdc81ff..ffd3fc637 100644
--- a/apps/cs/src/pages/groups/ui/groups-section.tsx
+++ b/apps/cs/src/pages/groups/ui/groups-section.tsx
@@ -7,7 +7,7 @@ import {
   useReactTable,
   type PaginationState,
 } from "@tanstack/react-table";
-import { DataTable } from "@common/components";
+import { Button, DataTable } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
 import { columns } from "../model/groups-table-columns";
 import { GroupsApi } from "../api/groups-service";
@@ -55,7 +55,9 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
       <div className="card card-border">
         <div className="card-header">
           <h3 className="text-2xl font-medium text-label">그룹 목록</h3>
-          <GroupsDialog onSuccess={refetch} />
+          <GroupsDialog onSuccess={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 />
diff --git a/apps/cs/src/pages/groups/ui/role-select.tsx b/apps/cs/src/pages/groups/ui/role-select.tsx
index 56cd587c3..539888591 100644
--- a/apps/cs/src/pages/groups/ui/role-select.tsx
+++ b/apps/cs/src/pages/groups/ui/role-select.tsx
@@ -17,20 +17,19 @@ function RoleSelect({ mngrYn = "N", ...props }: RoleSelectProps) {
   const { data: roles } = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.ROLES],
     queryFn: () => RoleApi.getRoles(),
-    select: (data) => {
-      return data.content.filter((role) => role.mngrYn === mngrYn);
-    },
   });
 
+  const options = roles?.content.filter((role) => role.mngrYn === mngrYn);
+
   return (
     <Select {...props}>
       <SelectTrigger className="w-[24rem]">
         <SelectValue placeholder="선택" />
       </SelectTrigger>
       <SelectContent>
-        {roles?.map((role) => (
-          <SelectItem key={role.roleId} value={role.roleId}>
-            {role.roleName}
+        {options?.map((item) => (
+          <SelectItem key={item.roleId} value={item.roleId}>
+            {item.roleName}
           </SelectItem>
         ))}
       </SelectContent>

From 6d6892973fa652d28c4524d9272bbc4220a2fc13 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 18 Jun 2025 15:24:07 +0900
Subject: [PATCH 7/8] =?UTF-8?q?feat:=20useDataTable=20=ED=9B=85=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/shared/lib/match-query-status.ts | 65 ++++++++++++++++++++
 apps/cs/src/shared/lib/use-data-table.tsx    | 33 ++++++++++
 apps/cs/src/shared/ui/no-data.tsx            | 17 +++++
 3 files changed, 115 insertions(+)
 create mode 100644 apps/cs/src/shared/lib/match-query-status.ts
 create mode 100644 apps/cs/src/shared/lib/use-data-table.tsx
 create mode 100644 apps/cs/src/shared/ui/no-data.tsx

diff --git a/apps/cs/src/shared/lib/match-query-status.ts b/apps/cs/src/shared/lib/match-query-status.ts
new file mode 100644
index 000000000..0e5f45829
--- /dev/null
+++ b/apps/cs/src/shared/lib/match-query-status.ts
@@ -0,0 +1,65 @@
+import { type UseQueryResult } from "@tanstack/react-query";
+import type { PageableList } from "../model";
+
+/**
+ * Match the state of a query to a set of components.
+ *
+ * Useful for rendering different UI based on the state of a query.
+ */
+export function matchQueryStatus<T>(
+  query: UseQueryResult<PageableList<T>>,
+  options: {
+    Loading?: JSX.Element;
+    Errored?: JSX.Element | ((error: unknown) => JSX.Element);
+    Empty?: JSX.Element;
+    Success: (
+      data: UseQueryResult<PageableList<T>> & {
+        data: NonNullable<UseQueryResult<T>["data"]>;
+      },
+    ) => JSX.Element;
+  },
+): JSX.Element;
+export function matchQueryStatus<T>(
+  query: UseQueryResult<PageableList<T>>,
+  options: {
+    Loading?: JSX.Element;
+    Errored?: JSX.Element | ((error: unknown) => JSX.Element);
+    Success: (data: UseQueryResult<PageableList<T>>) => JSX.Element;
+  },
+): JSX.Element;
+export function matchQueryStatus<T>(
+  query: UseQueryResult<PageableList<T>>,
+  {
+    Loading,
+    Errored,
+    Empty,
+    Success,
+  }: {
+    Loading?: JSX.Element;
+    Errored?: JSX.Element | ((error: unknown) => JSX.Element);
+    Empty?: JSX.Element;
+    Success: (data: UseQueryResult<PageableList<T>>) => JSX.Element;
+  },
+): JSX.Element {
+  if (query.isLoading && Loading) {
+    return Loading;
+  }
+
+  if (query.isError && Errored) {
+    if (typeof Errored === "function") {
+      return Errored(query.error);
+    }
+    return Errored;
+  }
+
+  const isEmpty =
+    query.data?.content === undefined ||
+    query.data?.content === null ||
+    (Array.isArray(query.data?.content) && query.data?.content.length === 0);
+
+  if (isEmpty && Empty) {
+    return Empty;
+  }
+
+  return Success(query);
+}
diff --git a/apps/cs/src/shared/lib/use-data-table.tsx b/apps/cs/src/shared/lib/use-data-table.tsx
new file mode 100644
index 000000000..b80040423
--- /dev/null
+++ b/apps/cs/src/shared/lib/use-data-table.tsx
@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from "react";
+import type { UseQueryResult } from "@tanstack/react-query";
+import { useReactTable, type TableOptions } from "@tanstack/react-table";
+import { DataTable } from "@common/components";
+import { NoData } from "../ui/no-data";
+import type { PageableList } from "../model";
+import { matchQueryStatus } from "./match-query-status";
+
+type DataTableOptions<T> = {
+  variant?: "default" | "secondary" | "line";
+  className?: HTMLAttributes<HTMLTableElement>["className"];
+  viewPagination?: boolean;
+  onRowClick?: (row: T) => void;
+};
+
+export const useDataTable = <T,>(
+  query: UseQueryResult<PageableList<T>>,
+  tableOptions: Omit<TableOptions<T>, "data" | "rowCount">,
+  dataTableOptions?: DataTableOptions<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} />;
+    },
+  });
+};
diff --git a/apps/cs/src/shared/ui/no-data.tsx b/apps/cs/src/shared/ui/no-data.tsx
new file mode 100644
index 000000000..b13152dcf
--- /dev/null
+++ b/apps/cs/src/shared/ui/no-data.tsx
@@ -0,0 +1,17 @@
+import { cn } from "@common/components";
+
+function NoData({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "flex h-96 flex-col items-center justify-center gap-4",
+        className,
+      )}
+    >
+      <i className="diveicon di-info-circle text-3xl" />
+      조회된 데이터가 없습니다.
+    </div>
+  );
+}
+
+export { NoData };

From 3b7f8bcca771ca12ebdfd55ec8ab0538fb2ab416 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 18 Jun 2025 17:00:18 +0900
Subject: [PATCH 8/8] =?UTF-8?q?refactor:=20useDataTable=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/management-authority-dialog.tsx        | 23 +++---
 apps/cs/src/pages/banner/ui/banner-page.tsx   | 49 ++++++------
 apps/cs/src/pages/banner/ui/modify-page.tsx   | 32 ++++----
 apps/cs/src/pages/bbs/ui/bbs-page.tsx         | 48 +++++------
 .../cs/src/pages/code/ui/lwpocode-section.tsx | 43 +++++-----
 apps/cs/src/pages/code/ui/upcode-section.tsx  | 41 +++++-----
 .../src/pages/contents/ui/contents-page.tsx   | 48 +++++------
 apps/cs/src/pages/file/ui/file-page.tsx       | 44 +++++-----
 .../groups/ui/additional-user-dialog.tsx      | 35 ++++----
 .../pages/groups/ui/group-users-section.tsx   | 43 +++++-----
 .../cs/src/pages/groups/ui/groups-section.tsx | 44 +++++-----
 .../pages/groups/ui/menu-authority-dialog.tsx | 23 +++---
 apps/cs/src/pages/image/ui/image-page.tsx     | 49 ++++++------
 apps/cs/src/pages/image/ui/modify-page.tsx    | 32 ++++----
 .../src/pages/menu/ui/board-search-dialog.tsx | 34 ++++----
 .../pages/menu/ui/content-search-dialog.tsx   | 34 ++++----
 .../module/ui/management-authority-dialog.tsx | 43 +++++-----
 apps/cs/src/pages/module/ui/module-page.tsx   | 50 ++++++------
 .../ui/additional-user-dialog.tsx             | 30 ++++---
 apps/cs/src/pages/popup/ui/modify-page.tsx    | 36 +++++----
 apps/cs/src/pages/popup/ui/popup-page.tsx     | 39 ++++-----
 apps/cs/src/pages/recent/ui/recent-page.tsx   | 66 ++++++++-------
 .../src/pages/role/ui/mapping-role-dialog.tsx | 25 +++---
 apps/cs/src/pages/role/ui/role-page.tsx       | 47 +++++------
 apps/cs/src/pages/site/ui/site-page.tsx       | 42 +++++-----
 apps/cs/src/pages/survey/ui/detail-page.tsx   | 63 +++++++--------
 apps/cs/src/pages/survey/ui/survey-page.tsx   | 47 ++++++-----
 .../src/pages/template/ui/template-page.tsx   | 42 +++++-----
 apps/cs/src/pages/terms/ui/terms-page.tsx     | 42 +++++-----
 .../pages/users/ui/agency-search-dialog.tsx   | 74 ++++++++---------
 apps/cs/src/pages/users/ui/users-page.tsx     | 47 ++++++-----
 .../src/pages/users/ui/zip-search-dialog.tsx  | 80 +++++++++----------
 apps/cs/src/shared/lib/index.ts               |  1 +
 apps/cs/src/shared/lib/use-data-table.tsx     | 31 ++++---
 34 files changed, 718 insertions(+), 709 deletions(-)

diff --git a/apps/cs/src/entities/menu-authority/ui/management-authority-dialog.tsx b/apps/cs/src/entities/menu-authority/ui/management-authority-dialog.tsx
index 4a73cb596..20485cbdd 100644
--- a/apps/cs/src/entities/menu-authority/ui/management-authority-dialog.tsx
+++ b/apps/cs/src/entities/menu-authority/ui/management-authority-dialog.tsx
@@ -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}>
             저장
diff --git a/apps/cs/src/pages/banner/ui/banner-page.tsx b/apps/cs/src/pages/banner/ui/banner-page.tsx
index f2dd98d51..9bfa842ca 100644
--- a/apps/cs/src/pages/banner/ui/banner-page.tsx
+++ b/apps/cs/src/pages/banner/ui/banner-page.tsx
@@ -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>
   );
diff --git a/apps/cs/src/pages/banner/ui/modify-page.tsx b/apps/cs/src/pages/banner/ui/modify-page.tsx
index 070db0e46..8a1282908 100644
--- a/apps/cs/src/pages/banner/ui/modify-page.tsx
+++ b/apps/cs/src/pages/banner/ui/modify-page.tsx
@@ -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>
diff --git a/apps/cs/src/pages/bbs/ui/bbs-page.tsx b/apps/cs/src/pages/bbs/ui/bbs-page.tsx
index 6bde82cce..1b6a3b553 100644
--- a/apps/cs/src/pages/bbs/ui/bbs-page.tsx
+++ b/apps/cs/src/pages/bbs/ui/bbs-page.tsx
@@ -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>
   );
diff --git a/apps/cs/src/pages/code/ui/lwpocode-section.tsx b/apps/cs/src/pages/code/ui/lwpocode-section.tsx
index fd1df2d8e..2d90e99a2 100644
--- a/apps/cs/src/pages/code/ui/lwpocode-section.tsx
+++ b/apps/cs/src/pages/code/ui/lwpocode-section.tsx
@@ -1,13 +1,10 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type PaginationState,
-} from "@tanstack/react-table";
-import { Button, DataTable, Input, Label } from "@common/components";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+import { Button, Input, Label } from "@common/components";
 import { LwpoCodeApi, type LwpoCodeParams } from "@/entities/code";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { columns } from "../model/lwpocode-table-columns";
 import { LwpoCodeManagementDialog } from "./lwpocode-dialog";
 
@@ -25,7 +22,7 @@ function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
     pageSize: 10,
   });
 
-  const { data: lwpoCodeList, refetch } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.LWPO_CODE, upCd, pagination],
     queryFn: () =>
       LwpoCodeApi.getLwpoCodeList({
@@ -38,23 +35,29 @@ function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
     placeholderData: keepPreviousData,
   });
 
-  const table = useReactTable({
-    data: lwpoCodeList?.content ?? [],
-    columns,
-    rowCount: lwpoCodeList?.totalElements ?? 0,
-    state: { pagination },
-    manualPagination: true,
-    enableMultiRowSelection: false,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    getRowId: (row) => row.lwpoCd,
+  const { tableComponent } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: { pagination },
+      manualPagination: true,
+      enableMultiRowSelection: false,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      getRowId: (row) => row.lwpoCd,
+    },
+    dataTableOptions: { viewPagination: true },
   });
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    refetch();
+    query.refetch();
   };
 
+  useEffect(() => {
+    setPagination({ ...pagination, pageIndex: 0 });
+  }, [upCd]);
+
   return (
     <div className="flex-1">
       <div className="card card-border">
@@ -88,7 +91,7 @@ function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
           </LwpoCodeManagementDialog>
         </div>
         <div className="card !m-4 h-[calc(100vh-35rem)] overflow-auto !p-0">
-          <DataTable table={table} viewPagination />
+          {tableComponent}
         </div>
       </div>
     </div>
diff --git a/apps/cs/src/pages/code/ui/upcode-section.tsx b/apps/cs/src/pages/code/ui/upcode-section.tsx
index 7e3baefc9..ffae0f28b 100644
--- a/apps/cs/src/pages/code/ui/upcode-section.tsx
+++ b/apps/cs/src/pages/code/ui/upcode-section.tsx
@@ -1,13 +1,10 @@
 import { useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type PaginationState,
-} from "@tanstack/react-table";
-import { Button, DataTable, Input, Label } from "@common/components";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+import { Button, Input, Label } from "@common/components";
 import { UpCodeApi, type UpCode, type UpCodeParams } from "@/entities/code";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { columns } from "../model/upcode-table-columns";
 import { UpCodeManagementDialog } from "./upcode-dialog";
 
@@ -25,7 +22,7 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
     pageSize: 10,
   });
 
-  const { data: upCodeList, refetch } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.UP_CODE, pagination],
     queryFn: () =>
       UpCodeApi.getUpCodeList({
@@ -36,18 +33,6 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
     placeholderData: keepPreviousData,
   });
 
-  const table = useReactTable({
-    data: upCodeList?.content ?? [],
-    columns,
-    rowCount: upCodeList?.totalElements ?? 0,
-    state: { pagination },
-    manualPagination: true,
-    enableMultiRowSelection: false,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    getRowId: (row) => row.upCd,
-  });
-
   const handleRowClick = (row: UpCode) => {
     table.setRowSelection({ [row.upCd]: true });
     handleSelectedUpCd(row.upCd);
@@ -55,9 +40,23 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    refetch();
+    query.refetch();
   };
 
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: { pagination },
+      manualPagination: true,
+      enableMultiRowSelection: false,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      getRowId: (row) => row.upCd,
+    },
+    dataTableOptions: { onRowClick: handleRowClick, viewPagination: true },
+  });
+
   return (
     <div className="flex-1">
       <div className="card card-border">
@@ -91,7 +90,7 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
           </UpCodeManagementDialog>
         </div>
         <div className="card !m-4 h-[calc(100vh-35rem)] overflow-auto !p-0">
-          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
+          {tableComponent}
         </div>
       </div>
     </div>
diff --git a/apps/cs/src/pages/contents/ui/contents-page.tsx b/apps/cs/src/pages/contents/ui/contents-page.tsx
index 4fc9ae798..abbf31b7f 100644
--- a/apps/cs/src/pages/contents/ui/contents-page.tsx
+++ b/apps/cs/src/pages/contents/ui/contents-page.tsx
@@ -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>
   );
diff --git a/apps/cs/src/pages/file/ui/file-page.tsx b/apps/cs/src/pages/file/ui/file-page.tsx
index 9b58b3828..f4190a222 100644
--- a/apps/cs/src/pages/file/ui/file-page.tsx
+++ b/apps/cs/src/pages/file/ui/file-page.tsx
@@ -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>
   );
diff --git a/apps/cs/src/pages/groups/ui/additional-user-dialog.tsx b/apps/cs/src/pages/groups/ui/additional-user-dialog.tsx
index e3a3ee7a1..7de293232 100644
--- a/apps/cs/src/pages/groups/ui/additional-user-dialog.tsx
+++ b/apps/cs/src/pages/groups/ui/additional-user-dialog.tsx
@@ -8,14 +8,12 @@ import {
 } from "@tanstack/react-query";
 import {
   getCoreRowModel,
-  useReactTable,
   type PaginationState,
   type RowSelectionState,
   type ColumnDef,
 } from "@tanstack/react-table";
 import {
   Button,
-  DataTable,
   Dialog,
   DialogContent,
   DialogHeader,
@@ -31,7 +29,7 @@ import {
   type UserSearchParams,
 } from "@/entities/user";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib";
+import { useAlertStore, useDataTable } from "@/shared/lib";
 import { GroupUsersApi } from "../api/group-users-service";
 
 type AdditionalUserDialogProps = {
@@ -54,7 +52,7 @@ function AdditionalUserDialog({ groupId }: AdditionalUserDialogProps) {
     {},
   );
 
-  const { data: usersList } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.USERS, userSearchQuery, pagination],
     queryFn: () =>
       UserApi.findPageUser({
@@ -107,18 +105,19 @@ function AdditionalUserDialog({ groupId }: AdditionalUserDialogProps) {
     },
   ];
 
-  const userTable = useReactTable({
-    data: usersList?.content ?? [],
-    columns: userColumns,
-    rowCount: usersList?.totalElements ?? 0,
-    state: { pagination, rowSelection: userRowSelection },
-    manualPagination: true,
-    enableRowSelection: true,
-    enableMultiRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setUserRowSelection,
-    getRowId: (row) => row.userUnqId,
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns: userColumns,
+      state: { pagination, rowSelection: userRowSelection },
+      manualPagination: true,
+      enableRowSelection: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      onRowSelectionChange: setUserRowSelection,
+      getRowId: (row) => row.userUnqId,
+    },
   });
 
   const handleAddUsers = async () => {
@@ -172,14 +171,14 @@ function AdditionalUserDialog({ groupId }: AdditionalUserDialogProps) {
           />
           <Button onClick={handleSearch}>검색</Button>
         </div>
-        <DataTable table={userTable} viewPagination />
+        {tableComponent}
         <DialogFooter>
           <Button color="white" onClick={() => setOpen(false)}>
             취소
           </Button>
           <Button
             onClick={handleAddUsers}
-            disabled={userTable.getSelectedRowModel().rows.length === 0}
+            disabled={table.getSelectedRowModel().rows.length === 0}
           >
             추가
           </Button>
diff --git a/apps/cs/src/pages/groups/ui/group-users-section.tsx b/apps/cs/src/pages/groups/ui/group-users-section.tsx
index b736e3d13..1193de1d1 100644
--- a/apps/cs/src/pages/groups/ui/group-users-section.tsx
+++ b/apps/cs/src/pages/groups/ui/group-users-section.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   keepPreviousData,
   useQuery,
@@ -8,13 +8,12 @@ import {
 } from "@tanstack/react-query";
 import {
   getCoreRowModel,
-  useReactTable,
   type PaginationState,
   type RowSelectionState,
 } from "@tanstack/react-table";
-import { Button, DataTable } from "@common/components";
+import { Button } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib";
+import { useAlertStore, useDataTable } from "@/shared/lib";
 import { columns } from "../model/group-users-table-columns";
 import { GroupUsersApi } from "../api/group-users-service";
 import { AdditionalUserDialog } from "./additional-user-dialog";
@@ -33,7 +32,7 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
   });
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
-  const { data: groupUsersList } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.GROUP_USERS, groupId, pagination],
     queryFn: () =>
       GroupUsersApi.findPageGroupUser({
@@ -45,18 +44,22 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
     placeholderData: keepPreviousData,
   });
 
-  const table = useReactTable({
-    data: groupUsersList?.content ?? [],
-    columns,
-    rowCount: groupUsersList?.totalElements ?? 0,
-    state: { pagination, rowSelection },
-    manualPagination: true,
-    enableRowSelection: true,
-    enableMultiRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
-    getRowId: (row) => row.userUnqId,
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: { pagination, rowSelection },
+      manualPagination: true,
+      enableRowSelection: true,
+      enableMultiRowSelection: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      onRowSelectionChange: setRowSelection,
+      getRowId: (row) => row.userUnqId,
+    },
+    dataTableOptions: {
+      viewPagination: true,
+    },
   });
 
   const handleDeleteSelected = async () => {
@@ -82,6 +85,10 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
     }
   };
 
+  useEffect(() => {
+    setPagination({ ...pagination, pageIndex: 0 });
+  }, [groupId]);
+
   return (
     <div className="flex-1">
       <div className="card card-border">
@@ -99,7 +106,7 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
           </div>
         </div>
         <div className="card !m-4 h-[calc(100vh-25.5rem)] overflow-auto !p-0">
-          <DataTable table={table} viewPagination />
+          {tableComponent}
         </div>
       </div>
     </div>
diff --git a/apps/cs/src/pages/groups/ui/groups-section.tsx b/apps/cs/src/pages/groups/ui/groups-section.tsx
index ffd3fc637..723eea84d 100644
--- a/apps/cs/src/pages/groups/ui/groups-section.tsx
+++ b/apps/cs/src/pages/groups/ui/groups-section.tsx
@@ -2,13 +2,10 @@
 
 import { useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type PaginationState,
-} from "@tanstack/react-table";
-import { Button, DataTable } from "@common/components";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+import { Button } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { columns } from "../model/groups-table-columns";
 import { GroupsApi } from "../api/groups-service";
 import { GroupsDialog } from "./groups-dialog";
@@ -23,7 +20,7 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
     pageSize: 10,
   });
 
-  const { data: groupsList, refetch } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.GROUPS, pagination],
     queryFn: () =>
       GroupsApi.findPageGroup({
@@ -33,34 +30,39 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
     placeholderData: keepPreviousData,
   });
 
-  const table = useReactTable({
-    data: groupsList?.content ?? [],
-    columns,
-    rowCount: groupsList?.totalElements ?? 0,
-    state: { pagination },
-    manualPagination: true,
-    enableMultiRowSelection: false,
-    getCoreRowModel: getCoreRowModel(),
-    onPaginationChange: setPagination,
-    getRowId: (row) => row.groupId,
-  });
-
   const handleRowClick = (row: { groupId: string }) => {
     table.setRowSelection({ [row.groupId]: true });
     handleSelectedGroup(row.groupId);
   };
 
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: { pagination },
+      manualPagination: true,
+      enableMultiRowSelection: false,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+      getRowId: (row) => row.groupId,
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
+    },
+  });
+
   return (
     <div className="flex-1">
       <div className="card card-border">
         <div className="card-header">
           <h3 className="text-2xl font-medium text-label">그룹 목록</h3>
-          <GroupsDialog onSuccess={refetch}>
+          <GroupsDialog onSuccess={query.refetch}>
             <Button>등록</Button>
           </GroupsDialog>
         </div>
         <div className="card !m-4 h-[calc(100vh-25.5rem)] overflow-auto !p-0">
-          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
+          {tableComponent}
         </div>
       </div>
     </div>
diff --git a/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx b/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx
index a3095576f..260730e47 100644
--- a/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx
+++ b/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx
@@ -2,11 +2,10 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
-import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { getCoreRowModel } from "@tanstack/react-table";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import {
   Button,
-  DataTable,
   Dialog,
   DialogClose,
   DialogContent,
@@ -22,7 +21,7 @@ import {
   type MenuAuthorityFormData,
 } from "@/entities/menu-authority";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { useAlertStore, useDataTable, useMutationWrapper } from "@/shared/lib";
 import { createColumns } from "../model/group-menu-authority-table-columns";
 
 type MenuAuthorityDialogProps = {
@@ -34,7 +33,7 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) {
   const alert = useAlertStore((state) => state.setMessage);
   const [open, setOpen] = useState(false);
 
-  const { data: menuAuthorityList } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.MENU_AUTHRTS, groupId],
     queryFn: () => MenuAuthorityApi.getGroupMenuAuthorityList({ groupId }),
     enabled: open && !!groupId,
@@ -51,14 +50,16 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) {
   const form = useForm<MenuAuthorityFormData>({
     resolver: zodResolver(menuAuthorityFormSchema),
     values: {
-      menuAuthority: menuAuthorityList?.content ?? [],
+      menuAuthority: query.data?.content ?? [],
     },
   });
 
-  const table = useReactTable({
-    data: menuAuthorityList?.content ?? [],
-    columns: createColumns(form),
-    getCoreRowModel: getCoreRowModel(),
+  const { tableComponent } = useDataTable({
+    query,
+    tableOptions: {
+      columns: createColumns(form),
+      getCoreRowModel: getCoreRowModel(),
+    },
   });
 
   const handleSave = async (e: React.MouseEvent) => {
@@ -85,9 +86,7 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) {
         <DialogHeader>
           <DialogTitle>그룹별 메뉴 권한</DialogTitle>
         </DialogHeader>
-        <div className="max-h-[40rem] overflow-auto">
-          <DataTable table={table} />
-        </div>
+        <div className="max-h-[40rem] overflow-auto">{tableComponent}</div>
         <DialogFooter className="!justify-center">
           <Button size="lg" onClick={handleSave}>
             저장
diff --git a/apps/cs/src/pages/image/ui/image-page.tsx b/apps/cs/src/pages/image/ui/image-page.tsx
index 173f77554..54a57e8aa 100644
--- a/apps/cs/src/pages/image/ui/image-page.tsx
+++ b/apps/cs/src/pages/image/ui/image-page.tsx
@@ -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>
   );
diff --git a/apps/cs/src/pages/image/ui/modify-page.tsx b/apps/cs/src/pages/image/ui/modify-page.tsx
index e04787a9e..8ca21ef16 100644
--- a/apps/cs/src/pages/image/ui/modify-page.tsx
+++ b/apps/cs/src/pages/image/ui/modify-page.tsx
@@ -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>
diff --git a/apps/cs/src/pages/menu/ui/board-search-dialog.tsx b/apps/cs/src/pages/menu/ui/board-search-dialog.tsx
index 0afb6b1bd..448856713 100644
--- a/apps/cs/src/pages/menu/ui/board-search-dialog.tsx
+++ b/apps/cs/src/pages/menu/ui/board-search-dialog.tsx
@@ -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>
diff --git a/apps/cs/src/pages/menu/ui/content-search-dialog.tsx b/apps/cs/src/pages/menu/ui/content-search-dialog.tsx
index d877e1b83..10193bb2a 100644
--- a/apps/cs/src/pages/menu/ui/content-search-dialog.tsx
+++ b/apps/cs/src/pages/menu/ui/content-search-dialog.tsx
@@ -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>
diff --git a/apps/cs/src/pages/module/ui/management-authority-dialog.tsx b/apps/cs/src/pages/module/ui/management-authority-dialog.tsx
index 8ca38a570..c3dd02556 100644
--- a/apps/cs/src/pages/module/ui/management-authority-dialog.tsx
+++ b/apps/cs/src/pages/module/ui/management-authority-dialog.tsx
@@ -2,15 +2,10 @@ import { useState, memo } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type RowSelectionState,
-} from "@tanstack/react-table";
+import { getCoreRowModel, type RowSelectionState } from "@tanstack/react-table";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import {
   Button,
-  DataTable,
   Dialog,
   DialogClose,
   DialogContent,
@@ -32,7 +27,7 @@ import {
   type RoleAuthorizationsData,
 } from "@/entities/role-authorization";
 import { ENDPOINT } from "@/shared/config";
-import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { useAlertStore, useMutationWrapper, useDataTable } from "@/shared/lib";
 import { createColumns } from "../model/role-authorizations-table-columns";
 import type { Authorizations } from "@/entities/authorization";
 
@@ -49,7 +44,7 @@ const ManagementAuthorityDialog = memo(
     const [isOpened, setIsOpened] = useState(false);
     const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
-    const { data: roleAuthorizationList } = useQuery({
+    const query = useQuery({
       queryKey: [ENDPOINT.USER_SERVICE.ROLE_AUTHORIZATIONS, authorizationNo],
       queryFn: () =>
         RoleAuthorizationsApi.getRoleAuthorizationsList({ authorizationNo }),
@@ -68,24 +63,24 @@ const ManagementAuthorityDialog = memo(
       resolver: zodResolver(roleAuthorizationsFormSchema),
       values: {
         roleAuthorizations:
-          roleAuthorizationList?.content.map(
-            ({ roleId, authorizationNo, useYn }) => ({
-              roleId,
-              authorizationNo,
-              authYn: useYn,
-            }),
-          ) ?? [],
+          query.data?.content.map(({ roleId, authorizationNo, useYn }) => ({
+            roleId,
+            authorizationNo,
+            authYn: useYn,
+          })) ?? [],
       },
     });
 
-    const table = useReactTable({
-      data: roleAuthorizationList?.content ?? [],
-      columns: createColumns(form),
-      state: {
-        rowSelection,
+    const { tableComponent } = useDataTable({
+      query,
+      tableOptions: {
+        columns: createColumns(form),
+        state: {
+          rowSelection,
+        },
+        getCoreRowModel: getCoreRowModel(),
+        onRowSelectionChange: setRowSelection,
       },
-      getCoreRowModel: getCoreRowModel(),
-      onRowSelectionChange: setRowSelection,
     });
 
     const handleSave = async () => {
@@ -129,9 +124,7 @@ const ManagementAuthorityDialog = memo(
                 </TableRow>
               </TableBody>
             </Table>
-            <div className="max-h-[40rem] overflow-auto">
-              <DataTable table={table} />
-            </div>
+            <div className="max-h-[40rem] overflow-auto">{tableComponent}</div>
           </div>
           <DialogFooter className="!justify-center">
             <Button size="lg" onClick={handleSave}>
diff --git a/apps/cs/src/pages/module/ui/module-page.tsx b/apps/cs/src/pages/module/ui/module-page.tsx
index 3ae4cd9f4..5d79b74f0 100644
--- a/apps/cs/src/pages/module/ui/module-page.tsx
+++ b/apps/cs/src/pages/module/ui/module-page.tsx
@@ -3,14 +3,11 @@
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type PaginationState,
-} from "@tanstack/react-table";
-import { Button, DataTable, Input, Label } from "@common/components";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+import { Button, Input, Label } from "@common/components";
 import { CodeSelect } from "@/entities/code";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import {
   AuthorizationsApi,
   type Authorizations,
@@ -31,7 +28,7 @@ function ModulePage() {
     pageSize: 10,
   });
 
-  const { data: authorizationsList, refetch } = useQuery({
+  const query = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS],
     queryFn: () =>
       AuthorizationsApi.getAuthorizationsList({
@@ -43,16 +40,25 @@ function ModulePage() {
     enabled: false,
   });
 
-  const table = useReactTable({
-    data: authorizationsList?.content ?? [],
-    columns,
-    rowCount: authorizationsList?.totalElements ?? 0,
-    state: {
-      pagination,
+  const handleRowClick = (row: Authorizations) => {
+    router.push(`/module/register/${row.authorizationNo}`);
+  };
+
+  const { tableComponent } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+      },
+      onPaginationChange: setPagination,
+      getCoreRowModel: getCoreRowModel(),
+      manualPagination: true,
+    },
+    dataTableOptions: {
+      onRowClick: handleRowClick,
+      viewPagination: true,
     },
-    onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
   });
 
   const handleAuthorizationQueryChange =
@@ -62,15 +68,11 @@ function ModulePage() {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    refetch();
-  };
-
-  const handleRowClick = (row: Authorizations) => {
-    router.push(`/module/register/${row.authorizationNo}`);
+    query.refetch();
   };
 
   useEffect(() => {
-    refetch();
+    query.refetch();
   }, [pagination]);
 
   return (
@@ -113,9 +115,7 @@ function ModulePage() {
           <h3 className="text-2xl font-medium text-label">모듈API 목록</h3>
           <Button onClick={() => router.push("/module/register")}>등록</Button>
         </div>
-        <div className="card !m-[1.2rem] !p-0">
-          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
-        </div>
+        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
       </div>
     </div>
   );
diff --git a/apps/cs/src/pages/organization/ui/additional-user-dialog.tsx b/apps/cs/src/pages/organization/ui/additional-user-dialog.tsx
index 32b8d0a1b..f4af8787d 100644
--- a/apps/cs/src/pages/organization/ui/additional-user-dialog.tsx
+++ b/apps/cs/src/pages/organization/ui/additional-user-dialog.tsx
@@ -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">
diff --git a/apps/cs/src/pages/popup/ui/modify-page.tsx b/apps/cs/src/pages/popup/ui/modify-page.tsx
index 34bc2ae66..fed70cbbb 100644
--- a/apps/cs/src/pages/popup/ui/modify-page.tsx
+++ b/apps/cs/src/pages/popup/ui/modify-page.tsx
@@ -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>
diff --git a/apps/cs/src/pages/popup/ui/popup-page.tsx b/apps/cs/src/pages/popup/ui/popup-page.tsx
index 891a10f45..b542d39a3 100644
--- a/apps/cs/src/pages/popup/ui/popup-page.tsx
+++ b/apps/cs/src/pages/popup/ui/popup-page.tsx
@@ -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>
   );
diff --git a/apps/cs/src/pages/recent/ui/recent-page.tsx b/apps/cs/src/pages/recent/ui/recent-page.tsx
index 3c25f5837..efa3f765b 100644
--- a/apps/cs/src/pages/recent/ui/recent-page.tsx
+++ b/apps/cs/src/pages/recent/ui/recent-page.tsx
@@ -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>
   );
diff --git a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx b/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
index a19ba81aa..c7f8cdcdb 100644
--- a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
+++ b/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
@@ -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>
diff --git a/apps/cs/src/pages/role/ui/role-page.tsx b/apps/cs/src/pages/role/ui/role-page.tsx
index f2e9273aa..9d864255c 100644
--- a/apps/cs/src/pages/role/ui/role-page.tsx
+++ b/apps/cs/src/pages/role/ui/role-page.tsx
@@ -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>
   );
diff --git a/apps/cs/src/pages/site/ui/site-page.tsx b/apps/cs/src/pages/site/ui/site-page.tsx
index 5a22d9107..eb5a81143 100644
--- a/apps/cs/src/pages/site/ui/site-page.tsx
+++ b/apps/cs/src/pages/site/ui/site-page.tsx
@@ -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>
   );
diff --git a/apps/cs/src/pages/survey/ui/detail-page.tsx b/apps/cs/src/pages/survey/ui/detail-page.tsx
index 464a49f35..de1abc783 100644
--- a/apps/cs/src/pages/survey/ui/detail-page.tsx
+++ b/apps/cs/src/pages/survey/ui/detail-page.tsx
@@ -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>
   );
diff --git a/apps/cs/src/pages/survey/ui/survey-page.tsx b/apps/cs/src/pages/survey/ui/survey-page.tsx
index 6490e7987..3e99f2bad 100644
--- a/apps/cs/src/pages/survey/ui/survey-page.tsx
+++ b/apps/cs/src/pages/survey/ui/survey-page.tsx
@@ -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>
   );
diff --git a/apps/cs/src/pages/template/ui/template-page.tsx b/apps/cs/src/pages/template/ui/template-page.tsx
index 1f66606dc..64921185d 100644
--- a/apps/cs/src/pages/template/ui/template-page.tsx
+++ b/apps/cs/src/pages/template/ui/template-page.tsx
@@ -3,14 +3,11 @@
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type PaginationState,
-} from "@tanstack/react-table";
-import { Button, DataTable, Input, Label } from "@common/components";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+import { Button, Input, Label } from "@common/components";
 import { CodeSelect } from "@/entities/code";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { 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>
   );
diff --git a/apps/cs/src/pages/terms/ui/terms-page.tsx b/apps/cs/src/pages/terms/ui/terms-page.tsx
index aea8aced2..633c68d9e 100644
--- a/apps/cs/src/pages/terms/ui/terms-page.tsx
+++ b/apps/cs/src/pages/terms/ui/terms-page.tsx
@@ -3,14 +3,11 @@
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import {
-  getCoreRowModel,
-  useReactTable,
-  type PaginationState,
-} from "@tanstack/react-table";
-import { Button, DataTable, Input, Label } from "@common/components";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+import { Button, Input, Label } from "@common/components";
 import { CodeSelect } from "@/entities/code";
 import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
 import { 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>
   );
diff --git a/apps/cs/src/pages/users/ui/agency-search-dialog.tsx b/apps/cs/src/pages/users/ui/agency-search-dialog.tsx
index 1193c8504..e5ce204b8 100644
--- a/apps/cs/src/pages/users/ui/agency-search-dialog.tsx
+++ b/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
diff --git a/apps/cs/src/pages/users/ui/users-page.tsx b/apps/cs/src/pages/users/ui/users-page.tsx
index 956a3434c..d6f77deb5 100644
--- a/apps/cs/src/pages/users/ui/users-page.tsx
+++ b/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>
   );
diff --git a/apps/cs/src/pages/users/ui/zip-search-dialog.tsx b/apps/cs/src/pages/users/ui/zip-search-dialog.tsx
index b8684f1b8..baab27619 100644
--- a/apps/cs/src/pages/users/ui/zip-search-dialog.tsx
+++ b/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
diff --git a/apps/cs/src/shared/lib/index.ts b/apps/cs/src/shared/lib/index.ts
index 34c8ae6ff..20ba33c30 100644
--- a/apps/cs/src/shared/lib/index.ts
+++ b/apps/cs/src/shared/lib/index.ts
@@ -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";
diff --git a/apps/cs/src/shared/lib/use-data-table.tsx b/apps/cs/src/shared/lib/use-data-table.tsx
index b80040423..51638f746 100644
--- a/apps/cs/src/shared/lib/use-data-table.tsx
+++ b/apps/cs/src/shared/lib/use-data-table.tsx
@@ -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,
+  };
 };