diff --git a/apps/cs/src/entities/authorization/api/authorization-service.ts b/apps/cs/src/entities/authorization/api/authorization-service.ts index 322dc92b4..fd5f042f5 100644 --- a/apps/cs/src/entities/authorization/api/authorization-service.ts +++ b/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 { const response = await client.get( `${ENDPOINT.USER_SERVICE.AUTHORIZATIONS}`, diff --git a/apps/cs/src/entities/authorization/model/authorization-interface.ts b/apps/cs/src/entities/authorization/model/authorization-interface.ts index e34d150e0..2230f5226 100644 --- a/apps/cs/src/entities/authorization/model/authorization-interface.ts +++ b/apps/cs/src/entities/authorization/model/authorization-interface.ts @@ -47,7 +47,7 @@ export type AuthorizationFormData = z.infer; export interface AuthorizationsService { getAuthorizationsList: ( - params: AuthorizationsParams, + params?: AuthorizationsParams, ) => Promise; getAuthorizationInfo: ( authorizationNo: string, diff --git a/apps/cs/src/pages/role/model/table-columns.tsx b/apps/cs/src/pages/role/model/table-columns.tsx index 2a5f9f416..2e300b245 100644 --- a/apps/cs/src/pages/role/model/table-columns.tsx +++ b/apps/cs/src/pages/role/model/table-columns.tsx @@ -40,5 +40,7 @@ export const columns: ColumnDef[] = [ const MappingRoleButton = ({ roleId }: { roleId: string }) => { const [open, setOpen] = useState(false); - return ; + return ( + + ); }; 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 5713953a1..02177273b 100644 --- a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx +++ b/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 ( @@ -24,11 +50,41 @@ function MappingRoleDialog({ - + 모듈 목록 + ); } +const columns: ColumnDef[] = [ + { + accessorKey: "authorizationName", + header: "API명", + meta: { + width: 130, + }, + }, + { + accessorKey: "urlPatternValue", + header: "API URL", + }, + { + accessorKey: "httpMethodCode", + header: "요청 메소드", + meta: { + width: 90, + }, + }, + { + id: "action", + header: "사용여부", + cell: ({ row }) => , + meta: { + width: 80, + }, + }, +]; + export { MappingRoleDialog };