From 9e5c30be8ac6f9625ed63113c7c73c340caeeb1b Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 15 Jul 2025 15:21:07 +0900
Subject: [PATCH] =?UTF-8?q?[apps/cs]=20feat:=20=EA=B6=8C=ED=95=9C=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EB=AA=A9=EB=A1=9D=20=EB=82=B4=20=EC=82=AD=EC=A0=9C?=
 =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20(CS=5FUT04010104)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cs/src/pages/role/model/table-columns.tsx | 20 +++++++++++++++++--
 apps/cs/src/pages/role/ui/role-page.tsx       | 16 ++++++++++++---
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/apps/cs/src/pages/role/model/table-columns.tsx b/apps/cs/src/pages/role/model/table-columns.tsx
index f1e586043..71da16cfe 100644
--- a/apps/cs/src/pages/role/model/table-columns.tsx
+++ b/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>
+    ),
   },
 ];
 
diff --git a/apps/cs/src/pages/role/ui/role-page.tsx b/apps/cs/src/pages/role/ui/role-page.tsx
index 7d5453895..97c3d615b 100644
--- a/apps/cs/src/pages/role/ui/role-page.tsx
+++ b/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,
       },