From 93025914fa5c413733cf3f75af9c17ba982ee001 Mon Sep 17 00:00:00 2001
From: changwng <changwng@gmail.com>
Date: Thu, 10 Jul 2025 13:20:46 +0900
Subject: [PATCH] =?UTF-8?q?[groups]=20=20=EA=B7=B8=EB=A3=B9=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=EC=97=90=EC=84=9C=20=EC=B6=94=EA=B0=80=20/=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20/=EC=82=AD=EC=A0=9C=20=EC=82=AD=EC=A0=9C=ED=9B=84?=
 =?UTF-8?q?=20=EC=9E=AC=EB=A1=9C=EB=94=A9=EB=93=B1=20=EC=B2=98=EB=A6=AC?=
 =?UTF-8?q?=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../entities/group/model/group-interface.ts   |  5 ++-
 .../groups/model/groups-table-columns.tsx     | 36 ++++++++++++-------
 apps/cs/src/pages/groups/ui/groups-dialog.tsx |  2 +-
 .../cs/src/pages/groups/ui/groups-section.tsx | 26 ++++++++++++--
 4 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/apps/cs/src/entities/group/model/group-interface.ts b/apps/cs/src/entities/group/model/group-interface.ts
index f8cc9883f..58e9a4489 100644
--- a/apps/cs/src/entities/group/model/group-interface.ts
+++ b/apps/cs/src/entities/group/model/group-interface.ts
@@ -56,7 +56,10 @@ export const groupFormSchema = z.object({
   groupNm: z.string().min(1, { message: "그룹명을 입력해주세요." }),
   groupSeCd: z.string().min(1, { message: "그룹구분을 선택해주세요." }),
   groupExpln: z.string().optional(),
-  delYn: z.string().default("N"),
+  delYn: z
+    .string()
+    .transform((val) => (val === "" || val === undefined ? "N" : val))
+    .default("N"),
   authrtId: z.string().min(1, { message: "권한ID를 선택해주세요." }),
   siteId: z.string().optional(),
   mngrYn: z.string().default("N"),
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 70f91efa0..0f417a304 100644
--- a/apps/cs/src/pages/groups/model/groups-table-columns.tsx
+++ b/apps/cs/src/pages/groups/model/groups-table-columns.tsx
@@ -20,18 +20,30 @@ export const columns: ColumnDef<GroupListResponseDto>[] = [
   {
     id: "actions",
     header: "관리",
-    cell: ({ row }) => (
-      <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">
-            수정
+    cell: ({ row, table }) => {
+      const onDelete = table.options.meta?.onDelete as (groupId: string) => void;
+
+      const handleDelete = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (onDelete) onDelete(row.original.groupId);
+      };
+
+      return (
+        <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>
+          <Button size="sm" color="red" onClick={handleDelete}>
+            삭제
           </Button>
-        </GroupsDialog>
-      </div>
-    ),
+        </div>
+      );
+    },
   },
 ];
diff --git a/apps/cs/src/pages/groups/ui/groups-dialog.tsx b/apps/cs/src/pages/groups/ui/groups-dialog.tsx
index d21852886..427ba4b1b 100644
--- a/apps/cs/src/pages/groups/ui/groups-dialog.tsx
+++ b/apps/cs/src/pages/groups/ui/groups-dialog.tsx
@@ -43,7 +43,7 @@ const GroupsDialog = memo(
     const { data: group } = useQuery({
       queryKey: [ENDPOINT.CMS_SERVICE.GROUPS, groupId],
       queryFn: () => GroupApi.findGroupById(groupId!),
-      enabled: !!groupId,
+      enabled: !!groupId  && open, // open 시점 groupId가 있을 때만 상세 조회 API 호출
     });
 
     const { mutateAsync: createGroup } = useMutationWrapper({
diff --git a/apps/cs/src/pages/groups/ui/groups-section.tsx b/apps/cs/src/pages/groups/ui/groups-section.tsx
index f5d1e026b..2130a94c0 100644
--- a/apps/cs/src/pages/groups/ui/groups-section.tsx
+++ b/apps/cs/src/pages/groups/ui/groups-section.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { keepPreviousData, useQuery } 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";
@@ -9,6 +9,8 @@ import { ENDPOINT } from "@/shared/config";
 import { useDataTable } from "@/shared/lib";
 import { columns } from "../model/groups-table-columns";
 import { GroupsDialog } from "./groups-dialog";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 
 type GroupsSectionProps = {
   handleSelectedGroup: (groupId: string) => void;
@@ -28,11 +30,28 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
         size: pagination.pageSize,
       }),
     placeholderData: keepPreviousData,
+  }); 
+   const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
+  const queryClient = useQueryClient();
+  const { mutateAsync: deleteGroup } = useMutationWrapper({
+    mutationFn: (groupId: string) => GroupApi.deleteGroup(groupId),
+    onSuccess: () => {
+      alert("삭제되었습니다.");
+      queryClient.invalidateQueries({
+        predicate: (query) => query.queryKey[0] === ENDPOINT.CMS_SERVICE.GROUPS,
+      });
+    },
   });
 
+  const handleDelete = async (groupId: string) => {
+    if (await confirm("삭제하시겠습니까?")) {
+      await deleteGroup(groupId);
+    }
+  };
   const handleRowClick = (row: { groupId: string }) => {
     table.setRowSelection({ [row.groupId]: true });
-    handleSelectedGroup(row.groupId);
+    handleSelectedGroup(row.groupId);  // 1. 리스트에서 선택된 groupId 저장
   };
 
   const { tableComponent, tableInstance: table } = useDataTable({
@@ -45,6 +64,9 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
       getCoreRowModel: getCoreRowModel(),
       onPaginationChange: setPagination,
       getRowId: (row) => row.groupId,
+       meta: {
+        onDelete: handleDelete,
+      },
     },
     dataTableOptions: {
       onRowClick: handleRowClick,