WIP: 권한 맵핑 기능 구현중

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(

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,
     },

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}