[apps/cs] feat: 권한관리 목록 내 삭제 기능 추가 (CS_UT04010104)

apps/cs/src/pages/role/model/table-columns.tsx

@@ -3,8 +3,13 @@ import { useState } from "react";
 import type { Role } from "@/entities/role";
 import type { ColumnDef } from "@tanstack/react-table";
 import { MappingRoleDialog } from "../ui/mapping-role-dialog";
+import { Button } from "@common/components";
 
-export const columns: ColumnDef<Role>[] = [
+export const createColumns = ({
+  deleteRole,
+}: {
+  deleteRole: (roleId: string) => void;
+}): ColumnDef<Role>[] => [
   {
     id: "no",
     header: "NO",
@@ -39,7 +44,18 @@ export const columns: ColumnDef<Role>[] = [
   {
     id: "action",
     header: "관리",
-    cell: ({ row }) => <MappingRoleButton roleId={row.original.roleId} />,
+    cell: ({ row }) => (
+      <div className="flex items-center justify-center gap-2">
+        <MappingRoleButton roleId={row.original.roleId} />
+        <Button
+          size="sm"
+          color="red"
+          onClick={() => deleteRole(row.original.roleId)}
+        >
+          삭제
+        </Button>
+      </div>
+    ),
   },
 ];
 

apps/cs/src/pages/role/ui/role-page.tsx

@@ -7,11 +7,12 @@ import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
 import { Button, Input, Label } from "@common/components";
 import { RoleApi, type Role, type RoleParams } from "@/entities/role";
 import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
-import { columns } from "../model/table-columns";
+import { useAlertStore, useDataTable, useMutationWrapper } from "@/shared/lib";
+import { createColumns } from "../model/table-columns";
 
 function RolePage() {
   const router = useRouter();
+  const alert = useAlertStore((state) => state.setMessage);
 
   const [keyword, setKeyword] = useState("");
   const [searchParams, setSearchParams] = useState<RoleParams>({
@@ -33,6 +34,13 @@ function RolePage() {
       }),
   });
 
+  const { mutateAsync: deleteRole } = useMutationWrapper({
+    mutationFn: (roleId: string) => RoleApi.deleteRole(roleId),
+    onSuccess: () => {
+      alert("삭제되었습니다.", query.refetch);
+    },
+  });
+
   const handleRowClick = (row: Role) => {
     router.push(`/role/register/${row.roleId}`);
   };
@@ -40,7 +48,9 @@ function RolePage() {
   const { tableComponent } = useDataTable({
     query,
     tableOptions: {
-      columns,
+      columns: createColumns({
+        deleteRole,
+      }),
       state: {
         pagination,
       },