WIP: 권한 맵핑 다이얼로그 구현중

apps/cs/src/entities/authorization/api/authorization-service.ts

@@ -10,7 +10,7 @@ import type {
 
 export class AuthorizationsApiService implements AuthorizationsService {
   public async getAuthorizationsList(
-    params: AuthorizationsParams,
+    params?: AuthorizationsParams,
   ): Promise<AuthorizationsList> {
     const response = await client.get<AuthorizationsList>(
       `${ENDPOINT.USER_SERVICE.AUTHORIZATIONS}`,

apps/cs/src/entities/authorization/model/authorization-interface.ts

@@ -47,7 +47,7 @@ export type AuthorizationFormData = z.infer<typeof authorizationFormSchema>;
 
 export interface AuthorizationsService {
   getAuthorizationsList: (
-    params: AuthorizationsParams,
+    params?: AuthorizationsParams,
   ) => Promise<AuthorizationsList>;
   getAuthorizationInfo: (
     authorizationNo: string,

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

@@ -40,5 +40,7 @@ export const columns: ColumnDef<Role>[] = [
 
 const MappingRoleButton = ({ roleId }: { roleId: string }) => {
   const [open, setOpen] = useState(false);
-  return <MappingRoleDialog open={open} onOpenChange={setOpen} />;
+  return (
+    <MappingRoleDialog roleId={roleId} open={open} onOpenChange={setOpen} />
+  );
 };

apps/cs/src/pages/role/ui/mapping-role-dialog.tsx

@@ -1,3 +1,9 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type ColumnDef,
+} from "@tanstack/react-table";
 import {
   Dialog,
   DialogTrigger,
@@ -5,9 +11,17 @@ import {
   DialogHeader,
   DialogTitle,
   Button,
+  DataTable,
+  Switch,
 } from "@common/components";
+import { ENDPOINT } from "@/shared/config";
+import {
+  AuthorizationsApi,
+  type Authorizations,
+} from "@/entities/authorization";
 
 type MappingRoleDialogProps = {
+  roleId: string;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
 };
@@ -17,6 +31,18 @@ function MappingRoleDialog({
   onOpenChange,
   ...props
 }: MappingRoleDialogProps) {
+  const { data: authorizationList } = useQuery({
+    queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS],
+    queryFn: () => AuthorizationsApi.getAuthorizationsList(),
+    enabled: open,
+  });
+
+  const table = useReactTable({
+    data: authorizationList?.content ?? [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange} {...props}>
       <DialogTrigger asChild>
@@ -24,11 +50,41 @@ function MappingRoleDialog({
       </DialogTrigger>
       <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
         <DialogHeader>
-          <DialogTitle></DialogTitle>
+          <DialogTitle>모듈 목록</DialogTitle>
         </DialogHeader>
+        <DataTable table={table} />
       </DialogContent>
     </Dialog>
   );
 }
 
+const columns: ColumnDef<Authorizations>[] = [
+  {
+    accessorKey: "authorizationName",
+    header: "API명",
+    meta: {
+      width: 130,
+    },
+  },
+  {
+    accessorKey: "urlPatternValue",
+    header: "API URL",
+  },
+  {
+    accessorKey: "httpMethodCode",
+    header: "요청 메소드",
+    meta: {
+      width: 90,
+    },
+  },
+  {
+    id: "action",
+    header: "사용여부",
+    cell: ({ row }) => <Switch />,
+    meta: {
+      width: 80,
+    },
+  },
+];
+
 export { MappingRoleDialog };