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({ 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({ 그룹별 메뉴 권한 -
- -
+
{tableComponent}
- + {tableComponent} 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) => { 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() { -
- -
+
{tableComponent}
); 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) => { e.preventDefault(); - refetch(); + query.refetch(); }; + useEffect(() => { + setPagination({ ...pagination, pageIndex: 0 }); + }, [upCd]); + return (
@@ -88,7 +91,7 @@ function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) {
- + {tableComponent}
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) => { 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 (
@@ -91,7 +90,7 @@ function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) {
- + {tableComponent}
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) => { 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() { 등록 -
- -
+
{tableComponent}
); 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) => { e.preventDefault(); - refetch(); + query.refetch(); }; useEffect(() => { - refetch(); + query.refetch(); }, [pagination]); return ( @@ -108,9 +108,7 @@ function FilePage() {

파일 목록

-
- -
+
{tableComponent}
); 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) { /> - + {tableComponent} 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({}); - 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 (
@@ -99,7 +106,7 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
- + {tableComponent}
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 (

그룹 목록

- +
- + {tableComponent}
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({ 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) { 그룹별 메뉴 권한 -
- -
+
{tableComponent}
- + {tableComponent} 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({}); 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)} /> -
- + {tableComponent}
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({}); 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)} /> -
- + {tableComponent}
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({}); - 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( -
- -
+
{tableComponent}
-
- -
+
{tableComponent}
); 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({}); - 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)} /> -
- + {tableComponent}
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 }) { 이력삭제 - + {tableComponent} 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({}); const [postingTargets, setPostingTargets] = useState([]); - 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) => { 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() { -
- -
+
{tableComponent}
); 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) => { 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() { -
- -
+
{tableComponent}
); 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({ 일괄해제 - + {tableComponent} 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) => { e.preventDefault(); - }; - - const handleRowClick = (row: Role) => { - router.push(`/role/register/${row.roleId}`); + query.refetch(); }; return ( @@ -84,9 +87,7 @@ function RolePage() { -
- -
+
{tableComponent}
); 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) => { 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() {

사이트 목록

-
- -
+
{tableComponent}
); 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 }) { 이력삭제 -
- -
+
{postingTableComponent}
@@ -148,9 +147,7 @@ function DetailPage({ srvySn }: { srvySn: string }) { onOpenChange={setQuestionAddDialogOpen} />
-
- -
+
{questionTableComponent}
); 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({}); const [postingTargets, setPostingTargets] = useState([]); - 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) => { e.preventDefault(); - refetch(); - }; - - const handleRowClick = (row: Survey) => { - router.push(`/survey/${row.srvySn}`); + query.refetch(); }; useEffect(() => { @@ -120,9 +125,7 @@ function SurveyPage() { -
- -
+
{tableComponent}
); 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) => { 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() { 등록 -
- -
+
{tableComponent}
); 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) => { 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() {

약관 목록

-
- -
+
{tableComponent}
); 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) { - + {tableComponent}