Merge pull request 'add/deploy' (#584) from add/deploy into dev

Reviewed-on: baron/baron-sso#584
2026-04-20 10:07:06 +09:00
parent 114f203ecd 55be717ff6
commit 6b93cc945a
10 changed files with 1301 additions and 1039 deletions
--- a/adminfront/package-lock.json
+++ b/adminfront/package-lock.json
@@ -10,6 +10,7 @@
      "dependencies": {
        "@radix-ui/react-avatar": "^1.1.4",
        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
        "@radix-ui/react-scroll-area": "^1.1.2",
        "@radix-ui/react-select": "^2.2.6",
        "@radix-ui/react-slot": "^1.1.2",
@@ -1528,6 +1529,91 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz",
+      "integrity": "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-focus-guards": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
@@ -1627,6 +1713,102 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
+      "integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-popper": {
      "version": "1.2.8",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
@@ -1827,6 +2009,93 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-scroll-area": {
      "version": "1.2.10",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz",
--- a/adminfront/package.json
+++ b/adminfront/package.json
@@ -21,6 +21,7 @@
  "dependencies": {
    "@radix-ui/react-avatar": "^1.1.4",
    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
    "@radix-ui/react-scroll-area": "^1.1.2",
    "@radix-ui/react-select": "^2.2.6",
    "@radix-ui/react-slot": "^1.1.2",
--- a/adminfront/src/app/routes.tsx
+++ b/adminfront/src/app/routes.tsx
@@ -53,7 +53,7 @@ export const router = createBrowserRouter(
        },
        {
          path: "tenants/:tenantId/organization/:id",
-          element: <UserGroupDetailPage />,
+          element: <TenantUserGroupsTab />,
        },
        { path: "api-keys", element: <ApiKeyListPage /> },
        { path: "api-keys/new", element: <ApiKeyCreatePage /> },
--- a/adminfront/src/components/ui/dropdown-menu.tsx
+++ b/adminfront/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-tighter opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
--- a/adminfront/src/features/tenants/routes/TenantSchemaPage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantSchemaPage.tsx
@@ -56,41 +56,13 @@ export function TenantSchemaPage() {
  const canAccess =
    profile?.role === "super_admin" || profile?.role === "tenant_admin";

-  if (isProfileLoading) {
-    return (
-      <div className="p-8 text-center animate-pulse text-muted-foreground">
-        {t("msg.common.loading", "로딩 중...")}
-      </div>
-    );
-  }
-
-  if (!canAccess) {
-    return (
-      <div className="p-12 text-center space-y-4 bg-destructive/5 rounded-2xl border border-destructive/20 mt-6">
-        <h3 className="text-xl font-bold text-destructive">
-          {t("msg.common.forbidden", "접근 권한이 없습니다.")}
-        </h3>
-        <p className="text-muted-foreground">
-          {t(
-            "msg.admin.tenants.schema.forbidden_desc",
-            "사용자 스키마 설정은 관리자만 접근할 수 있습니다.",
-          )}
-        </p>
-      </div>
-    );
-  }
-
-  if (!tenantId) {
-    return (
-      <div className="p-8 text-center text-muted-foreground">
-        {t("msg.admin.tenants.schema.missing_id", "테넌트 ID가 없습니다.")}
-      </div>
-    );
-  }
-
  const tenantQuery = useQuery({
    queryKey: ["tenant", tenantId],
-    queryFn: () => fetchTenant(tenantId),
+    queryFn: () => {
+      if (!tenantId) throw new Error("Tenant ID is required");
+      return fetchTenant(tenantId);
+    },
+    enabled: !!tenantId && canAccess,
  });

  const [fields, setFields] = useState<SchemaField[]>([]);
@@ -125,6 +97,8 @@ export function TenantSchemaPage() {

  const updateMutation = useMutation({
    mutationFn: (newFields: SchemaField[]) => {
+      if (!tenantId) throw new Error("Tenant ID is required");
+
      // Remove legacy loginIdField, keep isLoginId natively in userSchema
      const newConfig = { ...tenantQuery.data?.config };
      newConfig.loginIdField = undefined;
@@ -151,6 +125,38 @@ export function TenantSchemaPage() {
    },
  });

+  if (isProfileLoading) {
+    return (
+      <div className="p-8 text-center animate-pulse text-muted-foreground">
+        {t("msg.common.loading", "로딩 중...")}
+      </div>
+    );
+  }
+
+  if (!canAccess) {
+    return (
+      <div className="p-12 text-center space-y-4 bg-destructive/5 rounded-2xl border border-destructive/20 mt-6">
+        <h3 className="text-xl font-bold text-destructive">
+          {t("msg.common.forbidden", "접근 권한이 없습니다.")}
+        </h3>
+        <p className="text-muted-foreground">
+          {t(
+            "msg.admin.tenants.schema.forbidden_desc",
+            "사용자 스키마 설정은 관리자만 접근할 수 있습니다.",
+          )}
+        </p>
+      </div>
+    );
+  }
+
+  if (!tenantId) {
+    return (
+      <div className="p-8 text-center text-muted-foreground">
+        {t("msg.admin.tenants.schema.missing_id", "테넌트 ID가 없습니다.")}
+      </div>
+    );
+  }
+
  const addField = () => {
    setFields([
      ...fields,
--- a/adminfront/src/features/user-groups/routes/TenantUserGroupsTab.tsx
+++ b/adminfront/src/features/user-groups/routes/TenantUserGroupsTab.tsx
--- a/adminfront/tests/bulk_actions.spec.ts
+++ b/adminfront/tests/bulk_actions.spec.ts
@@ -87,8 +87,24 @@ test.describe("Bulk Actions and Tree Search", () => {
      if (url.includes("/admin/tenants")) {
        return route.fulfill({
          json: {
-            items: [{ id: "t-1", name: "Main Tenant", slug: "main" }],
-            total: 1,
+            items: [
+              { id: "t-1", name: "Main Tenant", slug: "main", type: "COMPANY" },
+              {
+                id: "g-1",
+                name: "Engineering",
+                slug: "eng",
+                parentId: "t-1",
+                type: "USER_GROUP",
+              },
+              {
+                id: "g-2",
+                name: "Sales",
+                slug: "sales",
+                parentId: "t-1",
+                type: "USER_GROUP",
+              },
+            ],
+            total: 3,
          },
          headers,
        });
@@ -157,11 +173,11 @@ test.describe("Bulk Actions and Tree Search", () => {

    await searchInput.fill("Eng");

-    const engRow = page
-      .locator("tr")
+    const engNode = page
+      .locator("button")
      .filter({ hasText: "Engineering" })
      .first();
-    await expect(engRow).toBeVisible();
-    await expect(engRow).toHaveClass(/bg-primary/);
+    await expect(engNode).toBeVisible();
+    await expect(engNode).toHaveClass(/bg-primary\/5/);
  });
 });
--- a/adminfront/tests/tenants.spec.ts
+++ b/adminfront/tests/tenants.spec.ts
@@ -175,26 +175,22 @@ test.describe("Tenants Management", () => {
    });

    await page.goto("/tenants/parent-1/organization");
-    await expect(page.locator("table")).toContainText("Parent Org", {
-      timeout: 20000,
-    });

-    const parentRow = page
-      .locator("tr")
-      .filter({ hasText: "Parent Org" })
-      .first();
-    await expect(parentRow).toContainText("5");
-
-    const memberButton = parentRow
-      .getByRole("button")
-      .filter({ hasText: /Direct|소속|직속/ })
-      .first();
-    await memberButton.click();
+    await expect(
+      page.locator(".font-bold, h2").filter({ hasText: "Parent Org" }).first(),
+    ).toBeVisible({ timeout: 20000 });

    await expect(
      page
-        .locator('button[role="tab"]')
-        .filter({ hasText: /소속 멤버|Direct Members/i })
+        .locator(".grid .font-bold, .grid .text-sm")
+        .filter({ hasText: "Child Team" })
+        .first(),
+    ).toBeVisible();
+
+    await expect(
+      page
+        .locator("h3")
+        .filter({ hasText: /소속 멤버|Members|구성원 관리|Member Management/i })
        .first(),
    ).toBeVisible();
  });
--- a/docker/compose.ory.yaml
+++ b/docker/compose.ory.yaml
@@ -88,7 +88,6 @@ services:
            - ory-net
            - hydranet

-    # [수정됨] Oathkeeper 서비스 추가 (Backend 연결 문제 해결)
    oathkeeper:
        image: oryd/oathkeeper:${OATHKEEPER_VERSION:-v0.40.6}
        container_name: oathkeeper
@@ -104,18 +103,83 @@ services:
            - oathkeeper_logs:/var/log/oathkeeper
        networks:
            - ory-net
-            - baron_net # Backend가 통신하기 위해 필수
+            - baron_net 
            - public_net
        ports:
-            - "4455:4455" # Proxy
-            - "4456:4456" # API (Backend 헬스체크용)
+            - "4455:4455"
+            - "4456:4456"
        healthcheck:
            test: ["CMD", "wget", "-qO-", "http://127.0.0.1:4456/health/ready"]
            interval: 5s
            timeout: 5s
            retries: 5
+
+    ory_stack_check:
+        image: alpine:latest
+        container_name: ory_stack_check
+        command: >
+            /bin/sh -c "
+              apk add --no-cache curl;
+              echo 'Wait for services...';
+              until curl -s http://kratos:4433/health/ready; do sleep 1; done;
+              until curl -s http://hydra:4444/health/ready; do sleep 1; done;
+              echo 'Ory Stack is fully operational!';"
+        depends_on:
+            - kratos
+            - hydra
+        networks:
+            - ory-net
+
+    init-rp:
+        image: oryd/hydra:${HYDRA_VERSION:-v25.4.0}
+        container_name: init-rp
+        entrypoint: ["/bin/sh"]
+        command:
+            - -ec
+            - |
+              echo "Creating/Updating OAuth2 Clients..."
+              
+              hydra create oauth2-client \
+                --endpoint http://hydra:4445 \
+                --id adminfront \
+                --name "AdminFront" \
+                --grant-type authorization_code,refresh_token \
+                --response-type code \
+                --scope openid,offline_access,profile,email \
+                --token-endpoint-auth-method none \
+                --redirect-uri ${ADMINFRONT_CALLBACK_URLS:-http://localhost:5173/auth/callback,http://172.16.10.176:5173/auth/callback}
+
+              hydra create oauth2-client \
+                --endpoint http://hydra:4445 \
+                --id devfront \
+                --name "DevFront" \
+                --grant-type authorization_code,refresh_token \
+                --response-type code \
+                --scope openid,offline_access,profile,email \
+                --token-endpoint-auth-method none \
+                --redirect-uri ${DEVFRONT_CALLBACK_URLS:-http://localhost:5174/auth/callback,http://172.16.10.176:5174/auth/callback}
+
+              hydra create oauth2-client \
+                --endpoint http://hydra:4445 \
+                --id orgfront \
+                --name "OrgFront" \
+                --grant-type authorization_code,refresh_token \
+                --response-type code \
+                --scope openid,offline_access,profile,email \
+                --token-endpoint-auth-method none \
+                --redirect-uri ${ORGFRONT_CALLBACK_URLS:-http://localhost:5175/auth/callback,http://172.16.10.176:5175/auth/callback,https://baron-orgchart.hmac.kr/auth/callback}
+
+              echo "All RP clients initialized successfully."
+        depends_on:
+            ory_stack_check:
+                condition: service_completed_successfully
+        networks:
+            - ory-net
+            - hydranet
+
 volumes:
    ory_postgres_data:
+    oathkeeper_logs:

 networks:
    ory-net:
@@ -130,7 +194,6 @@ networks:
    public_net:
        external: true
        name: public_net
-    # [수정됨] Baron Net 추가 정의 (Oathkeeper 연결용)
    baron_net:
        external: true
        name: baron_net
--- a/docs/baron-orgchart-data-flow.md
+++ b/docs/baron-orgchart-data-flow.md
@@ -0,0 +1,57 @@
+# Baron-Orgchart 데이터 흐름 및 아키텍처
+
+이 문서는 조직도 뷰어 프론트엔드(`baron-orgchart`, OrgFront)와 Baron SSO 통합 인증/백엔드 서버 간의 인증 및 데이터 통신 흐름을 설명합니다.
+
+`baron-orgchart`는 자체적인 데이터베이스나 권한 관리 로직을 가지지 않으며, Baron SSO 백엔드에 전적으로 의존하는 순수 표현 계층(Presentation Layer)으로 동작합니다.
+
+## 아키텍처 및 데이터 흐름도
+
+```mermaid
+sequenceDiagram
+    participant User as 사용자 (Browser)
+    box rgba(173, 216, 230, 0.2) 외부 클라이언트 (표현 계층)
+    participant OrgFront as OrgFront<br>(baron-orgchart)
+    end
+    box rgba(255, 228, 196, 0.2) Baron SSO (통합 인증 및 권한 중앙 서버)
+    participant UI as UserFront<br>(SSO 로그인 화면)
+    participant Hydra as Ory Hydra<br>(OAuth2/OIDC)
+    participant Kratos as Ory Kratos<br>(Identity/Session)
+    participant BE as Backend API<br>(baron_backend:3000)
+    participant Keto as Ory Keto<br>(권한/조직 관계)
+    participant DB as PostgreSQL<br>(메타데이터)
+    end
+
+    %% 1. 인증 흐름
+    User->>OrgFront: 1. 조직도 웹사이트 접속
+    OrgFront->>Hydra: 2. 로그인되지 않음. Authorization Code 요청 (OIDC)
+    Hydra-->>User: 3. UserFront(로그인 화면)로 리다이렉트
+    User->>UI: 4. ID/비밀번호 입력
+    UI->>Kratos: 5. 로그인 검증 및 세션 생성
+    UI-->>User: 6. 로그인 성공, OrgFront Callback으로 리다이렉트
+    User->>OrgFront: 7. Authorization Code 전달
+    OrgFront->>Hydra: 8. Code를 Access Token으로 교환
+    Hydra-->>OrgFront: 9. Access Token 발급 완료
+
+    %% 2. 조직도 데이터 요청 흐름
+    User->>OrgFront: 10. 조직도 페이지 접근
+    OrgFront->>BE: 11. API 호출: GET /user-groups<br>(헤더: Authorization Bearer [Token])
+    
+    %% 백엔드 내부 데이터 조합
+    Note over BE,DB: 백엔드가 조직도 데이터를 취합하는 과정
+    BE->>Keto: 12. Token(사용자 ID) 기반 접근 권한 검증
+    BE->>DB: 13. 테넌트/부서 트리 메타데이터 조회
+    BE->>Keto: 14. 각 부서별 멤버십(Member) ID 조회
+    BE->>Kratos: 15. 멤버 ID로 프로필(이름/직급 등) 정보 조회
+    
+    BE-->>OrgFront: 16. 조합된 최종 조직도 JSON 반환
+    Note over OrgFront: 17. 데이터를 바탕으로<br>트리/차트 UI 렌더링 (순수 표현)
+    OrgFront-->>User: 18. 조직도 화면 표시
+```
+
+## 주요 설명
+
+1. **표현 계층 (파란색 영역):** `baron-orgchart` (OrgFront)는 자체 DB를 조회하지 않고, 브라우저의 요청을 받아 화면을 그리는 역할만 담당하는 React/Vite(또는 유사 프레임워크) 애플리케이션입니다.
+2. **통합 관리 (주황색 영역):** 
+   * 조직도 웹사이트(OrgFront)에 접근하려면 `Ory Hydra`와 `UserFront`를 통해 먼저 SSO 로그인을 완료해야 합니다.
+   * 인증 토큰을 받아 API를 호출하면, **`baron-sso` 백엔드**가 DB, Keto(조직 관계망), Kratos(사용자 프로필) 등 흩어진 데이터를 하나로 뭉쳐(Aggregation) JSON 형태로 내려줍니다.
+3. **API Proxy 통신:** `docker-compose.yaml` 설정의 `API_PROXY_TARGET=http://baron_backend:3000` 환경 변수를 통해, OrgFront로 들어온 데이터 API 요청은 모두 안전하게 SSO 백엔드로 프록시(Proxy) 처리됩니다.