From 225ebc0983a7d5e1612f989b007a1847a897220d Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 10 Jul 2025 14:39:24 +0900
Subject: [PATCH] =?UTF-8?q?[apps/cs]=20fix:=20=EB=B9=8C=EB=93=9C=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../groups/model/groups-table-columns.tsx     | 12 +++++++-----
 .../cs/src/pages/groups/ui/groups-section.tsx | 19 ++++++++++---------
 2 files changed, 17 insertions(+), 14 deletions(-)

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<GroupListResponseDto>[] = [
+export const createColumns = ({
+  onDelete,
+}: {
+  onDelete: (groupId: string) => void;
+}): ColumnDef<GroupListResponseDto>[] => [
   {
     accessorKey: "groupId",
     header: "그룹코드",
@@ -20,12 +24,10 @@ export const columns: ColumnDef<GroupListResponseDto>[] = [
   {
     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,