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 0f417a304..18ad4e78a 100644 --- a/apps/cs/src/pages/groups/model/groups-table-columns.tsx +++ b/apps/cs/src/pages/groups/model/groups-table-columns.tsx @@ -4,7 +4,11 @@ import { type GroupListResponseDto } from "@/entities/group"; import { MenuAuthorityDialog } from "../ui/menu-authority-dialog"; import { GroupsDialog } from "../ui/groups-dialog"; -export const columns: ColumnDef[] = [ +export const createColumns = ({ + onDelete, +}: { + onDelete: (groupId: string) => void; +}): ColumnDef[] => [ { accessorKey: "groupId", header: "그룹코드", @@ -20,12 +24,10 @@ export const columns: ColumnDef[] = [ { id: "actions", header: "관리", - cell: ({ row, table }) => { - const onDelete = table.options.meta?.onDelete as (groupId: string) => void; - + cell: ({ row }) => { const handleDelete = (e: React.MouseEvent) => { e.stopPropagation(); - if (onDelete) onDelete(row.original.groupId); + onDelete(row.original.groupId); }; return ( diff --git a/apps/cs/src/pages/groups/ui/groups-section.tsx b/apps/cs/src/pages/groups/ui/groups-section.tsx index 2130a94c0..8acc7f019 100644 --- a/apps/cs/src/pages/groups/ui/groups-section.tsx +++ b/apps/cs/src/pages/groups/ui/groups-section.tsx @@ -1,13 +1,17 @@ "use client"; import { useState } from "react"; -import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query"; +import { + keepPreviousData, + useQuery, + useQueryClient, +} from "@tanstack/react-query"; import { getCoreRowModel, type PaginationState } from "@tanstack/react-table"; import { Button } from "@common/components"; import { GroupApi } from "@/entities/group"; import { ENDPOINT } from "@/shared/config"; import { useDataTable } from "@/shared/lib"; -import { columns } from "../model/groups-table-columns"; +import { createColumns } from "../model/groups-table-columns"; import { GroupsDialog } from "./groups-dialog"; import { useConfirm } from "@frontend-opensource/use-react-hooks"; import { useAlertStore, useMutationWrapper } from "@/shared/lib"; @@ -30,8 +34,8 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) { size: pagination.pageSize, }), placeholderData: keepPreviousData, - }); - const { confirm } = useConfirm(); + }); + const { confirm } = useConfirm(); const alert = useAlertStore((state) => state.setMessage); const queryClient = useQueryClient(); const { mutateAsync: deleteGroup } = useMutationWrapper({ @@ -51,22 +55,19 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) { }; const handleRowClick = (row: { groupId: string }) => { table.setRowSelection({ [row.groupId]: true }); - handleSelectedGroup(row.groupId); // 1. 리스트에서 선택된 groupId 저장 + handleSelectedGroup(row.groupId); // 1. 리스트에서 선택된 groupId 저장 }; const { tableComponent, tableInstance: table } = useDataTable({ query, tableOptions: { - columns, + columns: createColumns({ onDelete: handleDelete }), state: { pagination }, manualPagination: true, enableMultiRowSelection: false, getCoreRowModel: getCoreRowModel(), onPaginationChange: setPagination, getRowId: (row) => row.groupId, - meta: { - onDelete: handleDelete, - }, }, dataTableOptions: { onRowClick: handleRowClick,