From 026ad44efa4a155d93641afa69cb8abe7f9bfaba Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 9 Jun 2025 11:06:48 +0900
Subject: [PATCH] =?UTF-8?q?WIP:=20=EA=B6=8C=ED=95=9C=20=EB=A7=B5=ED=95=91?=
 =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/role-authorization-service.ts         |  2 +-
 .../src/pages/role/ui/mapping-role-dialog.tsx | 49 ++++++++++++++++---
 .../components/src/ui/data-table/index.tsx    |  2 +-
 3 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/apps/cs/src/entities/role-authorization/api/role-authorization-service.ts b/apps/cs/src/entities/role-authorization/api/role-authorization-service.ts
index ccaee4a84..3e53f1f3c 100644
--- a/apps/cs/src/entities/role-authorization/api/role-authorization-service.ts
+++ b/apps/cs/src/entities/role-authorization/api/role-authorization-service.ts
@@ -6,7 +6,7 @@ import type {
   RoleAuthorizationsList,
   RoleAuthorizationsData,
   RoleAuthorizations,
-} from "../../../entities/role-authorization/model/role-authorization-interface";
+} from "../model/role-authorization-interface";
 
 export class RoleAuthorizationsApiService implements RoleAuthorizationsService {
   public async getRoleAuthorizationsList(
diff --git a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx b/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
index 02177273b..b2da2bcee 100644
--- a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
+++ b/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
@@ -1,9 +1,9 @@
-import { useQuery } from "@tanstack/react-query";
 import {
   getCoreRowModel,
   useReactTable,
   type ColumnDef,
 } from "@tanstack/react-table";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   Dialog,
   DialogTrigger,
@@ -14,11 +14,16 @@ import {
   DataTable,
   Switch,
 } from "@common/components";
-import { ENDPOINT } from "@/shared/config";
 import {
   AuthorizationsApi,
   type Authorizations,
 } from "@/entities/authorization";
+import {
+  RoleAuthorizationsApi,
+  type RoleAuthorizationsData,
+} from "@/entities/role-authorization";
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore } from "@/shared/lib";
 
 type MappingRoleDialogProps = {
   roleId: string;
@@ -27,19 +32,38 @@ type MappingRoleDialogProps = {
 };
 
 function MappingRoleDialog({
+  roleId,
   open,
   onOpenChange,
   ...props
 }: MappingRoleDialogProps) {
+  const queryClient = useQueryClient();
+  const alert = useAlertStore((state) => state.setMessage);
+
   const { data: authorizationList } = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS],
     queryFn: () => AuthorizationsApi.getAuthorizationsList(),
     enabled: open,
   });
 
+  const { mutate, isPending } = useMutation({
+    mutationFn: (data: RoleAuthorizationsData) =>
+      RoleAuthorizationsApi.createRoleAuthorizations(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS],
+      });
+      alert("권한 맵핑이 완료되었습니다.");
+    },
+  });
+
+  const applyRoleAuthorization = (apply: boolean, authorizationNo: number) => {
+    mutate([{ roleId, authorizationNo, authYn: apply ? "Y" : "N" }]);
+  };
+
   const table = useReactTable({
     data: authorizationList?.content ?? [],
-    columns,
+    columns: createColumns(isPending, applyRoleAuthorization),
     getCoreRowModel: getCoreRowModel(),
   });
 
@@ -52,13 +76,18 @@ function MappingRoleDialog({
         <DialogHeader>
           <DialogTitle>모듈 목록</DialogTitle>
         </DialogHeader>
-        <DataTable table={table} />
+        <div className="max-h-[40rem] overflow-y-auto">
+          <DataTable table={table} />
+        </div>
       </DialogContent>
     </Dialog>
   );
 }
 
-const columns: ColumnDef<Authorizations>[] = [
+const createColumns = (
+  isPending: boolean,
+  applyRoleAuthorization: (apply: boolean, authorizationNo: number) => void,
+): ColumnDef<Authorizations>[] => [
   {
     accessorKey: "authorizationName",
     header: "API명",
@@ -80,7 +109,15 @@ const columns: ColumnDef<Authorizations>[] = [
   {
     id: "action",
     header: "사용여부",
-    cell: ({ row }) => <Switch />,
+    cell: ({ row }) => (
+      <Switch
+        checked={row.original.useYn === "Y"}
+        onCheckedChange={(apply) =>
+          applyRoleAuthorization(apply, row.original.authorizationNo)
+        }
+        disabled={isPending}
+      />
+    ),
     meta: {
       width: 80,
     },
diff --git a/packages/common/components/src/ui/data-table/index.tsx b/packages/common/components/src/ui/data-table/index.tsx
index 82492cd66..30094bca1 100644
--- a/packages/common/components/src/ui/data-table/index.tsx
+++ b/packages/common/components/src/ui/data-table/index.tsx
@@ -100,7 +100,7 @@ function THead<T>({ table }: { table: TableInstance<T> }) {
             return (
               <TableHead
                 key={header.id}
-                className="sticky top-0"
+                className="sticky top-0 z-10"
                 colSpan={header.colSpan}
                 rowSpan={rowSpan}
                 {...meta}