[groups] 그룹관리에서 추가 /수정 /삭제 삭제후 재로딩등 처리함

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"),

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>
+      );
+    },
   },
 ];

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({

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,