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[] = [ { id: "actions", header: "관리", - cell: ({ row }) => ( -
e.stopPropagation()} - className="flex justify-center gap-2" - > - - - + + - -
- ), + + ); + }, }, ]; 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,