첫 커밋: 로컬 프로젝트 업로드

2026-06-10 15:51:34 +09:00
commit 6a8dbeb2e9
1211 changed files with 312864 additions and 0 deletions
--- a/baron-sso/adminfront/.gitignore
+++ b/baron-sso/adminfront/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/baron-sso/adminfront/Dockerfile
+++ b/baron-sso/adminfront/Dockerfile
@@ -0,0 +1,40 @@
+FROM node:lts AS build
+
+WORKDIR /workspace
+
+ENV CI=true
+ENV ADMINFRONT_BUILD_OUT_DIR=/workspace/adminfront/dist
+
+RUN corepack enable && corepack prepare pnpm@10.5.2 --activate
+
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+COPY common ./common
+COPY adminfront ./adminfront
+
+ARG VITE_ADMIN_PUBLIC_URL
+ARG VITE_OIDC_AUTHORITY
+ARG VITE_OIDC_CLIENT_ID
+ARG ORGFRONT_URL
+ENV VITE_ADMIN_PUBLIC_URL=$VITE_ADMIN_PUBLIC_URL
+ENV VITE_OIDC_AUTHORITY=$VITE_OIDC_AUTHORITY
+ENV VITE_OIDC_CLIENT_ID=$VITE_OIDC_CLIENT_ID
+ENV ORGFRONT_URL=$ORGFRONT_URL
+
+RUN pnpm install --frozen-lockfile --ignore-scripts
+
+WORKDIR /workspace/adminfront
+RUN npm run build
+
+FROM node:24-alpine AS production
+
+WORKDIR /app
+ENV NODE_ENV=production
+ENV FRONTEND_DIST_DIR=/app/dist
+ENV PORT=5173
+
+COPY scripts/serve_frontend_prod.mjs ./serve_frontend_prod.mjs
+COPY --from=build /workspace/adminfront/dist ./dist
+
+EXPOSE 5173
+
+CMD ["node", "./serve_frontend_prod.mjs"]
--- a/baron-sso/adminfront/README.md
+++ b/baron-sso/adminfront/README.md
@@ -0,0 +1,29 @@
+# Admin Front (React 19 + Vite)
+
+관리자 포털을 위한 React/Vite 기반 웹입니다. 이슈 #60 스펙을 바탕으로 라우팅, 서버 상태, 스타일 토큰을 세팅했고 특정 벤더에 종속되지 않는 IDP 연동 훅 포인트를 남겨두었습니다.
+
+## 주요 스택
+- React 19, Vite 8, TypeScript(strict)
+- React Router v6 (data router)
+- TanStack Query v5
+- Tailwind CSS v3 + shadcn/ui 컴포넌트(seed: Button/Card/Badge/Input/Table/Avatar)
+- Axios 클라이언트 스텁: Bearer + `X-Tenant-ID` 헤더 주입 준비
+- React Hook Form + Zod (추가 예정)
+- Biome (formatter/linter)
+
+## 실행
+```bash
+npm install
+npm run dev
+```
+
+## 구조
+- `src/app`: 라우터, QueryClient 등 전역 설정
+- `src/components/layout`: App 레이아웃/네비게이션
+- `src/features`: dashboard, clients, audit, auth 등 화면 스캐폴딩
+- `src/lib/apiClient.ts`: Axios 인스턴스(토큰/테넌트 헤더 주입 스텁)
+
+## 다음 작업 가이드
+- IDP 중립 Auth 레이어 추가 후 관리자 역할 가드/세션 TTL 적용
+- 테넌트 선택 UI 추가 → `X-Tenant-ID` 헤더에 반영
+- shadcn/ui 도입 및 폼/테이블 컴포넌트 연결
--- a/baron-sso/adminfront/biome.json
+++ b/baron-sso/adminfront/biome.json
@@ -0,0 +1,7 @@
+{
+  "root": true,
+  "extends": ["../common/config/biome.base.json"],
+  "files": {
+    "includes": [".vite"]
+  }
+}
--- a/baron-sso/adminfront/index.html
+++ b/baron-sso/adminfront/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>바론 어드민 서비스</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/baron-sso/adminfront/package-lock.json
+++ b/baron-sso/adminfront/package-lock.json
--- a/baron-sso/adminfront/package.json
+++ b/baron-sso/adminfront/package.json
@@ -0,0 +1,68 @@
+{
+  "name": "adminfront",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "engines": {
+    "node": ">=24.0.0"
+  },
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "tsc -b && vite build",
+    "lint": "biome check .",
+    "lint:fix": "biome check . --write",
+    "format": "biome format . --write",
+    "preview": "vite preview",
+    "test": "playwright test",
+    "test:coverage": "vitest run --coverage --bail 1",
+    "test:unit": "vitest run --bail 1",
+    "test:ui": "playwright test --ui",
+    "i18n-scan": "cd .. && node tools/i18n-scanner/index.js && node tools/i18n-scanner/report.js"
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@tanstack/react-query": "^5.100.10",
+    "@tanstack/react-query-devtools": "^5.100.10",
+    "@tanstack/react-virtual": "^3.13.24",
+    "axios": "^1.16.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.14.0",
+    "oidc-client-ts": "^3.5.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-hook-form": "^7.75.0",
+    "react-oidc-context": "^3.3.1",
+    "react-router-dom": "^7.15.0",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.16",
+    "@playwright/test": "^1.60.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^25.7.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "4.1.6",
+    "autoprefixer": "^10.5.0",
+    "jsdom": "^28.1.0",
+    "playwright": "1.60.0",
+    "postcss": "^8.5.14",
+    "tailwindcss": "^3.4.19",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.14",
+    "vitest": "^4.1.6"
+  }
+}
--- a/baron-sso/adminfront/playwright.config.ts
+++ b/baron-sso/adminfront/playwright.config.ts
@@ -0,0 +1,94 @@
+import { createRequire } from "node:module";
+import { defineConfig, devices } from "@playwright/test";
+
+const require = createRequire(import.meta.url);
+const { shouldIncludeWebKit } =
+  require("../scripts/playwrightHostDeps.cjs") as {
+    shouldIncludeWebKit: () => boolean;
+  };
+
+const configuredWorkers = process.env.PLAYWRIGHT_WORKERS
+  ? Number.parseInt(process.env.PLAYWRIGHT_WORKERS, 10)
+  : undefined;
+const port = Number.parseInt(process.env.PORT ?? "5173", 10);
+const defaultBaseUrl = `http://127.0.0.1:${port}`;
+const baseURL = process.env.BASE_URL ?? defaultBaseUrl;
+const reuseExistingServer = !process.env.CI && !process.env.PORT;
+const chromiumExecutablePath = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH;
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  timeout: 60 * 1000,
+  expect: {
+    timeout: 15000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: configuredWorkers ?? (process.env.CI ? 1 : undefined),
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [["html", { open: "never" }], ["list"]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "retain-on-failure",
+    locale: "ko-KR",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+        launchOptions: chromiumExecutablePath
+          ? { executablePath: chromiumExecutablePath }
+          : undefined,
+      },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    ...(shouldIncludeWebKit()
+      ? [
+          {
+            name: "webkit",
+            use: { ...devices["Desktop Safari"] },
+          },
+        ]
+      : []),
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: process.env.BASE_URL
+    ? undefined
+    : {
+        command: process.env.CI
+          ? `pnpm exec vite preview --host 127.0.0.1 --port ${port} --strictPort`
+          : `pnpm exec vite --host 127.0.0.1 --port ${port} --strictPort`,
+        url: `http://127.0.0.1:${port}`,
+        reuseExistingServer,
+        timeout: 180 * 1000,
+      },
+});
--- a/baron-sso/adminfront/pnpm-lock.yaml
+++ b/baron-sso/adminfront/pnpm-lock.yaml
--- a/baron-sso/adminfront/postcss.config.js
+++ b/baron-sso/adminfront/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/baron-sso/adminfront/public/LINE_WORKS_Appicon.svg
+++ b/baron-sso/adminfront/public/LINE_WORKS_Appicon.svg
@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.5556 0H6.44444C2.88528 0 0 2.88528 0 6.44444V23.5556C0 27.1147 2.88528 30 6.44444 30H23.5556C27.1147 30 30 27.1147 30 23.5556V6.44444C30 2.88528 27.1147 0 23.5556 0Z" fill="white"/>
+<path d="M9.01667 23.2633H12.3633C12.4481 23.2637 12.5307 23.2363 12.5985 23.1853C12.6663 23.1344 12.7156 23.0627 12.7389 22.9811L17.0489 8.12111C17.0658 8.06285 17.0689 8.00146 17.058 7.9418C17.047 7.88214 17.0224 7.82583 16.986 7.77733C16.9495 7.72883 16.9023 7.68947 16.8481 7.66236C16.7938 7.63525 16.734 7.62112 16.6733 7.62111H13.3267C13.2419 7.62113 13.1595 7.64866 13.0918 7.69955C13.0241 7.75045 12.9747 7.82196 12.9511 7.90333L8.64222 22.7633C8.62512 22.8215 8.62182 22.8829 8.63258 22.9425C8.64334 23.0022 8.66787 23.0586 8.70422 23.1071C8.74057 23.1556 8.78773 23.195 8.84197 23.2222C8.89621 23.2493 8.95603 23.2634 9.01667 23.2633Z" fill="#028B3A"/>
+<path d="M18.0122 23.2633H21.3589C21.4436 23.2633 21.526 23.2358 21.5938 23.1849C21.6615 23.134 21.7109 23.0625 21.7344 22.9811L26.0433 8.12111C26.0602 8.06285 26.0633 8.00146 26.0524 7.9418C26.0415 7.88214 26.0168 7.82583 25.9804 7.77733C25.944 7.72883 25.8968 7.68947 25.8425 7.66236C25.7883 7.63525 25.7284 7.62112 25.6678 7.62111H22.3211C22.2364 7.62131 22.1541 7.64891 22.0864 7.69977C22.0187 7.75064 21.9693 7.82205 21.9456 7.90333L17.6367 22.7633C17.6195 22.8216 17.6163 22.8831 17.6271 22.9428C17.6379 23.0026 17.6625 23.059 17.699 23.1076C17.7355 23.1561 17.7828 23.1955 17.8372 23.2225C17.8915 23.2496 17.9515 23.2635 18.0122 23.2633Z" fill="#88E518"/>
+<path d="M12.3633 23.2633H8.64222C8.55741 23.2637 8.47481 23.2363 8.40701 23.1853C8.33921 23.1344 8.28993 23.0627 8.26666 22.9811L3.95666 8.12111C3.93977 8.06285 3.93667 8.00146 3.94759 7.9418C3.95851 7.88214 3.98316 7.82583 4.01959 7.77733C4.05602 7.72883 4.10322 7.68947 4.15748 7.66236C4.21174 7.63525 4.27156 7.62112 4.33222 7.62111H8.05444C8.13911 7.62131 8.22145 7.64891 8.28915 7.69977C8.35684 7.75064 8.40625 7.82205 8.43 7.90333L12.7389 22.7633C12.756 22.8216 12.7593 22.8831 12.7485 22.9428C12.7377 23.0026 12.713 23.059 12.6765 23.1076C12.6401 23.1561 12.5928 23.1955 12.5384 23.2225C12.484 23.2496 12.4241 23.2635 12.3633 23.2633Z" fill="#7EE3A1"/>
+<path d="M21.3589 23.2633H17.6367C17.5519 23.2637 17.4693 23.2363 17.4015 23.1853C17.3337 23.1344 17.2844 23.0627 17.2611 22.9811L12.9511 8.12111C12.9342 8.06285 12.9311 8.00146 12.942 7.9418C12.953 7.88214 12.9776 7.82583 13.014 7.77733C13.0505 7.72883 13.0977 7.68947 13.1519 7.66236C13.2062 7.63525 13.266 7.62112 13.3267 7.62111H17.0489C17.1336 7.62113 17.216 7.64866 17.2838 7.69955C17.3515 7.75045 17.4009 7.82196 17.4244 7.90333L21.7344 22.7633C21.7513 22.8216 21.7544 22.883 21.7435 22.9426C21.7326 23.0023 21.7079 23.0586 21.6715 23.1071C21.6351 23.1556 21.5879 23.195 21.5336 23.2221C21.4794 23.2492 21.4195 23.2633 21.3589 23.2633Z" fill="#03C75A"/>
+</svg>
--- a/baron-sso/adminfront/public/vite.svg
+++ b/baron-sso/adminfront/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/baron-sso/adminfront/scripts/runtime-mode.sh
+++ b/baron-sso/adminfront/scripts/runtime-mode.sh
@@ -0,0 +1,144 @@
+#!/usr/bin/env sh
+set -eu
+
+app_env="$(printf '%s' "${APP_ENV:-development}" | tr '[:upper:]' '[:lower:]')"
+
+if [ -z "${VITE_ADMIN_PUBLIC_URL:-}" ] && [ -n "${ADMINFRONT_URL:-}" ]; then
+  export VITE_ADMIN_PUBLIC_URL="$ADMINFRONT_URL"
+fi
+
+if [ -z "${VITE_ADMIN_PUBLIC_URL:-}" ] && [ -n "${ADMINFRONT_CALLBACK_URLS:-}" ]; then
+  first_admin_callback="${ADMINFRONT_CALLBACK_URLS%%,*}"
+  case "$first_admin_callback" in
+    http://*/auth/callback | https://*/auth/callback)
+      export VITE_ADMIN_PUBLIC_URL="${first_admin_callback%/auth/callback}"
+      ;;
+  esac
+fi
+
+case "$app_env" in
+  production|prod|stage|staging)
+    mode="production"
+    ;;
+  *)
+    mode="development"
+    ;;
+esac
+
+if [ "${1:-}" = "--print-admin-public-url" ]; then
+  printf '%s\n' "${VITE_ADMIN_PUBLIC_URL:-}"
+  exit 0
+fi
+
+if [ "${1:-}" = "--print-mode" ]; then
+  printf '%s\n' "$mode"
+  exit 0
+fi
+
+ensure_frontend_dependencies() {
+  APP_PACKAGE_NAME="adminfront"
+
+  # Detect workspace root
+  if [ -f "/workspace/pnpm-workspace.yaml" ]; then
+    WORKSPACE_ROOT="/workspace"
+  elif [ -f "../../pnpm-workspace.yaml" ]; then
+    WORKSPACE_ROOT="../.."
+  else
+    WORKSPACE_ROOT=""
+  fi
+
+  # Manage dependencies from the real workspace tree if possible, otherwise use current dir.
+  if [ -n "$WORKSPACE_ROOT" ]; then
+    WORKSPACE_DIR="$WORKSPACE_ROOT"
+    LOCK_FILE="$WORKSPACE_ROOT/pnpm-lock.yaml"
+    COMMON_PACKAGE_FILE="$WORKSPACE_ROOT/common/package.json"
+    INSTALL_CMD="cd $WORKSPACE_ROOT && CI=true pnpm install --filter ${APP_PACKAGE_NAME}... --frozen-lockfile --ignore-scripts"
+  elif [ -f "pnpm-lock.yaml" ]; then
+    WORKSPACE_DIR="."
+    LOCK_FILE="pnpm-lock.yaml"
+    COMMON_PACKAGE_FILE="/workspace/common/package.json"
+    INSTALL_CMD="CI=true pnpm install --frozen-lockfile --ignore-scripts"
+  else
+    WORKSPACE_DIR="."
+    LOCK_FILE="package-lock.json"
+    COMMON_PACKAGE_FILE="/workspace/common/package.json"
+    INSTALL_CMD="npm ci"
+  fi
+
+  if [ ! -f "$WORKSPACE_DIR/package.json" ]; then
+    return 0
+  fi
+
+  lock_mode=""
+  lock_file="$WORKSPACE_DIR/.baron-deps-install.lock"
+
+  acquire_install_lock() {
+    if command -v flock >/dev/null 2>&1; then
+      lock_mode="flock"
+      exec 9>"$lock_file"
+      flock 9
+      trap 'release_install_lock' EXIT INT TERM
+      return 0
+    fi
+
+    lock_mode="mkdir"
+    while ! mkdir "$lock_file" 2>/dev/null; do
+      sleep 1
+    done
+    trap 'release_install_lock' EXIT INT TERM
+  }
+
+  release_install_lock() {
+    trap - EXIT INT TERM
+
+    if [ "$lock_mode" = "flock" ]; then
+      flock -u 9 || true
+      exec 9>&-
+      return 0
+    fi
+
+    if [ "$lock_mode" = "mkdir" ]; then
+      rmdir "$lock_file" >/dev/null 2>&1 || true
+    fi
+  }
+
+  if command -v sha256sum >/dev/null 2>&1; then
+    deps_hash="$(sha256sum "$WORKSPACE_DIR/package.json" "$LOCK_FILE" "$COMMON_PACKAGE_FILE" package.json 2>/dev/null | sha256sum | awk '{print $1}')"
+  else
+    deps_hash="$(cksum "$WORKSPACE_DIR/package.json" "$LOCK_FILE" "$COMMON_PACKAGE_FILE" package.json 2>/dev/null | cksum | awk '{print $1}')"
+  fi
+  deps_stamp="node_modules/.baron-deps-hash"
+  installed_hash="$(cat "$deps_stamp" 2>/dev/null || true)"
+
+  if [ "$installed_hash" != "$deps_hash" ]; then
+    echo "Installing frontend dependencies..."
+    acquire_install_lock
+    if command -v sha256sum >/dev/null 2>&1; then
+      deps_hash="$(sha256sum "$WORKSPACE_DIR/package.json" "$LOCK_FILE" "$COMMON_PACKAGE_FILE" package.json 2>/dev/null | sha256sum | awk '{print $1}')"
+    else
+      deps_hash="$(cksum "$WORKSPACE_DIR/package.json" "$LOCK_FILE" "$COMMON_PACKAGE_FILE" package.json 2>/dev/null | cksum | awk '{print $1}')"
+    fi
+    installed_hash="$(cat "$deps_stamp" 2>/dev/null || true)"
+    if [ "$installed_hash" = "$deps_hash" ]; then
+      release_install_lock
+      return 0
+    fi
+    
+    eval "$INSTALL_CMD"
+    
+    mkdir -p node_modules
+    printf '%s\n' "$deps_hash" > "$deps_stamp"
+    release_install_lock
+  fi
+}
+
+ensure_frontend_dependencies
+
+if [ "$mode" = "production" ]; then
+  echo "Running in production mode with custom static server..."
+  export ADMINFRONT_BUILD_OUT_DIR="${ADMINFRONT_BUILD_OUT_DIR:-/tmp/baron-sso-adminfront-dist}"
+  exec sh -c "npm run build && node ./scripts/serve-prod.mjs"
+fi
+
+echo "Running in development mode..."
+exec npm run dev -- --host 0.0.0.0
--- a/baron-sso/adminfront/scripts/serve-prod.mjs
+++ b/baron-sso/adminfront/scripts/serve-prod.mjs
@@ -0,0 +1,160 @@
+import { readFile, stat } from "node:fs/promises";
+import { createServer } from "node:http";
+import { extname, join, normalize, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const _rootDir = fileURLToPath(new URL("..", import.meta.url));
+const distDir = resolve(
+  process.env.ADMINFRONT_BUILD_OUT_DIR ?? "/tmp/baron-sso-adminfront-dist",
+);
+const host = process.env.HOST ?? "0.0.0.0";
+const port = Number(process.env.PORT ?? process.env.ADMINFRONT_PORT ?? 5173);
+const backendTarget = new URL(
+  process.env.API_PROXY_TARGET || "http://localhost:3000",
+);
+
+const contentTypes = {
+  ".css": "text/css; charset=utf-8",
+  ".html": "text/html; charset=utf-8",
+  ".js": "application/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".map": "application/json; charset=utf-8",
+  ".mjs": "application/javascript; charset=utf-8",
+  ".svg": "image/svg+xml",
+};
+
+function getContentType(filePath) {
+  return (
+    contentTypes[extname(filePath).toLowerCase()] ?? "application/octet-stream"
+  );
+}
+
+function sendJson(res, statusCode, body) {
+  res.writeHead(statusCode, {
+    "Content-Type": "application/json; charset=utf-8",
+    "Cache-Control": "no-store",
+  });
+  res.end(JSON.stringify(body));
+}
+
+function toSafePath(pathname) {
+  const decoded = decodeURIComponent(pathname);
+  const relative = decoded.replace(/^\/+/, "");
+  const safe = normalize(relative).replace(/^(\.\.(?:[\\/]|$))+/, "");
+  return join(distDir, safe);
+}
+
+async function tryReadFile(filePath) {
+  try {
+    return await readFile(filePath);
+  } catch {
+    return null;
+  }
+}
+
+async function proxyToBackend(req, res, pathname, search) {
+  const target = new URL(pathname + search, backendTarget);
+  const headers = new Headers();
+
+  for (const [key, value] of Object.entries(req.headers)) {
+    if (!value) continue;
+    if (key === "host" || key === "content-length" || key === "connection") {
+      continue;
+    }
+    if (Array.isArray(value)) {
+      headers.set(key, value.join(", "));
+      continue;
+    }
+    headers.set(key, value);
+  }
+
+  const hasBody = !["GET", "HEAD"].includes(req.method ?? "GET");
+  const response = await fetch(target, {
+    method: req.method,
+    headers,
+    body: hasBody ? req : undefined,
+    duplex: hasBody ? "half" : undefined,
+  });
+
+  const responseHeaders = new Headers(response.headers);
+  responseHeaders.delete("content-length");
+  responseHeaders.delete("transfer-encoding");
+  responseHeaders.delete("connection");
+
+  res.writeHead(response.status, Object.fromEntries(responseHeaders.entries()));
+
+  if (req.method === "HEAD") {
+    res.end();
+    return;
+  }
+
+  const arrayBuffer = await response.arrayBuffer();
+  res.end(Buffer.from(arrayBuffer));
+}
+
+async function serveStatic(req, res, pathname) {
+  const indexPath = join(distDir, "index.html");
+  const filePath = toSafePath(pathname);
+
+  let resolvedPath = filePath;
+  try {
+    const fileStat = await stat(resolvedPath);
+    if (fileStat.isDirectory()) {
+      resolvedPath = join(resolvedPath, "index.html");
+    }
+  } catch {
+    resolvedPath = indexPath;
+  }
+
+  let body = await tryReadFile(resolvedPath);
+  if (!body) {
+    body = await tryReadFile(indexPath);
+    resolvedPath = indexPath;
+  }
+
+  if (!body) {
+    sendJson(res, 500, { error: "dist_not_found" });
+    return;
+  }
+
+  res.writeHead(200, {
+    "Content-Type": getContentType(resolvedPath),
+    "Cache-Control": resolvedPath.endsWith("index.html")
+      ? "no-cache"
+      : "public, max-age=31536000, immutable",
+  });
+
+  if (req.method === "HEAD") {
+    res.end();
+    return;
+  }
+
+  res.end(body);
+}
+
+createServer(async (req, res) => {
+  try {
+    const url = new URL(
+      req.url ?? "/",
+      `http://${req.headers.host ?? "localhost"}`,
+    );
+    const { pathname, search } = url;
+
+    if (pathname === "/api" || pathname.startsWith("/api/")) {
+      await proxyToBackend(req, res, pathname, search);
+      return;
+    }
+
+    const normalizedPath = pathname === "/" ? "/index.html" : pathname;
+    await serveStatic(req, res, normalizedPath);
+  } catch (error) {
+    sendJson(res, 500, {
+      error: "internal_server_error",
+      message: error instanceof Error ? error.message : String(error),
+    });
+  }
+}).listen(port, host, () => {
+  console.log(
+    `Adminfront production server listening on http://${host}:${port}`,
+  );
+});
--- a/baron-sso/adminfront/seed-tenant.csv
+++ b/baron-sso/adminfront/seed-tenant.csv
@@ -0,0 +1,13 @@
+id,name,type,parent_tenant_slug,slug,memo,email_domain,visibility,org_unit_type,worksmobile_sync
+038326b6-954a-48a7-a85f-efd83f62b82a,한맥가족,COMPANY_GROUP,,hanmac-family,한맥가족 기본 루트 테넌트,,,,
+5530ca6e-c5e6-4bf0-84d6-76c6a8fb70ee,총괄기획&기술개발센터,COMPANY,hanmac-family,gpdtdc,네이버웍스 총괄기획&기술개발센터 GPDTDC_DOMAIN_ID, baroncs.co.kr,,,
+9caf62e1-297d-4e8f-870b-61780998bbeb,삼안,COMPANY,hanmac-family,saman,네이버웍스 삼안 SAMAN_DOMAIN_ID, samaneng.com,,,
+369c1843-56af-4344-9c21-0e01197ab861,한맥기술,COMPANY,hanmac-family,hanmac,네이버웍스 한맥 HANMAC_DOMAIN_ID, hanmaceng.co.kr,,,
+96369f12-6b66-4b2a-a916-d1c99d326f02,바론그룹,COMPANY_GROUP,hanmac-family,baron-group,네이버웍스 바론그룹 BARONGROUP_DOMAIN_ID,brsw.kr,,,
+5a03efd2-e62f-4243-800d-58334bf48b2f,한라산업개발,COMPANY,hanmac-family,halla,네이버웍스 한라 HALLA_DOMAIN_ID,hallasanup.com,,,
+c18a8284-0008-48aa-9cdf-9f47ab79a2a9,(주)장헌,COMPANY,baron-group,jangheon,,jangheon.com,,,
+b2fcf17f-7085-4bfe-9663-d8a2f2f4b2d6,장헌산업,COMPANY,baron-group,jangheon-sanup,,jangheon.co.kr,,,
+e57cb22c-383e-4489-8c2f-0c5431917e86,(주)피티씨,COMPANY,baron-group,ptc,,pre-cast.co.kr,,,
+4d0f26b9-702c-4bc6-8996-46e9eedfdeb7,MH_manager,USER_GROUP,hanmac-family,mhd,맨아워 대시보드 권한 보유자그룹,,private,,no
+e41adf79-3d15-4807-8303-afbdb0f2bab7,SW_uploader,USER_GROUP,hanmac-family,sw-uploader,소프트웨어 배포 권한 그룹,,private,,no
+9607eb7b-04d2-42ab-80fe-780fe21c7e8f,Personal,PERSONAL,,personal,개인 사용자 기본 루트 테넌트,,,,
--- a/baron-sso/adminfront/src/app/queryClient.ts
+++ b/baron-sso/adminfront/src/app/queryClient.ts
@@ -0,0 +1,7 @@
+import { QueryClient } from "@tanstack/react-query";
+
+import { queryClientDefaultOptions } from "../../../common/core/query/queryClient";
+
+export const queryClient = new QueryClient({
+  defaultOptions: queryClientDefaultOptions,
+});
--- a/baron-sso/adminfront/src/app/routes.test.tsx
+++ b/baron-sso/adminfront/src/app/routes.test.tsx
@@ -0,0 +1,62 @@
+import { matchRoutes } from "react-router-dom";
+import { describe, expect, it } from "vitest";
+import { buildAdminAuthRedirectUris } from "../lib/authConfig";
+import { adminRoutes } from "./routes";
+
+describe("admin routes", () => {
+  it("accepts the auth callback path generated from the public admin URL", () => {
+    const { redirectUri } = buildAdminAuthRedirectUris(
+      "https://sadmin.hmac.kr",
+    );
+    const callbackPath = new URL(redirectUri).pathname;
+
+    const matches = matchRoutes(adminRoutes, callbackPath);
+
+    expect(callbackPath).toBe("/auth/callback");
+    expect(matches?.at(-1)?.route.path).toBe("/auth/callback");
+  });
+
+  it("registers the super-admin Ory SSOT system route", () => {
+    const matches = matchRoutes(adminRoutes, "/system/ory-ssot");
+
+    expect(matches?.at(-1)?.route.path).toBe("system/ory-ssot");
+  });
+
+  it("registers the super-admin data integrity management route", () => {
+    const matches = matchRoutes(adminRoutes, "/system/data-integrity");
+
+    expect(matches?.at(-1)?.route.path).toBe("system/data-integrity");
+  });
+
+  it("routes global custom claim settings before user detail id matching", () => {
+    const matches = matchRoutes(adminRoutes, "/users/custom-claims");
+    const leafRoute = matches?.at(-1)?.route;
+
+    expect(leafRoute?.path).toBe("users/custom-claims");
+    expect(getRouteElementName(leafRoute?.element)).toBe(
+      "GlobalCustomClaimsPage",
+    );
+  });
+
+  it("keeps protected admin pages behind an auth guard before mounting the layout", () => {
+    const rootRoute = adminRoutes.find((route) => route.path === "/");
+    const protectedShellRoute = rootRoute?.children?.[0];
+
+    expect(getRouteElementName(rootRoute?.element)).toBe("AuthGuard");
+    expect(getRouteElementName(protectedShellRoute?.element)).toBe("AppLayout");
+    expect(protectedShellRoute?.children?.at(0)?.index).toBe(true);
+  });
+});
+
+function getRouteElementName(element: unknown) {
+  if (
+    typeof element === "object" &&
+    element !== null &&
+    "type" in element &&
+    typeof element.type === "function"
+  ) {
+    return element.type.name;
+  }
+
+  return undefined;
+}
--- a/baron-sso/adminfront/src/app/routes.tsx
+++ b/baron-sso/adminfront/src/app/routes.tsx
@@ -0,0 +1,81 @@
+import type { RouteObject } from "react-router-dom";
+import { createBrowserRouter } from "react-router-dom";
+import AppLayout from "../components/layout/AppLayout";
+import ApiKeyCreatePage from "../features/api-keys/ApiKeyCreatePage";
+import ApiKeyListPage from "../features/api-keys/ApiKeyListPage";
+import AuditLogsPage from "../features/audit/AuditLogsPage";
+import AuthCallbackPage from "../features/auth/AuthCallbackPage";
+import AuthGuard from "../features/auth/AuthGuard";
+import AuthPage from "../features/auth/AuthPage";
+import LoginPage from "../features/auth/LoginPage";
+import DataIntegrityPage from "../features/integrity/DataIntegrityPage";
+import GlobalOverviewPage from "../features/overview/GlobalOverviewPage";
+import UserProjectionPage from "../features/projections/UserProjectionPage";
+import { TenantAdminsAndOwnersTab } from "../features/tenants/routes/TenantAdminsAndOwnersTab";
+import TenantCreatePage from "../features/tenants/routes/TenantCreatePage";
+import TenantDetailPage from "../features/tenants/routes/TenantDetailPage";
+import TenantListPage from "../features/tenants/routes/TenantListPage";
+import { TenantProfilePage } from "../features/tenants/routes/TenantProfilePage";
+import { TenantSchemaPage } from "../features/tenants/routes/TenantSchemaPage";
+import { TenantWorksmobilePage } from "../features/tenants/routes/TenantWorksmobilePage";
+import TenantUserGroupsTab from "../features/user-groups/routes/TenantUserGroupsTab";
+import GlobalCustomClaimsPage from "../features/users/GlobalCustomClaimsPage";
+import UserCreatePage from "../features/users/UserCreatePage";
+import UserDetailPage from "../features/users/UserDetailPage";
+import UserListPage from "../features/users/UserListPage";
+import { ADMIN_AUTH_CALLBACK_PATH } from "../lib/authConfig";
+
+export const adminRoutes: RouteObject[] = [
+  {
+    path: "/login",
+    element: <LoginPage />,
+  },
+  {
+    path: ADMIN_AUTH_CALLBACK_PATH,
+    element: <AuthCallbackPage />,
+  },
+  {
+    path: "/",
+    element: <AuthGuard />,
+    children: [
+      {
+        element: <AppLayout />,
+        children: [
+          { index: true, element: <GlobalOverviewPage /> },
+          { path: "audit-logs", element: <AuditLogsPage /> },
+          { path: "auth", element: <AuthPage /> },
+          { path: "users", element: <UserListPage /> },
+          { path: "users/custom-claims", element: <GlobalCustomClaimsPage /> },
+          { path: "users/new", element: <UserCreatePage /> },
+          { path: "users/:id", element: <UserDetailPage /> },
+          { path: "tenants", element: <TenantListPage /> },
+          { path: "tenants/new", element: <TenantCreatePage /> },
+          { path: "worksmobile", element: <TenantWorksmobilePage /> },
+          {
+            path: "tenants/:tenantId",
+            element: <TenantDetailPage />,
+            children: [
+              { index: true, element: <TenantProfilePage /> },
+              { path: "permissions", element: <TenantAdminsAndOwnersTab /> },
+              { path: "organization", element: <TenantUserGroupsTab /> },
+              { path: "schema", element: <TenantSchemaPage /> },
+            ],
+          },
+          {
+            path: "tenants/:tenantId/organization/:id",
+            element: <TenantUserGroupsTab />,
+          },
+          { path: "api-keys", element: <ApiKeyListPage /> },
+          { path: "api-keys/new", element: <ApiKeyCreatePage /> },
+          { path: "system/ory-ssot", element: <UserProjectionPage /> },
+          { path: "system/data-integrity", element: <DataIntegrityPage /> },
+        ],
+      },
+    ],
+  },
+];
+
+export const router = createBrowserRouter(
+  adminRoutes,
+  // React Router v7 플래그는 Provider에서 적용합니다.
+);
--- a/baron-sso/adminfront/src/assets/react.svg
+++ b/baron-sso/adminfront/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/baron-sso/adminfront/src/components/auth/RoleGuard.tsx
+++ b/baron-sso/adminfront/src/components/auth/RoleGuard.tsx
@@ -0,0 +1,43 @@
+import { useQuery } from "@tanstack/react-query";
+import type * as React from "react";
+import { fetchMe } from "../../lib/adminApi";
+import { normalizeAdminRole } from "../../lib/roles";
+
+interface RoleGuardProps {
+  children: React.ReactNode;
+  roles: string[];
+  fallback?: React.ReactNode;
+}
+
+/**
+ * RoleGuard conditionally renders children based on the current user's role.
+ *
+ * Usage:
+ * <RoleGuard roles={['super_admin']}>
+ *   <button>System Only Action</button>
+ * </RoleGuard>
+ */
+export function RoleGuard({
+  children,
+  roles,
+  fallback = null,
+}: RoleGuardProps) {
+  const { data: profile, isLoading } = useQuery({
+    queryKey: ["me"],
+    queryFn: fetchMe,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+
+  if (isLoading) return null;
+
+  const userRole = normalizeAdminRole(profile?.role);
+  const hasAccess = roles
+    .map((role) => normalizeAdminRole(role))
+    .includes(userRole);
+
+  if (!hasAccess) {
+    return <>{fallback}</>;
+  }
+
+  return <>{children}</>;
+}
--- a/baron-sso/adminfront/src/components/common/LanguageSelector.test.tsx
+++ b/baron-sso/adminfront/src/components/common/LanguageSelector.test.tsx
@@ -0,0 +1,32 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import LanguageSelector from "./LanguageSelector";
+
+vi.mock("../../lib/i18n", () => ({
+  t: (_key: string, fallback?: string) => fallback ?? "",
+}));
+
+describe("LanguageSelector", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it("updates locale without reloading the page", () => {
+    const dispatchSpy = vi.spyOn(window, "dispatchEvent");
+    window.localStorage.setItem("locale", "ko");
+
+    render(<LanguageSelector />);
+
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "en" },
+    });
+
+    expect(window.localStorage.getItem("locale")).toBe("en");
+    expect(
+      dispatchSpy.mock.calls.some(
+        ([event]) => event instanceof Event && event.type === "localechange",
+      ),
+    ).toBe(true);
+  });
+});
--- a/baron-sso/adminfront/src/components/common/LanguageSelector.tsx
+++ b/baron-sso/adminfront/src/components/common/LanguageSelector.tsx
@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+import { LOCALE_STORAGE_KEY } from "../../../../common/core/i18n";
+import { t } from "../../lib/i18n";
+
+const SUPPORTED_LOCALES = ["ko", "en"] as const;
+
+type Locale = (typeof SUPPORTED_LOCALES)[number];
+
+function resolveLocale(): Locale {
+  if (typeof window === "undefined") {
+    return "ko";
+  }
+
+  const stored = window.localStorage.getItem(LOCALE_STORAGE_KEY);
+  if (stored === "ko" || stored === "en") {
+    return stored;
+  }
+
+  const pathLocale = window.location.pathname.split("/")[1];
+  if (pathLocale === "ko" || pathLocale === "en") {
+    return pathLocale;
+  }
+
+  const browserLang = window.navigator.language.toLowerCase();
+  return browserLang.startsWith("ko") ? "ko" : "en";
+}
+
+function LanguageSelector() {
+  const [locale, setLocale] = useState<Locale>(resolveLocale());
+
+  useEffect(() => {
+    const syncLocale = () => {
+      setLocale(resolveLocale());
+    };
+
+    window.addEventListener("localechange", syncLocale);
+    window.addEventListener("storage", syncLocale);
+
+    return () => {
+      window.removeEventListener("localechange", syncLocale);
+      window.removeEventListener("storage", syncLocale);
+    };
+  }, []);
+
+  const handleChange = (next: Locale) => {
+    if (next === locale) {
+      return;
+    }
+    window.localStorage.setItem(LOCALE_STORAGE_KEY, next);
+    setLocale(next);
+    window.dispatchEvent(new Event("localechange"));
+  };
+
+  return (
+    <select
+      id="admin-language-selector"
+      name="admin-language-selector"
+      value={locale}
+      onChange={(event) => handleChange(event.target.value as Locale)}
+      className="rounded-full border border-border bg-transparent px-3 py-2 text-sm text-muted-foreground transition hover:bg-muted/20"
+      aria-label={t("ui.common.language", "언어")}
+    >
+      <option value="ko">{t("ui.common.language_ko", "한국어")}</option>
+      <option value="en">{t("ui.common.language_en", "English")}</option>
+    </select>
+  );
+}
+
+export default LanguageSelector;
--- a/baron-sso/adminfront/src/components/common/LocaleRefreshBoundary.test.tsx
+++ b/baron-sso/adminfront/src/components/common/LocaleRefreshBoundary.test.tsx
@@ -0,0 +1,34 @@
+import { act, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it } from "vitest";
+import LocaleRefreshBoundary from "./LocaleRefreshBoundary";
+
+let renderCount = 0;
+
+function RenderCounter() {
+  renderCount += 1;
+  return <span>{renderCount}</span>;
+}
+
+describe("LocaleRefreshBoundary", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    renderCount = 0;
+  });
+
+  it("re-renders children when locale changes", async () => {
+    render(
+      <LocaleRefreshBoundary>
+        <RenderCounter />
+      </LocaleRefreshBoundary>,
+    );
+
+    expect(screen.getByText("1")).toBeInTheDocument();
+
+    await act(async () => {
+      window.localStorage.setItem("locale", "en");
+      window.dispatchEvent(new Event("localechange"));
+    });
+
+    expect(screen.getByText("2")).toBeInTheDocument();
+  });
+});
--- a/baron-sso/adminfront/src/components/common/LocaleRefreshBoundary.tsx
+++ b/baron-sso/adminfront/src/components/common/LocaleRefreshBoundary.tsx
@@ -0,0 +1,27 @@
+import { Fragment, type ReactNode, useEffect, useState } from "react";
+
+type LocaleRefreshBoundaryProps = {
+  children: ReactNode;
+};
+
+function LocaleRefreshBoundary({ children }: LocaleRefreshBoundaryProps) {
+  const [localeVersion, setLocaleVersion] = useState(0);
+
+  useEffect(() => {
+    const syncLocale = () => {
+      setLocaleVersion((current) => current + 1);
+    };
+
+    window.addEventListener("localechange", syncLocale);
+    window.addEventListener("storage", syncLocale);
+
+    return () => {
+      window.removeEventListener("localechange", syncLocale);
+      window.removeEventListener("storage", syncLocale);
+    };
+  }, []);
+
+  return <Fragment key={localeVersion}>{children}</Fragment>;
+}
+
+export default LocaleRefreshBoundary;
--- a/baron-sso/adminfront/src/components/layout/AppLayout.test.tsx
+++ b/baron-sso/adminfront/src/components/layout/AppLayout.test.tsx
@@ -0,0 +1,186 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18nMock } from "../../test/i18nMock";
+import AppLayout from "./AppLayout";
+
+const authState = {
+  isAuthenticated: true,
+  isLoading: false,
+  user: {
+    access_token: "access-token",
+    expires_at: Math.floor(Date.now() / 1000) + 120,
+    profile: {
+      sub: "admin-1",
+      name: "Admin User",
+      email: "admin@example.com",
+    },
+  },
+  signinSilent: vi.fn(async () => undefined),
+  removeUser: vi.fn(),
+};
+
+vi.mock("react-oidc-context", () => ({
+  useAuth: () => authState,
+}));
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchMe: vi.fn(async () => ({
+    id: "admin-1",
+    name: "Fetched Admin",
+    email: "fetched@example.com",
+    role: "super_admin",
+    tenantId: "tenant-1",
+    manageableTenants: [
+      {
+        id: "tenant-1",
+        name: "GPDTDC",
+        slug: "gpdtdc",
+        type: "COMPANY",
+      },
+      {
+        id: "tenant-2",
+        name: "기술연구팀",
+        slug: "gpdtdc-rnd",
+        type: "ORGANIZATION",
+      },
+    ],
+  })),
+}));
+
+function renderLayout(entry = "/users") {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[entry]}>
+        <Routes>
+          <Route path="/" element={<AppLayout />}>
+            <Route path="users" element={<div>Users outlet</div>} />
+            <Route path="users/:id" element={<div>User detail outlet</div>} />
+            <Route
+              path="tenants/:tenantId"
+              element={<div>Tenant outlet</div>}
+            />
+            <Route path="worksmobile" element={<div>Worksmobile outlet</div>} />
+            <Route path="login" element={<div>Login outlet</div>} />
+          </Route>
+        </Routes>
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("admin AppLayout", () => {
+  beforeEach(() => {
+    (
+      window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean }
+    )._IS_TEST_MODE = true;
+    authState.isAuthenticated = true;
+    authState.isLoading = false;
+    authState.user.expires_at = Math.floor(Date.now() / 1000) + 120;
+    authState.signinSilent.mockClear();
+    authState.removeUser.mockClear();
+    window.localStorage.clear();
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+  });
+
+  it("renders admin navigation, fetched profile, and outlet content", async () => {
+    renderLayout();
+
+    expect(await screen.findByText("Fetched Admin")).toBeInTheDocument();
+    expect(screen.getByText("Admin Control")).toBeInTheDocument();
+    expect(screen.getByText("Users outlet")).toBeInTheDocument();
+    expect(screen.getByText("Tenants")).toBeInTheDocument();
+    expect(screen.getByText("Org Chart")).toBeInTheDocument();
+    expect(screen.getByText("Worksmobile")).toBeInTheDocument();
+    expect(screen.getByText("Ory SSOT System")).toBeInTheDocument();
+    expect(screen.getByText("Data Integrity")).toBeInTheDocument();
+    const navigation = screen.getByRole("navigation");
+    const navLabels = Array.from(navigation.querySelectorAll("a")).map((link) =>
+      link.textContent?.trim(),
+    );
+    expect(navLabels).toEqual([
+      "Overview",
+      "Tenants",
+      "Org Chart",
+      "Worksmobile",
+      "Ory SSOT System",
+      "Data Integrity",
+      "Users",
+      "Auth Guard",
+      "API Keys",
+      "Audit Logs",
+    ]);
+    const worksmobileIcon = screen.getByTestId("worksmobile-nav-icon");
+    expect(worksmobileIcon.tagName.toLowerCase()).toBe("svg");
+    expect(worksmobileIcon).toHaveAttribute("fill", "none");
+    expect(worksmobileIcon.querySelectorAll("path")).toHaveLength(4);
+    expect(worksmobileIcon.querySelector('path[fill="white"]')).toBeNull();
+  });
+
+  it("toggles the sidebar and persists the collapsed state", async () => {
+    renderLayout();
+
+    const collapseButton = await screen.findByRole("button", {
+      name: "사이드바 접기",
+    });
+    fireEvent.click(collapseButton);
+
+    expect(window.localStorage.getItem("baron_shell_sidebar_collapsed")).toBe(
+      "true",
+    );
+    expect(
+      screen.getByRole("button", { name: "사이드바 펼치기" }),
+    ).toBeInTheDocument();
+  });
+
+  it("opens profile menu, navigates, toggles theme/session, and logs out", async () => {
+    renderLayout();
+
+    const themeButton = await screen.findByRole("button", {
+      name: "테마 전환",
+    });
+    fireEvent.click(themeButton);
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+
+    fireEvent.click(screen.getByRole("button", { name: "계정 메뉴 열기" }));
+    expect(screen.getByText("Manageable Tenants")).toBeInTheDocument();
+
+    const sessionSwitch = screen.getByRole("switch");
+    fireEvent.click(sessionSwitch);
+    expect(window.localStorage.getItem("baron_session_expiry_enabled")).toBe(
+      "false",
+    );
+
+    fireEvent.click(screen.getByText("기술연구팀"));
+    expect(await screen.findByText("Tenant outlet")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "계정 메뉴 열기" }));
+    fireEvent.click(screen.getAllByText("내 정보")[0]);
+    expect(await screen.findByText("User detail outlet")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "계정 메뉴 열기" }));
+    fireEvent.click(screen.getAllByText("Logout")[1]);
+    expect(window.confirm).toHaveBeenCalled();
+    expect(authState.removeUser).toHaveBeenCalled();
+  }, 10_000);
+
+  it("attempts silent renewal on user activity when session is near expiry", async () => {
+    authState.user.expires_at = Math.floor(Date.now() / 1000) + 60;
+
+    renderLayout();
+    await screen.findByText("Fetched Admin");
+    fireEvent.keyDown(window, { key: "Tab" });
+
+    expect(authState.signinSilent).toHaveBeenCalled();
+  });
+});
--- a/baron-sso/adminfront/src/components/layout/AppLayout.tsx
+++ b/baron-sso/adminfront/src/components/layout/AppLayout.tsx
@@ -0,0 +1,837 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  Building2,
+  ChevronDown,
+  Database,
+  Key,
+  KeyRound,
+  LayoutDashboard,
+  LogOut,
+  Moon,
+  Network,
+  NotebookTabs,
+  ShieldCheck,
+  ShieldHalf,
+  Sun,
+  User as UserIcon,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+import { useAuth } from "react-oidc-context";
+import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom";
+import {
+  AppSidebar,
+  applyShellTheme,
+  buildShellProfileSummary,
+  buildShellSessionStatus,
+  readShellSessionExpiryEnabled,
+  readShellSidebarCollapsed,
+  readShellTheme,
+  type ShellSidebarNavItem,
+  type ShellTranslator,
+  shellLayoutClasses,
+  writeShellSessionExpiryEnabled,
+  writeShellSidebarCollapsed,
+} from "../../../../common/shell";
+import { canAccessWorksmobile } from "../../features/tenants/routes/worksmobileAccess";
+import { buildAuthenticatedOrgChartUrl } from "../../features/users/orgChartPicker";
+import { fetchMe } from "../../lib/adminApi";
+import { debugLog } from "../../lib/debugLog";
+import { t } from "../../lib/i18n";
+import { isSuperAdminRole } from "../../lib/roles";
+import {
+  shouldAttemptSlidingSessionRenew,
+  shouldAttemptUnlimitedSessionRenew,
+} from "../../lib/sessionSliding";
+import LanguageSelector from "../common/LanguageSelector";
+
+const LOCALE_CHANGED_EVENT = "baron_locale_changed";
+
+const staticNavItems: ShellSidebarNavItem[] = [
+  {
+    labelKey: "ui.admin.nav.overview",
+    labelFallback: "Overview",
+    to: "/",
+    icon: LayoutDashboard,
+    end: true,
+  },
+  {
+    labelKey: "ui.admin.nav.users",
+    labelFallback: "Users",
+    to: "/users",
+    icon: Users,
+  },
+  {
+    labelKey: "ui.admin.nav.auth_guard",
+    labelFallback: "Auth Guard",
+    to: "/auth",
+    icon: KeyRound,
+  },
+  {
+    labelKey: "ui.admin.nav.api_keys",
+    labelFallback: "API Keys",
+    to: "/api-keys",
+    icon: Key,
+  },
+  {
+    labelKey: "ui.admin.nav.audit_logs",
+    labelFallback: "Audit Logs",
+    to: "/audit-logs",
+    icon: NotebookTabs,
+  },
+];
+
+type SessionStatusProps = {
+  expiresAtSec?: number | null;
+  t: ShellTranslator;
+};
+
+function useSessionStatus({ expiresAtSec, t }: SessionStatusProps) {
+  const [nowMs, setNowMs] = useState(() => Date.now());
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      setNowMs(Date.now());
+    }, 1000);
+
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, []);
+
+  return buildShellSessionStatus({ expiresAtSec, nowMs, t });
+}
+
+function SessionStatusBadge(props: SessionStatusProps) {
+  const sessionStatus = useSessionStatus(props);
+
+  return (
+    <span
+      className={[
+        shellLayoutClasses.sessionBadge,
+        sessionStatus.toneClass,
+      ].join(" ")}
+    >
+      {sessionStatus.text}
+    </span>
+  );
+}
+
+function SessionStatusText(props: SessionStatusProps) {
+  const sessionStatus = useSessionStatus(props);
+
+  return <>{sessionStatus.text}</>;
+}
+
+function LineWorksNavIcon({ size = 18 }: { size?: number | string }) {
+  const iconSize = typeof size === "number" ? size : Number.parseFloat(size);
+  return (
+    <svg
+      aria-hidden="true"
+      data-testid="worksmobile-nav-icon"
+      width={Number.isFinite(iconSize) ? iconSize : size}
+      height={Number.isFinite(iconSize) ? iconSize : size}
+      viewBox="0 0 30 30"
+      fill="none"
+      className="shrink-0 text-current"
+    >
+      <path
+        d="M9.01667 23.2633H12.3633C12.4481 23.2637 12.5307 23.2363 12.5985 23.1853C12.6663 23.1344 12.7156 23.0627 12.7389 22.9811L17.0489 8.12111C17.0658 8.06285 17.0689 8.00146 17.058 7.9418C17.047 7.88214 17.0224 7.82583 16.986 7.77733C16.9495 7.72883 16.9023 7.68947 16.8481 7.66236C16.7938 7.63525 16.734 7.62112 16.6733 7.62111H13.3267C13.2419 7.62113 13.1595 7.64866 13.0918 7.69955C13.0241 7.75045 12.9747 7.82196 12.9511 7.90333L8.64222 22.7633C8.62512 22.8215 8.62182 22.8829 8.63258 22.9425C8.64334 23.0022 8.66787 23.0586 8.70422 23.1071C8.74057 23.1556 8.78773 23.195 8.84197 23.2222C8.89621 23.2493 8.95603 23.2634 9.01667 23.2633Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.0122 23.2633H21.3589C21.4436 23.2633 21.526 23.2358 21.5938 23.1849C21.6615 23.134 21.7109 23.0625 21.7344 22.9811L26.0433 8.12111C26.0602 8.06285 26.0633 8.00146 26.0524 7.9418C26.0415 7.88214 26.0168 7.82583 25.9804 7.77733C25.944 7.72883 25.8968 7.68947 25.8425 7.66236C25.7883 7.63525 25.7284 7.62112 25.6678 7.62111H22.3211C22.2364 7.62131 22.1541 7.64891 22.0864 7.69977C22.0187 7.75064 21.9693 7.82205 21.9456 7.90333L17.6367 22.7633C17.6195 22.8216 17.6163 22.8831 17.6271 22.9428C17.6379 23.0026 17.6625 23.059 17.699 23.1076C17.7355 23.1561 17.7828 23.1955 17.8372 23.2225C17.8915 23.2496 17.9515 23.2635 18.0122 23.2633Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.3633 23.2633H8.64222C8.55741 23.2637 8.47481 23.2363 8.40701 23.1853C8.33921 23.1344 8.28993 23.0627 8.26666 22.9811L3.95666 8.12111C3.93977 8.06285 3.93667 8.00146 3.94759 7.9418C3.95851 7.88214 3.98316 7.82583 4.01959 7.77733C4.05602 7.72883 4.10322 7.68947 4.15748 7.66236C4.21174 7.63525 4.27156 7.62112 4.33222 7.62111H8.05444C8.13911 7.62131 8.22145 7.64891 8.28915 7.69977C8.35684 7.75064 8.40625 7.82205 8.43 7.90333L12.7389 22.7633C12.756 22.8216 12.7593 22.8831 12.7485 22.9428C12.7377 23.0026 12.713 23.059 12.6765 23.1076C12.6401 23.1561 12.5928 23.1955 12.5384 23.2225C12.484 23.2496 12.4241 23.2635 12.3633 23.2633Z"
+        fill="currentColor"
+      />
+      <path
+        d="M21.3589 23.2633H17.6367C17.5519 23.2637 17.4693 23.2363 17.4015 23.1853C17.3337 23.1344 17.2844 23.0627 17.2611 22.9811L12.9511 8.12111C12.9342 8.06285 12.9311 8.00146 12.942 7.9418C12.953 7.88214 12.9776 7.82583 13.014 7.77733C13.0505 7.72883 13.0977 7.68947 13.1519 7.66236C13.2062 7.63525 13.266 7.62112 13.3267 7.62111H17.0489C17.1336 7.62113 17.216 7.64866 17.2838 7.69955C17.3515 7.75045 17.4009 7.82196 17.4244 7.90333L21.7344 22.7633C21.7513 22.8216 21.7544 22.883 21.7435 22.9426C21.7326 23.0023 21.7079 23.0586 21.6715 23.1071C21.6351 23.1556 21.5879 23.195 21.5336 23.2221C21.4794 23.2492 21.4195 23.2633 21.3589 23.2633Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function AppLayout() {
+  const auth = useAuth();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const profileMenuRef = useRef<HTMLDivElement>(null);
+  const isRenewInFlightRef = useRef(false);
+  const lastRenewAttemptAtRef = useRef(0);
+  const lastVisitedRouteRef = useRef<string | null>(null);
+  const isDevelopmentRuntime = import.meta.env.MODE === "development";
+  const [theme, setTheme] = useState<"light" | "dark">(readShellTheme);
+  const [isProfileOpen, setIsProfileOpen] = useState(false);
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() =>
+    readShellSidebarCollapsed(false),
+  );
+  const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(() =>
+    readShellSessionExpiryEnabled(!isDevelopmentRuntime),
+  );
+  const { data: profile } = useQuery({
+    queryKey: ["me"],
+    queryFn: async () => {
+      debugLog("[AppLayout] Fetching profile...");
+      try {
+        const data = await fetchMe();
+        debugLog("[AppLayout] Profile fetched successfully:", data.email);
+        return data;
+      } catch (err) {
+        console.error("[AppLayout] Failed to fetch profile:", err);
+        throw err;
+      }
+    },
+    enabled:
+      (auth.isAuthenticated && !auth.isLoading) ||
+      import.meta.env.MODE === "development" ||
+      (window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
+        ._IS_TEST_MODE === true,
+  });
+
+  const navItems = React.useMemo<ShellSidebarNavItem[]>(() => {
+    const items = [...staticNavItems];
+    const _isTest =
+      (window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
+        ._IS_TEST_MODE === true;
+    const effectiveRole = profile?.role;
+
+    const isSuperAdmin = isSuperAdminRole(effectiveRole);
+    const _manageableCount = profile?.manageableTenants?.length ?? 0;
+    const showWorksmobile = canAccessWorksmobile({
+      ...profile,
+      role: effectiveRole ?? profile?.role,
+    });
+    const filteredItems = items.filter((item) => {
+      if (item.to === "/api-keys") return isSuperAdmin;
+      return true;
+    });
+
+    const orgfrontUrl = buildAuthenticatedOrgChartUrl(
+      import.meta.env.ORGFRONT_URL || "http://localhost:5175",
+      { includeInternal: true },
+    );
+
+    if (isSuperAdmin) {
+      filteredItems.splice(1, 0, {
+        labelKey: "ui.admin.nav.tenants",
+        labelFallback: "Tenants",
+        to: "/tenants",
+        icon: Building2,
+      });
+      filteredItems.splice(2, 0, {
+        labelKey: "ui.admin.nav.org_chart",
+        labelFallback: "Org Chart",
+        to: orgfrontUrl,
+        icon: Network,
+        isExternal: true,
+      });
+      if (showWorksmobile) {
+        filteredItems.splice(3, 0, {
+          labelKey: "ui.admin.nav.worksmobile",
+          labelFallback: "Worksmobile",
+          to: "/worksmobile",
+          icon: LineWorksNavIcon,
+        });
+      }
+      filteredItems.splice(4, 0, {
+        labelKey: "ui.admin.nav.ory_ssot",
+        labelFallback: "Ory SSOT System",
+        to: "/system/ory-ssot",
+        icon: Database,
+      });
+      filteredItems.splice(5, 0, {
+        labelKey: "ui.admin.nav.data_integrity",
+        labelFallback: "Data Integrity",
+        to: "/system/data-integrity",
+        icon: ShieldCheck,
+      });
+    } else {
+      // Non-superadmins
+      filteredItems.splice(1, 0, {
+        labelKey: "ui.admin.nav.org_chart",
+        labelFallback: "Org Chart",
+        to: orgfrontUrl,
+        icon: Network,
+        isExternal: true,
+      });
+      if (showWorksmobile) {
+        filteredItems.splice(2, 0, {
+          labelKey: "ui.admin.nav.worksmobile",
+          labelFallback: "Worksmobile",
+          to: "/worksmobile",
+          icon: LineWorksNavIcon,
+        });
+      }
+    }
+
+    return filteredItems;
+  }, [profile]);
+
+  const handleLogout = () => {
+    if (
+      window.confirm(t("msg.admin.logout_confirm", "로그아웃 하시겠습니까?"))
+    ) {
+      window.localStorage.removeItem("admin_session");
+      auth.removeUser();
+      navigate("/login");
+    }
+  };
+
+  useEffect(() => {
+    const isTest =
+      (window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
+        ._IS_TEST_MODE === true;
+
+    debugLog("[AppLayout] Auth state check:", {
+      isLoading: auth.isLoading,
+      isAuthenticated: auth.isAuthenticated,
+      isTest,
+    });
+
+    if (!auth.isLoading && !auth.isAuthenticated && !isTest) {
+      console.warn("[AppLayout] Not authenticated, redirecting to /login");
+      navigate("/login");
+    }
+  }, [auth.isLoading, auth.isAuthenticated, navigate]);
+
+  useEffect(() => {
+    if (auth.user?.access_token) {
+      window.localStorage.setItem("admin_session", auth.user.access_token);
+    }
+  }, [auth.user]);
+
+  useEffect(() => {
+    applyShellTheme(theme);
+  }, [theme]);
+
+  useEffect(() => {
+    if (!isDevelopmentRuntime) {
+      return;
+    }
+
+    const rerenderDevelopmentShell = () => {
+      // Re-render when locale changes
+    };
+
+    window.addEventListener(LOCALE_CHANGED_EVENT, rerenderDevelopmentShell);
+
+    return () => {
+      window.removeEventListener(
+        LOCALE_CHANGED_EVENT,
+        rerenderDevelopmentShell,
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        profileMenuRef.current &&
+        !profileMenuRef.current.contains(event.target as Node)
+      ) {
+        setIsProfileOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    const maybeRenewSession = async () => {
+      const now = Date.now();
+      if (
+        !shouldAttemptSlidingSessionRenew({
+          expiresAtSec: auth.user?.expires_at,
+          nowMs: now,
+          isEnabled: isSessionExpiryEnabled,
+          isAuthenticated: auth.isAuthenticated,
+          isLoading: auth.isLoading,
+          isRenewInFlight: isRenewInFlightRef.current,
+          lastAttemptAtMs: lastRenewAttemptAtRef.current,
+        })
+      ) {
+        return;
+      }
+
+      isRenewInFlightRef.current = true;
+      lastRenewAttemptAtRef.current = now;
+
+      try {
+        await auth.signinSilent();
+      } catch (error) {
+        console.error("세션 자동 연장에 실패했습니다.", error);
+      } finally {
+        isRenewInFlightRef.current = false;
+      }
+    };
+
+    const handleUserAction = () => {
+      void maybeRenewSession();
+    };
+
+    window.addEventListener("pointerdown", handleUserAction);
+    window.addEventListener("keydown", handleUserAction);
+
+    return () => {
+      window.removeEventListener("pointerdown", handleUserAction);
+      window.removeEventListener("keydown", handleUserAction);
+    };
+  }, [
+    auth,
+    auth.isAuthenticated,
+    auth.isLoading,
+    auth.user?.expires_at,
+    isSessionExpiryEnabled,
+  ]);
+
+  useEffect(() => {
+    if (isDevelopmentRuntime) {
+      return;
+    }
+
+    const maybeKeepSessionAlive = async () => {
+      const now = Date.now();
+      if (
+        !shouldAttemptUnlimitedSessionRenew({
+          expiresAtSec: auth.user?.expires_at,
+          nowMs: now,
+          isEnabled: isSessionExpiryEnabled,
+          isAuthenticated: auth.isAuthenticated,
+          isLoading: auth.isLoading,
+          isRenewInFlight: isRenewInFlightRef.current,
+          lastAttemptAtMs: lastRenewAttemptAtRef.current,
+        })
+      ) {
+        return;
+      }
+
+      isRenewInFlightRef.current = true;
+      lastRenewAttemptAtRef.current = now;
+
+      try {
+        await auth.signinSilent();
+      } catch (error) {
+        console.error("세션 무제한 유지 갱신에 실패했습니다.", error);
+      } finally {
+        isRenewInFlightRef.current = false;
+      }
+    };
+
+    const timer = window.setInterval(() => {
+      void maybeKeepSessionAlive();
+    }, 30_000);
+
+    void maybeKeepSessionAlive();
+
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [
+    auth,
+    auth.isAuthenticated,
+    auth.isLoading,
+    auth.user?.expires_at,
+    isSessionExpiryEnabled,
+  ]);
+
+  useEffect(() => {
+    const routeKey = `${location.pathname}${location.search}${location.hash}`;
+    if (lastVisitedRouteRef.current === null) {
+      lastVisitedRouteRef.current = routeKey;
+      return;
+    }
+
+    if (lastVisitedRouteRef.current === routeKey) {
+      return;
+    }
+
+    lastVisitedRouteRef.current = routeKey;
+
+    const now = Date.now();
+    if (
+      !shouldAttemptSlidingSessionRenew({
+        expiresAtSec: auth.user?.expires_at,
+        nowMs: now,
+        isEnabled: isSessionExpiryEnabled,
+        isAuthenticated: auth.isAuthenticated,
+        isLoading: auth.isLoading,
+        isRenewInFlight: isRenewInFlightRef.current,
+        lastAttemptAtMs: lastRenewAttemptAtRef.current,
+      })
+    ) {
+      return;
+    }
+
+    isRenewInFlightRef.current = true;
+    lastRenewAttemptAtRef.current = now;
+
+    void auth
+      .signinSilent()
+      .catch((error) => {
+        console.error("세션 자동 연장에 실패했습니다.", error);
+      })
+      .finally(() => {
+        isRenewInFlightRef.current = false;
+      });
+  }, [
+    auth,
+    auth.isAuthenticated,
+    auth.isLoading,
+    auth.user?.expires_at,
+    isSessionExpiryEnabled,
+    location.hash,
+    location.pathname,
+    location.search,
+  ]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  };
+
+  const profileSummary = buildShellProfileSummary({
+    profileName:
+      profile?.name ||
+      auth.user?.profile.name?.toString() ||
+      auth.user?.profile.preferred_username?.toString(),
+    profileEmail: profile?.email || auth.user?.profile.email?.toString(),
+    fallbackName: t("ui.shell.profile.unknown_name", "Unknown User"),
+    fallbackEmail: t("ui.shell.profile.unknown_email", "unknown@example.com"),
+  });
+  const profileRoleKey = profile?.role || "user";
+  const handleSessionExpiryToggle = () => {
+    setIsSessionExpiryEnabled((prev) => {
+      const next = !prev;
+      writeShellSessionExpiryEnabled(next);
+      return next;
+    });
+  };
+  const handleSidebarToggle = () => {
+    setIsSidebarCollapsed((prev) => {
+      const next = !prev;
+      writeShellSidebarCollapsed(next);
+      return next;
+    });
+  };
+  const sidebarNavContent = (
+    <div className={shellLayoutClasses.navList}>
+      {navItems.map((item) => {
+        const { labelKey, labelFallback, to, icon: Icon, isExternal } = item;
+        const label = t(labelKey, labelFallback);
+
+        if (isExternal) {
+          return (
+            <a
+              key={to}
+              href={to}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={[
+                shellLayoutClasses.navItemBase,
+                isSidebarCollapsed
+                  ? shellLayoutClasses.navItemBaseCollapsed
+                  : "",
+                shellLayoutClasses.navItemIdle,
+              ].join(" ")}
+              title={label}
+              aria-label={label}
+            >
+              <Icon size={18} />
+              <span className={isSidebarCollapsed ? "sr-only" : ""}>
+                {label}
+              </span>
+            </a>
+          );
+        }
+
+        return (
+          <NavLink
+            key={to}
+            to={to}
+            end={item.end ?? to === "/"}
+            className={({ isActive }) =>
+              [
+                shellLayoutClasses.navItemBase,
+                isSidebarCollapsed
+                  ? shellLayoutClasses.navItemBaseCollapsed
+                  : "",
+                item.isActive !== undefined
+                  ? item.isActive
+                    ? shellLayoutClasses.navItemActive
+                    : shellLayoutClasses.navItemIdle
+                  : isActive
+                    ? shellLayoutClasses.navItemActive
+                    : shellLayoutClasses.navItemIdle,
+              ].join(" ")
+            }
+            title={label}
+            aria-label={label}
+          >
+            <Icon size={18} />
+            <span className={isSidebarCollapsed ? "sr-only" : ""}>{label}</span>
+          </NavLink>
+        );
+      })}
+    </div>
+  );
+  const sidebarFooterContent = (
+    <div className="border-t border-border/50 px-3 pt-4">
+      <button
+        type="button"
+        onClick={handleLogout}
+        className={
+          isSidebarCollapsed
+            ? shellLayoutClasses.logoutButtonCollapsed
+            : shellLayoutClasses.logoutButton
+        }
+        title={t("ui.shell.nav.logout", "Logout")}
+      >
+        <LogOut size={18} />
+        <span className={isSidebarCollapsed ? "sr-only" : ""}>
+          {t("ui.shell.nav.logout", "Logout")}
+        </span>
+      </button>
+    </div>
+  );
+
+  if (auth.isLoading) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-background">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary/30 border-t-primary" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={
+        isSidebarCollapsed
+          ? shellLayoutClasses.rootCollapsed
+          : shellLayoutClasses.root
+      }
+    >
+      <AppSidebar
+        brandLabel={t("ui.admin.brand", "Baron 로그인")}
+        brandTitle={t("ui.admin.title", "Admin Control")}
+        brandIcon={<ShieldHalf size={20} />}
+        navContent={sidebarNavContent}
+        footerContent={sidebarFooterContent}
+        collapsed={isSidebarCollapsed}
+        onToggleCollapsed={handleSidebarToggle}
+        collapseLabel={t("ui.shell.sidebar.collapse", "사이드바 접기")}
+        expandLabel={t("ui.shell.sidebar.expand", "사이드바 펼치기")}
+      />
+
+      <div className={shellLayoutClasses.contentWide}>
+        <header className={shellLayoutClasses.headerElevated}>
+          <div className={shellLayoutClasses.headerInner}>
+            <div className={shellLayoutClasses.headerTitleWrap}>
+              <p className="text-xs uppercase tracking-[0.22em] text-muted-foreground">
+                {t("ui.admin.header.plane", "ADMIN PLANE")}
+              </p>
+              <span className="text-lg font-semibold">
+                {t("ui.admin.header.subtitle", "Manage your organization")}
+              </span>
+            </div>
+
+            <div className={shellLayoutClasses.headerActions}>
+              <LanguageSelector />
+              <button
+                type="button"
+                onClick={toggleTheme}
+                className={shellLayoutClasses.actionButton}
+                aria-label={t("ui.common.theme_toggle", "테마 전환")}
+              >
+                {theme === "light" ? <Sun size={16} /> : <Moon size={16} />}
+                {theme === "light"
+                  ? t("ui.common.theme_light", "Light")
+                  : t("ui.common.theme_dark", "Dark")}
+              </button>
+              {isSessionExpiryEnabled ? (
+                <SessionStatusBadge
+                  expiresAtSec={auth.user?.expires_at}
+                  t={t}
+                />
+              ) : null}
+              <div className="relative" ref={profileMenuRef}>
+                <button
+                  type="button"
+                  onClick={() => setIsProfileOpen((prev) => !prev)}
+                  className="inline-flex items-center gap-3 rounded-full border border-border bg-card px-3 py-2 transition hover:bg-muted/20"
+                  aria-haspopup="menu"
+                  aria-expanded={isProfileOpen}
+                  aria-label={t("ui.shell.profile.menu_aria", "계정 메뉴 열기")}
+                >
+                  <div className={shellLayoutClasses.profileInitial}>
+                    {profileSummary.initial}
+                  </div>
+                  <div className="hidden min-w-0 text-left md:block">
+                    <p className="truncate text-xs font-medium text-foreground">
+                      {profileSummary.name}
+                    </p>
+                    <p className="truncate text-[11px] text-muted-foreground">
+                      {profileSummary.email}
+                    </p>
+                  </div>
+                  <ChevronDown
+                    size={14}
+                    className={`transition-transform duration-200 ${isProfileOpen ? "rotate-180" : ""}`}
+                  />
+                </button>
+
+                {isProfileOpen ? (
+                  <div role="menu" className={shellLayoutClasses.profileMenu}>
+                    <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
+                      {t("ui.shell.profile.menu_title", "Account")}
+                    </p>
+                    <div className={shellLayoutClasses.profileCard}>
+                      <div>
+                        <p className="truncate text-sm font-semibold text-foreground">
+                          {profileSummary.name}
+                        </p>
+                        <p className="truncate text-xs text-muted-foreground">
+                          {profileSummary.email}
+                        </p>
+                      </div>
+                      <div className="flex items-center pt-1">
+                        <span className="inline-flex items-center rounded-full bg-sky-500/10 px-2.5 py-1 text-[10px] font-semibold text-sky-700 dark:text-sky-300">
+                          {t(
+                            `ui.shell.role.${profileRoleKey}`,
+                            profileRoleKey.toUpperCase(),
+                          )}
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className={shellLayoutClasses.settingsCard}>
+                      <div className="flex items-center justify-between gap-3">
+                        <div>
+                          <p className="text-sm font-medium text-foreground">
+                            {t(
+                              "ui.shell.session.auto_extend",
+                              "세션 만료 관리",
+                            )}
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            {isSessionExpiryEnabled ? (
+                              <SessionStatusText
+                                expiresAtSec={auth.user?.expires_at}
+                                t={t}
+                              />
+                            ) : (
+                              t(
+                                "ui.shell.session.disabled",
+                                "세션 만료 비활성화",
+                              )
+                            )}
+                          </p>
+                        </div>
+                        <button
+                          type="button"
+                          role="switch"
+                          aria-checked={isSessionExpiryEnabled}
+                          onClick={handleSessionExpiryToggle}
+                          className={[
+                            "relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition",
+                            isSessionExpiryEnabled ? "bg-primary" : "bg-muted",
+                          ].join(" ")}
+                        >
+                          <span
+                            className={[
+                              "inline-block h-5 w-5 rounded-full bg-white transition",
+                              isSessionExpiryEnabled
+                                ? "translate-x-5"
+                                : "translate-x-1",
+                            ].join(" ")}
+                          />
+                        </button>
+                      </div>
+                    </div>
+
+                    {profile?.manageableTenants &&
+                    profile.manageableTenants.length > 0 ? (
+                      <div className="mt-2 rounded-lg border border-border px-3 py-3">
+                        <p className="mb-2 text-xs uppercase tracking-[0.16em] text-muted-foreground">
+                          {t(
+                            "ui.admin.profile.manageable_tenants",
+                            "Manageable Tenants",
+                          )}
+                        </p>
+                        <div className="max-h-40 space-y-1 overflow-y-auto pr-1">
+                          {profile.manageableTenants.map((tenant) => (
+                            <button
+                              key={tenant.id}
+                              type="button"
+                              onClick={() => {
+                                setIsProfileOpen(false);
+                                navigate(`/tenants/${tenant.id}`);
+                              }}
+                              className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm text-foreground transition hover:bg-muted/20"
+                            >
+                              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground">
+                                {tenant.type === "USER_GROUP" ? (
+                                  <Users size={13} />
+                                ) : (
+                                  <Building2 size={13} />
+                                )}
+                              </div>
+                              <div className="min-w-0">
+                                <p className="truncate font-medium">
+                                  {tenant.name}
+                                </p>
+                                <p className="truncate text-xs text-muted-foreground">
+                                  {tenant.slug}
+                                </p>
+                              </div>
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                    ) : null}
+
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setIsProfileOpen(false);
+                        navigate(
+                          `/users/${profile?.id || auth.user?.profile.sub}`,
+                        );
+                      }}
+                      className="mt-2 flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-foreground transition hover:bg-muted/20"
+                    >
+                      <UserIcon size={16} className="text-muted-foreground" />
+                      <span>{t("ui.shell.nav.profile", "내 정보")}</span>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setIsProfileOpen(false);
+                        handleLogout();
+                      }}
+                      className="mt-2 flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
+                    >
+                      <LogOut size={16} />
+                      <span>{t("ui.shell.nav.logout", "Logout")}</span>
+                    </button>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        </header>
+        <main className={shellLayoutClasses.mainMinWidth}>
+          <Outlet context={isSidebarCollapsed} />
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export default AppLayout;
--- a/baron-sso/adminfront/src/components/ui/avatar.test.tsx
+++ b/baron-sso/adminfront/src/components/ui/avatar.test.tsx
@@ -0,0 +1,49 @@
+import type React from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+
+let container: HTMLDivElement | null = null;
+
+const render = async (element: React.ReactElement) => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  await act(async () => {
+    root.render(element);
+  });
+  return root;
+};
+
+afterEach(() => {
+  if (container) {
+    container.remove();
+    container = null;
+  }
+});
+
+describe("Avatar", () => {
+  it("renders image and fallback with merged classes", async () => {
+    const root = await render(
+      <Avatar className="custom-root" data-testid="avatar">
+        <AvatarImage
+          alt="Admin user"
+          className="custom-image"
+          src="/avatar.png"
+        />
+        <AvatarFallback className="custom-fallback">AU</AvatarFallback>
+      </Avatar>,
+    );
+
+    const avatar = container?.querySelector("[data-testid='avatar']");
+    const fallback = container?.textContent;
+
+    expect(avatar?.className).toContain("custom-root");
+    expect(fallback).toContain("AU");
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+});
--- a/baron-sso/adminfront/src/components/ui/avatar.tsx
+++ b/baron-sso/adminfront/src/components/ui/avatar.tsx
@@ -0,0 +1,47 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-semibold text-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarFallback, AvatarImage };
--- a/baron-sso/adminfront/src/components/ui/badge.test.tsx
+++ b/baron-sso/adminfront/src/components/ui/badge.test.tsx
@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Badge } from "./badge";
+
+describe("Badge Component", () => {
+  it("renders correctly with children", () => {
+    render(<Badge>Active</Badge>);
+    expect(screen.getByText("Active")).toBeInTheDocument();
+  });
+
+  it("applies variant classes correctly", () => {
+    const { rerender } = render(<Badge variant="secondary">Secondary</Badge>);
+    let badge = screen.getByText("Secondary");
+    expect(badge).toHaveClass("bg-secondary");
+
+    rerender(<Badge variant="outline">Default</Badge>);
+    badge = screen.getByText("Default");
+    expect(badge).toHaveClass("text-foreground");
+  });
+
+  it("applies custom className", () => {
+    render(<Badge className="custom-class">Custom</Badge>);
+    const badge = screen.getByText("Custom");
+    expect(badge).toHaveClass("custom-class");
+  });
+});
--- a/baron-sso/adminfront/src/components/ui/badge.tsx
+++ b/baron-sso/adminfront/src/components/ui/badge.tsx
@@ -0,0 +1,21 @@
+import type * as React from "react";
+import {
+  type CommonBadgeVariant,
+  getCommonBadgeClasses,
+} from "../../../../common/ui/badge";
+import { cn } from "../../lib/utils";
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: CommonBadgeVariant;
+}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div
+      className={cn(getCommonBadgeClasses({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge };
--- a/baron-sso/adminfront/src/components/ui/button.test.tsx
+++ b/baron-sso/adminfront/src/components/ui/button.test.tsx
@@ -0,0 +1,38 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Button } from "./button";
+
+describe("Button Component", () => {
+  it("renders correctly with children", () => {
+    render(<Button>Click me</Button>);
+    expect(
+      screen.getByRole("button", { name: /click me/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("applies variant classes correctly", () => {
+    const { rerender } = render(<Button variant="destructive">Delete</Button>);
+    const button = screen.getByRole("button", { name: /delete/i });
+    expect(button).toHaveClass("bg-destructive");
+
+    rerender(<Button variant="outline">Cancel</Button>);
+    const outlineButton = screen.getByRole("button", { name: /cancel/i });
+    expect(outlineButton).toHaveClass("border-input");
+  });
+
+  it("calls onClick when clicked", async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(<Button onClick={onClick}>Click me</Button>);
+
+    await user.click(screen.getByRole("button", { name: /click me/i }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("is disabled when the disabled prop is passed", () => {
+    render(<Button disabled>Disabled Button</Button>);
+    const button = screen.getByRole("button", { name: /disabled button/i });
+    expect(button).toBeDisabled();
+  });
+});
--- a/baron-sso/adminfront/src/components/ui/button.tsx
+++ b/baron-sso/adminfront/src/components/ui/button.tsx
@@ -0,0 +1,31 @@
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import {
+  type CommonButtonSize,
+  type CommonButtonVariant,
+  getCommonButtonClasses,
+} from "../../../../common/ui/button";
+import { cn } from "../../lib/utils";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: CommonButtonVariant;
+  size?: CommonButtonSize;
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(getCommonButtonClasses({ variant, size }), className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button };
--- a/baron-sso/adminfront/src/components/ui/card.test.tsx
+++ b/baron-sso/adminfront/src/components/ui/card.test.tsx
@@ -0,0 +1,35 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./card";
+
+describe("Card Component", () => {
+  it("renders card structure correctly", () => {
+    render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Card Title</CardTitle>
+          <CardDescription>Card Description</CardDescription>
+        </CardHeader>
+        <CardContent>Card Content</CardContent>
+        <CardFooter>Card Footer</CardFooter>
+      </Card>,
+    );
+
+    expect(screen.getByText("Card Title")).toBeInTheDocument();
+    expect(screen.getByText("Card Description")).toBeInTheDocument();
+    expect(screen.getByText("Card Content")).toBeInTheDocument();
+    expect(screen.getByText("Card Footer")).toBeInTheDocument();
+  });
+
+  it("applies custom className to Card", () => {
+    const { container } = render(<Card className="custom-card" />);
+    expect(container.firstChild).toHaveClass("custom-card");
+  });
+});
--- a/baron-sso/adminfront/src/components/ui/card.tsx
+++ b/baron-sso/adminfront/src/components/ui/card.tsx
@@ -0,0 +1,58 @@
+import type * as React from "react";
+import {
+  commonCardClass,
+  commonCardContentClass,
+  commonCardDescriptionClass,
+  commonCardFooterClass,
+  commonCardHeaderClass,
+  commonCardTitleClass,
+} from "../../../../common/ui/card";
+import { cn } from "../../lib/utils";
+
+function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn(commonCardClass, className)} {...props} />;
+}
+
+function CardHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn(commonCardHeaderClass, className)} {...props} />;
+}
+
+function CardTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn(commonCardTitleClass, className)} {...props} />;
+}
+
+function CardDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn(commonCardDescriptionClass, className)} {...props} />;
+}
+
+function CardContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn(commonCardContentClass, className)} {...props} />;
+}
+
+function CardFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn(commonCardFooterClass, className)} {...props} />;
+}
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};
--- a/baron-sso/adminfront/src/components/ui/checkbox.test.tsx
+++ b/baron-sso/adminfront/src/components/ui/checkbox.test.tsx
@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Checkbox } from "./checkbox";
+
+describe("Checkbox Component", () => {
+  it("adds a fallback id for browser autofill diagnostics", () => {
+    render(<Checkbox aria-label="Select row" />);
+
+    expect(screen.getByRole("checkbox")).toHaveAttribute("id");
+  });
+
+  it("keeps explicit id and name values", () => {
+    render(<Checkbox id="explicit-checkbox" name="explicit-name" />);
+    const checkbox = screen.getByRole("checkbox");
+
+    expect(checkbox).toHaveAttribute("id", "explicit-checkbox");
+    expect(checkbox).toHaveAttribute("name", "explicit-name");
+  });
+});
--- a/baron-sso/adminfront/src/components/ui/checkbox.tsx
+++ b/baron-sso/adminfront/src/components/ui/checkbox.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface CheckboxProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  onCheckedChange?: (checked: boolean | "indeterminate") => void;
+}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, onCheckedChange, id, name, ...props }, ref) => {
+    const fallbackId = React.useId();
+    const fieldId = id ?? (name ? undefined : fallbackId);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onCheckedChange?.(e.target.checked);
+    };
+
+    return (
+      <input
+        id={fieldId}
+        name={name}
+        type="checkbox"
+        className={cn(
+          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 accent-primary",
+          className,
+        )}
+        onChange={handleChange}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };
--- a/baron-sso/adminfront/src/components/ui/dialog.focus-scope.test.tsx
+++ b/baron-sso/adminfront/src/components/ui/dialog.focus-scope.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "./dialog";
+
+describe("Dialog FocusScope integration", () => {
+  it("mounts an open dialog without a ref update loop", () => {
+    render(
+      <Dialog open>
+        <DialogContent>
+          <DialogTitle>Focus scope check</DialogTitle>
+          <DialogDescription>Dialog content is mounted.</DialogDescription>
+        </DialogContent>
+      </Dialog>,
+    );
+
+    expect(screen.getByText("Focus scope check")).toBeInTheDocument();
+  });
+});
--- a/baron-sso/adminfront/src/components/ui/dialog.tsx
+++ b/baron-sso/adminfront/src/components/ui/dialog.tsx
@@ -0,0 +1,287 @@
+import { X } from "lucide-react";
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+import { cn } from "../../lib/utils";
+
+type DialogContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+};
+
+const DialogContext = React.createContext<DialogContextValue | null>(null);
+
+function useDialogContext(componentName: string) {
+  const context = React.useContext(DialogContext);
+  if (!context) {
+    throw new Error(`${componentName} must be used within Dialog`);
+  }
+  return context;
+}
+
+function composeEventHandlers<E extends React.SyntheticEvent>(
+  theirs: ((event: E) => void) | undefined,
+  ours: (event: E) => void,
+) {
+  return (event: E) => {
+    theirs?.(event);
+    if (!event.defaultPrevented) {
+      ours(event);
+    }
+  };
+}
+
+type DialogProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+};
+
+function Dialog({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+}: DialogProps) {
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const isControlled = open !== undefined;
+  const currentOpen = isControlled ? open : internalOpen;
+  const setOpen = React.useCallback(
+    (nextOpen: boolean) => {
+      if (!isControlled) {
+        setInternalOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [isControlled, onOpenChange],
+  );
+
+  const value = React.useMemo(
+    () => ({ open: currentOpen, setOpen }),
+    [currentOpen, setOpen],
+  );
+
+  return (
+    <DialogContext.Provider value={value}>{children}</DialogContext.Provider>
+  );
+}
+
+type DialogTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  asChild?: boolean;
+};
+
+const DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(
+  ({ asChild = false, children, onClick, ...props }, ref) => {
+    const { setOpen } = useDialogContext("DialogTrigger");
+    const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) {
+        setOpen(true);
+      }
+    };
+
+    if (asChild && React.isValidElement(children)) {
+      const child = children as React.ReactElement<{
+        onClick?: React.MouseEventHandler<HTMLElement>;
+      }>;
+      return React.cloneElement(child, {
+        ...props,
+        onClick: composeEventHandlers(
+          child.props.onClick as React.MouseEventHandler<HTMLButtonElement>,
+          () => setOpen(true),
+        ),
+      });
+    }
+
+    return (
+      <button type="button" ref={ref} onClick={handleOpen} {...props}>
+        {children}
+      </button>
+    );
+  },
+);
+DialogTrigger.displayName = "DialogTrigger";
+
+const DialogPortal = ({ children }: { children?: React.ReactNode }) => {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  return createPortal(children, document.body);
+};
+DialogPortal.displayName = "DialogPortal";
+
+const DialogClose = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(
+  ({ asChild = false, children, onClick, ...props }, ref) => {
+    const { setOpen } = useDialogContext("DialogClose");
+    const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) {
+        setOpen(false);
+      }
+    };
+
+    if (asChild && React.isValidElement(children)) {
+      const child = children as React.ReactElement<{
+        onClick?: React.MouseEventHandler<HTMLElement>;
+      }>;
+      return React.cloneElement(child, {
+        ...props,
+        onClick: composeEventHandlers(
+          child.props.onClick as React.MouseEventHandler<HTMLButtonElement>,
+          () => setOpen(false),
+        ),
+      });
+    }
+
+    return (
+      <button type="button" ref={ref} onClick={handleClose} {...props}>
+        {children}
+      </button>
+    );
+  },
+);
+DialogClose.displayName = "DialogClose";
+
+const DialogOverlay = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, onMouseDown, ...props }, ref) => {
+  const { setOpen } = useDialogContext("DialogOverlay");
+  return (
+    <button
+      type="button"
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-50 border-0 bg-black/80 p-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className,
+      )}
+      data-state="open"
+      aria-label="Close dialog"
+      onMouseDown={composeEventHandlers(onMouseDown, (event) => {
+        if (event.target === event.currentTarget) {
+          setOpen(false);
+        }
+      })}
+      {...props}
+    />
+  );
+});
+DialogOverlay.displayName = "DialogOverlay";
+
+const DialogContent = React.forwardRef<
+  HTMLDialogElement,
+  React.HTMLAttributes<HTMLDialogElement>
+>(({ className, children, onKeyDown, ...props }, ref) => {
+  const { open, setOpen } = useDialogContext("DialogContent");
+
+  React.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onDocumentKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", onDocumentKeyDown);
+    return () => document.removeEventListener("keydown", onDocumentKeyDown);
+  }, [open, setOpen]);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <dialog
+        ref={ref}
+        open
+        aria-modal="true"
+        data-state="open"
+        className={cn(
+          "fixed left-[50%] top-[50%] z-50 m-0 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 backdrop:bg-transparent 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          className,
+        )}
+        onKeyDown={onKeyDown}
+        {...props}
+      >
+        {children}
+        <DialogClose className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogClose>
+      </dialog>
+    </DialogPortal>
+  );
+});
+DialogContent.displayName = "DialogContent";
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h2
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = "DialogTitle";
+
+const DialogDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = "DialogDescription";
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
--- a/baron-sso/adminfront/src/components/ui/dropdown-menu.tsx
+++ b/baron-sso/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,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};
--- a/baron-sso/adminfront/src/components/ui/input.test.tsx
+++ b/baron-sso/adminfront/src/components/ui/input.test.tsx
@@ -0,0 +1,42 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Input } from "./input";
+
+describe("Input Component", () => {
+  it("renders correctly", () => {
+    render(<Input placeholder="Enter text" />);
+    expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument();
+  });
+
+  it("adds a fallback id for browser autofill diagnostics", () => {
+    render(<Input placeholder="Enter text" />);
+
+    expect(screen.getByPlaceholderText("Enter text")).toHaveAttribute("id");
+  });
+
+  it("keeps explicit id and name values", () => {
+    render(<Input id="explicit-id" name="explicit-name" />);
+    const input = screen.getByRole("textbox");
+
+    expect(input).toHaveAttribute("id", "explicit-id");
+    expect(input).toHaveAttribute("name", "explicit-name");
+  });
+
+  it("handles value changes", async () => {
+    const onChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Input placeholder="Enter text" onChange={onChange} />);
+    const input = screen.getByPlaceholderText("Enter text");
+
+    await user.type(input, "Hello");
+    expect(onChange).toHaveBeenCalled();
+    expect(input).toHaveValue("Hello");
+  });
+
+  it("is disabled when the disabled prop is passed", () => {
+    render(<Input disabled />);
+    const input = screen.getByRole("textbox");
+    expect(input).toBeDisabled();
+  });
+});
--- a/baron-sso/adminfront/src/components/ui/input.tsx
+++ b/baron-sso/adminfront/src/components/ui/input.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { commonInputClass } from "../../../../common/ui/input";
+import { cn } from "../../lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, id, name, ...props }, ref) => {
+    const fallbackId = React.useId();
+    const fieldId = id ?? (name ? undefined : fallbackId);
+
+    return (
+      <input
+        id={fieldId}
+        name={name}
+        type={type}
+        className={cn(commonInputClass, className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };
--- a/baron-sso/adminfront/src/components/ui/label.test.tsx
+++ b/baron-sso/adminfront/src/components/ui/label.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Label } from "./label";
+
+describe("Label Component", () => {
+  it("renders correctly with children", () => {
+    render(<Label>Username</Label>);
+    expect(screen.getByText("Username")).toBeInTheDocument();
+  });
+
+  it("applies custom className", () => {
+    render(<Label className="custom-label">Password</Label>);
+    const label = screen.getByText("Password");
+    expect(label).toHaveClass("custom-label");
+  });
+
+  it("is associated with an input via htmlFor", () => {
+    render(
+      <>
+        <Label htmlFor="test-input">Label Text</Label>
+        <input id="test-input" />
+      </>,
+    );
+    const label = screen.getByText("Label Text");
+    expect(label).toHaveAttribute("for", "test-input");
+  });
+});
--- a/baron-sso/adminfront/src/components/ui/label.tsx
+++ b/baron-sso/adminfront/src/components/ui/label.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Label = React.forwardRef<
+  HTMLLabelElement,
+  React.LabelHTMLAttributes<HTMLLabelElement>
+>(({ className, ...props }, ref) => (
+  <label
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = "Label";
+
+export { Label };
--- a/baron-sso/adminfront/src/components/ui/scroll-area.tsx
+++ b/baron-sso/adminfront/src/components/ui/scroll-area.tsx
@@ -0,0 +1,44 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent",
+      orientation === "horizontal" && "h-2.5 border-t border-t-transparent",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
--- a/baron-sso/adminfront/src/components/ui/select.tsx
+++ b/baron-sso/adminfront/src/components/ui/select.tsx
@@ -0,0 +1,158 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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-[state=top]:slide-in-from-bottom-2 data-[state=bottom]:slide-in-from-top-2",
+        position === "popper" &&
+          "data-[state=open]:slide-in-from-top-2 data-[state=bottom]:translate-y-1 data-[state=left]:-translate-x-1 data-[state=right]:translate-x-1 data-[state=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-content-available-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none 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">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
--- a/baron-sso/adminfront/src/components/ui/separator.test.tsx
+++ b/baron-sso/adminfront/src/components/ui/separator.test.tsx
@@ -0,0 +1,41 @@
+import type React from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { Separator } from "./separator";
+
+let container: HTMLDivElement | null = null;
+
+const render = async (element: React.ReactElement) => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  await act(async () => {
+    root.render(element);
+  });
+  return root;
+};
+
+afterEach(() => {
+  if (container) {
+    container.remove();
+    container = null;
+  }
+});
+
+describe("Separator", () => {
+  it("renders a horizontal separator with custom classes", async () => {
+    const root = await render(
+      <Separator className="custom-separator" data-testid="separator" />,
+    );
+
+    const separator = container?.querySelector("[data-testid='separator']");
+
+    expect(separator?.className).toContain("h-px");
+    expect(separator?.className).toContain("custom-separator");
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+});
--- a/baron-sso/adminfront/src/components/ui/separator.tsx
+++ b/baron-sso/adminfront/src/components/ui/separator.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Separator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("shrink-0 bg-border", "h-px w-full", className)}
+    {...props}
+  />
+));
+Separator.displayName = "Separator";
+
+export { Separator };
--- a/baron-sso/adminfront/src/components/ui/switch.tsx
+++ b/baron-sso/adminfront/src/components/ui/switch.tsx
@@ -0,0 +1,68 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+interface SwitchProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  (
+    {
+      className,
+      checked,
+      defaultChecked = false,
+      disabled,
+      onCheckedChange,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const isControlled = checked !== undefined;
+    const [internalChecked, setInternalChecked] =
+      React.useState(defaultChecked);
+    const currentChecked = isControlled ? checked : internalChecked;
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (event.defaultPrevented || disabled) {
+        return;
+      }
+      const nextChecked = !currentChecked;
+      if (!isControlled) {
+        setInternalChecked(nextChecked);
+      }
+      onCheckedChange?.(nextChecked);
+    };
+
+    return (
+      <button
+        type="button"
+        role="switch"
+        aria-checked={currentChecked}
+        data-state={currentChecked ? "checked" : "unchecked"}
+        className={cn(
+          "peer inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted/50",
+          className,
+        )}
+        disabled={disabled}
+        onClick={handleClick}
+        ref={ref}
+        {...props}
+      >
+        <span
+          data-state={currentChecked ? "checked" : "unchecked"}
+          className={cn(
+            "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+          )}
+        />
+      </button>
+    );
+  },
+);
+Switch.displayName = "Switch";
+
+export { Switch };
--- a/baron-sso/adminfront/src/components/ui/table.tsx
+++ b/baron-sso/adminfront/src/components/ui/table.tsx
@@ -0,0 +1,102 @@
+import * as React from "react";
+import {
+  commonTableBodyClass,
+  commonTableCaptionClass,
+  commonTableCellClass,
+  commonTableClass,
+  commonTableFooterClass,
+  commonTableHeadClass,
+  commonTableHeaderClass,
+  commonTableRowClass,
+  commonTableWrapperClass,
+} from "../../../../common/ui/table";
+import { cn } from "../../lib/utils";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className={commonTableWrapperClass}>
+    <table ref={ref} className={cn(commonTableClass, className)} {...props} />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={cn(commonTableHeaderClass, className)}
+    {...props}
+  />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn(commonTableBodyClass, className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(commonTableFooterClass, className)}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr ref={ref} className={cn(commonTableRowClass, className)} {...props} />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th ref={ref} className={cn(commonTableHeadClass, className)} {...props} />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td ref={ref} className={cn(commonTableCellClass, className)} {...props} />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn(commonTableCaptionClass, className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+};
--- a/baron-sso/adminfront/src/components/ui/tabs.tsx
+++ b/baron-sso/adminfront/src/components/ui/tabs.tsx
@@ -0,0 +1,87 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const TabsContext = React.createContext<{
+  value?: string;
+  onValueChange?: (value: string) => void;
+}>({});
+
+const Tabs = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    value?: string;
+    onValueChange?: (value: string) => void;
+  }
+>(({ className, value, onValueChange, ...props }, ref) => {
+  return (
+    <TabsContext.Provider value={{ value, onValueChange }}>
+      <div ref={ref} className={cn("w-full", className)} {...props} />
+    </TabsContext.Provider>
+  );
+});
+Tabs.displayName = "Tabs";
+
+const TabsList = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = "TabsList";
+
+const TabsTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { value: string }
+>(({ className, value, ...props }, ref) => {
+  const { value: activeValue, onValueChange } = React.useContext(TabsContext);
+  const isSelected = activeValue === value;
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      role="tab"
+      aria-selected={isSelected}
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        className,
+      )}
+      data-state={isSelected ? "active" : "inactive"}
+      onClick={() => onValueChange?.(value)}
+      {...props}
+    />
+  );
+});
+TabsTrigger.displayName = "TabsTrigger";
+
+const TabsContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { value: string }
+>(({ className, value, ...props }, ref) => {
+  const { value: activeValue } = React.useContext(TabsContext);
+  const isSelected = activeValue === value;
+
+  if (!isSelected) return null;
+
+  return (
+    <div
+      ref={ref}
+      role="tabpanel"
+      className={cn(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+TabsContent.displayName = "TabsContent";
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };
--- a/baron-sso/adminfront/src/components/ui/textarea.test.tsx
+++ b/baron-sso/adminfront/src/components/ui/textarea.test.tsx
@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Textarea } from "./textarea";
+
+describe("Textarea Component", () => {
+  it("adds a fallback id for browser autofill diagnostics", () => {
+    render(<Textarea aria-label="Description" />);
+
+    expect(screen.getByRole("textbox")).toHaveAttribute("id");
+  });
+
+  it("keeps explicit id and name values", () => {
+    render(<Textarea id="explicit-textarea" name="explicit-name" />);
+    const textarea = screen.getByRole("textbox");
+
+    expect(textarea).toHaveAttribute("id", "explicit-textarea");
+    expect(textarea).toHaveAttribute("name", "explicit-name");
+  });
+});
--- a/baron-sso/adminfront/src/components/ui/textarea.tsx
+++ b/baron-sso/adminfront/src/components/ui/textarea.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, id, name, ...props }, ref) => {
+    const fallbackId = React.useId();
+    const fieldId = id ?? (name ? undefined : fallbackId);
+
+    return (
+      <textarea
+        id={fieldId}
+        name={name}
+        className={cn(
+          "flex min-h-[80px] w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
--- a/baron-sso/adminfront/src/components/ui/toaster.tsx
+++ b/baron-sso/adminfront/src/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+import { AlertCircle, CheckCircle2, Info } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { useToastState } from "./use-toast";
+
+export function Toaster() {
+  const toasts = useToastState();
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 w-full max-w-[320px]">
+      {toasts.map((t) => (
+        <div
+          key={t.id}
+          className={cn(
+            "flex items-center gap-3 rounded-lg border p-4 shadow-lg animate-in slide-in-from-right-full duration-300",
+            t.type === "success" &&
+              "bg-emerald-50 border-emerald-200 text-emerald-800 dark:bg-emerald-950 dark:border-emerald-800 dark:text-emerald-200",
+            t.type === "error" &&
+              "bg-rose-50 border-rose-200 text-rose-800 dark:bg-rose-950 dark:border-rose-800 dark:text-rose-200",
+            t.type === "info" &&
+              "bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-200",
+          )}
+        >
+          {t.type === "success" && (
+            <CheckCircle2 className="h-5 w-5 shrink-0" />
+          )}
+          {t.type === "error" && <AlertCircle className="h-5 w-5 shrink-0" />}
+          {t.type === "info" && <Info className="h-5 w-5 shrink-0" />}
+          <p className="text-sm font-medium leading-none">{t.message}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/baron-sso/adminfront/src/components/ui/use-toast.ts
+++ b/baron-sso/adminfront/src/components/ui/use-toast.ts
@@ -0,0 +1,66 @@
+import * as React from "react";
+
+type ToastType = "success" | "error" | "info";
+
+interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+}
+
+let subscribers: ((toasts: Toast[]) => void)[] = [];
+let toasts: Toast[] = [];
+
+const notify = () => {
+  for (const sub of subscribers) {
+    sub(toasts);
+  }
+};
+
+const toastBase = (message: string, type: ToastType = "success") => {
+  const id = Math.random().toString(36).substring(2, 9);
+  toasts = [...toasts, { id, message, type }];
+  notify();
+
+  setTimeout(() => {
+    toasts = toasts.filter((t) => t.id !== id);
+    notify();
+  }, 3000);
+};
+
+export const toast = Object.assign(toastBase, {
+  success: (message: string, options?: { description?: string }) => {
+    const finalMessage = options?.description
+      ? `${message}
+${options.description}`
+      : message;
+    toastBase(finalMessage, "success");
+  },
+  error: (message: string, options?: { description?: string }) => {
+    const finalMessage = options?.description
+      ? `${message}
+${options.description}`
+      : message;
+    toastBase(finalMessage, "error");
+  },
+  info: (message: string, options?: { description?: string }) => {
+    const finalMessage = options?.description
+      ? `${message}
+${options.description}`
+      : message;
+    toastBase(finalMessage, "info");
+  },
+});
+
+export const useToastState = () => {
+  const [state, setState] = React.useState<Toast[]>(toasts);
+
+  React.useEffect(() => {
+    subscribers.push(setState);
+    return () => {
+      subscribers = subscribers.filter((sub) => sub !== setState);
+    };
+  }, []);
+
+  return state;
+};
--- a/baron-sso/adminfront/src/features/api-keys/ApiKeyCreatePage.test.tsx
+++ b/baron-sso/adminfront/src/features/api-keys/ApiKeyCreatePage.test.tsx
@@ -0,0 +1,72 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createApiKey } from "../../lib/adminApi";
+import ApiKeyCreatePage from "./ApiKeyCreatePage";
+
+vi.mock("../../lib/adminApi", () => ({
+  createApiKey: vi.fn(async () => ({
+    apiKey: {
+      id: "api-key-id",
+      name: "org-context-client",
+      client_id: "client-id",
+      scopes: ["audit:read", "user:read", "org-context:read"],
+      status: "active",
+      createdAt: "2026-05-13T00:00:00Z",
+    },
+    clientSecret: "secret",
+  })),
+}));
+
+function renderPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        <ApiKeyCreatePage />
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("ApiKeyCreatePage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders org-context:read as a selectable API key scope", () => {
+    renderPage();
+
+    expect(screen.getByText("조직 Context 조회")).toBeInTheDocument();
+    expect(screen.getByText("ID: org-context:read")).toBeInTheDocument();
+  });
+
+  it("includes org-context:read in the create request when selected", async () => {
+    const user = userEvent.setup();
+    renderPage();
+
+    await user.type(
+      screen.getByLabelText("서비스 또는 목적 식별 이름"),
+      "org-context-client",
+    );
+    await user.click(screen.getByRole("button", { name: /조직 Context 조회/ }));
+    await user.click(screen.getByRole("button", { name: /API 키 발급하기/ }));
+
+    await waitFor(() => {
+      expect(createApiKey).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: "org-context-client",
+          scopes: expect.arrayContaining(["org-context:read"]),
+        }),
+      );
+    });
+  });
+});
--- a/baron-sso/adminfront/src/features/api-keys/ApiKeyCreatePage.tsx
+++ b/baron-sso/adminfront/src/features/api-keys/ApiKeyCreatePage.tsx
@@ -0,0 +1,350 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import {
+  AlertCircle,
+  Check,
+  ChevronLeft,
+  Copy,
+  Loader2,
+  Save,
+  ShieldCheck,
+} from "lucide-react";
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { Link, useNavigate } from "react-router-dom";
+import { Button } from "../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+import { Input } from "../../components/ui/input";
+import { Label } from "../../components/ui/label";
+import {
+  type ApiKeyCreateRequest,
+  type ApiKeyCreateResponse,
+  createApiKey,
+} from "../../lib/adminApi";
+import { t } from "../../lib/i18n";
+import { cn } from "../../lib/utils";
+import { AVAILABLE_API_KEY_SCOPES } from "./apiKeyScopes";
+
+function ApiKeyCreatePage() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [error, setError] = React.useState<string | null>(null);
+  const [createdResult, setCreatedResult] =
+    React.useState<ApiKeyCreateResponse | null>(null);
+  const [selectedScopes, setSelectedScopes] = React.useState<string[]>([
+    "audit:read",
+    "user:read",
+  ]);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<{ name: string }>({
+    defaultValues: { name: "" },
+  });
+
+  const mutation = useMutation({
+    mutationFn: (payload: ApiKeyCreateRequest) => createApiKey(payload),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["api-keys"] });
+      setCreatedResult(data);
+    },
+    onError: (err: AxiosError<{ error?: string }>) => {
+      setError(
+        err.response?.data?.error ||
+          t("msg.admin.api_keys.create.error", "API 키 생성에 실패했습니다."),
+      );
+    },
+  });
+
+  const toggleScope = (scopeId: string) => {
+    setSelectedScopes((prev) =>
+      prev.includes(scopeId)
+        ? prev.filter((s) => s !== scopeId)
+        : [...prev, scopeId],
+    );
+  };
+
+  const onSubmit = (data: { name: string }) => {
+    if (selectedScopes.length === 0) {
+      setError(
+        t(
+          "msg.admin.api_keys.create.scope_required",
+          "최소 하나 이상의 권한을 선택해야 합니다.",
+        ),
+      );
+      return;
+    }
+    setError(null);
+    mutation.mutate({ name: data.name, scopes: selectedScopes });
+  };
+
+  const handleCopy = (text: string) => {
+    navigator.clipboard.writeText(text);
+  };
+
+  if (createdResult) {
+    return (
+      <div className="max-w-xl mx-auto py-12 space-y-8">
+        <div className="text-center space-y-3">
+          <div className="mx-auto w-16 h-16 bg-primary/10 text-primary rounded-full flex items-center justify-center">
+            <ShieldCheck size={32} />
+          </div>
+          <h2 className="text-3xl font-bold tracking-tight">
+            {t("ui.admin.api_keys.create.success.title", "API 키 생성 완료")}
+          </h2>
+          <p className="text-muted-foreground">
+            {t(
+              "msg.admin.api_keys.create.success.notice",
+              "아래의 비밀번호(Secret)는 보안을 위해 ",
+            )}
+            <span className="text-destructive font-bold">
+              {t(
+                "msg.admin.api_keys.create.success.notice_emphasis",
+                "지금 한 번만",
+              )}
+            </span>{" "}
+            {t(
+              "msg.admin.api_keys.create.success.notice_suffix",
+              "표시됩니다.",
+            )}
+          </p>
+        </div>
+
+        <Card className="border-2 border-primary/20 shadow-xl">
+          <CardHeader className="bg-primary/5 border-b">
+            <CardTitle className="text-sm font-semibold flex items-center gap-2">
+              <AlertCircle size={16} className="text-primary" />
+              {t(
+                "ui.admin.api_keys.create.success.copy_secret",
+                "보안 시크릿 복사",
+              )}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="pt-8 pb-8 space-y-6">
+            <div className="space-y-3">
+              <Label className="text-xs font-bold text-muted-foreground uppercase tracking-widest">
+                X-Baron-Key-Secret
+              </Label>
+              <div className="relative group">
+                <Input
+                  readOnly
+                  value={createdResult.clientSecret}
+                  className="font-mono text-lg py-6 pr-12 border-primary/30 bg-muted/30 focus-visible:ring-0"
+                />
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 hover:bg-primary/10"
+                  onClick={() => handleCopy(createdResult.clientSecret)}
+                >
+                  <Copy size={20} className="text-primary" />
+                </Button>
+              </div>
+              <p className="text-[11px] text-center text-muted-foreground italic">
+                {t(
+                  "msg.admin.api_keys.create.success.copy_hint",
+                  "복사 버튼을 눌러 안전한 곳(비밀번호 관리자 등)에 저장하세요.",
+                )}
+              </p>
+            </div>
+
+            <div className="pt-4 flex flex-col gap-2">
+              <Button size="lg" className="w-full font-bold" asChild>
+                <Link to="/api-keys">
+                  {t(
+                    "ui.admin.api_keys.create.success.go_list",
+                    "저장했습니다. 목록으로 이동",
+                  )}
+                </Link>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto space-y-10">
+      <header className="flex items-center justify-between">
+        <div className="space-y-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="-ml-3 text-muted-foreground"
+            onClick={() => navigate("/api-keys")}
+          >
+            <ChevronLeft size={16} className="mr-1" />
+            {t("ui.common.back", "돌아가기")}
+          </Button>
+          <h2 className="text-3xl font-bold tracking-tight">
+            {t("ui.admin.api_keys.create.title", "새 API 키 생성")}
+          </h2>
+          <p className="text-muted-foreground">
+            {t(
+              "msg.admin.api_keys.create.subtitle",
+              "내부 시스템 연동을 위한 보안 인증 키를 구성합니다.",
+            )}
+          </p>
+        </div>
+      </header>
+
+      <div className="space-y-8">
+        {/* 섹션 1: 이름 설정 */}
+        <section className="space-y-4">
+          <div className="flex items-center gap-2 pb-2 border-b">
+            <span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold">
+              1
+            </span>
+            <h3 className="font-semibold text-lg">
+              {t("ui.admin.api_keys.create.section_name", "키 이름 지정")}
+            </h3>
+          </div>
+          <Card>
+            <CardContent className="pt-6">
+              <div className="space-y-2">
+                <Label htmlFor="name" className="text-sm font-medium">
+                  {t(
+                    "ui.admin.api_keys.create.name_label",
+                    "서비스 또는 목적 식별 이름",
+                  )}
+                </Label>
+                <Input
+                  id="name"
+                  placeholder={t(
+                    "ui.admin.api_keys.create.name_placeholder",
+                    "예: Jenkins-CI, Grafana-Dashboard",
+                  )}
+                  className="text-base py-5"
+                  {...register("name", {
+                    required: t(
+                      "msg.admin.api_keys.create.name_required",
+                      "이름은 필수입니다.",
+                    ),
+                  })}
+                />
+                {errors.name && (
+                  <p className="text-sm text-destructive mt-1">
+                    {errors.name.message}
+                  </p>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </section>
+
+        {/* 섹션 2: 권한 선택 */}
+        <section className="space-y-4">
+          <div className="flex items-center gap-2 pb-2 border-b">
+            <span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold">
+              2
+            </span>
+            <h3 className="font-semibold text-lg">
+              {t(
+                "ui.admin.api_keys.create.section_scopes",
+                "권한 범위(Scopes) 선택",
+              )}
+            </h3>
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            {AVAILABLE_API_KEY_SCOPES.map((scope) => {
+              const isSelected = selectedScopes.includes(scope.id);
+              return (
+                <button
+                  key={scope.id}
+                  type="button"
+                  onClick={() => toggleScope(scope.id)}
+                  className={cn(
+                    "flex flex-col items-start gap-2 p-4 rounded-xl border-2 text-left transition-all",
+                    isSelected
+                      ? "border-primary bg-primary/5 shadow-md"
+                      : "border-border bg-card hover:border-muted-foreground/30",
+                  )}
+                >
+                  <div className="flex items-center justify-between w-full">
+                    <span
+                      className={cn(
+                        "font-bold text-sm",
+                        isSelected ? "text-primary" : "",
+                      )}
+                    >
+                      {t(scope.labelKey, scope.labelFallback)}
+                    </span>
+                    <div
+                      className={cn(
+                        "h-5 w-5 rounded-md flex items-center justify-center border",
+                        isSelected
+                          ? "bg-primary border-primary"
+                          : "border-muted-foreground/30",
+                      )}
+                    >
+                      {isSelected && (
+                        <Check size={12} className="text-primary-foreground" />
+                      )}
+                    </div>
+                  </div>
+                  <p className="text-[11px] text-muted-foreground leading-snug">
+                    {t(scope.descKey, scope.descFallback)}
+                  </p>
+                  <code className="text-[9px] font-mono opacity-60 mt-1 uppercase tracking-tighter">
+                    ID: {scope.id}
+                  </code>
+                </button>
+              );
+            })}
+          </div>
+        </section>
+
+        {/* 하단 실행 버튼 */}
+        <div className="pt-6 flex flex-col gap-4">
+          {error && (
+            <div className="bg-destructive/10 border border-destructive/20 text-destructive p-4 rounded-lg flex items-center gap-3">
+              <AlertCircle size={20} />
+              <p className="text-sm font-medium">{error}</p>
+            </div>
+          )}
+
+          <div className="flex items-center justify-between p-6 bg-muted/30 rounded-2xl border">
+            <div>
+              <p className="text-sm font-bold">
+                {t(
+                  "msg.admin.api_keys.create.scopes_count",
+                  "총 {{count}}개의 권한이 할당됩니다.",
+                  { count: selectedScopes.length },
+                )}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                {t(
+                  "msg.admin.api_keys.create.scopes_hint",
+                  "생성 즉시 활성화되어 사용 가능합니다.",
+                )}
+              </p>
+            </div>
+            <Button
+              onClick={handleSubmit(onSubmit)}
+              size="lg"
+              className="px-8 font-bold shadow-lg shadow-primary/20"
+              disabled={mutation.isPending}
+            >
+              {mutation.isPending ? (
+                <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+              ) : (
+                <Save className="mr-2 h-5 w-5" />
+              )}
+              {t("ui.admin.api_keys.create.submit", "API 키 발급하기")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ApiKeyCreatePage;
--- a/baron-sso/adminfront/src/features/api-keys/ApiKeyListPage.test.tsx
+++ b/baron-sso/adminfront/src/features/api-keys/ApiKeyListPage.test.tsx
@@ -0,0 +1,125 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  fetchApiKeys,
+  rotateApiKeySecret,
+  updateApiKeyScopes,
+} from "../../lib/adminApi";
+import ApiKeyListPage from "./ApiKeyListPage";
+
+vi.mock("../../lib/i18n", () => ({
+  t: (_key: string, fallback?: string) => fallback ?? "",
+}));
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchApiKeys: vi.fn(async () => ({
+    items: [
+      {
+        id: "api-key-id",
+        name: "org-context-client",
+        client_id: "client-id-stable",
+        scopes: ["audit:read"],
+        status: "active",
+        createdAt: "2026-05-13T00:00:00Z",
+      },
+    ],
+    total: 1,
+  })),
+  deleteApiKey: vi.fn(async () => undefined),
+  updateApiKeyScopes: vi.fn(async () => ({
+    id: "api-key-id",
+    name: "org-context-client",
+    client_id: "client-id-stable",
+    scopes: ["audit:read", "org-context:read"],
+    status: "active",
+    createdAt: "2026-05-13T00:00:00Z",
+  })),
+  rotateApiKeySecret: vi.fn(async () => ({
+    apiKey: {
+      id: "api-key-id",
+      name: "org-context-client",
+      client_id: "client-id-stable",
+      scopes: ["audit:read"],
+      status: "active",
+      createdAt: "2026-05-13T00:00:00Z",
+    },
+    clientSecret: "rotated-secret",
+  })),
+}));
+
+function renderPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        <ApiKeyListPage />
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("ApiKeyListPage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+  });
+
+  it("updates scopes without changing client_id", async () => {
+    const user = userEvent.setup();
+    renderPage();
+
+    expect(await screen.findByText("client-id-stable")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: /권한 수정/ }));
+    await user.click(screen.getByRole("button", { name: /조직 Context 조회/ }));
+    await user.click(screen.getByRole("button", { name: /권한 저장/ }));
+
+    await waitFor(() => {
+      expect(updateApiKeyScopes).toHaveBeenCalledWith("api-key-id", {
+        scopes: expect.arrayContaining(["audit:read", "org-context:read"]),
+      });
+    });
+  });
+
+  it("rotates only the secret and shows the one-time secret", async () => {
+    const user = userEvent.setup();
+    renderPage();
+
+    expect(await screen.findByText("client-id-stable")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: /Secret 재발급/ }));
+
+    await waitFor(() => {
+      expect(rotateApiKeySecret).toHaveBeenCalledWith("api-key-id");
+    });
+    expect(
+      await screen.findByDisplayValue("rotated-secret"),
+    ).toBeInTheDocument();
+    expect(fetchApiKeys).toHaveBeenCalled();
+  });
+
+  it("refresh button refetches the list without navigation", async () => {
+    const user = userEvent.setup();
+    renderPage();
+
+    await screen.findByText("client-id-stable");
+
+    const refreshButton = screen.getByRole("button", { name: /새로고침/ });
+    expect(refreshButton).toHaveAttribute("type", "button");
+
+    await user.click(refreshButton);
+
+    await waitFor(() => {
+      expect(fetchApiKeys).toHaveBeenCalledTimes(2);
+    });
+  });
+});
--- a/baron-sso/adminfront/src/features/api-keys/ApiKeyListPage.tsx
+++ b/baron-sso/adminfront/src/features/api-keys/ApiKeyListPage.tsx
@@ -0,0 +1,467 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import {
+  Copy,
+  Edit3,
+  Key,
+  Plus,
+  RefreshCw,
+  RotateCcw,
+  Save,
+  Trash2,
+} from "lucide-react";
+import * as React from "react";
+import { Link } from "react-router-dom";
+import { PageHeader } from "../../../../common/core/components/page";
+import { commonStickyTableHeaderClass } from "../../../../common/ui/table";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/ui/dialog";
+import { Input } from "../../components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
+import {
+  type ApiKeySummary,
+  deleteApiKey,
+  fetchApiKeys,
+  rotateApiKeySecret,
+  updateApiKeyScopes,
+} from "../../lib/adminApi";
+import { t } from "../../lib/i18n";
+import { cn } from "../../lib/utils";
+import { AVAILABLE_API_KEY_SCOPES } from "./apiKeyScopes";
+
+function ApiKeyListPage() {
+  const [editingKey, setEditingKey] = React.useState<ApiKeySummary | null>(
+    null,
+  );
+  const [draftScopes, setDraftScopes] = React.useState<string[]>([]);
+  const [rotatedSecret, setRotatedSecret] = React.useState<{
+    key: ApiKeySummary;
+    clientSecret: string;
+  } | null>(null);
+
+  const query = useQuery({
+    queryKey: ["api-keys", { limit: 50, offset: 0 }],
+    queryFn: () => fetchApiKeys(50, 0),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteApiKey(id),
+    onSuccess: () => {
+      query.refetch();
+    },
+  });
+
+  const updateScopesMutation = useMutation({
+    mutationFn: ({ id, scopes }: { id: string; scopes: string[] }) =>
+      updateApiKeyScopes(id, { scopes }),
+    onSuccess: () => {
+      setEditingKey(null);
+      setDraftScopes([]);
+      query.refetch();
+    },
+  });
+
+  const rotateSecretMutation = useMutation({
+    mutationFn: (id: string) => rotateApiKeySecret(id),
+    onSuccess: (data) => {
+      setRotatedSecret({
+        key: data.apiKey,
+        clientSecret: data.clientSecret,
+      });
+      query.refetch();
+    },
+  });
+
+  const errorMsg = (query.error as AxiosError<{ error?: string }>)?.response
+    ?.data?.error;
+  const fallbackError =
+    !errorMsg && query.isError
+      ? t(
+          "msg.admin.api_keys.list.fetch_error",
+          "API 키 목록 조회에 실패했습니다.",
+        )
+      : null;
+
+  const items = query.data?.items ?? [];
+
+  const handleDelete = (id: string, name: string) => {
+    if (
+      !window.confirm(
+        t(
+          "msg.admin.api_keys.list.delete_confirm",
+          'API 키 "{{name}}"를 삭제할까요?',
+          { name },
+        ),
+      )
+    ) {
+      return;
+    }
+    deleteMutation.mutate(id);
+  };
+
+  const openScopeEditor = (key: ApiKeySummary) => {
+    setEditingKey(key);
+    setDraftScopes(key.scopes);
+  };
+
+  const toggleDraftScope = (scopeId: string) => {
+    setDraftScopes((current) =>
+      current.includes(scopeId)
+        ? current.filter((scope) => scope !== scopeId)
+        : [...current, scopeId],
+    );
+  };
+
+  const saveScopes = () => {
+    if (!editingKey || draftScopes.length === 0) return;
+    updateScopesMutation.mutate({ id: editingKey.id, scopes: draftScopes });
+  };
+
+  const handleRotateSecret = (key: ApiKeySummary) => {
+    if (
+      !window.confirm(
+        t(
+          "msg.admin.api_keys.list.rotate_confirm",
+          'API 키 "{{name}}"의 Secret을 재발급할까요? 기존 Secret은 더 이상 사용할 수 없습니다.',
+          { name: key.name },
+        ),
+      )
+    ) {
+      return;
+    }
+    rotateSecretMutation.mutate(key.id);
+  };
+
+  const copyRotatedSecret = () => {
+    if (!rotatedSecret) return;
+    navigator.clipboard.writeText(rotatedSecret.clientSecret);
+  };
+
+  return (
+    <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
+      <PageHeader
+        sticky
+        titleAs="h2"
+        icon={<Key size={20} />}
+        title={t("ui.admin.api_keys.list.title", "API 키 관리 (M2M)")}
+        description={t(
+          "msg.admin.api_keys.list.subtitle",
+          "서버 간 통신(Machine-to-Machine)을 위한 API 키를 발급하고 관리합니다.",
+        )}
+        actions={
+          <>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => query.refetch()}
+              disabled={query.isFetching}
+            >
+              <RefreshCw size={16} />
+              {t("ui.common.refresh", "새로고침")}
+            </Button>
+            <Button asChild>
+              <Link to="/api-keys/new">
+                <Plus size={16} />
+                {t("ui.admin.api_keys.list.add", "API 키 생성")}
+              </Link>
+            </Button>
+          </>
+        }
+      />
+
+      <Card className="bg-[var(--color-panel)] flex-1 flex flex-col min-h-0 overflow-hidden">
+        <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
+          <div>
+            <CardTitle className="text-lg font-bold flex items-center gap-2">
+              {t("ui.admin.apikeys.registry.title", "API Key Registry")}
+            </CardTitle>
+            <CardDescription>
+              {t(
+                "msg.admin.apikeys.registry.count",
+                "총 {{count}}개의 활성 키가 등록되어 있습니다.",
+                { count: query.data?.items?.length ?? 0 },
+              )}
+            </CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
+          {(errorMsg || fallbackError) && (
+            <div className="mb-4 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive flex-shrink-0">
+              {errorMsg ?? fallbackError}
+            </div>
+          )}
+
+          <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
+            <div className="flex-1 overflow-auto relative custom-scrollbar">
+              <Table>
+                <TableHeader className={commonStickyTableHeaderClass}>
+                  <TableRow>
+                    <TableHead>
+                      {t("ui.admin.api_keys.list.table.name", "NAME")}
+                    </TableHead>
+                    <TableHead>
+                      {t("ui.admin.api_keys.list.table.client_id", "CLIENT ID")}
+                    </TableHead>
+                    <TableHead>
+                      {t("ui.admin.api_keys.list.table.scopes", "SCOPES")}
+                    </TableHead>
+                    <TableHead>
+                      {t("ui.admin.api_keys.list.table.last_used", "LAST USED")}
+                    </TableHead>
+                    <TableHead className="text-right">
+                      {t("ui.admin.api_keys.list.table.actions", "ACTIONS")}
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {query.isLoading && (
+                    <TableRow>
+                      <TableCell colSpan={5}>
+                        {t("msg.common.loading", "로딩 중...")}
+                      </TableCell>
+                    </TableRow>
+                  )}
+                  {!query.isLoading && items.length === 0 && (
+                    <TableRow>
+                      <TableCell colSpan={5}>
+                        {t(
+                          "msg.admin.api_keys.list.empty",
+                          "등록된 API 키가 없습니다.",
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  )}
+                  {items.map((key) => (
+                    <TableRow key={key.id}>
+                      <TableCell className="font-semibold">
+                        <div className="flex items-center gap-2">
+                          <Key
+                            size={14}
+                            className="text-[var(--color-muted)]"
+                          />
+                          {key.name}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <code>{key.client_id}</code>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex flex-wrap gap-1">
+                          {key.scopes.map((scope) => (
+                            <Badge
+                              key={scope}
+                              variant="muted"
+                              className="text-[10px]"
+                            >
+                              {scope}
+                            </Badge>
+                          ))}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        {key.lastUsedAt
+                          ? new Date(key.lastUsedAt).toLocaleString("ko-KR")
+                          : t("ui.common.never", "Never")}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex flex-wrap justify-end gap-2">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => openScopeEditor(key)}
+                          >
+                            <Edit3 size={14} />
+                            {t(
+                              "ui.admin.api_keys.list.edit_scopes",
+                              "권한 수정",
+                            )}
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleRotateSecret(key)}
+                            disabled={rotateSecretMutation.isPending}
+                          >
+                            <RotateCcw size={14} />
+                            {t(
+                              "ui.admin.api_keys.list.rotate_secret",
+                              "Secret 재발급",
+                            )}
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleDelete(key.id, key.name)}
+                            disabled={deleteMutation.isPending}
+                          >
+                            <Trash2 size={14} />
+                            {t("ui.common.delete", "삭제")}
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Dialog
+        open={editingKey !== null}
+        onOpenChange={() => setEditingKey(null)}
+      >
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {t("ui.admin.api_keys.list.edit_scopes", "권한 수정")}
+            </DialogTitle>
+            <DialogDescription>
+              {editingKey
+                ? t(
+                    "msg.admin.api_keys.list.edit_scopes_desc",
+                    "{{clientId}}의 CLIENT_ID는 유지하고 권한만 변경합니다.",
+                    { clientId: editingKey.client_id },
+                  )
+                : null}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-3 sm:grid-cols-2">
+            {AVAILABLE_API_KEY_SCOPES.map((scope) => {
+              const isSelected = draftScopes.includes(scope.id);
+              return (
+                <button
+                  key={scope.id}
+                  type="button"
+                  onClick={() => toggleDraftScope(scope.id)}
+                  className={cn(
+                    "flex flex-col items-start gap-2 rounded-lg border-2 p-4 text-left transition-all",
+                    isSelected
+                      ? "border-primary bg-primary/5"
+                      : "border-border bg-card hover:border-muted-foreground/30",
+                  )}
+                >
+                  <span className="font-bold text-sm">
+                    {t(scope.labelKey, scope.labelFallback)}
+                  </span>
+                  <span className="text-[11px] text-muted-foreground leading-snug">
+                    {t(scope.descKey, scope.descFallback)}
+                  </span>
+                  <code className="text-[9px] font-mono opacity-60 uppercase tracking-tighter">
+                    ID: {scope.id}
+                  </code>
+                </button>
+              );
+            })}
+          </div>
+          {draftScopes.length === 0 && (
+            <p className="text-sm text-destructive">
+              {t(
+                "msg.admin.api_keys.create.scope_required",
+                "최소 하나 이상의 권한을 선택해야 합니다.",
+              )}
+            </p>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditingKey(null)}>
+              {t("ui.common.cancel", "취소")}
+            </Button>
+            <Button
+              onClick={saveScopes}
+              disabled={
+                updateScopesMutation.isPending || draftScopes.length === 0
+              }
+            >
+              <Save size={16} />
+              {t("ui.admin.api_keys.list.save_scopes", "권한 저장")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={rotatedSecret !== null}
+        onOpenChange={() => setRotatedSecret(null)}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {t(
+                "ui.admin.api_keys.list.rotate_secret_done",
+                "Secret 재발급 완료",
+              )}
+            </DialogTitle>
+            <DialogDescription>
+              {t(
+                "msg.admin.api_keys.list.rotate_secret_notice",
+                "새 Secret은 지금 한 번만 표시됩니다. CLIENT_ID는 변경되지 않았습니다.",
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          {rotatedSecret && (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <p className="text-xs font-bold text-muted-foreground">
+                  CLIENT ID
+                </p>
+                <code className="block rounded-md bg-muted px-3 py-2 text-sm">
+                  {rotatedSecret.key.client_id}
+                </code>
+              </div>
+              <div className="space-y-2">
+                <p className="text-xs font-bold text-muted-foreground">
+                  X-Baron-Key-Secret
+                </p>
+                <div className="relative">
+                  <Input
+                    readOnly
+                    value={rotatedSecret.clientSecret}
+                    className="font-mono pr-12"
+                  />
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="absolute right-1 top-1/2 -translate-y-1/2"
+                    onClick={copyRotatedSecret}
+                  >
+                    <Copy size={16} />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button onClick={() => setRotatedSecret(null)}>
+              {t("ui.common.confirm", "확인")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+export default ApiKeyListPage;
--- a/baron-sso/adminfront/src/features/api-keys/apiKeyScopes.ts
+++ b/baron-sso/adminfront/src/features/api-keys/apiKeyScopes.ts
@@ -0,0 +1,59 @@
+export type ApiKeyScopeOption = {
+  id: string;
+  labelKey: string;
+  labelFallback: string;
+  descKey: string;
+  descFallback: string;
+};
+
+export const AVAILABLE_API_KEY_SCOPES: ApiKeyScopeOption[] = [
+  {
+    id: "audit:read",
+    labelKey: "ui.admin.api_keys.scopes.audit_read.title",
+    labelFallback: "감사 로그 조회",
+    descKey: "msg.admin.api_keys.scopes.audit_read.desc",
+    descFallback: "시스템 내의 모든 이력을 조회할 수 있습니다.",
+  },
+  {
+    id: "audit:write",
+    labelKey: "ui.admin.api_keys.scopes.audit_write.title",
+    labelFallback: "감사 로그 생성",
+    descKey: "msg.admin.api_keys.scopes.audit_write.desc",
+    descFallback: "외부 앱의 로그를 Baron SSO로 전송합니다.",
+  },
+  {
+    id: "user:read",
+    labelKey: "ui.admin.api_keys.scopes.user_read.title",
+    labelFallback: "사용자 조회",
+    descKey: "msg.admin.api_keys.scopes.user_read.desc",
+    descFallback: "사용자 목록 및 프로필을 읽을 수 있습니다.",
+  },
+  {
+    id: "user:write",
+    labelKey: "ui.admin.api_keys.scopes.user_write.title",
+    labelFallback: "사용자 관리",
+    descKey: "msg.admin.api_keys.scopes.user_write.desc",
+    descFallback: "사용자 생성, 수정, 삭제 작업을 수행합니다.",
+  },
+  {
+    id: "tenant:read",
+    labelKey: "ui.admin.api_keys.scopes.tenant_read.title",
+    labelFallback: "테넌트 조회",
+    descKey: "msg.admin.api_keys.scopes.tenant_read.desc",
+    descFallback: "등록된 모든 조직 정보를 조회합니다.",
+  },
+  {
+    id: "tenant:write",
+    labelKey: "ui.admin.api_keys.scopes.tenant_write.title",
+    labelFallback: "테넌트 관리",
+    descKey: "msg.admin.api_keys.scopes.tenant_write.desc",
+    descFallback: "테넌트 정보를 직접 제어합니다.",
+  },
+  {
+    id: "org-context:read",
+    labelKey: "ui.admin.api_keys.scopes.org_context_read.title",
+    labelFallback: "조직 Context 조회",
+    descKey: "msg.admin.api_keys.scopes.org_context_read.desc",
+    descFallback: "외부 연동앱이 OrgFront SSOT 조직 JSON을 조회합니다.",
+  },
+];
--- a/baron-sso/adminfront/src/features/audit/AuditLogsPage.tsx
+++ b/baron-sso/adminfront/src/features/audit/AuditLogsPage.tsx
@@ -0,0 +1,197 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Download, NotebookTabs, RefreshCw, Search } from "lucide-react";
+import * as React from "react";
+import { PageHeader } from "../../../../common/core/components/page";
+import { SearchFilterBar } from "../../../../common/ui/search-filter-bar";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+import { Input } from "../../components/ui/input";
+import type { AuditLog } from "../../lib/adminApi";
+import { fetchAuditLogs } from "../../lib/adminApi";
+import { t } from "../../lib/i18n";
+import { VirtualizedAuditLogTable } from "./VirtualizedAuditLogTable";
+
+function AuditLogsPage() {
+  const [searchActorId, setSearchActorId] = React.useState("");
+  const [searchAction, setSearchAction] = React.useState("");
+  const [statusFilter, setStatusFilter] = React.useState("all");
+  const deferredSearchActorId = React.useDeferredValue(searchActorId.trim());
+  const deferredSearchAction = React.useDeferredValue(searchAction.trim());
+  const {
+    data,
+    isLoading,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isFetching,
+    refetch,
+  } = useInfiniteQuery({
+    queryKey: [
+      "audit-logs",
+      deferredSearchActorId,
+      deferredSearchAction,
+      statusFilter,
+    ],
+    queryFn: ({ pageParam }) => {
+      const search = [deferredSearchActorId, deferredSearchAction]
+        .filter(Boolean)
+        .join(" ");
+      return fetchAuditLogs(
+        50,
+        pageParam,
+        search || undefined,
+        statusFilter === "all" ? undefined : statusFilter,
+      );
+    },
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) => lastPage.next_cursor || undefined,
+  });
+
+  const logs =
+    data?.pages?.flatMap(
+      (page) =>
+        page?.items?.filter((item): item is AuditLog => Boolean(item)) ?? [],
+    ) ?? [];
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={t("ui.common.audit.title", "감사 로그")}
+        description={t(
+          "msg.admin.audit.subtitle",
+          "관리자 작업 이력을 조회합니다.",
+        )}
+        icon={<NotebookTabs size={20} />}
+        actions={
+          <>
+            <Badge variant="muted">
+              {t("msg.common.audit.registry.count", "총 {{count}}개 로그", {
+                count: logs.length,
+              })}
+            </Badge>
+            <Button
+              variant="outline"
+              onClick={() => refetch()}
+              disabled={isFetching}
+            >
+              <RefreshCw size={16} />
+              {t("ui.common.refresh", "새로고침")}
+            </Button>
+            <Button>
+              <Download size={16} />
+              {t("ui.common.export_csv", "CSV 내보내기")}
+            </Button>
+          </>
+        }
+      />
+
+      <Card className="glass-panel">
+        <CardHeader className="flex flex-row items-center justify-between">
+          <div>
+            <CardTitle className="text-lg font-bold flex items-center gap-2">
+              {t("ui.common.audit.registry.title", "Audit registry")}
+            </CardTitle>
+            <CardDescription>
+              {t(
+                "msg.admin.audit.registry.description",
+                "최근 감사 로그를 검색 조건에 맞춰 필터링하고, 작업 이력을 빠르게 확인합니다.",
+              )}
+            </CardDescription>
+          </div>
+        </CardHeader>
+        {isLoading ? (
+          <div className="p-8 text-center" data-testid="audit-loading">
+            {t("msg.common.audit.loading", "Loading audit logs...")}
+          </div>
+        ) : error ? (
+          <div
+            className="p-8 text-center text-red-500"
+            data-testid="audit-error"
+          >
+            {t("msg.common.audit.load_error", "Error loading logs: {{error}}", {
+              error:
+                (error as AxiosError<{ error?: string }>).response?.data
+                  ?.error ?? (error as Error).message,
+            })}
+          </div>
+        ) : (
+          <CardContent className="space-y-4 pt-0">
+            <SearchFilterBar
+              primary={
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    refetch();
+                  }}
+                  className="grid flex-1 gap-2 md:grid-cols-[1fr,1fr,180px]"
+                >
+                  <div className="relative">
+                    <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                      className="pl-10"
+                      data-testid="audit-search-user-id"
+                      value={searchActorId}
+                      onChange={(event) => setSearchActorId(event.target.value)}
+                      placeholder={t(
+                        "ui.common.audit.filters.user_id",
+                        "Filter by User ID",
+                      )}
+                    />
+                  </div>
+                  <Input
+                    data-testid="audit-search-action"
+                    value={searchAction}
+                    onChange={(event) =>
+                      setSearchAction(event.target.value.toUpperCase())
+                    }
+                    placeholder={t(
+                      "ui.common.audit.filters.action",
+                      "Filter by Action (e.g. ROTATE_SECRET)",
+                    )}
+                  />
+                  <select
+                    id="audit-filter-status"
+                    name="audit-filter-status"
+                    data-testid="audit-filter-status"
+                    className="h-10 rounded-md border border-input bg-background px-3 text-sm"
+                    value={statusFilter}
+                    onChange={(event) => setStatusFilter(event.target.value)}
+                  >
+                    <option value="all">
+                      {t("ui.common.audit.filters.status_all", "All Status")}
+                    </option>
+                    <option value="success">
+                      {t("ui.common.status.success", "Success")}
+                    </option>
+                    <option value="failure">
+                      {t("ui.common.status.failure", "Failure")}
+                    </option>
+                  </select>
+                </form>
+              }
+            />
+            <VirtualizedAuditLogTable
+              logs={logs}
+              t={t}
+              loading={isLoading}
+              hasNextPage={Boolean(hasNextPage)}
+              isFetchingNextPage={isFetchingNextPage}
+              onLoadMore={() => fetchNextPage()}
+            />
+          </CardContent>
+        )}
+      </Card>
+    </div>
+  );
+}
+
+export default AuditLogsPage;
--- a/baron-sso/adminfront/src/features/audit/VirtualizedAuditLogTable.tsx
+++ b/baron-sso/adminfront/src/features/audit/VirtualizedAuditLogTable.tsx
@@ -0,0 +1,475 @@
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ChevronDown, ChevronUp, Copy } from "lucide-react";
+import * as React from "react";
+import {
+  formatAuditDateParts,
+  formatAuditValue,
+  parseAuditDetails,
+  resolveAuditAction,
+  resolveAuditActor,
+  resolveAuditTarget,
+} from "../../../../common/core/audit";
+import {
+  type CommonBadgeVariant,
+  getCommonBadgeClasses,
+} from "../../../../common/ui/badge";
+import { getCommonButtonClasses } from "../../../../common/ui/button";
+import {
+  commonStickyTableHeaderClass,
+  commonTableBodyClass,
+  commonTableCellClass,
+  commonTableClass,
+  commonTableHeadClass,
+  commonTableHeaderClass,
+  commonTableRowClass,
+  commonTableShellClass,
+  commonTableViewportClass,
+  commonTableWrapperClass,
+} from "../../../../common/ui/table";
+import { Button } from "../../components/ui/button";
+import type { AuditLog } from "../../lib/adminApi";
+
+type AuditTranslate = (
+  key: string,
+  fallback: string,
+  vars?: Record<string, string | number>,
+) => string;
+
+type VirtualizedAuditLogTableProps = {
+  logs: AuditLog[];
+  t: AuditTranslate;
+  loading: boolean;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onLoadMore: () => void;
+  className?: string;
+};
+
+function cx(...classNames: Array<string | false | null | undefined>) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+function statusVariant(status: string): CommonBadgeVariant {
+  return status === "success" || status === "ok" ? "success" : "warning";
+}
+
+export function VirtualizedAuditLogTable({
+  logs,
+  t,
+  loading,
+  hasNextPage,
+  isFetchingNextPage,
+  onLoadMore,
+  className,
+}: VirtualizedAuditLogTableProps) {
+  const [expandedRows, setExpandedRows] = React.useState<
+    Record<string, boolean>
+  >({});
+  const viewportRef = React.useRef<HTMLDivElement>(null);
+  const isTest =
+    (typeof process !== "undefined" && process.env.NODE_ENV === "test") ||
+    (typeof window !== "undefined" &&
+      (window as Window & { _IS_TEST_MODE?: boolean })._IS_TEST_MODE);
+
+  const handleCopy = (value: string) => {
+    if (!value) {
+      return;
+    }
+    navigator.clipboard.writeText(value);
+  };
+
+  const rowVirtualizer = useVirtualizer({
+    count: logs.length,
+    getScrollElement: () => viewportRef.current,
+    estimateSize: () => 80,
+    measureElement: (el) => el.getBoundingClientRect().height,
+    overscan: isTest ? logs.length : 10,
+    initialRect: isTest ? { width: 1010, height: 1000 } : undefined,
+  });
+
+  const virtualRows = rowVirtualizer.getVirtualItems();
+
+  React.useEffect(() => {
+    if (isTest) {
+      return;
+    }
+    const lastItem = virtualRows[virtualRows.length - 1];
+    if (!lastItem) return;
+
+    if (
+      lastItem.index >= logs.length - 1 &&
+      hasNextPage &&
+      !isFetchingNextPage
+    ) {
+      onLoadMore();
+    }
+  }, [
+    virtualRows,
+    logs.length,
+    hasNextPage,
+    isFetchingNextPage,
+    onLoadMore,
+    isTest,
+  ]);
+
+  const tableMinWidth = 1010;
+
+  const renderRow = (
+    row: AuditLog,
+    index: number,
+    virtualRow?: { start: number; end: number },
+  ) => {
+    if (!row) return null;
+
+    const details = parseAuditDetails(row.details);
+    const actorLabel = resolveAuditActor(row, details);
+    const actionLabel = resolveAuditAction(row, details);
+    const targetLabel = resolveAuditTarget(details);
+    const rowKey = `${row.event_id}-${row.timestamp}-${index}`;
+    const expanded = Boolean(expandedRows[rowKey]);
+    const { date, time } = formatAuditDateParts(row.timestamp);
+
+    return (
+      <tr
+        key={rowKey}
+        data-index={index}
+        ref={virtualRow ? rowVirtualizer.measureElement : undefined}
+        className={cx(
+          commonTableRowClass,
+          "bg-card/40",
+          virtualRow ? "absolute left-0 w-full" : "",
+        )}
+        style={
+          virtualRow
+            ? {
+                transform: `translateY(${virtualRow.start}px)`,
+              }
+            : undefined
+        }
+      >
+        <td colSpan={6} className="p-0">
+          <div className={cx("flex items-center", expanded && "border-b")}>
+            <div
+              className={cx(
+                commonTableCellClass,
+                "w-[190px] shrink-0 text-xs text-muted-foreground",
+              )}
+            >
+              <div className="space-y-1">
+                <div>{date}</div>
+                <div>{time}</div>
+              </div>
+            </div>
+            <div className={cx(commonTableCellClass, "w-[180px] shrink-0")}>
+              <div className="flex items-center gap-2">
+                <code className="rounded-md bg-secondary/60 px-2 py-1 text-xs text-muted-foreground">
+                  {actorLabel}
+                </code>
+                {actorLabel !== "-" ? (
+                  <button
+                    type="button"
+                    className={cx(
+                      getCommonButtonClasses({
+                        variant: "ghost",
+                        size: "icon",
+                      }),
+                      "h-7 w-7 text-muted-foreground hover:text-primary",
+                    )}
+                    aria-label={t(
+                      "ui.common.audit.copy.actor_id",
+                      "Copy User ID",
+                    )}
+                    onClick={() => handleCopy(actorLabel)}
+                  >
+                    <Copy className="h-3 w-3" />
+                  </button>
+                ) : null}
+              </div>
+            </div>
+            <div
+              className={cx(
+                commonTableCellClass,
+                "w-[180px] shrink-0 text-xs text-muted-foreground",
+              )}
+            >
+              <div className="font-semibold text-foreground">{actionLabel}</div>
+            </div>
+            <div
+              className={cx(
+                commonTableCellClass,
+                "w-[260px] shrink-0 text-xs text-muted-foreground",
+              )}
+            >
+              <div className="flex items-center gap-2">
+                <span className="break-all">{targetLabel}</span>
+                {targetLabel !== "-" ? (
+                  <button
+                    type="button"
+                    className={cx(
+                      getCommonButtonClasses({
+                        variant: "ghost",
+                        size: "icon",
+                      }),
+                      "h-7 w-7 text-muted-foreground hover:text-primary",
+                    )}
+                    aria-label={t(
+                      "ui.common.audit.copy.target",
+                      "Copy Client ID",
+                    )}
+                    onClick={() => handleCopy(targetLabel)}
+                  >
+                    <Copy className="h-3 w-3" />
+                  </button>
+                ) : null}
+              </div>
+            </div>
+            <div className={cx(commonTableCellClass, "w-[120px] shrink-0")}>
+              <span
+                className={getCommonBadgeClasses({
+                  variant: statusVariant(row.status),
+                })}
+              >
+                {row.status}
+              </span>
+            </div>
+            <div
+              className={cx(
+                commonTableCellClass,
+                "w-[80px] shrink-0 text-right",
+              )}
+            >
+              <button
+                type="button"
+                className={getCommonButtonClasses({
+                  variant: "ghost",
+                  size: "sm",
+                })}
+                onClick={() => {
+                  setExpandedRows((prev) => ({
+                    ...prev,
+                    [rowKey]: !expanded,
+                  }));
+                  // Re-measure after state change
+                  setTimeout(() => rowVirtualizer.measure(), 0);
+                }}
+              >
+                {expanded ? (
+                  <ChevronUp className="h-4 w-4" />
+                ) : (
+                  <ChevronDown className="h-4 w-4" />
+                )}
+              </button>
+            </div>
+          </div>
+          {expanded && (
+            <div className={cx(commonTableCellClass, "bg-card/20 text-xs")}>
+              <div className="grid gap-4 text-muted-foreground md:grid-cols-3">
+                <div className="space-y-1">
+                  <div className="uppercase tracking-[0.16em]">
+                    {t("ui.common.audit.details.request", "Request")}
+                  </div>
+                  <div className="break-all">
+                    {t(
+                      "ui.common.audit.details.request_id",
+                      "Request ID · {{value}}",
+                      { value: formatAuditValue(details.request_id) },
+                    )}
+                  </div>
+                  <div className="break-all">
+                    {t(
+                      "ui.common.audit.details.event_id",
+                      "Event ID · {{value}}",
+                      { value: formatAuditValue(row.event_id) },
+                    )}
+                  </div>
+                  <div>
+                    {t("ui.common.audit.details.ip", "IP · {{value}}", {
+                      value: formatAuditValue(row.ip_address),
+                    })}
+                  </div>
+                  <div className="break-all">
+                    {t("ui.common.audit.details.method", "Method · {{value}}", {
+                      value: formatAuditValue(details.method),
+                    })}
+                  </div>
+                  <div className="break-all">
+                    {t("ui.common.audit.details.path", "Path · {{value}}", {
+                      value: formatAuditValue(details.path),
+                    })}
+                  </div>
+                  <div>
+                    {t(
+                      "ui.common.audit.details.latency",
+                      "Latency · {{value}}",
+                      {
+                        value:
+                          details.latency_ms !== undefined
+                            ? `${details.latency_ms}ms`
+                            : "-",
+                      },
+                    )}
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <div className="uppercase tracking-[0.16em]">
+                    {t("ui.common.audit.details.actor", "Actor")}
+                  </div>
+                  <div>
+                    {t(
+                      "ui.common.audit.details.actor_id",
+                      "User ID · {{value}}",
+                      { value: actorLabel },
+                    )}
+                  </div>
+                  <div>
+                    {t("ui.common.audit.details.tenant", "Tenant · {{value}}", {
+                      value: formatAuditValue(details.tenant_id),
+                    })}
+                  </div>
+                  <div>
+                    {t("ui.common.audit.details.device", "Device · {{value}}", {
+                      value: formatAuditValue(row.device_id),
+                    })}
+                  </div>
+                  <div className="break-all">
+                    {t(
+                      "ui.common.audit.details.target",
+                      "Client ID · {{value}}",
+                      { value: targetLabel },
+                    )}
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <div className="uppercase tracking-[0.16em]">
+                    {t("ui.common.audit.details.result", "Result")}
+                  </div>
+                  <div className="break-all">
+                    {t("ui.common.audit.details.error", "Error · {{value}}", {
+                      value: formatAuditValue(details.error),
+                    })}
+                  </div>
+                  <div className="break-all">
+                    {t("ui.common.audit.details.before", "Before · {{value}}", {
+                      value: formatAuditValue(details.before),
+                    })}
+                  </div>
+                  <div className="break-all">
+                    {t("ui.common.audit.details.after", "After · {{value}}", {
+                      value: formatAuditValue(details.after),
+                    })}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </td>
+      </tr>
+    );
+  };
+
+  return (
+    <div className={cx(commonTableShellClass, className)}>
+      <div
+        ref={viewportRef}
+        className={cx(commonTableViewportClass, "flex-1")}
+        data-testid="audit-table-viewport"
+      >
+        <div
+          className={commonTableWrapperClass}
+          style={{ minWidth: tableMinWidth }}
+        >
+          <table
+            className={cx(commonTableClass, "table-fixed w-full")}
+            style={{ borderCollapse: "separate", borderSpacing: 0 }}
+          >
+            <thead
+              className={cx(
+                commonTableHeaderClass,
+                commonStickyTableHeaderClass,
+              )}
+            >
+              <tr className={commonTableRowClass}>
+                <th className={cx(commonTableHeadClass, "w-[190px]")}>
+                  {t("ui.common.audit.table.time", "Time")}
+                </th>
+                <th className={cx(commonTableHeadClass, "w-[180px]")}>
+                  {t("ui.common.audit.table.user_id", "User ID")}
+                </th>
+                <th className={cx(commonTableHeadClass, "w-[180px]")}>
+                  {t("ui.common.audit.table.action", "Action")}
+                </th>
+                <th className={cx(commonTableHeadClass, "w-[260px]")}>
+                  {t("ui.common.audit.table.client_id", "Client ID")}
+                </th>
+                <th className={cx(commonTableHeadClass, "w-[120px]")}>
+                  {t("ui.common.audit.table.status", "Status")}
+                </th>
+                <th className={cx(commonTableHeadClass, "w-[80px]")} />
+              </tr>
+            </thead>
+            <tbody
+              className={commonTableBodyClass}
+              style={
+                !isTest
+                  ? {
+                      height: `${rowVirtualizer.getTotalSize()}px`,
+                      position: "relative",
+                    }
+                  : undefined
+              }
+            >
+              {isTest
+                ? logs.map((row, index) => renderRow(row, index))
+                : virtualRows.map((virtualRow) =>
+                    renderRow(
+                      logs[virtualRow.index],
+                      virtualRow.index,
+                      virtualRow,
+                    ),
+                  )}
+              {logs.length === 0 && !loading && (
+                <tr>
+                  <td
+                    colSpan={6}
+                    className={cx(
+                      commonTableCellClass,
+                      "text-center py-8 text-muted-foreground",
+                    )}
+                  >
+                    {t("ui.common.audit.table.no_logs", "No audit logs found")}
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="flex-shrink-0 border-t bg-background/50 p-4 text-center backdrop-blur-sm">
+        {hasNextPage ? (
+          <div className="flex flex-col items-center gap-2">
+            {isFetchingNextPage && (
+              <span className="animate-pulse text-xs text-muted-foreground">
+                {t("msg.common.loading", "Loading more...")}
+              </span>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onLoadMore}
+              disabled={isFetchingNextPage}
+            >
+              {isFetchingNextPage
+                ? t("msg.common.loading", "Loading...")
+                : t("ui.common.audit.load_more", "더 보기")}
+            </Button>
+          </div>
+        ) : logs.length > 0 ? (
+          <span className="text-xs text-muted-foreground">
+            {t("msg.common.audit.end", "End of audit feed")}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
--- a/baron-sso/adminfront/src/features/auth/AuthCallbackPage.tsx
+++ b/baron-sso/adminfront/src/features/auth/AuthCallbackPage.tsx
@@ -0,0 +1,56 @@
+import { ShieldHalf } from "lucide-react";
+import { useEffect } from "react";
+import { useAuth } from "react-oidc-context";
+import { useNavigate } from "react-router-dom";
+import { debugLog } from "../../lib/debugLog";
+
+function AuthCallbackPage() {
+  const auth = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    debugLog("[AuthCallbackPage] State:", {
+      isAuthenticated: auth.isAuthenticated,
+      isLoading: auth.isLoading,
+      error: auth.error,
+    });
+    if (auth.isAuthenticated) {
+      // Save token to localStorage for existing API clients that might still use it
+      const user = auth.user;
+      if (user?.access_token) {
+        window.localStorage.setItem("admin_session", user.access_token);
+      }
+      const returnTo =
+        typeof auth.user?.state === "object" &&
+        auth.user?.state !== null &&
+        "returnTo" in auth.user.state &&
+        typeof auth.user.state.returnTo === "string"
+          ? auth.user.state.returnTo
+          : "/";
+      console.info(
+        "[AuthCallbackPage] Auth successful, navigating to",
+        returnTo,
+      );
+      navigate(returnTo, { replace: true });
+    } else if (auth.error) {
+      console.error("[AuthCallbackPage] Auth Error:", auth.error);
+      navigate("/login", { replace: true });
+    }
+  }, [auth.isAuthenticated, auth.error, navigate, auth.user, auth.isLoading]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background">
+      <div className="flex flex-col items-center gap-4">
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/15 text-primary shadow-lg animate-pulse">
+          <ShieldHalf size={32} />
+        </div>
+        <div className="text-lg font-semibold">인증 완료 중...</div>
+        <p className="text-sm text-muted-foreground">
+          세션을 동기화하고 있습니다.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default AuthCallbackPage;
--- a/baron-sso/adminfront/src/features/auth/AuthGuard.test.tsx
+++ b/baron-sso/adminfront/src/features/auth/AuthGuard.test.tsx
@@ -0,0 +1,56 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import AuthGuard from "./AuthGuard";
+
+const authState = {
+  activeNavigator: undefined,
+  error: undefined as Error | undefined,
+  isAuthenticated: false,
+  isLoading: false,
+  removeUser: vi.fn(async () => undefined),
+};
+
+vi.mock("react-oidc-context", () => ({
+  useAuth: () => authState,
+}));
+
+function renderAuthGuard(initialEntry = "/users") {
+  return render(
+    <MemoryRouter initialEntries={[initialEntry]}>
+      <Routes>
+        <Route path="/" element={<AuthGuard />}>
+          <Route path="users" element={<div>Users outlet</div>} />
+        </Route>
+        <Route path="/login" element={<div>Login outlet</div>} />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+describe("AuthGuard", () => {
+  beforeEach(() => {
+    (
+      window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean }
+    )._IS_TEST_MODE = false;
+    authState.activeNavigator = undefined;
+    authState.error = undefined;
+    authState.isAuthenticated = false;
+    authState.isLoading = false;
+    authState.removeUser.mockClear();
+    window.localStorage.clear();
+  });
+
+  it("clears stale auth state and returns to login when OIDC reports an error", async () => {
+    window.localStorage.setItem("admin_session", "stale-token");
+    authState.error = new Error("stale session");
+
+    renderAuthGuard();
+
+    await waitFor(() => {
+      expect(authState.removeUser).toHaveBeenCalled();
+    });
+    await screen.findByText("Login outlet");
+    expect(window.localStorage.getItem("admin_session")).toBeNull();
+  });
+});
--- a/baron-sso/adminfront/src/features/auth/AuthGuard.tsx
+++ b/baron-sso/adminfront/src/features/auth/AuthGuard.tsx
@@ -0,0 +1,59 @@
+import { useEffect, useRef } from "react";
+import { useAuth } from "react-oidc-context";
+import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
+import { clearStoredAdminAuthSession } from "../../lib/auth";
+
+export default function AuthGuard() {
+  const auth = useAuth();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const handledAuthErrorRef = useRef(false);
+  const isTest =
+    (window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
+      ._IS_TEST_MODE === true;
+
+  useEffect(() => {
+    if (!auth.error || handledAuthErrorRef.current || isTest) {
+      return;
+    }
+
+    handledAuthErrorRef.current = true;
+    clearStoredAdminAuthSession();
+    void Promise.resolve(
+      auth.removeUser ? auth.removeUser() : undefined,
+    ).finally(() => {
+      navigate("/login", { replace: true });
+    });
+  }, [auth, auth.error, isTest, navigate]);
+
+  if (isTest) {
+    return <Outlet />;
+  }
+
+  if (auth.isLoading || auth.activeNavigator) {
+    return <div>Loading...</div>;
+  }
+
+  if (auth.error) {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center p-4 text-center">
+        <div className="mb-4 text-destructive">
+          <h2 className="text-xl font-bold">인증 오류</h2>
+          <p>{auth.error.message}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!auth.isAuthenticated) {
+    const returnTo = `${location.pathname}${location.search}${location.hash}`;
+    return (
+      <Navigate
+        to={`/login?returnTo=${encodeURIComponent(returnTo)}`}
+        replace
+      />
+    );
+  }
+
+  return <Outlet />;
+}
--- a/baron-sso/adminfront/src/features/auth/AuthPage.test.tsx
+++ b/baron-sso/adminfront/src/features/auth/AuthPage.test.tsx
@@ -0,0 +1,38 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it } from "vitest";
+import { createI18nMock } from "../../test/i18nMock";
+import AuthPage from "./AuthPage";
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+function renderPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <AuthPage />
+    </QueryClientProvider>,
+  );
+}
+
+describe("AuthPage", () => {
+  beforeEach(() => {
+    window.localStorage.setItem("locale", "en");
+  });
+
+  it("renders localized auth guard labels in English", () => {
+    renderPage();
+
+    expect(screen.getByText("Auth Guard")).toBeInTheDocument();
+    expect(screen.getByText("ReBAC permission checker")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Check permission" }),
+    ).toBeInTheDocument();
+  });
+});
--- a/baron-sso/adminfront/src/features/auth/AuthPage.tsx
+++ b/baron-sso/adminfront/src/features/auth/AuthPage.tsx
@@ -0,0 +1,24 @@
+import { ShieldHalf } from "lucide-react";
+import { PageHeader } from "../../../../common/core/components/page";
+import { t } from "../../lib/i18n";
+import PermissionChecker from "./components/PermissionChecker";
+
+function AuthPage() {
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        titleAs="h2"
+        icon={<ShieldHalf size={20} />}
+        title={t("ui.admin.auth_guard.title", "Auth Guard")}
+        description={t(
+          "ui.admin.auth_guard.subtitle",
+          "Verify admin privileges and ReBAC relationships against the policy engine.",
+        )}
+      />
+
+      <PermissionChecker />
+    </div>
+  );
+}
+
+export default AuthPage;
--- a/baron-sso/adminfront/src/features/auth/LoginPage.test.tsx
+++ b/baron-sso/adminfront/src/features/auth/LoginPage.test.tsx
@@ -0,0 +1,76 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import LoginPage from "./LoginPage";
+
+const mockSigninRedirect = vi.fn();
+const mockUseAuth = vi.fn();
+
+vi.mock("react-oidc-context", () => ({
+  useAuth: () => mockUseAuth(),
+}));
+
+function renderLoginPage(initialEntry: string) {
+  return render(
+    <MemoryRouter initialEntries={[initialEntry]}>
+      <LoginPage />
+    </MemoryRouter>,
+  );
+}
+
+describe("LoginPage", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "crypto", {
+      configurable: true,
+      value: {},
+    });
+    Object.defineProperty(window, "isSecureContext", {
+      configurable: true,
+      value: false,
+    });
+    mockSigninRedirect.mockReset();
+    mockUseAuth.mockReturnValue({
+      activeNavigator: undefined,
+      error: undefined,
+      isAuthenticated: false,
+      isLoading: false,
+      signinRedirect: mockSigninRedirect,
+    });
+  });
+
+  it("shows an actionable error instead of starting PKCE when WebCrypto is unavailable", async () => {
+    renderLoginPage("/login?returnTo=%2F");
+
+    await userEvent.click(
+      screen.getByRole("button", { name: /SSO 계정으로 로그인/i }),
+    );
+
+    expect(mockSigninRedirect).not.toHaveBeenCalled();
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      /SSO 로그인을 시작할 수 없습니다/,
+    );
+  });
+
+  it("preserves the returnTo query when starting SSO manually", async () => {
+    Object.defineProperty(window, "crypto", {
+      configurable: true,
+      value: { subtle: {} },
+    });
+    Object.defineProperty(window, "isSecureContext", {
+      configurable: true,
+      value: true,
+    });
+    renderLoginPage("/login?returnTo=%2Fusers%3Fpage%3D2");
+
+    await userEvent.click(
+      screen.getByRole("button", { name: /SSO 계정으로 로그인/i }),
+    );
+
+    expect(mockSigninRedirect).toHaveBeenCalledWith({
+      state: {
+        returnTo: "/users?page=2",
+      },
+    });
+  });
+});
--- a/baron-sso/adminfront/src/features/auth/LoginPage.tsx
+++ b/baron-sso/adminfront/src/features/auth/LoginPage.tsx
@@ -0,0 +1,206 @@
+import { AlertTriangle, ExternalLink, LogIn, ShieldHalf } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useAuth } from "react-oidc-context";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { Button } from "../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+import { canStartBrowserPkceLogin } from "../../lib/authConfig";
+import { debugLog } from "../../lib/debugLog";
+
+const insecurePkceMessage =
+  "이 주소에서는 브라우저 보안 정책 때문에 SSO 로그인을 시작할 수 없습니다. HTTPS 또는 localhost로 접속하거나, 내부망/host.docker.internal 개발 접속은 Chrome의 insecure-origin secure context 옵션에 실제 auth UI origin(예: http://host.docker.internal:5000)을 정확히 등록해 주세요.";
+
+function isPkceSetupFailure(error: unknown) {
+  const message = error instanceof Error ? error.message : String(error);
+  return /Crypto\.subtle|WebCrypto|PKCE|secure context|subtle/i.test(message);
+}
+
+function LoginPage() {
+  const auth = useAuth();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const autoStartedRef = useRef(false);
+  const [loginError, setLoginError] = useState<string | null>(null);
+  const returnTo = searchParams.get("returnTo") || "/";
+  const shouldAutoLogin = searchParams.get("auto") === "1";
+  const authErrorMessage = useMemo(() => {
+    const message = auth.error?.message;
+    if (!message) {
+      return null;
+    }
+    if (message.includes("Crypto.subtle")) {
+      return insecurePkceMessage;
+    }
+    return message;
+  }, [auth.error?.message]);
+  const visibleLoginError = loginError || authErrorMessage;
+
+  useEffect(() => {
+    debugLog("[LoginPage] Auth state check:", {
+      isAuthenticated: auth.isAuthenticated,
+      isLoading: auth.isLoading,
+      returnTo,
+    });
+    if (auth.isAuthenticated) {
+      console.info(
+        "[LoginPage] User is authenticated, redirecting to",
+        returnTo,
+      );
+      navigate(returnTo, { replace: true });
+    }
+  }, [auth.isAuthenticated, navigate, returnTo, auth.isLoading]);
+
+  useEffect(() => {
+    if (!shouldAutoLogin) {
+      return;
+    }
+    if (autoStartedRef.current || auth.isLoading || auth.activeNavigator) {
+      return;
+    }
+    if (!canStartBrowserPkceLogin()) {
+      setLoginError(insecurePkceMessage);
+      return;
+    }
+
+    autoStartedRef.current = true;
+    void auth
+      .signinRedirect({
+        state: {
+          returnTo,
+        },
+      })
+      .catch((error) => {
+        if (isPkceSetupFailure(error)) {
+          setLoginError(insecurePkceMessage);
+          return;
+        }
+        console.error("Auto login redirect failed", error);
+      });
+  }, [auth, auth.activeNavigator, auth.isLoading, returnTo, shouldAutoLogin]);
+
+  const handleSSOLogin = async () => {
+    try {
+      setLoginError(null);
+      if (!canStartBrowserPkceLogin()) {
+        setLoginError(insecurePkceMessage);
+        return;
+      }
+      await auth.signinRedirect({
+        state: {
+          returnTo,
+        },
+      });
+    } catch (error) {
+      if (isPkceSetupFailure(error)) {
+        setLoginError(insecurePkceMessage);
+        return;
+      }
+      console.error("Redirect login failed", error);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/10 via-background to-background">
+      <div className="w-full max-w-md space-y-8">
+        <div className="flex flex-col items-center justify-center space-y-4 text-center">
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/15 text-primary shadow-[0_20px_50px_rgba(54,211,153,0.3)]">
+            <ShieldHalf size={32} />
+          </div>
+          <div className="space-y-2">
+            <h1 className="text-3xl font-bold tracking-tight">Baron SSO</h1>
+            <p className="text-sm text-muted-foreground uppercase tracking-[0.2em]">
+              Admin Control Plane
+            </p>
+          </div>
+        </div>
+
+        {auth.error && (
+          <div className="rounded-lg bg-destructive/15 p-4 text-sm text-destructive border border-destructive/20 animate-in fade-in slide-in-from-top-1">
+            <div className="font-bold flex items-center gap-2 mb-1">
+              <ShieldHalf size={16} />
+              인증 오류가 발생했습니다
+            </div>
+            <p className="opacity-90">{auth.error.message}</p>
+            <Button
+              variant="ghost"
+              className="p-0 h-auto text-destructive underline mt-2 hover:bg-transparent"
+              onClick={() => {
+                void handleSSOLogin();
+              }}
+            >
+              다시 시도하기
+            </Button>
+          </div>
+        )}
+
+        <Card className="border-primary/20 bg-card/50 backdrop-blur-xl shadow-2xl">
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl flex items-center gap-2">
+              <LogIn size={20} className="text-primary" />
+              관리자 로그인
+            </CardTitle>
+            <CardDescription>
+              Baron 통합 인증(SSO)을 통해 관리자 페이지에 접속합니다.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="pt-4 pb-8 space-y-3">
+            <Button
+              onClick={handleSSOLogin}
+              className="w-full h-14 text-lg font-semibold flex gap-3 shadow-lg"
+              disabled={auth.isLoading}
+            >
+              {auth.isLoading ? (
+                <>
+                  <div className="h-5 w-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                  로그인 진행 중...
+                </>
+              ) : (
+                <>
+                  <ShieldHalf size={22} />
+                  SSO 계정으로 로그인
+                  <ExternalLink size={16} className="opacity-50" />
+                </>
+              )}
+            </Button>
+
+            {visibleLoginError ? (
+              <div
+                role="alert"
+                className="flex gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm leading-5 text-destructive"
+              >
+                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+                <span>{visibleLoginError}</span>
+              </div>
+            ) : null}
+
+            <p className="mt-6 text-xs text-center text-muted-foreground leading-relaxed">
+              관리자 전역 세션은 보안을 위해 15분간 유지됩니다.
+              <br />
+              민감한 작업 시 재인증을 요구할 수 있습니다.
+            </p>
+          </CardContent>
+        </Card>
+
+        <div className="flex justify-center gap-4">
+          <div className="h-1 w-1 rounded-full bg-primary/30" />
+          <div className="h-1 w-1 rounded-full bg-primary/30" />
+          <div className="h-1 w-1 rounded-full bg-primary/30" />
+        </div>
+
+        <p className="px-8 text-center text-sm text-muted-foreground">
+          인증 정보가 없거나 로그인이 되지 않는 경우
+          <br />
+          시스템 관리자에게 문의하세요.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default LoginPage;
--- a/baron-sso/adminfront/src/features/auth/components/PermissionChecker.tsx
+++ b/baron-sso/adminfront/src/features/auth/components/PermissionChecker.tsx
@@ -0,0 +1,188 @@
+import { useMutation } from "@tanstack/react-query";
+import { CheckCircle2, XCircle } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import apiClient from "../../../lib/apiClient";
+import { t } from "../../../lib/i18n";
+
+type CheckPermissionResponse = {
+  allowed: boolean;
+  query: {
+    namespace: string;
+    object: string;
+    relation: string;
+    subject: string;
+  };
+};
+
+function PermissionChecker() {
+  const [namespace, setNamespace] = useState("Tenant");
+  const [object, setObject] = useState("");
+  const [relation, setRelation] = useState("manage");
+  const [subject, setSubject] = useState("");
+
+  const checkMutation = useMutation({
+    mutationFn: async () => {
+      const { data } = await apiClient.get<CheckPermissionResponse>(
+        "/v1/admin/debug/check-permission",
+        {
+          params: { namespace, object, relation, subject },
+        },
+      );
+      return data;
+    },
+  });
+
+  const result = checkMutation.data;
+
+  return (
+    <Card className="border-primary/20 bg-[var(--color-panel)]">
+      <CardHeader>
+        <CardTitle className="text-lg font-bold">
+          {t("ui.admin.auth_guard.checker.title", "ReBAC permission checker")}
+        </CardTitle>
+        <CardDescription>
+          {t(
+            "ui.admin.auth_guard.checker.description",
+            "Check in real time whether a subject has access to a resource through Ory Keto.",
+          )}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <div className="space-y-2">
+            <Label>
+              {t("ui.admin.auth_guard.checker.namespace.label", "Namespace")}
+            </Label>
+            <select
+              id="permission-checker-namespace"
+              name="permission-checker-namespace"
+              value={namespace}
+              onChange={(e) => setNamespace(e.target.value)}
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            >
+              <option value="Tenant">
+                {t("ui.admin.auth_guard.checker.namespace.tenant", "Tenant")}
+              </option>
+              <option value="TenantGroup">
+                {t(
+                  "ui.admin.auth_guard.checker.namespace.tenant_group",
+                  "TenantGroup",
+                )}
+              </option>
+              <option value="RelyingParty">
+                {t(
+                  "ui.admin.auth_guard.checker.namespace.relying_party",
+                  "RelyingParty",
+                )}
+              </option>
+              <option value="System">
+                {t("ui.admin.auth_guard.checker.namespace.system", "System")}
+              </option>
+            </select>
+          </div>
+          <div className="space-y-2">
+            <Label>
+              {t("ui.admin.auth_guard.checker.relation", "Relation")}
+            </Label>
+            <Input
+              placeholder={t(
+                "ui.admin.auth_guard.checker.relation_placeholder",
+                "view, manage, admins...",
+              )}
+              value={relation}
+              onChange={(e) => setRelation(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>
+              {t("ui.admin.auth_guard.checker.object_id", "Object ID")}
+            </Label>
+            <Input
+              placeholder={t(
+                "ui.admin.auth_guard.checker.object_id_placeholder",
+                "Tenant UUID, etc.",
+              )}
+              value={object}
+              onChange={(e) => setObject(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>
+              {t("ui.admin.auth_guard.checker.subject", "Subject (User:ID)")}
+            </Label>
+            <Input
+              placeholder={t(
+                "ui.admin.auth_guard.checker.subject_placeholder",
+                "User:uuid or Namespace:ID#Relation",
+              )}
+              value={subject}
+              onChange={(e) => setSubject(e.target.value)}
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-center">
+          <Button
+            onClick={() => checkMutation.mutate()}
+            disabled={!object || !subject || checkMutation.isPending}
+            className="w-full px-12 md:w-auto"
+          >
+            {checkMutation.isPending
+              ? t("ui.admin.auth_guard.checker.checking", "Checking...")
+              : t("ui.admin.auth_guard.checker.check", "Check permission")}
+          </Button>
+        </div>
+
+        {checkMutation.isSuccess && result && (
+          <div
+            className={`flex flex-col items-center justify-center gap-3 rounded-xl border-2 p-6 animate-in zoom-in duration-300 ${
+              result.allowed
+                ? "border-green-500/50 bg-green-500/10 text-green-600"
+                : "border-destructive/50 bg-destructive/10 text-destructive"
+            }`}
+          >
+            {result.allowed ? (
+              <>
+                <CheckCircle2 size={48} />
+                <div className="text-lg font-bold">
+                  {t("ui.admin.auth_guard.checker.allowed", "Access ALLOWED")}
+                </div>
+                <p className="text-center text-sm opacity-80">
+                  {t(
+                    "ui.admin.auth_guard.checker.allowed_description",
+                    "The subject has access to the requested resource, including inherited permissions.",
+                  )}
+                </p>
+              </>
+            ) : (
+              <>
+                <XCircle size={48} />
+                <div className="text-lg font-bold">
+                  {t("ui.admin.auth_guard.checker.denied", "Access DENIED")}
+                </div>
+                <p className="text-center text-sm opacity-80">
+                  {t(
+                    "ui.admin.auth_guard.checker.denied_description",
+                    "The subject does not have access to the requested resource.",
+                  )}
+                </p>
+              </>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default PermissionChecker;
--- a/baron-sso/adminfront/src/features/coverage/adminAuditAuth.test.tsx
+++ b/baron-sso/adminfront/src/features/coverage/adminAuditAuth.test.tsx
@@ -0,0 +1,192 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import type React from "react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18nMock } from "../../test/i18nMock";
+import AuditLogsPage from "../audit/AuditLogsPage";
+import AuthCallbackPage from "../auth/AuthCallbackPage";
+import AuthGuard from "../auth/AuthGuard";
+
+const authState = {
+  isAuthenticated: true,
+  isLoading: false,
+  activeNavigator: undefined as string | undefined,
+  error: null as Error | null,
+  user: {
+    access_token: "access-token",
+    state: undefined as unknown,
+  },
+};
+
+vi.mock("react-oidc-context", () => ({
+  useAuth: () => authState,
+}));
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+vi.mock("../../../../common/core/components/audit", () => ({
+  AuditLogTable: ({
+    logs,
+  }: {
+    logs: Array<{ user_id: string; event_type: string }>;
+  }) => (
+    <div>
+      {logs.map((log) => (
+        <div key={`${log.user_id}-${log.event_type}`}>
+          <span>{log.user_id}</span>
+          <span>{log.event_type}</span>
+        </div>
+      ))}
+    </div>
+  ),
+}));
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchAuditLogs: vi.fn(async () => ({
+    items: [
+      {
+        event_id: "event-1",
+        timestamp: "2026-05-01T00:00:00Z",
+        user_id: "admin-1",
+        event_type: "USER_UPDATE",
+        status: "success",
+        ip_address: "127.0.0.1",
+        user_agent: "Vitest",
+        details: JSON.stringify({ action: "USER_UPDATE", actor: "Admin" }),
+      },
+      {
+        event_id: "event-2",
+        timestamp: "2026-05-01T01:00:00Z",
+        user_id: "admin-2",
+        event_type: "LOGIN_FAILED",
+        status: "failure",
+        ip_address: "127.0.0.2",
+        user_agent: "Vitest",
+        details: "{}",
+      },
+    ],
+    limit: 50,
+  })),
+}));
+
+function renderWithProviders(ui: React.ReactElement, entry = "/") {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[entry]}>{ui}</MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("admin audit and auth coverage smoke", () => {
+  beforeEach(() => {
+    (
+      window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean }
+    )._IS_TEST_MODE = false;
+    authState.isAuthenticated = true;
+    authState.isLoading = false;
+    authState.activeNavigator = undefined;
+    authState.error = null;
+    authState.user = {
+      access_token: "access-token",
+      state: undefined,
+    };
+    window.localStorage.clear();
+  });
+
+  it("renders audit log table with fetched events", async () => {
+    renderWithProviders(<AuditLogsPage />);
+
+    expect(await screen.findByText("감사 로그")).toBeInTheDocument();
+    expect(await screen.findByText("admin-1")).toBeInTheDocument();
+    expect(screen.getByText("USER_UPDATE")).toBeInTheDocument();
+  });
+
+  it("renders AuthGuard loading, error, redirect, test, and outlet states", async () => {
+    authState.isLoading = true;
+    renderWithProviders(
+      <Routes>
+        <Route path="/secure" element={<AuthGuard />}>
+          <Route index element={<div>Secure outlet</div>} />
+        </Route>
+      </Routes>,
+      "/secure",
+    );
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+
+    authState.isLoading = false;
+    authState.error = new Error("OIDC failed");
+    renderWithProviders(
+      <Routes>
+        <Route path="/secure" element={<AuthGuard />}>
+          <Route index element={<div>Secure outlet</div>} />
+        </Route>
+      </Routes>,
+      "/secure",
+    );
+    expect(screen.getByText("인증 오류")).toBeInTheDocument();
+
+    authState.error = null;
+    authState.isAuthenticated = false;
+    renderWithProviders(
+      <Routes>
+        <Route path="/secure" element={<AuthGuard />}>
+          <Route index element={<div>Secure outlet</div>} />
+        </Route>
+        <Route path="/login" element={<div>Login outlet</div>} />
+      </Routes>,
+      "/secure?x=1",
+    );
+    expect(screen.getByText("Login outlet")).toBeInTheDocument();
+
+    (
+      window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean }
+    )._IS_TEST_MODE = true;
+    renderWithProviders(
+      <Routes>
+        <Route path="/secure" element={<AuthGuard />}>
+          <Route index element={<div>Secure outlet</div>} />
+        </Route>
+      </Routes>,
+      "/secure",
+    );
+    expect(screen.getByText("Secure outlet")).toBeInTheDocument();
+  });
+
+  it("stores callback token and navigates by auth result", async () => {
+    authState.isAuthenticated = true;
+    authState.user = {
+      access_token: "callback-token",
+      state: { returnTo: "/users" },
+    };
+
+    renderWithProviders(
+      <Routes>
+        <Route path="/auth/callback" element={<AuthCallbackPage />} />
+        <Route path="/users" element={<div>Users outlet</div>} />
+        <Route path="/login" element={<div>Login outlet</div>} />
+      </Routes>,
+      "/auth/callback",
+    );
+    expect(await screen.findByText("Users outlet")).toBeInTheDocument();
+    expect(window.localStorage.getItem("admin_session")).toBe("callback-token");
+
+    authState.isAuthenticated = false;
+    authState.error = new Error("callback failed");
+    renderWithProviders(
+      <Routes>
+        <Route path="/auth/callback" element={<AuthCallbackPage />} />
+        <Route path="/login" element={<div>Login outlet</div>} />
+      </Routes>,
+      "/auth/callback",
+    );
+    expect(await screen.findByText("Login outlet")).toBeInTheDocument();
+  });
+});
--- a/baron-sso/adminfront/src/features/coverage/adminLargePages.test.tsx
+++ b/baron-sso/adminfront/src/features/coverage/adminLargePages.test.tsx
@@ -0,0 +1,506 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import type React from "react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18nMock } from "../../test/i18nMock";
+import * as adminApi from "../../lib/adminApi";
+import { TenantWorksmobilePage } from "../tenants/routes/TenantWorksmobilePage";
+import TenantListPage from "../tenants/routes/TenantListPage";
+import UserCreatePage from "../users/UserCreatePage";
+import UserDetailPage from "../users/UserDetailPage";
+
+const tenantItems = [
+  {
+    id: "tenant-root",
+    type: "COMPANY_GROUP",
+    name: "한맥 가족",
+    slug: "hanmac-family",
+    description: "root",
+    status: "active",
+    memberCount: 0,
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+  {
+    id: "tenant-company",
+    type: "COMPANY",
+    parentId: "tenant-root",
+    name: "GPDTDC",
+    slug: "gpdtdc",
+    description: "company",
+    status: "active",
+    memberCount: 2,
+    config: {
+      userSchema: [
+        {
+          key: "employee_id",
+          label: "사번",
+          type: "text",
+          required: false,
+        },
+      ],
+    },
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+  {
+    id: "tenant-leaf",
+    type: "ORGANIZATION",
+    parentId: "tenant-company",
+    name: "기술연구팀",
+    slug: "gpdtdc-rnd",
+    description: "leaf",
+    status: "active",
+    memberCount: 1,
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+];
+
+const userDetail = {
+  id: "user-1",
+  email: "engineer@example.com",
+  name: "Engineer User",
+  phone: "010-0000-0000",
+  role: "user",
+  status: "active",
+  tenantSlug: "gpdtdc-rnd",
+  tenantId: "tenant-leaf",
+  department: "기술연구팀",
+  grade: "책임",
+  position: "팀장",
+  jobTitle: "Backend",
+  metadata: {
+    employee_id: "EMP001",
+    sub_email: ["engineer.sub@example.com"],
+  },
+  tenant: tenantItems[2],
+  appointments: [
+    {
+      tenantId: "tenant-leaf",
+      tenantSlug: "gpdtdc-rnd",
+      tenantName: "기술연구팀",
+      isPrimary: true,
+      isOwner: false,
+      isAdmin: false,
+      isManager: true,
+      department: "기술연구팀",
+      grade: "책임",
+      position: "팀장",
+      jobTitle: "Backend",
+      metadata: { employee_id: "EMP001" },
+    },
+  ],
+  createdAt: "2026-05-01T00:00:00Z",
+  updatedAt: "2026-05-02T00:00:00Z",
+};
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+vi.mock("../../components/auth/RoleGuard", () => ({
+  RoleGuard: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchMe: vi.fn(async () => ({
+    id: "admin-1",
+    role: "super_admin",
+    name: "Admin User",
+    email: "admin@example.com",
+  })),
+  fetchAllTenants: vi.fn(async () => ({
+    items: tenantItems,
+    total: tenantItems.length,
+  })),
+  fetchTenants: vi.fn(async () => ({
+    items: tenantItems,
+    limit: 500,
+    offset: 0,
+    total: tenantItems.length,
+    nextCursor: null,
+  })),
+  fetchTenant: vi.fn(async (id: string) => {
+    return tenantItems.find((tenant) => tenant.id === id) ?? tenantItems[1];
+  }),
+  createUser: vi.fn(async () => ({
+    id: "created-user",
+    email: "created@example.com",
+    generatedPassword: "GeneratedPassword!1",
+  })),
+  fetchUser: vi.fn(async () => userDetail),
+  fetchUserRpHistory: vi.fn(async () => [
+    {
+      client_id: "orgfront",
+      client_name: "OrgFront",
+      last_login_at: "2026-05-01T00:00:00Z",
+      login_count: 3,
+    },
+  ]),
+  fetchGlobalCustomClaimDefinitions: vi.fn(async () => ({ items: [] })),
+  fetchPasswordPolicy: vi.fn(async () => ({
+    minLength: 12,
+    lowercase: true,
+    uppercase: true,
+    number: true,
+    nonAlphanumeric: true,
+    minCharacterTypes: 3,
+  })),
+  updateUser: vi.fn(async () => userDetail),
+  deleteUser: vi.fn(async () => undefined),
+  updateTenant: vi.fn(async () => tenantItems[1]),
+  deleteTenantsBulk: vi.fn(async () => ({ deleted: 1 })),
+  exportTenantsCSV: vi.fn(async () => new Blob(["name,slug\nGPDTDC,gpdtdc"])),
+  importTenantsCSV: vi.fn(async () => ({
+    created: 1,
+    updated: 0,
+    failed: 0,
+    errors: [],
+  })),
+  fetchWorksmobileOverview: vi.fn(async () => ({
+    tenant: tenantItems[1],
+    config: {
+      enabled: true,
+      tokenConfigured: true,
+      adminTenantId: "works-admin",
+      domainMappings: { "example.com": 1001 },
+    },
+    recentJobs: [
+      {
+        id: "job-1",
+        resourceType: "USER",
+        resourceId: "user-1",
+        action: "SYNC",
+        status: "failed",
+        retryCount: 1,
+        lastError: "temporary failure",
+        createdAt: "2026-05-01T00:00:00Z",
+        updatedAt: "2026-05-01T00:10:00Z",
+      },
+    ],
+  })),
+  fetchWorksmobileComparison: vi.fn(async () => ({
+    users: [
+      {
+        resourceType: "USER",
+        baronId: "user-1",
+        baronName: "Engineer User",
+        baronEmail: "engineer@example.com",
+        baronPrimaryOrgId: "tenant-leaf",
+        baronPrimaryOrgName: "기술연구팀",
+        worksmobileId: "works-user-1",
+        worksmobileName: "Engineer User",
+        worksmobileEmail: "engineer@example.com",
+        worksmobileDomainId: 1001,
+        worksmobilePrimaryOrgId: "works-org-1",
+        worksmobilePrimaryOrgName: "기술연구팀",
+        status: "matched",
+      },
+      {
+        resourceType: "USER",
+        baronId: "user-2",
+        baronName: "New User",
+        baronEmail: "new@example.com",
+        worksmobileJobStatus: "failed",
+        worksmobileJobRetryCount: 2,
+        worksmobileLastError: "worksmobile api failed",
+        status: "missing_in_worksmobile",
+      },
+      {
+        resourceType: "USER",
+        baronId: "user-3",
+        baronName: "Next User",
+        baronEmail: "next@example.com",
+        status: "missing_in_worksmobile",
+      },
+    ],
+    groups: [
+      {
+        resourceType: "ORG_UNIT",
+        baronId: "tenant-leaf",
+        baronSlug: "gpdtdc-rnd",
+        baronName: "기술연구팀",
+        worksmobileId: "works-org-1",
+        worksmobileName: "기술연구팀",
+        status: "needs_update",
+      },
+    ],
+  })),
+  fetchWorksmobileCredentialBatches: vi.fn(async () => [
+    {
+      batchId: "credential-batch-1",
+      operation: "worksmobile_user_sync",
+      userCount: 1,
+      processedCount: 1,
+      failedCount: 1,
+      hasPasswords: true,
+      failures: [
+        {
+          userId: "failed-user",
+          email: "failed-user@samaneng.com",
+          status: "failed",
+          retryCount: 2,
+          lastError: "worksmobile api failed",
+          updatedAt: "2026-06-01T04:05:00Z",
+        },
+      ],
+      createdAt: "2026-06-01T04:00:00Z",
+      updatedAt: "2026-06-01T04:00:00Z",
+    },
+    {
+      batchId: "credential-batch-pending",
+      operation: "worksmobile_user_sync",
+      userCount: 2,
+      pendingCount: 1,
+      processingCount: 1,
+      processedCount: 0,
+      failedCount: 0,
+      hasPasswords: true,
+      createdAt: "2026-06-01T04:10:00Z",
+      updatedAt: "2026-06-01T04:10:00Z",
+    },
+  ]),
+  enqueueWorksmobileBackfillDryRun: vi.fn(async () => ({ id: "job-dry" })),
+  retryWorksmobileJob: vi.fn(async () => ({ id: "job-retry" })),
+  downloadWorksmobileInitialPasswordsCSV: vi.fn(async () => ({
+    blob: new Blob(["id"]),
+    filename: "worksmobile_initial_passwords.csv",
+  })),
+  enqueueWorksmobileOrgUnitSync: vi.fn(async () => ({ id: "job-org" })),
+  enqueueWorksmobileOrgUnitDelete: vi.fn(async () => ({ id: "job-delete" })),
+  enqueueWorksmobileUserSync: vi.fn(async () => ({ id: "job-user" })),
+  resetWorksmobileUserPassword: vi.fn(async () => ({ id: "job-reset" })),
+  deleteWorksmobileCredentialBatchPasswords: vi.fn(async () => ({
+    batchId: "credential-batch-1",
+    userCount: 1,
+    hasPasswords: false,
+  })),
+}));
+
+function renderWithProviders(ui: React.ReactElement, entry = "/") {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[entry]}>{ui}</MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("adminfront large page coverage smoke", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    if (typeof window !== "undefined") {
+      (window as any)._IS_TEST_MODE = true;
+    }
+  });
+
+  it("renders user creation form with tenant context", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route path="/users/new" element={<UserCreatePage />} />
+      </Routes>,
+      "/users/new?tenantSlug=gpdtdc-rnd",
+    );
+
+    expect(await screen.findByText("사용자 추가")).toBeInTheDocument();
+    expect(screen.getByLabelText("이메일")).toBeInTheDocument();
+  });
+
+  it("renders user detail form and RP history", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route path="/users/:id" element={<UserDetailPage />} />
+      </Routes>,
+      "/users/user-1",
+    );
+
+    expect(await screen.findByDisplayValue("Engineer User")).toBeInTheDocument();
+    expect(screen.getAllByText("기술연구팀").length).toBeGreaterThan(0);
+    expect(screen.getByDisplayValue("engineer@example.com")).toBeInTheDocument();
+  });
+
+  it("renders tenant list hierarchy", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route path="/tenants" element={<TenantListPage />} />
+      </Routes>,
+      "/tenants",
+    );
+
+    expect(await screen.findByText("GPDTDC")).toBeInTheDocument();
+    expect(screen.getByText("기술연구팀")).toBeInTheDocument();
+  });
+
+  it("renders worksmobile comparison screens", async () => {
+    cleanup();
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/worksmobile"
+          element={<TenantWorksmobilePage />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/worksmobile",
+    );
+
+    expect(await screen.findByText("Worksmobile 연동")).toBeInTheDocument();
+    expect(await screen.findByText("Baron / Works 비교")).toBeInTheDocument();
+    expect(
+      await screen.findByText("최근 실패: worksmobile api failed"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Backfill Dry-run")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "초기 비밀번호 CSV" })).toBeNull();
+  });
+
+  it("does not automatically download the selected Worksmobile user credential batch after create enqueue", async () => {
+    vi.spyOn(window.URL, "createObjectURL").mockReturnValue("blob:test");
+    vi.spyOn(window.URL, "revokeObjectURL").mockImplementation(() => {});
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/worksmobile"
+          element={<TenantWorksmobilePage />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/worksmobile",
+    );
+
+    await screen.findByText("New User");
+    fireEvent.click(screen.getByRole("checkbox", { name: "New User 선택" }));
+    fireEvent.click(
+      screen.getByRole("button", { name: "선택 구성원 WORKS에 생성" }),
+    );
+    fireEvent.change(screen.getByLabelText("초기 비밀번호"), {
+      target: { value: "InitialPassword!1" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "생성 작업 등록" }));
+
+    await waitFor(() =>
+      expect(adminApi.enqueueWorksmobileUserSync).toHaveBeenCalledWith(
+        "tenant-company",
+        "user-2",
+        undefined,
+        "InitialPassword!1",
+      ),
+    );
+    expect(adminApi.downloadWorksmobileInitialPasswordsCSV).not.toHaveBeenCalled();
+  });
+
+  it("continues selected Worksmobile user create enqueue after one row fails", async () => {
+    vi.mocked(adminApi.enqueueWorksmobileUserSync)
+      .mockRejectedValueOnce(new Error("sync failed"))
+      .mockResolvedValueOnce({ id: "job-user-3" } as never);
+    vi.spyOn(window.URL, "createObjectURL").mockReturnValue("blob:test");
+    vi.spyOn(window.URL, "revokeObjectURL").mockImplementation(() => {});
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/worksmobile"
+          element={<TenantWorksmobilePage />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/worksmobile",
+    );
+
+    await screen.findByText("New User");
+    fireEvent.click(screen.getByRole("checkbox", { name: "New User 선택" }));
+    fireEvent.click(screen.getByRole("checkbox", { name: "Next User 선택" }));
+    fireEvent.click(
+      screen.getByRole("button", { name: "선택 구성원 WORKS에 생성" }),
+    );
+    fireEvent.change(screen.getByLabelText("초기 비밀번호"), {
+      target: { value: "InitialPassword!1" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "생성 작업 등록" }));
+
+    await waitFor(() =>
+      expect(adminApi.enqueueWorksmobileUserSync).toHaveBeenCalledTimes(2),
+    );
+    expect(adminApi.enqueueWorksmobileUserSync).toHaveBeenNthCalledWith(
+      1,
+      "tenant-company",
+      "user-2",
+      undefined,
+      "InitialPassword!1",
+    );
+    expect(adminApi.enqueueWorksmobileUserSync).toHaveBeenNthCalledWith(
+      2,
+      "tenant-company",
+      "user-3",
+      undefined,
+      "InitialPassword!1",
+    );
+    expect(adminApi.downloadWorksmobileInitialPasswordsCSV).not.toHaveBeenCalled();
+  });
+
+  it("renders and retries Worksmobile jobs from history", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/worksmobile"
+          element={<TenantWorksmobilePage />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/worksmobile",
+    );
+
+    fireEvent.click(screen.getByRole("tab", { name: "이력" }));
+    expect((await screen.findAllByText("user-1")).length).toBeGreaterThan(0);
+    expect(screen.getByText("failed")).toBeInTheDocument();
+
+    fireEvent.click(screen.getAllByRole("button", { name: "" })[0]);
+    await waitFor(() =>
+      expect(adminApi.retryWorksmobileJob).toHaveBeenCalledWith(
+        "tenant-company",
+        "job-1",
+      ),
+    );
+  });
+
+  it("opens Worksmobile password management for matched users", async () => {
+    const openSpy = vi.spyOn(window, "open").mockReturnValue(null);
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/worksmobile"
+          element={<TenantWorksmobilePage />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/worksmobile",
+    );
+
+    await screen.findByText("Worksmobile 연동");
+    fireEvent.click(screen.getAllByRole("button", { name: "양쪽 다 있음" })[0]);
+    await screen.findAllByText("Engineer User");
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "Engineer User 비밀번호 관리",
+      }),
+    );
+
+    expect(openSpy).toHaveBeenCalledWith(
+      expect.stringContaining(
+        "https://auth.worksmobile.com/integrate/password/manage",
+      ),
+      "_blank",
+      "noopener,noreferrer",
+    );
+    const [url] = openSpy.mock.calls[0] ?? [];
+    const parsed = new URL(String(url));
+    expect(parsed.searchParams.get("targetUserTenantId")).toBe("works-admin");
+    expect(parsed.searchParams.get("targetUserDomainId")).toBe("1001");
+    expect(parsed.searchParams.get("targetUserIdNo")).toBe("works-user-1");
+  });
+});
--- a/baron-sso/adminfront/src/features/coverage/adminTenantDetailPages.test.tsx
+++ b/baron-sso/adminfront/src/features/coverage/adminTenantDetailPages.test.tsx
@@ -0,0 +1,129 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import type React from "react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18nMock } from "../../test/i18nMock";
+import TenantCreatePage from "../tenants/routes/TenantCreatePage";
+import { TenantProfilePage } from "../tenants/routes/TenantProfilePage";
+import { TenantSchemaPage } from "../tenants/routes/TenantSchemaPage";
+
+const tenants = [
+  {
+    id: "tenant-root",
+    type: "COMPANY_GROUP",
+    name: "한맥 가족",
+    slug: "hanmac-family",
+    description: "",
+    status: "active",
+    memberCount: 0,
+    domains: ["hmac.kr"],
+    config: { visibility: "public" },
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+  {
+    id: "tenant-company",
+    type: "COMPANY",
+    parentId: "tenant-root",
+    name: "GPDTDC",
+    slug: "gpdtdc",
+    description: "실 조직",
+    status: "active",
+    memberCount: 2,
+    domains: ["gpdtdc.example.com"],
+    config: {
+      visibility: "public",
+      userSchema: [
+        {
+          key: "employee_id",
+          label: "사번",
+          type: "text",
+          required: false,
+          adminOnly: false,
+          isLoginId: true,
+          indexed: true,
+        },
+      ],
+    },
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+];
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchMe: vi.fn(async () => ({
+    id: "admin-1",
+    role: "super_admin",
+  })),
+  fetchAllTenants: vi.fn(async () => ({
+    items: tenants,
+    total: tenants.length,
+  })),
+  fetchTenant: vi.fn(async (id: string) => {
+    return tenants.find((tenant) => tenant.id === id) ?? tenants[1];
+  }),
+  createTenant: vi.fn(async () => tenants[1]),
+  updateTenant: vi.fn(async () => tenants[1]),
+  deleteTenant: vi.fn(async () => undefined),
+  approveTenant: vi.fn(async () => tenants[1]),
+}));
+
+function renderWithProviders(ui: React.ReactElement, entry: string) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[entry]}>{ui}</MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("admin tenant detail page coverage smoke", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+  });
+
+  it("renders tenant create page with parent context", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route path="/tenants/new" element={<TenantCreatePage />} />
+      </Routes>,
+      "/tenants/new?parentId=tenant-root",
+    );
+
+    expect(await screen.findByText("테넌트 생성")).toBeInTheDocument();
+    expect(screen.getByText("Tenant Profile")).toBeInTheDocument();
+    expect(screen.getByText("정책 메모")).toBeInTheDocument();
+  });
+
+  it("renders tenant profile and schema management pages", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId"
+          element={
+            <>
+              <TenantProfilePage />
+              <TenantSchemaPage />
+            </>
+          }
+        />
+      </Routes>,
+      "/tenants/tenant-company",
+    );
+
+    expect(await screen.findByDisplayValue("GPDTDC")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("gpdtdc")).toBeInTheDocument();
+    expect(await screen.findByText("사용자 스키마 확장")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("employee_id")).toBeInTheDocument();
+  });
+});
--- a/baron-sso/adminfront/src/features/coverage/adminTenantGroupsPage.test.tsx
+++ b/baron-sso/adminfront/src/features/coverage/adminTenantGroupsPage.test.tsx
@@ -0,0 +1,116 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import type React from "react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18nMock } from "../../test/i18nMock";
+import TenantGroupsPage from "../tenants/routes/TenantGroupsPage";
+
+const tenant = {
+  id: "tenant-company",
+  type: "COMPANY",
+  name: "GPDTDC",
+  slug: "gpdtdc",
+  description: "",
+  status: "active",
+  memberCount: 2,
+  createdAt: "2026-05-01T00:00:00Z",
+  updatedAt: "2026-05-01T00:00:00Z",
+};
+
+const members = [
+  {
+    id: "user-1",
+    name: "Member User",
+    email: "member@example.com",
+  },
+];
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchTenant: vi.fn(async () => tenant),
+  fetchUsers: vi.fn(async () => ({
+    items: [
+      {
+        id: "user-1",
+        name: "Member User",
+        email: "member@example.com",
+        role: "user",
+        status: "active",
+      },
+      {
+        id: "user-2",
+        name: "Candidate User",
+        email: "candidate@example.com",
+        role: "user",
+        status: "active",
+      },
+    ],
+    total: 2,
+  })),
+  fetchGroups: vi.fn(async () => [
+    {
+      id: "group-root",
+      tenantId: "tenant-company",
+      name: "연구소",
+      description: "root group",
+      members,
+      createdAt: "2026-05-01T00:00:00Z",
+      updatedAt: "2026-05-01T00:00:00Z",
+    },
+    {
+      id: "group-child",
+      tenantId: "tenant-company",
+      parentId: "group-root",
+      name: "플랫폼팀",
+      description: "child group",
+      members: [],
+      createdAt: "2026-05-01T00:00:00Z",
+      updatedAt: "2026-05-01T00:00:00Z",
+    },
+  ]),
+  createGroup: vi.fn(async () => undefined),
+  deleteGroup: vi.fn(async () => undefined),
+  addGroupMember: vi.fn(async () => undefined),
+  removeGroupMember: vi.fn(async () => undefined),
+}));
+
+function renderWithProviders(ui: React.ReactElement, entry: string) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[entry]}>{ui}</MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("TenantGroupsPage coverage smoke", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+  });
+
+  it("renders group hierarchy and selected group members", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/groups"
+          element={<TenantGroupsPage />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/groups",
+    );
+
+    expect((await screen.findAllByText("연구소")).length).toBeGreaterThan(0);
+    expect(screen.getAllByText("플랫폼팀").length).toBeGreaterThan(0);
+    expect(screen.getByText("새 그룹 생성")).toBeInTheDocument();
+    expect(screen.getByText("조직 단위 레벨")).toBeInTheDocument();
+  });
+});
--- a/baron-sso/adminfront/src/features/coverage/adminTenantTabs.test.tsx
+++ b/baron-sso/adminfront/src/features/coverage/adminTenantTabs.test.tsx
@@ -0,0 +1,196 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type React from "react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18nMock } from "../../test/i18nMock";
+import { TenantAdminsAndOwnersTab } from "../tenants/routes/TenantAdminsAndOwnersTab";
+import TenantUserGroupsTab from "../user-groups/routes/TenantUserGroupsTab";
+
+const exportUsersCSVMock = vi.hoisted(() =>
+  vi.fn(async () => ({
+    blob: new Blob(["email,name\nmember@example.com,Member User\n"], {
+      type: "text/csv",
+    }),
+    filename: "users_export_20260609.csv",
+  })),
+);
+
+const tenants = [
+  {
+    id: "tenant-root",
+    type: "COMPANY_GROUP",
+    name: "한맥 가족",
+    slug: "hanmac-family",
+    description: "",
+    status: "active",
+    memberCount: 0,
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+  {
+    id: "tenant-company",
+    type: "COMPANY",
+    parentId: "tenant-root",
+    name: "GPDTDC",
+    slug: "gpdtdc",
+    description: "",
+    status: "active",
+    memberCount: 2,
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+  {
+    id: "tenant-leaf",
+    type: "ORGANIZATION",
+    parentId: "tenant-company",
+    name: "기술연구팀",
+    slug: "gpdtdc-rnd",
+    description: "",
+    status: "active",
+    memberCount: 1,
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+];
+
+const users = [
+  {
+    id: "user-owner",
+    name: "Owner User",
+    email: "owner@example.com",
+    role: "tenant_admin",
+    status: "active",
+  },
+  {
+    id: "user-admin",
+    name: "Admin User",
+    email: "admin@example.com",
+    role: "tenant_admin",
+    status: "active",
+  },
+  {
+    id: "user-member",
+    name: "Member User",
+    email: "member@example.com",
+    role: "user",
+    status: "active",
+    tenantSlug: "gpdtdc-rnd",
+    tenant: tenants[2],
+  },
+];
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+vi.mock("react-oidc-context", () => ({
+  useAuth: () => ({
+    user: {
+      profile: {
+        sub: "admin-1",
+      },
+    },
+  }),
+}));
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchTenantOwners: vi.fn(async () => [users[0]]),
+  fetchTenantAdmins: vi.fn(async () => [users[1]]),
+  addTenantOwner: vi.fn(async () => undefined),
+  addTenantAdmin: vi.fn(async () => undefined),
+  removeTenantOwner: vi.fn(async () => undefined),
+  removeTenantAdmin: vi.fn(async () => undefined),
+  fetchUsers: vi.fn(async () => ({
+    items: users,
+    total: users.length,
+  })),
+  fetchAllTenants: vi.fn(async () => ({
+    items: tenants,
+    total: tenants.length,
+  })),
+  updateTenant: vi.fn(async () => tenants[2]),
+  updateUser: vi.fn(async () => users[2]),
+  exportTenantsCSV: vi.fn(async () => ({
+    blob: new Blob(["name,slug"]),
+    filename: "tenants.csv",
+  })),
+  exportUsersCSV: exportUsersCSVMock,
+}));
+
+function renderWithProviders(ui: React.ReactElement, entry: string) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[entry]}>{ui}</MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("admin tenant tab coverage smoke", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+    vi.spyOn(window.URL, "createObjectURL").mockReturnValue(
+      "blob:tenant-users-export",
+    );
+    vi.spyOn(window.URL, "revokeObjectURL").mockImplementation(() => {});
+  });
+
+  it("renders tenant owners and admins lists", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/permissions"
+          element={<TenantAdminsAndOwnersTab />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/permissions",
+    );
+
+    expect(await screen.findByText("Owner User")).toBeInTheDocument();
+    expect(screen.getByText("Admin User")).toBeInTheDocument();
+    expect(screen.getByText("owner@example.com")).toBeInTheDocument();
+    expect(screen.getByText("admin@example.com")).toBeInTheDocument();
+  });
+
+  it("renders tenant hierarchy and selected organization members", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/organization"
+          element={<TenantUserGroupsTab />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/organization",
+    );
+
+    expect((await screen.findAllByText("GPDTDC")).length).toBeGreaterThan(0);
+    expect(screen.getAllByText("기술연구팀").length).toBeGreaterThan(0);
+    expect(await screen.findByText("Member User")).toBeInTheDocument();
+  });
+
+  it("exports selected organization users by tenant slug", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/organization"
+          element={<TenantUserGroupsTab />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/organization",
+    );
+
+    expect(await screen.findByText("Member User")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("tenant-current-users-export-btn"));
+
+    await waitFor(() => {
+      expect(exportUsersCSVMock).toHaveBeenCalledWith("", "gpdtdc", false);
+    });
+  });
+});
--- a/baron-sso/adminfront/src/features/integrity/DataIntegrityPage.test.tsx
+++ b/baron-sso/adminfront/src/features/integrity/DataIntegrityPage.test.tsx
@@ -0,0 +1,250 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  deleteOrphanUserLoginIDs,
+  fetchDataIntegrityReport,
+  fetchMe,
+  fetchOrySSOTSystemStatus,
+  fetchOrphanUserLoginIDs,
+  flushIdentityCache,
+} from "../../lib/adminApi";
+import { expectNoAnonymousFormFields } from "../../test/formFieldDiagnostics";
+import { createI18nMock } from "../../test/i18nMock";
+import DataIntegrityPage from "./DataIntegrityPage";
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+let currentRole = "super_admin";
+
+const integrityReport = {
+  status: "fail",
+  checkedAt: "2026-05-14T00:00:00Z",
+  summary: {
+    totalChecks: 2,
+    passed: 1,
+    warnings: 0,
+    failures: 1,
+  },
+  sections: [
+    {
+      key: "tenant_integrity",
+      label: "테넌트 정합성",
+      status: "fail",
+      checks: [
+        {
+          key: "duplicate_tenant_slugs",
+          label: "중복 테넌트 slug",
+          description: "active tenant slug의 대소문자 무시 중복을 검사합니다.",
+          status: "fail",
+          severity: "error",
+          count: 1,
+        },
+      ],
+    },
+  ],
+};
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchMe: vi.fn(async () => ({ role: currentRole })),
+  fetchDataIntegrityReport: vi.fn(async () => integrityReport),
+  fetchOrphanUserLoginIDs: vi.fn(async () => ({
+    items: [
+      {
+        id: "login-id-1",
+        userId: "user-1",
+        userEmail: "missing@example.com",
+        tenantId: "tenant-1",
+        tenantSlug: "deleted-tenant",
+        fieldKey: "emp_id",
+        loginId: "EMP001",
+        reasons: ["deleted_tenant"],
+      },
+    ],
+    total: 1,
+  })),
+  fetchOrySSOTSystemStatus: vi.fn(async () => ({
+    userProjection: {
+      name: "kratos_users",
+      status: "ready",
+      ready: true,
+      lastSyncedAt: "2026-05-11T03:00:00Z",
+      updatedAt: "2026-05-11T03:00:10Z",
+      projectedUsers: 152,
+    },
+    identityCache: {
+      status: "ready",
+      redisReady: true,
+      observedCount: 151,
+      keyCount: 153,
+      lastRefreshedAt: "2026-05-11T03:00:00Z",
+      updatedAt: "2026-05-11T03:00:10Z",
+    },
+  })),
+  flushIdentityCache: vi.fn(async () => ({
+    status: "success",
+    flushedKeys: 153,
+    updatedAt: "2026-05-11T03:02:00Z",
+  })),
+  deleteOrphanUserLoginIDs: vi.fn(async () => ({
+    deletedCount: 1,
+    deleted: [
+      {
+        id: "login-id-1",
+        userId: "user-1",
+        tenantId: "tenant-1",
+        fieldKey: "emp_id",
+        loginId: "EMP001",
+        reasons: ["deleted_tenant"],
+      },
+    ],
+    skippedIds: [],
+  })),
+}));
+
+function renderPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <DataIntegrityPage />
+    </QueryClientProvider>,
+  );
+}
+
+describe("DataIntegrityPage", () => {
+  beforeEach(() => {
+    currentRole = "super_admin";
+    vi.clearAllMocks();
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+    window.localStorage.setItem("locale", "ko");
+  });
+
+  it("renders integrity report for super_admin", async () => {
+    renderPage();
+
+    expect(await screen.findByText("데이터 정합성 검증")).toBeInTheDocument();
+    expect(
+      screen.getByRole("tab", { name: "정합성 검사" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("tab", { name: "Ory SSOT 시스템" }),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText(
+        "정합성 상태를 확인하고 데이터 모델 전반의 검증 결과를 살펴봅니다.",
+      ),
+    ).toBeInTheDocument();
+    expect(await screen.findByText("테넌트 정합성")).toBeInTheDocument();
+    expect(screen.getByText("중복 테넌트 slug")).toBeInTheDocument();
+    expect(screen.getAllByText("1").length).toBeGreaterThan(0);
+    expect(fetchDataIntegrityReport).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders Ory SSOT cache management inside data integrity", async () => {
+    renderPage();
+
+    fireEvent.click(
+      await screen.findByRole("tab", { name: "Ory SSOT 시스템" }),
+    );
+
+    expect(
+      (await screen.findAllByText("Ory SSOT 시스템")).length,
+    ).toBeGreaterThan(0);
+    expect(await screen.findByText("Redis identity cache")).toBeInTheDocument();
+    expect(screen.getAllByText("준비됨").length).toBeGreaterThan(0);
+    expect(screen.getByText("152")).toBeInTheDocument();
+    expect(screen.getByText("151")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /Redis cache flush/ }));
+    await waitFor(() => {
+      expect(flushIdentityCache).toHaveBeenCalledTimes(1);
+    });
+    expect(fetchOrySSOTSystemStatus).toHaveBeenCalled();
+  });
+
+  it("shows orphan login ID targets and deletes selected rows", async () => {
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+    const { container } = renderPage();
+
+    expect(await screen.findByText("유령 로그인 ID 정리")).toBeInTheDocument();
+    expect(await screen.findByText("EMP001")).toBeInTheDocument();
+    expect(screen.getByText("삭제된 테넌트")).toBeInTheDocument();
+    expectNoAnonymousFormFields(container);
+    expect(fetchOrphanUserLoginIDs).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(screen.getByRole("checkbox", { name: "EMP001 선택" }));
+    fireEvent.click(screen.getByRole("button", { name: "선택 삭제" }));
+
+    await waitFor(() => {
+      expect(deleteOrphanUserLoginIDs).toHaveBeenCalled();
+    });
+    expect(vi.mocked(deleteOrphanUserLoginIDs).mock.calls[0][0]).toEqual([
+      "login-id-1",
+    ]);
+  });
+
+  it("disables recheck button and shows manual recheck progress", async () => {
+    let finishRecheck: (value: typeof integrityReport) => void = () => {};
+    const pendingRecheck = new Promise<typeof integrityReport>((resolve) => {
+      finishRecheck = resolve;
+    });
+
+    renderPage();
+
+    expect(await screen.findByText("중복 테넌트 slug")).toBeInTheDocument();
+    vi.mocked(fetchDataIntegrityReport).mockImplementationOnce(
+      () => pendingRecheck,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "다시 검사" }));
+
+    expect(screen.getByRole("button", { name: "검사 중" })).toBeDisabled();
+    expect(
+      screen.getByText("정합성 검사를 실행 중입니다."),
+    ).toBeInTheDocument();
+
+    finishRecheck(integrityReport);
+
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: "다시 검사" })).toBeEnabled();
+    });
+    expect(screen.getByText("검사가 완료되었습니다.")).toBeInTheDocument();
+  });
+
+  it("blocks non-super admins", async () => {
+    currentRole = "tenant_admin";
+
+    renderPage();
+
+    expect(await screen.findByText("접근 권한이 없습니다")).toBeInTheDocument();
+    expect(fetchMe).toHaveBeenCalled();
+    expect(fetchDataIntegrityReport).not.toHaveBeenCalled();
+  });
+
+  it("renders localized integrity labels in English", async () => {
+    window.localStorage.setItem("locale", "en");
+    renderPage();
+
+    expect(await screen.findByText("Data Integrity Check")).toBeInTheDocument();
+    expect(
+      await screen.findByText(
+        "Review integrity status and inspect checks across the admin data model.",
+      ),
+    ).toBeInTheDocument();
+    expect(await screen.findByText("Tenant integrity")).toBeInTheDocument();
+    expect(
+      await screen.findByText("Duplicate tenant slug"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText(
+        "Checks duplicate active tenant slugs using LOWER(TRIM(slug)).",
+      ),
+    ).toBeInTheDocument();
+  });
+});
--- a/baron-sso/adminfront/src/features/integrity/DataIntegrityPage.tsx
+++ b/baron-sso/adminfront/src/features/integrity/DataIntegrityPage.tsx
@@ -0,0 +1,640 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  AlertTriangle,
+  CheckCircle2,
+  Database,
+  ShieldAlert,
+} from "lucide-react";
+import { useState } from "react";
+import { RoleGuard } from "../../components/auth/RoleGuard";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import {
+  type DataIntegrityCheck,
+  type DataIntegrityStatus,
+  deleteOrphanUserLoginIDs,
+  fetchDataIntegrityReport,
+  fetchOrphanUserLoginIDs,
+  type OrphanUserLoginID,
+} from "../../lib/adminApi";
+import { t } from "../../lib/i18n";
+import { getAdminDateLocale } from "../../lib/locale";
+import { UserProjectionContent } from "../projections/UserProjectionPage";
+
+function statusLabel(status: DataIntegrityStatus) {
+  switch (status) {
+    case "pass":
+      return t("ui.admin.integrity.status.pass", "정상");
+    case "warning":
+      return t("ui.admin.integrity.status.warning", "주의");
+    case "fail":
+      return t("ui.admin.integrity.status.fail", "실패");
+    default:
+      return status;
+  }
+}
+
+function statusBadgeVariant(status: DataIntegrityStatus) {
+  switch (status) {
+    case "pass":
+      return "success";
+    case "warning":
+      return "warning";
+    default:
+      return "warning";
+  }
+}
+
+function formatDateTime(value?: string) {
+  if (!value) return "-";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(getAdminDateLocale(), {
+    dateStyle: "medium",
+    timeStyle: "medium",
+  }).format(date);
+}
+
+function CheckIcon({ check }: { check: DataIntegrityCheck }) {
+  if (check.status === "pass") {
+    return <CheckCircle2 className="text-emerald-600" size={18} />;
+  }
+  if (check.status === "warning") {
+    return <AlertTriangle className="text-amber-600" size={18} />;
+  }
+  return <ShieldAlert className="text-destructive" size={18} />;
+}
+
+function reasonLabel(reason: string) {
+  switch (reason) {
+    case "missing_user":
+      return t("ui.admin.integrity.reason.missing_user", "사용자 없음");
+    case "deleted_user":
+      return t("ui.admin.integrity.reason.deleted_user", "삭제된 사용자");
+    case "missing_tenant":
+      return t("ui.admin.integrity.reason.missing_tenant", "테넌트 없음");
+    case "deleted_tenant":
+      return t("ui.admin.integrity.reason.deleted_tenant", "삭제된 테넌트");
+    default:
+      return reason;
+  }
+}
+
+function integritySectionLabel(key: string, fallback: string) {
+  switch (key) {
+    case "tenant_integrity":
+      return t("ui.admin.integrity.section.tenant_integrity", fallback);
+    case "user_integrity":
+      return t("ui.admin.integrity.section.user_integrity", fallback);
+    default:
+      return fallback;
+  }
+}
+
+function integritySectionDescription(key: string) {
+  switch (key) {
+    case "tenant_integrity":
+      return t(
+        "msg.admin.integrity.section.tenant_integrity.description",
+        "테넌트 slug 중복과 부모 관계 이상을 확인합니다.",
+      );
+    case "user_integrity":
+      return t(
+        "msg.admin.integrity.section.user_integrity.description",
+        "사용자와 로그인 ID 참조의 고아 레코드를 확인합니다.",
+      );
+    default:
+      return "";
+  }
+}
+
+function integrityCheckLabel(key: string, fallback: string) {
+  switch (key) {
+    case "duplicate_tenant_slugs":
+      return t(
+        "ui.admin.integrity.check.duplicate_tenant_slugs.title",
+        fallback,
+      );
+    case "orphan_tenant_parents":
+      return t(
+        "ui.admin.integrity.check.orphan_tenant_parents.title",
+        fallback,
+      );
+    case "orphan_user_tenant_memberships":
+      return t(
+        "ui.admin.integrity.check.orphan_user_tenant_memberships.title",
+        fallback,
+      );
+    case "orphan_user_login_id_tenants":
+      return t(
+        "ui.admin.integrity.check.orphan_user_login_id_tenants.title",
+        fallback,
+      );
+    case "orphan_user_login_id_users":
+      return t(
+        "ui.admin.integrity.check.orphan_user_login_id_users.title",
+        fallback,
+      );
+    default:
+      return fallback;
+  }
+}
+
+function integrityCheckDescription(key: string, fallback: string) {
+  switch (key) {
+    case "duplicate_tenant_slugs":
+      return t(
+        "msg.admin.integrity.check.duplicate_tenant_slugs.description",
+        fallback,
+      );
+    case "orphan_tenant_parents":
+      return t(
+        "msg.admin.integrity.check.orphan_tenant_parents.description",
+        fallback,
+      );
+    case "orphan_user_tenant_memberships":
+      return t(
+        "msg.admin.integrity.check.orphan_user_tenant_memberships.description",
+        fallback,
+      );
+    case "orphan_user_login_id_tenants":
+      return t(
+        "msg.admin.integrity.check.orphan_user_login_id_tenants.description",
+        fallback,
+      );
+    case "orphan_user_login_id_users":
+      return t(
+        "msg.admin.integrity.check.orphan_user_login_id_users.description",
+        fallback,
+      );
+    default:
+      return fallback;
+  }
+}
+
+function recheckStatusText(status: "idle" | "running" | "success" | "error") {
+  switch (status) {
+    case "running":
+      return t(
+        "msg.admin.integrity.recheck.running",
+        "정합성 검사를 실행 중입니다.",
+      );
+    case "success":
+      return t("msg.admin.integrity.recheck.success", "검사가 완료되었습니다.");
+    case "error":
+      return t("msg.admin.integrity.recheck.error", "검사에 실패했습니다.");
+    default:
+      return "";
+  }
+}
+
+function pageTabClassName(active: boolean) {
+  return `relative px-6 py-3 text-sm font-medium transition-colors ${
+    active
+      ? "border-b-2 border-primary text-primary"
+      : "text-muted-foreground hover:text-foreground"
+  }`;
+}
+
+function OrphanLoginIDTable({
+  items,
+  selectedIds,
+  onToggle,
+}: {
+  items: OrphanUserLoginID[];
+  selectedIds: string[];
+  onToggle: (id: string) => void;
+}) {
+  if (items.length === 0) {
+    return (
+      <div className="rounded border border-border/60 px-3 py-6 text-center text-sm text-muted-foreground">
+        {t(
+          "msg.admin.integrity.orphan_login_ids.empty",
+          "삭제할 유령 로그인 ID가 없습니다.",
+        )}
+      </div>
+    );
+  }
+
+  const selectedSet = new Set(selectedIds);
+  return (
+    <div className="overflow-x-auto rounded border border-border/60">
+      <table className="w-full min-w-[760px] text-sm">
+        <thead className="bg-muted/50 text-left text-muted-foreground">
+          <tr>
+            <th className="w-12 px-3 py-2">
+              {t("ui.admin.integrity.table.select", "선택")}
+            </th>
+            <th className="px-3 py-2">
+              {t("ui.admin.integrity.table.login_id", "Login ID")}
+            </th>
+            <th className="px-3 py-2">
+              {t("ui.admin.integrity.table.field", "Field")}
+            </th>
+            <th className="px-3 py-2">
+              {t("ui.admin.integrity.table.user", "User")}
+            </th>
+            <th className="px-3 py-2">
+              {t("ui.admin.integrity.table.tenant", "Tenant")}
+            </th>
+            <th className="px-3 py-2">
+              {t("ui.admin.integrity.table.reason", "사유")}
+            </th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-border">
+          {items.map((item) => (
+            <tr key={item.id}>
+              <td className="px-3 py-2">
+                <input
+                  name={`orphan-login-id-select-${item.id}`}
+                  type="checkbox"
+                  aria-label={t(
+                    "ui.admin.integrity.table.select_item",
+                    "{{loginId}} 선택",
+                    { loginId: item.loginId },
+                  )}
+                  checked={selectedSet.has(item.id)}
+                  onChange={() => onToggle(item.id)}
+                  className="h-4 w-4 rounded border-input"
+                />
+              </td>
+              <td className="px-3 py-2 font-medium">{item.loginId}</td>
+              <td className="px-3 py-2 text-muted-foreground">
+                {item.fieldKey}
+              </td>
+              <td className="px-3 py-2">
+                <div>{item.userEmail || "-"}</div>
+                <div className="text-xs text-muted-foreground">
+                  {item.userId}
+                </div>
+              </td>
+              <td className="px-3 py-2">
+                <div>{item.tenantSlug || "-"}</div>
+                <div className="text-xs text-muted-foreground">
+                  {item.tenantId}
+                </div>
+              </td>
+              <td className="px-3 py-2">
+                <div className="flex flex-wrap gap-1">
+                  {item.reasons.map((reason) => (
+                    <Badge key={reason} variant="warning">
+                      {reasonLabel(reason)}
+                    </Badge>
+                  ))}
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function DataIntegrityContent() {
+  const queryClient = useQueryClient();
+  const [activeTab, setActiveTab] = useState<"integrity" | "projection">(
+    "integrity",
+  );
+  const [selectedOrphanIds, setSelectedOrphanIds] = useState<string[]>([]);
+  const [recheckStatus, setRecheckStatus] = useState<
+    "idle" | "running" | "success" | "error"
+  >("idle");
+  const { data, isLoading, isError, error, refetch, isFetching } = useQuery({
+    queryKey: ["data-integrity-report"],
+    queryFn: fetchDataIntegrityReport,
+  });
+  const orphanLoginIDsQuery = useQuery({
+    queryKey: ["orphan-user-login-ids"],
+    queryFn: fetchOrphanUserLoginIDs,
+  });
+  const deleteMutation = useMutation({
+    mutationFn: deleteOrphanUserLoginIDs,
+    onSuccess: async () => {
+      setSelectedOrphanIds([]);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["data-integrity-report"] }),
+        queryClient.invalidateQueries({ queryKey: ["orphan-user-login-ids"] }),
+      ]);
+    },
+  });
+
+  const orphanItems = orphanLoginIDsQuery.data?.items ?? [];
+  const toggleOrphanID = (id: string) => {
+    setSelectedOrphanIds((current) =>
+      current.includes(id)
+        ? current.filter((selectedID) => selectedID !== id)
+        : [...current, id],
+    );
+  };
+  const handleDeleteSelected = () => {
+    if (selectedOrphanIds.length === 0) {
+      return;
+    }
+    const confirmed = window.confirm(
+      t(
+        "msg.admin.integrity.orphan_login_ids.delete_confirm",
+        "선택한 {{count}}개의 유령 로그인 ID를 삭제하시겠습니까?",
+        { count: selectedOrphanIds.length },
+      ),
+    );
+    if (confirmed) {
+      deleteMutation.mutate(selectedOrphanIds);
+    }
+  };
+  const isManualRechecking = recheckStatus === "running";
+  const handleRecheck = async () => {
+    if (isManualRechecking) {
+      return;
+    }
+    setRecheckStatus("running");
+    const result = await refetch();
+    setRecheckStatus(result.isError ? "error" : "success");
+  };
+  const recheckMessage = recheckStatusText(recheckStatus);
+
+  return (
+    <main className="space-y-6">
+      <header className="flex flex-shrink-0 flex-wrap items-start justify-between gap-4 sticky top-[-2.5rem] z-20 -mt-4 bg-background/95 pb-2 pt-4 backdrop-blur">
+        <div className="flex min-w-0 items-start gap-3">
+          <div className="mt-1 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-primary/15 bg-primary/10 text-primary">
+            <Database size={20} />
+          </div>
+          <div className="space-y-2">
+            <h2 className="text-3xl font-semibold">
+              {t("ui.admin.integrity.title", "데이터 정합성 검증")}
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              {t(
+                "msg.admin.integrity.subtitle",
+                "Review integrity status and inspect checks across the admin data model.",
+              )}
+            </p>
+          </div>
+        </div>
+        {activeTab === "integrity" ? (
+          <div className="flex flex-col items-end gap-1">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleRecheck}
+              disabled={isLoading || isFetching || isManualRechecking}
+            >
+              <Database size={16} />
+              {isManualRechecking
+                ? t("ui.admin.integrity.recheck.running", "검사 중")
+                : t("ui.admin.integrity.recheck.run", "다시 검사")}
+            </Button>
+            {recheckMessage ? (
+              <output
+                aria-live="polite"
+                className="text-xs text-muted-foreground"
+              >
+                {recheckMessage}
+              </output>
+            ) : null}
+          </div>
+        ) : null}
+      </header>
+
+      <div
+        className="flex border-b border-border"
+        role="tablist"
+        aria-label="데이터 정합성 탭"
+      >
+        <button
+          type="button"
+          role="tab"
+          aria-selected={activeTab === "integrity"}
+          className={pageTabClassName(activeTab === "integrity")}
+          onClick={() => setActiveTab("integrity")}
+        >
+          {t("ui.admin.integrity.tab_checks", "정합성 검사")}
+        </button>
+        <button
+          type="button"
+          role="tab"
+          aria-selected={activeTab === "projection"}
+          className={pageTabClassName(activeTab === "projection")}
+          onClick={() => setActiveTab("projection")}
+        >
+          {t("ui.admin.integrity.tab_ory_ssot", "Ory SSOT 시스템")}
+        </button>
+      </div>
+
+      {activeTab === "integrity" ? (
+        <div className="space-y-4 pb-6 animate-in fade-in duration-500">
+          {isError ? (
+            <section className="rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
+              {(error as Error)?.message ||
+                t(
+                  "msg.admin.integrity.report.load_error",
+                  "정합성 리포트를 불러오지 못했습니다.",
+                )}
+            </section>
+          ) : null}
+
+          <section className="rounded-lg border border-border bg-card p-5">
+            <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border pb-4">
+              <div>
+                <h3 className="text-lg font-bold flex items-center gap-2">
+                  {t(
+                    "ui.admin.integrity.read_model.title",
+                    "Read model integrity",
+                  )}
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  {t(
+                    "msg.admin.integrity.read_model.description",
+                    "Ory SoT를 덮어쓰지 않고 backend DB read model의 이상 징후만 확인합니다.",
+                  )}
+                </p>
+              </div>
+              {data ? (
+                <Badge variant={statusBadgeVariant(data.status)}>
+                  {statusLabel(data.status)}
+                </Badge>
+              ) : null}
+            </div>
+
+            {isLoading ? (
+              <div className="py-8 text-sm text-muted-foreground">
+                {t("ui.admin.integrity.loading", "불러오는 중")}
+              </div>
+            ) : (
+              <dl className="grid gap-4 py-5 sm:grid-cols-2 lg:grid-cols-4">
+                <div>
+                  <dt className="text-sm text-muted-foreground">
+                    {t("ui.admin.integrity.summary.total_checks", "검사 항목")}
+                  </dt>
+                  <dd className="mt-1 text-xl font-semibold tabular-nums">
+                    {data?.summary.totalChecks ?? 0}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-sm text-muted-foreground">
+                    {t("ui.admin.integrity.summary.passed", "정상")}
+                  </dt>
+                  <dd className="mt-1 text-xl font-semibold tabular-nums">
+                    {data?.summary.passed ?? 0}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-sm text-muted-foreground">
+                    {t("ui.admin.integrity.summary.failures", "실패 건수")}
+                  </dt>
+                  <dd className="mt-1 text-xl font-semibold tabular-nums">
+                    {data?.summary.failures ?? 0}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-sm text-muted-foreground">
+                    {t("ui.admin.integrity.summary.checked_at", "검사 시각")}
+                  </dt>
+                  <dd className="mt-1 text-sm">
+                    {formatDateTime(data?.checkedAt)}
+                  </dd>
+                </div>
+              </dl>
+            )}
+          </section>
+
+          <div className="space-y-4">
+            {(data?.sections ?? []).map((section) => (
+              <section
+                key={section.key}
+                className="rounded-lg border border-border bg-card p-5"
+              >
+                <div className="mb-4 flex items-center justify-between gap-3">
+                  <div className="space-y-1">
+                    <h3 className="text-lg font-bold flex items-center gap-2">
+                      {integritySectionLabel(section.key, section.label)}
+                    </h3>
+                    <p className="text-sm text-muted-foreground">
+                      {integritySectionDescription(section.key)}
+                    </p>
+                  </div>
+                  <Badge variant={statusBadgeVariant(section.status)}>
+                    {statusLabel(section.status)}
+                  </Badge>
+                </div>
+                <div className="divide-y divide-border">
+                  {section.checks.map((check) => (
+                    <div
+                      key={check.key}
+                      className="grid gap-3 py-4 md:grid-cols-[1fr_auto]"
+                    >
+                      <div className="flex gap-3">
+                        <CheckIcon check={check} />
+                        <div>
+                          <div className="font-medium">
+                            {integrityCheckLabel(check.key, check.label)}
+                          </div>
+                          <p className="mt-1 text-sm text-muted-foreground">
+                            {integrityCheckDescription(
+                              check.key,
+                              check.description,
+                            )}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-3 md:justify-end">
+                        <Badge variant={statusBadgeVariant(check.status)}>
+                          {statusLabel(check.status)}
+                        </Badge>
+                        <span className="min-w-12 text-right text-lg font-semibold tabular-nums">
+                          {check.count}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </section>
+            ))}
+          </div>
+
+          <section className="rounded-lg border border-border bg-card p-5">
+            <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <h3 className="text-lg font-bold flex items-center gap-2">
+                  {t(
+                    "ui.admin.integrity.orphan_login_ids.title",
+                    "유령 로그인 ID 정리",
+                  )}
+                </h3>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  {t(
+                    "msg.admin.integrity.orphan_login_ids.description",
+                    "삭제되었거나 존재하지 않는 사용자/테넌트를 참조하는 로그인 ID를 확인한 뒤 선택 삭제합니다.",
+                  )}
+                </p>
+              </div>
+              <Button
+                type="button"
+                variant="destructive"
+                onClick={handleDeleteSelected}
+                disabled={
+                  selectedOrphanIds.length === 0 || deleteMutation.isPending
+                }
+              >
+                {t("ui.admin.integrity.orphan_login_ids.delete", "선택 삭제")}
+              </Button>
+            </div>
+            {orphanLoginIDsQuery.isError ? (
+              <div className="mb-3 rounded border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+                {t(
+                  "msg.admin.integrity.orphan_login_ids.load_error",
+                  "유령 로그인 ID 대상을 불러오지 못했습니다.",
+                )}
+              </div>
+            ) : null}
+            {deleteMutation.data ? (
+              <div className="mb-3 rounded border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200">
+                {t(
+                  "msg.admin.integrity.orphan_login_ids.delete_success",
+                  "{{count}}개의 유령 로그인 ID를 삭제했습니다.",
+                  { count: deleteMutation.data.deletedCount },
+                )}
+              </div>
+            ) : null}
+            <OrphanLoginIDTable
+              items={orphanItems}
+              selectedIds={selectedOrphanIds}
+              onToggle={toggleOrphanID}
+            />
+          </section>
+        </div>
+      ) : (
+        <div className="animate-in fade-in duration-500">
+          <UserProjectionContent embedded />
+        </div>
+      )}
+    </main>
+  );
+}
+
+export default function DataIntegrityPage() {
+  return (
+    <RoleGuard
+      roles={["super_admin"]}
+      fallback={
+        <main className="p-6 md:p-8">
+          <section className="rounded-lg border border-border bg-card p-5">
+            <h2 className="text-lg font-semibold">
+              {t("ui.admin.integrity.forbidden.title", "접근 권한이 없습니다")}
+            </h2>
+            <p className="mt-2 text-sm text-muted-foreground">
+              {t(
+                "msg.admin.integrity.forbidden.description",
+                "이 화면은 super_admin 권한으로만 접근할 수 있습니다.",
+              )}
+            </p>
+          </section>
+        </main>
+      }
+    >
+      <DataIntegrityContent />
+    </RoleGuard>
+  );
+}
--- a/baron-sso/adminfront/src/features/overview/GlobalOverviewPage.test.tsx
+++ b/baron-sso/adminfront/src/features/overview/GlobalOverviewPage.test.tsx
@@ -0,0 +1,266 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type React from "react";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  fetchAdminRPUsageDaily,
+  fetchDataIntegrityReport,
+} from "../../lib/adminApi";
+import { createI18nMock } from "../../test/i18nMock";
+import AuthPage from "../auth/AuthPage";
+import GlobalOverviewPage from "./GlobalOverviewPage";
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+let currentRole = "super_admin";
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchMe: vi.fn(async () => ({ role: currentRole })),
+  fetchAdminOverviewStats: vi.fn(async () => ({
+    totalTenants: 10,
+    totalUsers: 152,
+    oidcClients: 3,
+    auditEvents24h: 18,
+  })),
+  fetchAllTenants: vi.fn(async () => ({
+    items: [
+      {
+        id: "group-1",
+        type: "COMPANY_GROUP",
+        name: "한맥그룹",
+        slug: "hanmac-group",
+        description: "",
+        status: "active",
+        memberCount: 0,
+        createdAt: "2026-05-06T00:00:00Z",
+        updatedAt: "2026-05-06T00:00:00Z",
+      },
+      {
+        id: "company-1",
+        type: "COMPANY",
+        name: "한맥",
+        slug: "hanmac",
+        description: "",
+        status: "active",
+        memberCount: 0,
+        createdAt: "2026-05-06T00:00:00Z",
+        updatedAt: "2026-05-06T00:00:00Z",
+      },
+      {
+        id: "org-1",
+        type: "ORGANIZATION",
+        name: "개발팀",
+        slug: "dev-team",
+        description: "",
+        status: "active",
+        memberCount: 0,
+        createdAt: "2026-05-06T00:00:00Z",
+        updatedAt: "2026-05-06T00:00:00Z",
+      },
+      {
+        id: "personal-1",
+        type: "PERSONAL",
+        name: "개인",
+        slug: "personal",
+        description: "",
+        status: "active",
+        memberCount: 0,
+        createdAt: "2026-05-06T00:00:00Z",
+        updatedAt: "2026-05-06T00:00:00Z",
+      },
+    ],
+    limit: 1000,
+    offset: 0,
+    total: 4,
+  })),
+  fetchAdminRPUsageDaily: vi.fn(async () => ({
+    days: 14,
+    period: "day",
+    items: [
+      {
+        date: "2026-05-05",
+        tenantId: "company-1",
+        tenantType: "COMPANY",
+        tenantName: "한맥",
+        clientId: "orgfront",
+        clientName: "OrgFront",
+        loginRequests: 12,
+        otherRequests: 4,
+        uniqueSubjects: 8,
+      },
+      {
+        date: "2026-05-06",
+        tenantId: "company-1",
+        tenantType: "COMPANY",
+        tenantName: "한맥",
+        clientId: "adminfront",
+        clientName: "AdminFront",
+        loginRequests: 7,
+        otherRequests: 3,
+        uniqueSubjects: 5,
+      },
+      {
+        date: "2026-09-28",
+        tenantId: "company-1",
+        tenantType: "COMPANY",
+        tenantName: "한맥",
+        clientId: "devfront",
+        clientName: "DevFront",
+        loginRequests: 2,
+        otherRequests: 1,
+        uniqueSubjects: 2,
+      },
+    ],
+  })),
+  fetchDataIntegrityReport: vi.fn(async () => ({
+    status: "fail",
+    checkedAt: "2026-05-14T00:00:00Z",
+    summary: {
+      totalChecks: 5,
+      passed: 4,
+      warnings: 0,
+      failures: 1,
+    },
+    sections: [
+      {
+        key: "tenant_integrity",
+        label: "테넌트 정합성",
+        status: "pass",
+        checks: [],
+      },
+      {
+        key: "user_integrity",
+        label: "사용자 정합성",
+        status: "fail",
+        checks: [],
+      },
+    ],
+  })),
+}));
+
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>{ui}</MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("admin overview and auth guard pages", () => {
+  beforeEach(() => {
+    currentRole = "super_admin";
+    vi.clearAllMocks();
+  });
+
+  it("renders usage trend chart without quick navigation or permission checker", async () => {
+    renderWithProviders(<GlobalOverviewPage />);
+
+    expect(
+      await screen.findByText("회사별 앱별 로그인 요청 현황"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByLabelText("일 단위 RP 요청 현황"),
+    ).toBeInTheDocument();
+    expect(await screen.findByText("05.05")).toBeInTheDocument();
+    expect(await screen.findByText("05.06")).toBeInTheDocument();
+    expect(screen.queryByText("빠른 작업")).not.toBeInTheDocument();
+    expect(screen.queryByText("빠른 이동")).not.toBeInTheDocument();
+    expect(screen.queryByText("테넌트 추가")).not.toBeInTheDocument();
+    expect(screen.queryByText("ReBAC 권한 검증 도구")).not.toBeInTheDocument();
+  });
+
+  it("renders overview tenant count from the fully fetched tenant list", async () => {
+    renderWithProviders(<GlobalOverviewPage />);
+
+    expect(
+      (await screen.findByText("전체 테넌트 수")).parentElement,
+    ).toHaveTextContent("4");
+    expect(screen.getByText("OIDC 클라이언트").parentElement).toHaveTextContent(
+      "3",
+    );
+    expect(screen.getByText("전체 사용자 수").parentElement).toHaveTextContent(
+      "152",
+    );
+    expect(screen.getByText("24시간 이벤트").parentElement).toHaveTextContent(
+      "18",
+    );
+  });
+
+  it("limits the overview graph choices to company tenants", async () => {
+    renderWithProviders(<GlobalOverviewPage />);
+
+    await screen.findByText("회사별 앱별 로그인 요청 현황");
+
+    expect(
+      await screen.findByRole("checkbox", { name: "한맥 (hanmac)" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText("한맥그룹 (hanmac-group)"),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText("개발팀 (dev-team)")).not.toBeInTheDocument();
+    expect(screen.queryByText("개인 (personal)")).not.toBeInTheDocument();
+  });
+
+  it("changes the RP usage perspective and targets a permitted company", async () => {
+    renderWithProviders(<GlobalOverviewPage />);
+
+    await screen.findByText("회사별 앱별 로그인 요청 현황");
+    fireEvent.click(screen.getByRole("button", { name: "주" }));
+    expect(await screen.findAllByText("19(05월1주)")).not.toHaveLength(0);
+    expect(await screen.findAllByText("40(10월1주)")).not.toHaveLength(0);
+    fireEvent.click(screen.getByRole("button", { name: "월" }));
+    fireEvent.click(screen.getByRole("checkbox", { name: "한맥 (hanmac)" }));
+
+    await waitFor(() => {
+      expect(fetchAdminRPUsageDaily).toHaveBeenLastCalledWith({
+        days: 90,
+        period: "month",
+      });
+    });
+    expect(
+      screen.queryByText("한맥그룹 (hanmac-group)"),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText("개발팀 (dev-team)")).not.toBeInTheDocument();
+    expect(screen.queryByText("개인 (personal)")).not.toBeInTheDocument();
+  });
+
+  it("shows the latest integrity summary at the bottom for super admins only", async () => {
+    renderWithProviders(<GlobalOverviewPage />);
+
+    expect(await screen.findByText("정합성 최종 검증")).toBeInTheDocument();
+    expect(screen.getByText("실패 1건")).toBeInTheDocument();
+    expect(screen.getByText("테넌트 정합성")).toBeInTheDocument();
+    expect(screen.getByText("사용자 정합성")).toBeInTheDocument();
+    expect(fetchDataIntegrityReport).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not fetch or show the integrity summary for non-super admins", async () => {
+    currentRole = "tenant_admin";
+
+    renderWithProviders(<GlobalOverviewPage />);
+
+    await screen.findByText("회사별 앱별 로그인 요청 현황");
+    expect(screen.queryByText("정합성 최종 검증")).not.toBeInTheDocument();
+    expect(fetchDataIntegrityReport).not.toHaveBeenCalled();
+  });
+
+  it("moves the permission checker to the auth guard page and removes mock guardrails", () => {
+    renderWithProviders(<AuthPage />);
+
+    expect(screen.getByText("인증 가드")).toBeInTheDocument();
+    expect(screen.getByText("ReBAC 권한 검증 도구")).toBeInTheDocument();
+    expect(screen.queryByText("Admin auth guardrails")).not.toBeInTheDocument();
+    expect(
+      screen.queryByText("IDP session placeholder"),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText("Admin login")).not.toBeInTheDocument();
+  });
+});
--- a/baron-sso/adminfront/src/features/overview/GlobalOverviewPage.tsx
+++ b/baron-sso/adminfront/src/features/overview/GlobalOverviewPage.tsx
@@ -0,0 +1,610 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  Activity,
+  AlertTriangle,
+  CheckCircle2,
+  Database,
+  LayoutDashboard,
+  ShieldCheck,
+  Users,
+} from "lucide-react";
+import { type ReactNode, useMemo, useState } from "react";
+import {
+  OverviewAxisNotes,
+  OverviewMetric,
+  OverviewSelectionChips,
+} from "../../../../common/core/components/overview";
+import { RoleGuard } from "../../components/auth/RoleGuard";
+import {
+  type DataIntegrityStatus,
+  fetchAdminOverviewStats,
+  fetchAdminRPUsageDaily,
+  fetchAllTenants,
+  fetchDataIntegrityReport,
+  type RPUsageDailyMetric,
+  type RPUsagePeriod,
+} from "../../lib/adminApi";
+import { t } from "../../lib/i18n";
+
+type DailyPoint = {
+  date: string;
+  loginRequests: number;
+  otherRequests: number;
+};
+
+type SeriesSummary = {
+  key: string;
+  clientLabel: string;
+  loginRequests: number;
+  uniqueSubjects: number;
+};
+
+function summarizeDaily(rows: RPUsageDailyMetric[]): DailyPoint[] {
+  const byDate = new Map<string, DailyPoint>();
+  for (const row of rows) {
+    const current =
+      byDate.get(row.date) ??
+      ({
+        date: row.date,
+        loginRequests: 0,
+        otherRequests: 0,
+      } satisfies DailyPoint);
+    current.loginRequests += row.loginRequests;
+    current.otherRequests += row.otherRequests;
+    byDate.set(row.date, current);
+  }
+  return Array.from(byDate.values()).sort((a, b) =>
+    a.date.localeCompare(b.date),
+  );
+}
+
+function summarizeSeries(rows: RPUsageDailyMetric[]): SeriesSummary[] {
+  const bySeries = new Map<string, SeriesSummary>();
+  for (const row of rows) {
+    const key = row.clientId;
+    const current =
+      bySeries.get(key) ??
+      ({
+        key,
+        clientLabel: row.clientName || row.clientId,
+        loginRequests: 0,
+        uniqueSubjects: 0,
+      } satisfies SeriesSummary);
+    current.loginRequests += row.loginRequests;
+    current.uniqueSubjects = Math.max(
+      current.uniqueSubjects,
+      row.uniqueSubjects,
+    );
+    bySeries.set(key, current);
+  }
+  return Array.from(bySeries.values())
+    .sort((a, b) => b.loginRequests - a.loginRequests)
+    .slice(0, 5);
+}
+
+function parseDateParts(date: string) {
+  const parts = date.split("-");
+  if (parts.length === 3) {
+    return {
+      year: Number(parts[0]),
+      month: Number(parts[1]),
+      day: Number(parts[2]),
+      monthText: parts[1],
+      dayText: parts[2],
+    };
+  }
+  return null;
+}
+
+function getISOWeekNumber(year: number, month: number, day: number) {
+  const date = new Date(Date.UTC(year, month - 1, day));
+  const dayOfWeek = date.getUTCDay() || 7;
+  date.setUTCDate(date.getUTCDate() + 4 - dayOfWeek);
+  const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1));
+  return Math.ceil(((date.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+}
+
+function getISOWeekThursday(year: number, month: number, day: number) {
+  const date = new Date(Date.UTC(year, month - 1, day));
+  const dayOfWeek = date.getUTCDay() || 7;
+  date.setUTCDate(date.getUTCDate() + 4 - dayOfWeek);
+  return date;
+}
+
+function formatPeriodLabel(date: string, period: RPUsagePeriod) {
+  const parts = parseDateParts(date);
+  if (!parts) {
+    return date;
+  }
+  if (period === "month") {
+    return `${parts.monthText}월`;
+  }
+  if (period === "week") {
+    const weekNumber = String(
+      getISOWeekNumber(parts.year, parts.month, parts.day),
+    ).padStart(2, "0");
+    const weekThursday = getISOWeekThursday(parts.year, parts.month, parts.day);
+    const weekMonth = weekThursday.getUTCMonth() + 1;
+    const weekDay = weekThursday.getUTCDate();
+    const weekMonthText = String(weekMonth).padStart(2, "0");
+    const weekOfMonth = Math.min(5, Math.max(1, Math.ceil(weekDay / 7)));
+    return `${weekNumber}(${weekMonthText}월${weekOfMonth}주)`;
+  }
+  return `${parts.monthText}.${parts.dayText}`;
+}
+
+function formatOverviewDateTime(value?: string) {
+  if (!value) return "-";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat("ko-KR", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(date);
+}
+
+function integrityStatusText(status: DataIntegrityStatus) {
+  switch (status) {
+    case "pass":
+      return t("ui.admin.integrity.status.pass", "정상");
+    case "warning":
+      return t("ui.admin.integrity.status.warning", "주의");
+    default:
+      return t("ui.admin.integrity.status.fail", "실패");
+  }
+}
+
+function integrityStatusClass(status: DataIntegrityStatus) {
+  switch (status) {
+    case "pass":
+      return "text-emerald-700 dark:text-emerald-300";
+    case "warning":
+      return "text-amber-700 dark:text-amber-300";
+    default:
+      return "text-destructive";
+  }
+}
+
+function IntegrityOverviewSummary() {
+  const { data, isError } = useQuery({
+    queryKey: ["admin-overview-integrity"],
+    queryFn: fetchDataIntegrityReport,
+    retry: false,
+  });
+
+  if (isError) {
+    return (
+      <section className="border-t border-border/60 pt-4">
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <AlertTriangle size={16} />
+          <span>
+            {t(
+              "ui.admin.integrity.fetch_error",
+              "정합성 최종 검증 결과를 불러오지 못했습니다.",
+            )}
+          </span>
+        </div>
+      </section>
+    );
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <section className="border-t border-border/60 pt-4">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="flex items-center gap-2">
+          {data.status === "pass" ? (
+            <CheckCircle2 size={18} className="text-emerald-600" />
+          ) : (
+            <AlertTriangle size={18} className="text-amber-600" />
+          )}
+          <h3 className="text-lg font-bold flex items-center gap-2">
+            {t("ui.admin.integrity.summary.title", "정합성 최종 검증")}
+          </h3>
+        </div>
+        <div className="flex flex-wrap items-center gap-3 text-sm">
+          <span
+            className={`font-semibold ${integrityStatusClass(data.status)}`}
+          >
+            {integrityStatusText(data.status)}
+          </span>
+          <span className="tabular-nums">
+            {t("ui.admin.integrity.summary.failures_text", "실패 {{count}}건", {
+              count: data.summary.failures,
+            })}
+          </span>
+          <span className="text-muted-foreground">
+            {formatOverviewDateTime(data.checkedAt)}
+          </span>
+        </div>
+      </div>
+      <div className="mt-3 grid gap-2 text-sm sm:grid-cols-2">
+        {data.sections.map((section) => (
+          <div
+            key={section.key}
+            className="flex items-center justify-between gap-3 rounded border border-border/60 px-3 py-2"
+          >
+            <span>{integritySectionLabel(section.key, section.label)}</span>
+            <span
+              className={`font-medium ${integrityStatusClass(section.status)}`}
+            >
+              {integrityStatusText(section.status)}
+            </span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function integritySectionLabel(key: string, fallback: string) {
+  switch (key) {
+    case "tenant_integrity":
+      return t("ui.admin.integrity.section.tenant_integrity", fallback);
+    case "user_integrity":
+      return t("ui.admin.integrity.section.user_integrity", fallback);
+    default:
+      return fallback;
+  }
+}
+
+function RPUsageMixedChart({
+  rows,
+  periodControls,
+  filters,
+  period,
+}: {
+  rows: RPUsageDailyMetric[];
+  periodControls: ReactNode;
+  filters: ReactNode;
+  period: RPUsagePeriod;
+}) {
+  const daily = summarizeDaily(rows);
+  const series = summarizeSeries(rows);
+  const chartWidth = 720;
+  const chartHeight = 230;
+  const padX = 48;
+  const padTop = 32;
+  const padBottom = 34;
+  const innerWidth = chartWidth - padX * 2;
+  const innerHeight = chartHeight - padTop - padBottom;
+  const maxValue = Math.max(
+    1,
+    ...daily.map((point) => point.loginRequests + point.otherRequests),
+    ...daily.map((point) => point.loginRequests),
+  );
+  const slot = daily.length > 0 ? innerWidth / daily.length : innerWidth;
+  const barWidth = Math.min(28, Math.max(10, slot * 0.42));
+  const y = (value: number) =>
+    padTop + innerHeight - (value / maxValue) * innerHeight;
+  const x = (index: number) => padX + slot * index + slot / 2;
+  const linePoints = daily
+    .map((point, index) => `${x(index)},${y(point.loginRequests)}`)
+    .join(" ");
+
+  return (
+    <section className="space-y-3">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="space-y-1">
+          <h3 className="text-lg font-bold flex items-center gap-2">
+            {t("ui.admin.overview.chart.title", "회사별 앱별 로그인 요청 현황")}
+          </h3>
+          <p className="text-sm text-muted-foreground">
+            {t(
+              "ui.admin.overview.chart.description",
+              "전체 또는 선택한 조직 기준으로 그래프를 확인합니다.",
+            )}
+          </p>
+        </div>
+        {periodControls}
+      </div>
+
+      {filters}
+
+      {daily.length === 0 ? (
+        <div className="flex min-h-[210px] items-center justify-center text-sm text-muted-foreground">
+          표시할 RP 이용 집계가 없습니다.
+        </div>
+      ) : (
+        <div className="space-y-3">
+          <div className="overflow-x-auto">
+            <svg
+              role="img"
+              aria-label="일 단위 RP 요청 현황"
+              viewBox={`0 0 ${chartWidth} ${chartHeight}`}
+              className="h-[235px] min-w-[720px] w-full"
+            >
+              <title>일 단위 RP 요청 현황</title>
+              {[0, 0.25, 0.5, 0.75, 1].map((ratio) => {
+                const gridY = padTop + innerHeight * ratio;
+                const label = Math.round(maxValue * (1 - ratio));
+                return (
+                  <g key={ratio}>
+                    <line
+                      x1={padX}
+                      x2={chartWidth - padX}
+                      y1={gridY}
+                      y2={gridY}
+                      stroke="currentColor"
+                      className="text-border"
+                      strokeWidth="1"
+                    />
+                    <text
+                      x={padX - 12}
+                      y={gridY + 4}
+                      textAnchor="end"
+                      className="fill-muted-foreground text-[11px]"
+                    >
+                      {label}
+                    </text>
+                  </g>
+                );
+              })}
+              {daily.map((point, index) => {
+                const center = x(index);
+                const otherHeight =
+                  (point.otherRequests / maxValue) * innerHeight;
+                return (
+                  <g key={point.date}>
+                    <rect
+                      x={center - barWidth / 2}
+                      y={padTop + innerHeight - otherHeight}
+                      width={barWidth}
+                      height={otherHeight}
+                      rx="3"
+                      className="fill-sky-500/70"
+                    />
+                    <text
+                      x={center}
+                      y={chartHeight - 12}
+                      textAnchor="middle"
+                      className="fill-muted-foreground text-[11px]"
+                    >
+                      {formatPeriodLabel(point.date, period)}
+                    </text>
+                  </g>
+                );
+              })}
+              <polyline
+                points={linePoints}
+                fill="none"
+                className="stroke-emerald-500"
+                strokeWidth="3"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              {daily.map((point, index) => (
+                <circle
+                  key={`${point.date}-login`}
+                  cx={x(index)}
+                  cy={y(point.loginRequests)}
+                  r="4"
+                  className="fill-emerald-500 stroke-background"
+                  strokeWidth="2"
+                />
+              ))}
+            </svg>
+          </div>
+          <OverviewAxisNotes
+            xAxisLabel={t("ui.common.chart.axis.x", "X축: 기간")}
+            yAxisLabel={t("ui.common.chart.axis.y", "Y축: 로그인 요청 수")}
+          />
+        </div>
+      )}
+
+      {series.length > 0 && (
+        <div className="grid gap-x-6 gap-y-2 border-t border-border/60 pt-2 text-xs md:grid-cols-2 xl:grid-cols-3">
+          {series.map((item) => (
+            <div
+              key={item.key}
+              className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1"
+            >
+              <span className="font-medium">{item.clientLabel}</span>
+              <span className="whitespace-nowrap tabular-nums text-muted-foreground">
+                {t(
+                  "ui.common.chart.series_summary.login_users",
+                  "로그인 {{login}} / 사용자 {{subjects}}",
+                  {
+                    login: item.loginRequests.toLocaleString(),
+                    subjects: item.uniqueSubjects.toLocaleString(),
+                  },
+                )}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function GlobalOverviewPage() {
+  const [period, setPeriod] = useState<RPUsagePeriod>("day");
+  const [selectedTenantIds, setSelectedTenantIds] = useState<string[]>([]);
+  const usageDays = period === "day" ? 14 : period === "week" ? 84 : 90;
+  const statsQuery = useQuery({
+    queryKey: ["admin-overview-stats"],
+    queryFn: fetchAdminOverviewStats,
+    retry: false,
+  });
+  const tenantsQuery = useQuery({
+    queryKey: ["admin-overview-tenant-options"],
+    queryFn: () => fetchAllTenants(),
+    retry: false,
+  });
+  const tenantOptions = useMemo(() => {
+    return (tenantsQuery.data?.items ?? []).filter(
+      (tenant) => tenant.type === "COMPANY",
+    );
+  }, [tenantsQuery.data?.items]);
+  const usageQuery = useQuery({
+    queryKey: ["admin-rp-usage-daily", usageDays, period],
+    queryFn: () =>
+      fetchAdminRPUsageDaily({
+        days: usageDays,
+        period,
+      }),
+    retry: false,
+  });
+  const stats = statsQuery.data;
+  const visibleTenantCount = tenantsQuery.data?.items.length;
+  const usageRows = usageQuery.data?.items ?? [];
+  const filteredUsageRows = useMemo(() => {
+    if (selectedTenantIds.length === 0) {
+      return usageRows;
+    }
+    const selectedSet = new Set(selectedTenantIds);
+    return usageRows.filter((row) => selectedSet.has(row.tenantId));
+  }, [selectedTenantIds, usageRows]);
+  const metric = (value: number | undefined) =>
+    value === undefined ? "-" : value.toLocaleString();
+  const periodControls = (
+    <fieldset className="flex h-8 items-center gap-1" aria-label="집계 단위">
+      {[
+        ["day", t("ui.common.chart.period.day", "일")],
+        ["week", t("ui.common.chart.period.week", "주")],
+        ["month", t("ui.common.chart.period.month", "월")],
+      ].map(([value, label]) => (
+        <button
+          key={value}
+          type="button"
+          aria-pressed={period === value}
+          onClick={() => setPeriod(value as RPUsagePeriod)}
+          className={`h-8 rounded px-3 text-xs font-medium transition-colors ${
+            period === value
+              ? "bg-primary text-primary-foreground"
+              : "bg-muted/60 hover:bg-muted"
+          }`}
+        >
+          {label}
+        </button>
+      ))}
+    </fieldset>
+  );
+  const chartFilters = (
+    <div>
+      <OverviewSelectionChips
+        allLabel="전체"
+        options={tenantOptions.map((tenant) => ({
+          id: tenant.id,
+          label: `${tenant.name} (${tenant.slug})`,
+        }))}
+        selectedIds={selectedTenantIds}
+        onSelectAll={() => setSelectedTenantIds([])}
+        onToggle={(tenantId) => {
+          setSelectedTenantIds((current) =>
+            current.includes(tenantId)
+              ? current.filter((item) => item !== tenantId)
+              : [...current, tenantId],
+          );
+        }}
+      />
+    </div>
+  );
+
+  return (
+    <div className="space-y-4 animate-in fade-in duration-500">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="flex min-w-0 items-start gap-3">
+          <div className="mt-1 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-primary/15 bg-primary/10 text-primary">
+            <LayoutDashboard size={20} />
+          </div>
+          <div className="space-y-1">
+            <h2 className="text-3xl font-semibold">
+              {t("ui.common.overview.title", "운영 현황")}
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              {t(
+                "msg.admin.overview.description",
+                "시스템 전반의 주요 현황을 확인하고 관리합니다.",
+              )}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-x-6 gap-y-2 border-y border-border/60 py-2">
+        <RoleGuard roles={["super_admin"]}>
+          <OverviewMetric
+            icon={<Users size={14} />}
+            label={t(
+              "ui.admin.overview.summary.total_tenants",
+              "전체 테넌트 수",
+            )}
+            value={metric(visibleTenantCount ?? stats?.totalTenants)}
+          />
+          <OverviewMetric
+            icon={<ShieldCheck size={14} />}
+            label={t(
+              "ui.admin.overview.summary.oidc_clients",
+              "OIDC 클라이언트",
+            )}
+            value={metric(stats?.oidcClients)}
+          />
+          <OverviewMetric
+            icon={<Users size={14} />}
+            label={t("ui.admin.overview.summary.total_users", "전체 사용자 수")}
+            value={metric(stats?.totalUsers)}
+          />
+        </RoleGuard>
+        <OverviewMetric
+          icon={<Activity size={14} />}
+          label={t(
+            "ui.admin.overview.summary.audit_events_24h",
+            "24시간 이벤트",
+          )}
+          value={metric(stats?.auditEvents24h)}
+        />
+        <OverviewMetric
+          icon={<Database size={14} />}
+          label={t("ui.admin.overview.summary.policy_gate", "정책 상태")}
+          value="Active"
+        />
+      </div>
+
+      {usageQuery.isError ? (
+        <section className="space-y-2">
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div className="space-y-1">
+              <h3 className="text-lg font-bold flex items-center gap-2">
+                {t(
+                  "ui.admin.overview.chart.title",
+                  "회사별 앱별 로그인 요청 현황",
+                )}
+              </h3>
+              <p className="text-sm text-muted-foreground">
+                {t(
+                  "ui.admin.overview.chart.description",
+                  "전체 또는 선택한 조직 기준으로 그래프를 확인합니다.",
+                )}
+              </p>
+            </div>
+            {periodControls}
+          </div>
+          {chartFilters}
+          <div className="text-sm text-muted-foreground">
+            RP 이용 통계 Query API 응답을 확인할 수 없습니다. backend 재시작
+            이후 `rp_usage_daily_aggregate`가 준비되면 이 영역에 일 단위
+            그래프가 표시됩니다.
+          </div>
+        </section>
+      ) : (
+        <RPUsageMixedChart
+          rows={filteredUsageRows}
+          periodControls={periodControls}
+          filters={chartFilters}
+          period={period}
+        />
+      )}
+
+      <RoleGuard roles={["super_admin"]}>
+        <IntegrityOverviewSummary />
+      </RoleGuard>
+    </div>
+  );
+}
+
+export default GlobalOverviewPage;
--- a/baron-sso/adminfront/src/features/projections/UserProjectionPage.test.tsx
+++ b/baron-sso/adminfront/src/features/projections/UserProjectionPage.test.tsx
@@ -0,0 +1,120 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  fetchOrySSOTSystemStatus,
+  flushIdentityCache,
+} from "../../lib/adminApi";
+import { createI18nMock } from "../../test/i18nMock";
+import UserProjectionPage from "./UserProjectionPage";
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+let currentRole = "super_admin";
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchMe: vi.fn(async () => ({ role: currentRole })),
+  fetchOrySSOTSystemStatus: vi.fn(async () => ({
+    userProjection: {
+      name: "kratos_users",
+      status: "ready",
+      ready: true,
+      lastSyncedAt: "2026-05-11T03:00:00Z",
+      updatedAt: "2026-05-11T03:00:10Z",
+      projectedUsers: 152,
+    },
+    identityCache: {
+      status: "ready",
+      redisReady: true,
+      observedCount: 151,
+      lastRefreshedAt: "2026-05-11T03:00:00Z",
+      updatedAt: "2026-05-11T03:00:10Z",
+      keyCount: 153,
+    },
+  })),
+  flushIdentityCache: vi.fn(async () => ({
+    status: "success",
+    flushedKeys: 153,
+    updatedAt: "2026-05-11T03:02:00Z",
+  })),
+}));
+
+function renderPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <UserProjectionPage />
+    </QueryClientProvider>,
+  );
+}
+
+describe("UserProjectionPage", () => {
+  beforeEach(() => {
+    currentRole = "super_admin";
+    vi.clearAllMocks();
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+    window.localStorage.setItem("locale", "ko");
+  });
+
+  it("renders Ory SSOT and Redis identity cache status for super_admin", async () => {
+    renderPage();
+
+    expect(await screen.findByText("Ory SSOT 시스템")).toBeInTheDocument();
+    expect(
+      await screen.findByText(
+        "Kratos 원장과 Redis identity cache 상태를 분리해서 확인합니다.",
+      ),
+    ).toBeInTheDocument();
+    expect(await screen.findByText("Redis identity cache")).toBeInTheDocument();
+    expect(screen.getAllByText("준비됨").length).toBeGreaterThan(0);
+    expect(screen.getByText("관측 identity")).toBeInTheDocument();
+    expect(screen.getByText("152")).toBeInTheDocument();
+    expect(screen.getByText("151")).toBeInTheDocument();
+    expect(fetchOrySSOTSystemStatus).toHaveBeenCalled();
+  });
+
+  it("flushes only the Redis identity cache for super_admin", async () => {
+    renderPage();
+
+    await screen.findByText("Ory SSOT 시스템");
+    expect(screen.queryByRole("button", { name: /재동기화/ })).toBeNull();
+    expect(
+      screen.queryByRole("button", { name: /초기화 후 재구축/ }),
+    ).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: /Redis cache flush/ }));
+
+    await waitFor(() => {
+      expect(flushIdentityCache).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it("blocks non-super admins", async () => {
+    currentRole = "tenant_admin";
+
+    renderPage();
+
+    expect(await screen.findByText("접근 권한이 없습니다")).toBeInTheDocument();
+    expect(screen.queryByText("Ory SSOT 시스템")).not.toBeInTheDocument();
+    expect(fetchOrySSOTSystemStatus).not.toHaveBeenCalled();
+  });
+
+  it("renders localized labels in English", async () => {
+    window.localStorage.setItem("locale", "en");
+    renderPage();
+
+    expect(await screen.findByText("Ory SSOT System")).toBeInTheDocument();
+    expect(
+      await screen.findByText(
+        "Review Kratos source-of-truth and Redis identity cache status separately.",
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Redis cache flush")).toBeInTheDocument();
+    expect((await screen.findAllByText("ready")).length).toBeGreaterThan(0);
+  });
+});
--- a/baron-sso/adminfront/src/features/projections/UserProjectionPage.tsx
+++ b/baron-sso/adminfront/src/features/projections/UserProjectionPage.tsx
@@ -0,0 +1,340 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { AlertTriangle, Database, Trash2 } from "lucide-react";
+import { RoleGuard } from "../../components/auth/RoleGuard";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import {
+  fetchOrySSOTSystemStatus,
+  flushIdentityCache,
+} from "../../lib/adminApi";
+import { t } from "../../lib/i18n";
+import { getAdminDateLocale } from "../../lib/locale";
+
+function formatDateTime(value?: string) {
+  if (!value) return "-";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(getAdminDateLocale(), {
+    dateStyle: "medium",
+    timeStyle: "medium",
+  }).format(date);
+}
+
+function StatusBadge({ ready, status }: { ready: boolean; status: string }) {
+  if (ready) {
+    return (
+      <Badge variant="success">
+        {t("ui.admin.ory_ssot.status.ready", "ready")}
+      </Badge>
+    );
+  }
+  if (status === "failed") {
+    return (
+      <Badge variant="warning">
+        {t("ui.admin.ory_ssot.status.failed", "failed")}
+      </Badge>
+    );
+  }
+  return (
+    <Badge variant="secondary">
+      {status ? status : t("ui.admin.ory_ssot.status.not_ready", "not ready")}
+    </Badge>
+  );
+}
+
+export function UserProjectionContent({
+  embedded = false,
+}: {
+  embedded?: boolean;
+}) {
+  const queryClient = useQueryClient();
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: ["ory-ssot-system-status"],
+    queryFn: fetchOrySSOTSystemStatus,
+  });
+
+  const flushMutation = useMutation({
+    mutationFn: flushIdentityCache,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["ory-ssot-system-status"],
+      });
+    },
+  });
+
+  const handleFlush = () => {
+    const confirmed = window.confirm(
+      t(
+        "msg.admin.ory_ssot.flush_confirm",
+        "Flush only Redis identity cache keys?",
+      ),
+    );
+    if (confirmed) flushMutation.mutate();
+  };
+
+  const projection = data?.userProjection;
+  const identityCache = data?.identityCache;
+
+  const header = (
+    <header
+      className={
+        embedded
+          ? "flex flex-shrink-0 flex-wrap items-start justify-between gap-4"
+          : "flex flex-shrink-0 flex-wrap items-start justify-between gap-4 sticky top-[-2.5rem] z-20 -mt-4 bg-background/95 pb-2 pt-4 backdrop-blur"
+      }
+    >
+      <div className="flex min-w-0 items-start gap-3">
+        <div className="mt-1 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-primary/15 bg-primary/10 text-primary">
+          <Database size={20} />
+        </div>
+        <div className="space-y-2">
+          <h2 className="text-3xl font-semibold">
+            {t("ui.admin.ory_ssot.title", "Ory SSOT System")}
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            {t(
+              "msg.admin.ory_ssot.subtitle",
+              "Review Kratos source-of-truth and Redis identity cache status separately.",
+            )}
+          </p>
+        </div>
+      </div>
+      <Button
+        type="button"
+        variant="destructive"
+        onClick={handleFlush}
+        disabled={flushMutation.isPending}
+      >
+        <Trash2 size={16} />
+        {t(
+          "ui.admin.ory_ssot.actions.flush_identity_cache",
+          "Redis cache flush",
+        )}
+      </Button>
+    </header>
+  );
+
+  const body = (
+    <>
+      {isError ? (
+        <section className="rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
+          {(error as Error)?.message ||
+            t(
+              "msg.admin.ory_ssot.load_error",
+              "Failed to load Ory SSOT system status.",
+            )}
+        </section>
+      ) : null}
+
+      {flushMutation.data ? (
+        <section className="rounded-lg border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200">
+          {t(
+            "msg.admin.ory_ssot.flush_success",
+            "Flushed {{count}} Redis identity cache keys.",
+            { count: flushMutation.data.flushedKeys },
+          )}
+        </section>
+      ) : null}
+
+      {flushMutation.error ? (
+        <section className="rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
+          {(flushMutation.error as Error)?.message ||
+            t(
+              "msg.admin.ory_ssot.flush_error",
+              "Redis identity cache flush failed.",
+            )}
+        </section>
+      ) : null}
+
+      <section className="rounded-lg border border-border bg-card p-5">
+        <div className="flex items-center gap-3 border-b border-border pb-4">
+          <div>
+            <h3 className="text-lg font-bold">
+              {t(
+                "ui.admin.ory_ssot.projection_card.title",
+                "Backend user read model",
+              )}
+            </h3>
+            <p className="text-sm text-muted-foreground">
+              {t(
+                "ui.admin.ory_ssot.projection_card.description",
+                "PostgreSQL read model status used by admin search and statistics.",
+              )}
+            </p>
+          </div>
+        </div>
+
+        {isLoading ? (
+          <div className="py-8 text-sm text-muted-foreground">
+            {t("ui.admin.ory_ssot.loading", "Loading")}
+          </div>
+        ) : (
+          <dl className="grid gap-4 py-5 sm:grid-cols-2 lg:grid-cols-4">
+            <div>
+              <dt className="text-sm text-muted-foreground">
+                {t("ui.admin.ory_ssot.summary.status", "Status")}
+              </dt>
+              <dd className="mt-1">
+                <StatusBadge
+                  ready={projection?.ready ?? false}
+                  status={projection?.status ?? "unknown"}
+                />
+              </dd>
+            </div>
+            <div>
+              <dt className="text-sm text-muted-foreground">
+                {t("ui.admin.ory_ssot.summary.local_users", "Local users")}
+              </dt>
+              <dd className="mt-1 text-xl font-semibold tabular-nums">
+                {projection?.projectedUsers ?? 0}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-sm text-muted-foreground">
+                {t(
+                  "ui.admin.ory_ssot.summary.last_synced",
+                  "Last read-model refresh",
+                )}
+              </dt>
+              <dd className="mt-1 text-sm">
+                {formatDateTime(projection?.lastSyncedAt)}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-sm text-muted-foreground">
+                {t("ui.admin.ory_ssot.summary.updated_at", "Updated at")}
+              </dt>
+              <dd className="mt-1 text-sm">
+                {formatDateTime(projection?.updatedAt)}
+              </dd>
+            </div>
+          </dl>
+        )}
+
+        {projection?.lastError ? (
+          <div className="flex gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200">
+            <AlertTriangle className="mt-0.5 shrink-0" size={16} />
+            <span>{projection.lastError}</span>
+          </div>
+        ) : null}
+      </section>
+
+      <section className="rounded-lg border border-border bg-card p-5">
+        <div className="flex items-center gap-3 border-b border-border pb-4">
+          <div>
+            <h3 className="text-lg font-bold">
+              {t("ui.admin.ory_ssot.cache_card.title", "Redis identity cache")}
+            </h3>
+            <p className="text-sm text-muted-foreground">
+              {t(
+                "ui.admin.ory_ssot.cache_card.description",
+                "Redis mirror/cache status for Kratos identity list and lookup operations.",
+              )}
+            </p>
+          </div>
+        </div>
+
+        {isLoading ? (
+          <div className="py-8 text-sm text-muted-foreground">
+            {t("ui.admin.ory_ssot.loading", "Loading")}
+          </div>
+        ) : (
+          <dl className="grid gap-4 py-5 sm:grid-cols-2 lg:grid-cols-4">
+            <div>
+              <dt className="text-sm text-muted-foreground">
+                {t("ui.admin.ory_ssot.summary.status", "Status")}
+              </dt>
+              <dd className="mt-1">
+                <StatusBadge
+                  ready={
+                    Boolean(identityCache?.redisReady) &&
+                    identityCache?.status === "ready"
+                  }
+                  status={identityCache?.status ?? "unknown"}
+                />
+              </dd>
+            </div>
+            <div>
+              <dt className="text-sm text-muted-foreground">
+                {t(
+                  "ui.admin.ory_ssot.summary.observed_identities",
+                  "Observed identities",
+                )}
+              </dt>
+              <dd className="mt-1 text-xl font-semibold tabular-nums">
+                {identityCache?.observedCount ?? 0}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-sm text-muted-foreground">
+                {t("ui.admin.ory_ssot.summary.cache_keys", "Cache keys")}
+              </dt>
+              <dd className="mt-1 text-xl font-semibold tabular-nums">
+                {identityCache?.keyCount ?? 0}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-sm text-muted-foreground">
+                {t(
+                  "ui.admin.ory_ssot.summary.last_refreshed",
+                  "Last refreshed",
+                )}
+              </dt>
+              <dd className="mt-1 text-sm">
+                {formatDateTime(identityCache?.lastRefreshedAt)}
+              </dd>
+            </div>
+          </dl>
+        )}
+
+        {identityCache?.lastError ? (
+          <div className="flex gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200">
+            <AlertTriangle className="mt-0.5 shrink-0" size={16} />
+            <span>{identityCache.lastError}</span>
+          </div>
+        ) : null}
+      </section>
+    </>
+  );
+
+  if (embedded) {
+    return (
+      <div className="space-y-4 pb-6">
+        {header}
+        {body}
+      </div>
+    );
+  }
+
+  return (
+    <main className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
+      {header}
+      {body}
+    </main>
+  );
+}
+
+export default function UserProjectionPage() {
+  return (
+    <RoleGuard
+      roles={["super_admin"]}
+      fallback={
+        <main className="p-6 md:p-8">
+          <section className="rounded-lg border border-border bg-card p-5">
+            <h2 className="text-lg font-semibold">
+              {t("ui.admin.ory_ssot.forbidden.title", "Access denied")}
+            </h2>
+            <p className="mt-2 text-sm text-muted-foreground">
+              {t(
+                "msg.admin.ory_ssot.forbidden.description",
+                "This screen is only available to super_admin users.",
+              )}
+            </p>
+          </section>
+        </main>
+      }
+    >
+      <UserProjectionContent />
+    </RoleGuard>
+  );
+}
--- a/baron-sso/adminfront/src/features/tenants/components/DomainTagInput.test.tsx
+++ b/baron-sso/adminfront/src/features/tenants/components/DomainTagInput.test.tsx
@@ -0,0 +1,53 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { DomainTagInput } from "./DomainTagInput";
+
+describe("DomainTagInput", () => {
+  it("shows a clear duplicate tenant warning and adds the domain after confirmation", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    const onConfirmedConflictsChange = vi.fn();
+
+    render(
+      <DomainTagInput
+        value={[]}
+        onChange={onChange}
+        tenants={[
+          {
+            id: "tenant-1",
+            name: "한맥가족",
+            slug: "hanmac-family",
+            type: "COMPANY",
+            description: "",
+            status: "active",
+            domains: ["samaneng.com"],
+            memberCount: 0,
+            createdAt: "",
+            updatedAt: "",
+          },
+        ]}
+        currentTenantId="tenant-2"
+        confirmedConflicts={[]}
+        onConfirmedConflictsChange={onConfirmedConflictsChange}
+        placeholder="example.com"
+      />,
+    );
+
+    await user.type(
+      screen.getByPlaceholderText("example.com"),
+      "samaneng.com ",
+    );
+
+    expect(
+      await screen.findByText(
+        "samaneng.com 도메인은 한맥가족 테넌트에 이미 설정되어 있습니다. 그래도 현재 테넌트에도 추가하시겠습니까?",
+      ),
+    ).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "계속 진행" }));
+
+    expect(onChange).toHaveBeenCalledWith(["samaneng.com"]);
+    expect(onConfirmedConflictsChange).toHaveBeenCalledWith(["samaneng.com"]);
+  });
+});
--- a/baron-sso/adminfront/src/features/tenants/components/DomainTagInput.tsx
+++ b/baron-sso/adminfront/src/features/tenants/components/DomainTagInput.tsx
@@ -0,0 +1,187 @@
+import { X } from "lucide-react";
+import { useState } from "react";
+import { Badge } from "../../../components/ui/badge";
+import { Button } from "../../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../../components/ui/dialog";
+import { Input } from "../../../components/ui/input";
+import type { TenantSummary } from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+import {
+  type DomainConflict,
+  findDomainConflict,
+  formatDomainConflictMessage,
+  normalizeDomainTokens,
+} from "../utils/domainTags";
+
+type DomainTagInputProps = {
+  id?: string;
+  value: string[];
+  onChange: (domains: string[]) => void;
+  tenants?: TenantSummary[];
+  currentTenantId?: string;
+  confirmedConflicts?: string[];
+  onConfirmedConflictsChange?: (domains: string[]) => void;
+  placeholder?: string;
+};
+
+export function DomainTagInput({
+  id,
+  value,
+  onChange,
+  tenants = [],
+  currentTenantId,
+  confirmedConflicts = [],
+  onConfirmedConflictsChange,
+  placeholder,
+}: DomainTagInputProps) {
+  const [input, setInput] = useState("");
+  const [pendingConflict, setPendingConflict] = useState<DomainConflict | null>(
+    null,
+  );
+
+  const addConfirmedConflict = (domain: string) => {
+    if (!confirmedConflicts.includes(domain)) {
+      onConfirmedConflictsChange?.([...confirmedConflicts, domain]);
+    }
+  };
+
+  const removeConfirmedConflict = (domain: string) => {
+    if (confirmedConflicts.includes(domain)) {
+      onConfirmedConflictsChange?.(
+        confirmedConflicts.filter((item) => item !== domain),
+      );
+    }
+  };
+
+  const addDomain = (domain: string, confirmed = false) => {
+    if (value.includes(domain)) {
+      return;
+    }
+    onChange([...value, domain]);
+    if (confirmed) {
+      addConfirmedConflict(domain);
+    }
+  };
+
+  const tokenizeInput = () => {
+    const tokens = normalizeDomainTokens(input);
+    if (tokens.length === 0) {
+      setInput("");
+      return;
+    }
+
+    for (const token of tokens) {
+      if (value.includes(token)) {
+        continue;
+      }
+      const conflict = findDomainConflict(token, tenants, currentTenantId);
+      if (conflict && !confirmedConflicts.includes(token)) {
+        setPendingConflict(conflict);
+        setInput("");
+        return;
+      }
+      addDomain(token, confirmedConflicts.includes(token));
+    }
+    setInput("");
+  };
+
+  const removeDomain = (domain: string) => {
+    onChange(value.filter((item) => item !== domain));
+    removeConfirmedConflict(domain);
+  };
+
+  return (
+    <>
+      <div className="flex min-h-10 w-full flex-wrap items-center gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm focus-within:ring-1 focus-within:ring-ring">
+        {value.map((domain) => (
+          <Badge
+            key={domain}
+            variant={confirmedConflicts.includes(domain) ? "warning" : "muted"}
+            className="gap-1 rounded-md"
+          >
+            <span>{domain}</span>
+            <button
+              type="button"
+              className="inline-flex h-4 w-4 items-center justify-center rounded-sm hover:bg-background/60"
+              onClick={() => removeDomain(domain)}
+              aria-label={t("ui.common.remove", "삭제")}
+            >
+              <X size={12} />
+            </button>
+          </Badge>
+        ))}
+        <Input
+          id={id}
+          value={input}
+          onChange={(event) => setInput(event.target.value)}
+          onBlur={tokenizeInput}
+          onKeyDown={(event) => {
+            if (
+              event.key === " " ||
+              event.key === "Enter" ||
+              event.key === "," ||
+              event.key === ";"
+            ) {
+              event.preventDefault();
+              tokenizeInput();
+            }
+          }}
+          className="h-7 min-w-[180px] flex-1 border-0 px-0 py-0 shadow-none focus-visible:ring-0"
+          placeholder={value.length === 0 ? placeholder : undefined}
+        />
+      </div>
+
+      <Dialog
+        open={pendingConflict !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setPendingConflict(null);
+          }
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {t("ui.admin.tenants.domain_conflict.title", "도메인 충돌")}
+            </DialogTitle>
+            <DialogDescription>
+              {pendingConflict
+                ? t(
+                    "ui.admin.tenants.domain_conflict.description",
+                    formatDomainConflictMessage(pendingConflict),
+                  )
+                : ""}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setPendingConflict(null)}
+            >
+              {t("ui.common.cancel", "취소")}
+            </Button>
+            <Button
+              type="button"
+              onClick={() => {
+                if (pendingConflict) {
+                  addDomain(pendingConflict.domain, true);
+                }
+                setPendingConflict(null);
+              }}
+            >
+              {t("ui.common.continue", "계속 진행")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
--- a/baron-sso/adminfront/src/features/tenants/components/ParentTenantSelector.helpers.ts
+++ b/baron-sso/adminfront/src/features/tenants/components/ParentTenantSelector.helpers.ts
@@ -0,0 +1,21 @@
+import type { TenantSummary } from "../../../lib/adminApi";
+
+const companyParentTypes = new Set(["COMPANY", "COMPANY_GROUP"]);
+
+export function filterParentTenants(
+  tenants: TenantSummary[],
+  search: string,
+  companyOnly: boolean,
+  excludeTenantId = "",
+) {
+  const normalizedSearch = search.trim().toLowerCase();
+  return tenants.filter((tenant) => {
+    if (excludeTenantId && tenant.id === excludeTenantId) return false;
+    if (companyOnly && !companyParentTypes.has(tenant.type)) return false;
+    if (!normalizedSearch) return true;
+
+    return [tenant.name, tenant.slug, tenant.type]
+      .filter(Boolean)
+      .some((value) => value.toLowerCase().includes(normalizedSearch));
+  });
+}
--- a/baron-sso/adminfront/src/features/tenants/components/ParentTenantSelector.picker.test.tsx
+++ b/baron-sso/adminfront/src/features/tenants/components/ParentTenantSelector.picker.test.tsx
@@ -0,0 +1,137 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { TenantSummary } from "../../../lib/adminApi";
+import { ParentTenantSelector } from "./ParentTenantSelector";
+
+const tenants: TenantSummary[] = [
+  {
+    id: "company-1",
+    type: "COMPANY",
+    name: "Saman Engineering",
+    slug: "saman",
+    description: "",
+    status: "active",
+    memberCount: 0,
+    createdAt: "",
+    updatedAt: "",
+  },
+  {
+    id: "group-1",
+    type: "COMPANY_GROUP",
+    name: "Hanmac Family",
+    slug: "hanmac-family",
+    description: "",
+    status: "active",
+    memberCount: 0,
+    createdAt: "",
+    updatedAt: "",
+  },
+];
+
+describe("ParentTenantSelector picker", () => {
+  it("opens an org-chart picker modal and applies tenant selection messages", async () => {
+    const onChange = vi.fn();
+
+    render(
+      <ParentTenantSelector
+        id="parentId"
+        label="상위 테넌트"
+        value=""
+        onChange={onChange}
+        tenants={tenants}
+        noneLabel="없음"
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /테넌트 선택/ }));
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    const pickerSrc = screen.getByTitle("테넌트 선택").getAttribute("src");
+    expect(pickerSrc).toContain("/login");
+    expect(decodeURIComponent(pickerSrc ?? "")).toContain("/embed/picker");
+
+    fireEvent(
+      window,
+      new MessageEvent("message", {
+        data: {
+          type: "orgfront:picker:confirm",
+          payload: {
+            selections: [
+              {
+                type: "tenant",
+                id: "company-1",
+                name: "Saman Engineering",
+              },
+            ],
+          },
+        },
+      }),
+    );
+
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("company-1"));
+  });
+
+  it("keeps the current tenant out of picker message selections", async () => {
+    const onChange = vi.fn();
+
+    render(
+      <ParentTenantSelector
+        id="parentId"
+        label="상위 테넌트"
+        value=""
+        onChange={onChange}
+        tenants={tenants}
+        noneLabel="없음"
+        excludeTenantId="company-1"
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /테넌트 선택/ }));
+    fireEvent(
+      window,
+      new MessageEvent("message", {
+        data: {
+          type: "orgfront:picker:confirm",
+          payload: {
+            selections: [
+              {
+                type: "tenant",
+                id: "company-1",
+                name: "Saman Engineering",
+              },
+            ],
+          },
+        },
+      }),
+    );
+
+    await waitFor(() => expect(onChange).not.toHaveBeenCalled());
+  });
+
+  it("selects a non-hanmac parent from the local tenant picker", async () => {
+    const onChange = vi.fn();
+
+    render(
+      <ParentTenantSelector
+        id="parentId"
+        label="상위 테넌트"
+        value=""
+        onChange={onChange}
+        tenants={tenants}
+        noneLabel="없음"
+        orgChartPickerLabel="한맥가족에서 선택"
+        localPickerLabel="다른 테넌트 선택"
+        localTenantFilter={(tenant) => tenant.slug !== "hanmac-family"}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "다른 테넌트 선택" }));
+    fireEvent.change(
+      screen.getByPlaceholderText("테넌트 이름 또는 슬러그 검색"),
+      { target: { value: "saman" } },
+    );
+    fireEvent.click(screen.getByRole("button", { name: /Saman Engineering/ }));
+
+    expect(onChange).toHaveBeenCalledWith("company-1");
+  });
+});
--- a/baron-sso/adminfront/src/features/tenants/components/ParentTenantSelector.test.ts
+++ b/baron-sso/adminfront/src/features/tenants/components/ParentTenantSelector.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import type { TenantSummary } from "../../../lib/adminApi";
+import { filterParentTenants } from "./ParentTenantSelector.helpers";
+
+const tenants: TenantSummary[] = [
+  {
+    id: "company-1",
+    type: "COMPANY",
+    name: "Saman Engineering",
+    slug: "saman",
+    description: "",
+    status: "active",
+    memberCount: 0,
+    createdAt: "",
+    updatedAt: "",
+  },
+  {
+    id: "group-1",
+    type: "COMPANY_GROUP",
+    name: "Hanmac Family",
+    slug: "hanmac-family",
+    description: "",
+    status: "active",
+    memberCount: 0,
+    createdAt: "",
+    updatedAt: "",
+  },
+  {
+    id: "org-1",
+    type: "ORGANIZATION",
+    name: "기획부",
+    slug: "planning",
+    description: "",
+    status: "active",
+    memberCount: 0,
+    createdAt: "",
+    updatedAt: "",
+  },
+];
+
+describe("filterParentTenants", () => {
+  it("searches parent candidates by name and slug", () => {
+    expect(
+      filterParentTenants(tenants, "saman", false).map((t) => t.id),
+    ).toEqual(["company-1"]);
+    expect(
+      filterParentTenants(tenants, "family", false).map((t) => t.id),
+    ).toEqual(["group-1"]);
+  });
+
+  it("can limit parent candidates to company and company group tenants", () => {
+    expect(filterParentTenants(tenants, "", true).map((t) => t.id)).toEqual([
+      "company-1",
+      "group-1",
+    ]);
+  });
+});
--- a/baron-sso/adminfront/src/features/tenants/components/ParentTenantSelector.tsx
+++ b/baron-sso/adminfront/src/features/tenants/components/ParentTenantSelector.tsx
@@ -0,0 +1,257 @@
+import { Building2, X } from "lucide-react";
+import type { ReactNode } from "react";
+import { useEffect, useState } from "react";
+import { Button } from "../../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Label } from "../../../components/ui/label";
+import type { TenantSummary } from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+import {
+  buildAuthenticatedOrgChartTenantPickerUrl,
+  parseOrgChartTenantSelection,
+} from "../../users/orgChartPicker";
+import { filterParentTenants } from "./ParentTenantSelector.helpers";
+
+type ParentTenantSelectorProps = {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  tenants: TenantSummary[];
+  noneLabel: string;
+  helpText?: string;
+  excludeTenantId?: string;
+  labelAction?: ReactNode;
+  contextLabel?: string;
+  orgChartPickerLabel?: string;
+  localPickerLabel?: string;
+  localTenantFilter?: (tenant: TenantSummary) => boolean;
+  compact?: boolean;
+  controlTestId?: string;
+};
+
+export function ParentTenantSelector({
+  id,
+  label,
+  value,
+  onChange,
+  tenants,
+  noneLabel,
+  helpText,
+  excludeTenantId,
+  labelAction,
+  contextLabel,
+  orgChartPickerLabel,
+  localPickerLabel,
+  localTenantFilter,
+  compact = false,
+  controlTestId,
+}: ParentTenantSelectorProps) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [localPickerOpen, setLocalPickerOpen] = useState(false);
+  const [localSearch, setLocalSearch] = useState("");
+  const selectedTenant = tenants.find((tenant) => tenant.id === value);
+  const localCandidates = filterParentTenants(
+    localTenantFilter ? tenants.filter(localTenantFilter) : tenants,
+    localSearch,
+    false,
+    excludeTenantId,
+  );
+  const pickerUrl = buildAuthenticatedOrgChartTenantPickerUrl(
+    import.meta.env.ORGFRONT_URL,
+  );
+
+  useEffect(() => {
+    if (!pickerOpen) return;
+
+    const onMessage = (event: MessageEvent) => {
+      const selection = parseOrgChartTenantSelection(event.data);
+      if (!selection) return;
+      if (excludeTenantId && selection.id === excludeTenantId) return;
+
+      onChange(selection.id);
+      setPickerOpen(false);
+    };
+
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [excludeTenantId, onChange, pickerOpen]);
+
+  return (
+    <div className={compact ? "space-y-1" : "space-y-2"}>
+      <div
+        className={
+          compact
+            ? "flex min-h-5 flex-wrap items-center justify-between gap-2"
+            : "flex min-h-8 flex-wrap items-center justify-between gap-2"
+        }
+      >
+        <Label className="text-sm font-semibold">{label}</Label>
+        {labelAction}
+      </div>
+      <input id={id} name={id} type="hidden" value={value} readOnly />
+      <div
+        data-testid={controlTestId}
+        className={
+          compact
+            ? "flex h-10 min-w-0 items-center gap-2 rounded-lg border border-input bg-background px-2"
+            : "flex min-h-10 flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2"
+        }
+      >
+        <Dialog open={pickerOpen} onOpenChange={setPickerOpen}>
+          <DialogTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className={compact ? "h-8 shrink-0 px-2" : undefined}
+            >
+              <Building2 className="h-4 w-4" />
+              {orgChartPickerLabel ??
+                (compact ? undefined : selectedTenant?.name) ??
+                t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="max-w-[460px] p-4">
+            <DialogHeader>
+              <DialogTitle>
+                {t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
+              </DialogTitle>
+              <DialogDescription>
+                {t(
+                  "msg.admin.tenants.parent.picker_description",
+                  "org-chart에서 테넌트를 선택하면 상위 테넌트에 반영됩니다.",
+                )}
+              </DialogDescription>
+            </DialogHeader>
+            <iframe
+              title={t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
+              src={pickerUrl}
+              className="h-[600px] w-full rounded-md border"
+            />
+          </DialogContent>
+        </Dialog>
+        {localPickerLabel && (
+          <Dialog open={localPickerOpen} onOpenChange={setLocalPickerOpen}>
+            <DialogTrigger asChild>
+              <Button type="button" variant="outline" size="sm">
+                <Building2 className="h-4 w-4" />
+                {localPickerLabel}
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="max-w-[460px] p-4">
+              <DialogHeader>
+                <DialogTitle>
+                  {localPickerLabel ??
+                    t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
+                </DialogTitle>
+                <DialogDescription>
+                  {t(
+                    "msg.admin.tenants.parent.local_picker_description",
+                    "테넌트 목록에서 상위 테넌트로 사용할 항목을 선택합니다.",
+                  )}
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-3">
+                <input
+                  id="parent-tenant-local-search"
+                  name="parent-tenant-local-search"
+                  className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  value={localSearch}
+                  onChange={(event) => setLocalSearch(event.target.value)}
+                  placeholder={t(
+                    "ui.admin.tenants.parent.local_search_placeholder",
+                    "테넌트 이름 또는 슬러그 검색",
+                  )}
+                />
+                <div className="max-h-[360px] space-y-2 overflow-y-auto">
+                  {localCandidates.map((tenant) => (
+                    <Button
+                      key={tenant.id}
+                      type="button"
+                      variant="outline"
+                      className="h-auto w-full justify-start px-3 py-2 text-left"
+                      onClick={() => {
+                        onChange(tenant.id);
+                        setLocalPickerOpen(false);
+                        setLocalSearch("");
+                      }}
+                    >
+                      <span>
+                        <span className="block text-sm font-medium">
+                          {tenant.name}
+                        </span>
+                        <span className="block text-xs text-muted-foreground">
+                          {tenant.slug} · {tenant.type}
+                        </span>
+                      </span>
+                    </Button>
+                  ))}
+                  {localCandidates.length === 0 && (
+                    <p className="rounded-md border border-dashed px-3 py-4 text-sm text-muted-foreground">
+                      {t(
+                        "msg.admin.tenants.parent.local_picker_empty",
+                        "선택할 수 있는 테넌트가 없습니다.",
+                      )}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </DialogContent>
+          </Dialog>
+        )}
+        {selectedTenant ? (
+          <>
+            <span
+              className={
+                compact
+                  ? "min-w-0 flex-1 truncate text-xs text-muted-foreground"
+                  : "text-xs text-muted-foreground"
+              }
+              title={`${selectedTenant.name} · ${selectedTenant.slug} · ${selectedTenant.type}`}
+            >
+              {compact
+                ? `${selectedTenant.name} · ${selectedTenant.slug}`
+                : `${selectedTenant.slug} · ${selectedTenant.type}`}
+            </span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className={compact ? "h-7 w-7 shrink-0" : "h-8 w-8"}
+              onClick={() => onChange("")}
+              aria-label={noneLabel}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </>
+        ) : (
+          <span
+            className={
+              compact
+                ? "min-w-0 flex-1 truncate text-xs text-muted-foreground"
+                : "text-xs text-muted-foreground"
+            }
+          >
+            {noneLabel}
+          </span>
+        )}
+        {contextLabel && (
+          <span className="rounded-md border px-2 py-1 text-xs font-medium text-muted-foreground">
+            {contextLabel}
+          </span>
+        )}
+      </div>
+      {helpText && (
+        <p className="mt-1 text-xs text-muted-foreground">{helpText}</p>
+      )}
+    </div>
+  );
+}
--- a/baron-sso/adminfront/src/features/tenants/routes/TenantAdminsAndOwnersTab.tsx
+++ b/baron-sso/adminfront/src/features/tenants/routes/TenantAdminsAndOwnersTab.tsx
@@ -0,0 +1,673 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import {
+  Crown,
+  Plus,
+  Search,
+  ShieldCheck,
+  UserPlus,
+  Users,
+} from "lucide-react";
+import { useState } from "react";
+import { useAuth } from "react-oidc-context";
+import { useNavigate, useParams } from "react-router-dom";
+import { commonStickyTableHeaderClass } from "../../../../../common/ui/table";
+import { Badge } from "../../../components/ui/badge";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../../../components/ui/dialog";
+import { Input } from "../../../components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import { toast } from "../../../components/ui/use-toast";
+import {
+  addTenantAdmin,
+  addTenantOwner,
+  fetchTenantAdmins,
+  fetchTenantOwners,
+  fetchUsers,
+  removeTenantAdmin,
+  removeTenantOwner,
+  type TenantAdmin,
+} from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+
+type DialogMode = "owner" | "admin";
+
+function mergePendingMembers(
+  members: TenantAdmin[],
+  pendingMembers: TenantAdmin[],
+) {
+  const existingIds = new Set(members.map((member) => member.id));
+  return [
+    ...members,
+    ...pendingMembers.filter((member) => !existingIds.has(member.id)),
+  ];
+}
+
+export function TenantAdminsAndOwnersTab() {
+  const auth = useAuth();
+  const navigate = useNavigate();
+  const _currentUserId = auth.user?.profile.sub;
+  const { tenantId: tenantIdParam } = useParams<{ tenantId: string }>();
+  const tenantId = tenantIdParam ?? "";
+  const queryClient = useQueryClient();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [dialogMode, setDialogMode] = useState<DialogMode | null>(null);
+  const [pendingOwners, setPendingOwners] = useState<TenantAdmin[]>([]);
+  const [pendingAdmins, setPendingAdmins] = useState<TenantAdmin[]>([]);
+
+  const ownersQuery = useQuery({
+    queryKey: ["tenant-owners", tenantId],
+    queryFn: () => fetchTenantOwners(tenantId),
+    enabled: !!tenantId,
+  });
+
+  const adminsQuery = useQuery({
+    queryKey: ["tenant-admins", tenantId],
+    queryFn: () => fetchTenantAdmins(tenantId),
+    enabled: !!tenantId,
+  });
+
+  const usersQuery = useQuery({
+    queryKey: ["admin-users-search", searchTerm],
+    queryFn: () => fetchUsers(20, 0, searchTerm),
+    enabled: dialogMode !== null && searchTerm.length >= 2,
+  });
+
+  const addOwnerMutation = useMutation({
+    mutationFn: (userId: string) => addTenantOwner(tenantId, userId),
+    onMutate: async (userId) => {
+      await queryClient.cancelQueries({
+        queryKey: ["tenant-owners", tenantId],
+      });
+      const previousOwners = queryClient.getQueryData<TenantAdmin[]>([
+        "tenant-owners",
+        tenantId,
+      ]);
+
+      // Optimistically add to the list to prevent immediate double clicks
+      const addedUser = searchResults.find((u) => u.id === userId);
+      if (addedUser) {
+        const optimisticOwner = {
+          id: userId,
+          name: addedUser.name,
+          email: addedUser.email,
+        };
+        setPendingOwners((old) =>
+          old.some((owner) => owner.id === userId)
+            ? old
+            : [...old, optimisticOwner],
+        );
+        queryClient.setQueryData<TenantAdmin[]>(
+          ["tenant-owners", tenantId],
+          (old) => {
+            if (!old) return [optimisticOwner];
+            if (old.some((o) => o.id === userId)) return old;
+            return [...old, optimisticOwner];
+          },
+        );
+      }
+      return { previousOwners };
+    },
+    onSuccess: () => {
+      // Delay invalidation slightly to give the backend outbox time to process
+      setTimeout(() => {
+        queryClient.invalidateQueries({
+          queryKey: ["tenant-owners", tenantId],
+        });
+      }, 1000);
+      toast.success(
+        t("msg.admin.tenants.owners.add_success", "소유자가 추가되었습니다."),
+      );
+      setSearchTerm("");
+    },
+    onError: (err: AxiosError<{ error?: string }>, userId, context) => {
+      setPendingOwners((old) => old.filter((owner) => owner.id !== userId));
+      if (context?.previousOwners) {
+        queryClient.setQueryData(
+          ["tenant-owners", tenantId],
+          context.previousOwners,
+        );
+      }
+      toast.error(
+        err.response?.data?.error ||
+          t("msg.common.error", "오류가 발생했습니다."),
+      );
+    },
+  });
+
+  const removeOwnerMutation = useMutation({
+    mutationFn: (userId: string) => removeTenantOwner(tenantId, userId),
+    onMutate: async (userId) => {
+      await queryClient.cancelQueries({
+        queryKey: ["tenant-owners", tenantId],
+      });
+      const previousOwners = queryClient.getQueryData<TenantAdmin[]>([
+        "tenant-owners",
+        tenantId,
+      ]);
+      setPendingOwners((old) => old.filter((owner) => owner.id !== userId));
+      queryClient.setQueryData<TenantAdmin[]>(
+        ["tenant-owners", tenantId],
+        (old) => (old ? old.filter((o) => o.id !== userId) : []),
+      );
+      return { previousOwners };
+    },
+    onSuccess: () => {
+      setTimeout(() => {
+        queryClient.invalidateQueries({
+          queryKey: ["tenant-owners", tenantId],
+        });
+      }, 1000);
+      toast.success(
+        t(
+          "msg.admin.tenants.owners.remove_success",
+          "소유자 권한이 회수되었습니다.",
+        ),
+      );
+    },
+    onError: (err: AxiosError<{ error?: string }>, _userId, context) => {
+      if (context?.previousOwners) {
+        queryClient.setQueryData(
+          ["tenant-owners", tenantId],
+          context.previousOwners,
+        );
+      }
+      toast.error(
+        err.response?.data?.error ||
+          t("msg.common.error", "오류가 발생했습니다."),
+      );
+    },
+  });
+
+  const addAdminMutation = useMutation({
+    mutationFn: (userId: string) => addTenantAdmin(tenantId, userId),
+    onMutate: async (userId) => {
+      await queryClient.cancelQueries({
+        queryKey: ["tenant-admins", tenantId],
+      });
+      const previousAdmins = queryClient.getQueryData<TenantAdmin[]>([
+        "tenant-admins",
+        tenantId,
+      ]);
+
+      const addedUser = searchResults.find((u) => u.id === userId);
+      if (addedUser) {
+        const optimisticAdmin = {
+          id: userId,
+          name: addedUser.name,
+          email: addedUser.email,
+        };
+        setPendingAdmins((old) =>
+          old.some((admin) => admin.id === userId)
+            ? old
+            : [...old, optimisticAdmin],
+        );
+        queryClient.setQueryData<TenantAdmin[]>(
+          ["tenant-admins", tenantId],
+          (old) => {
+            if (!old) return [optimisticAdmin];
+            if (old.some((a) => a.id === userId)) return old;
+            return [...old, optimisticAdmin];
+          },
+        );
+      }
+      return { previousAdmins };
+    },
+    onSuccess: () => {
+      setTimeout(() => {
+        queryClient.invalidateQueries({
+          queryKey: ["tenant-admins", tenantId],
+        });
+      }, 1000);
+      toast.success(
+        t("msg.admin.tenants.admins.add_success", "관리자가 추가되었습니다."),
+      );
+      setSearchTerm("");
+    },
+    onError: (err: AxiosError<{ error?: string }>, userId, context) => {
+      setPendingAdmins((old) => old.filter((admin) => admin.id !== userId));
+      if (context?.previousAdmins) {
+        queryClient.setQueryData(
+          ["tenant-admins", tenantId],
+          context.previousAdmins,
+        );
+      }
+      toast.error(
+        err.response?.data?.error ||
+          t("msg.common.error", "오류가 발생했습니다."),
+      );
+    },
+  });
+
+  const removeAdminMutation = useMutation({
+    mutationFn: (userId: string) => removeTenantAdmin(tenantId, userId),
+    onMutate: async (userId) => {
+      await queryClient.cancelQueries({
+        queryKey: ["tenant-admins", tenantId],
+      });
+      const previousAdmins = queryClient.getQueryData<TenantAdmin[]>([
+        "tenant-admins",
+        tenantId,
+      ]);
+      setPendingAdmins((old) => old.filter((admin) => admin.id !== userId));
+      queryClient.setQueryData<TenantAdmin[]>(
+        ["tenant-admins", tenantId],
+        (old) => (old ? old.filter((a) => a.id !== userId) : []),
+      );
+      return { previousAdmins };
+    },
+    onSuccess: () => {
+      setTimeout(() => {
+        queryClient.invalidateQueries({
+          queryKey: ["tenant-admins", tenantId],
+        });
+      }, 1000);
+      toast.success(
+        t("msg.admin.tenants.admins.remove_success", "권한이 회수되었습니다."),
+      );
+    },
+    onError: (err: AxiosError<{ error?: string }>, _userId, context) => {
+      if (context?.previousAdmins) {
+        queryClient.setQueryData(
+          ["tenant-admins", tenantId],
+          context.previousAdmins,
+        );
+      }
+      toast.error(
+        err.response?.data?.error ||
+          t("msg.common.error", "오류가 발생했습니다."),
+      );
+    },
+  });
+
+  const handleAddUser = (userId: string) => {
+    if (dialogMode === "owner") {
+      addOwnerMutation.mutate(userId);
+    } else if (dialogMode === "admin") {
+      addAdminMutation.mutate(userId);
+    }
+  };
+
+  const _handleRemoveOwner = (userId: string, userName: string) => {
+    if (
+      window.confirm(
+        t(
+          "msg.admin.tenants.owners.remove_confirm",
+          "소유자를 삭제하시겠습니까?",
+          { name: userName },
+        ),
+      )
+    ) {
+      removeOwnerMutation.mutate(userId);
+    }
+  };
+
+  const _handleRemoveAdmin = (userId: string, userName: string) => {
+    if (
+      window.confirm(
+        t(
+          "msg.admin.tenants.admins.remove_confirm",
+          "관리자를 삭제하시겠습니까?",
+          { name: userName },
+        ),
+      )
+    ) {
+      removeAdminMutation.mutate(userId);
+    }
+  };
+
+  if (!tenantId) return null;
+
+  const serverOwners = ownersQuery.data || [];
+  const serverAdmins = adminsQuery.data || [];
+  const currentOwners = mergePendingMembers(serverOwners, pendingOwners);
+  const currentAdmins = mergePendingMembers(serverAdmins, pendingAdmins);
+  const searchResults = usersQuery.data?.items || [];
+  const isDialogOpen = dialogMode !== null;
+
+  const dialogTitle =
+    dialogMode === "owner"
+      ? t("ui.admin.tenants.owners.dialog_title", "새 소유자 추가")
+      : t("ui.admin.tenants.admins.dialog_title", "새 관리자 추가");
+
+  const dialogDescription =
+    dialogMode === "owner"
+      ? t(
+          "ui.admin.tenants.owners.dialog_description",
+          "이름 또는 이메일로 사용자를 검색하세요.",
+        )
+      : t(
+          "ui.admin.tenants.admins.dialog_description",
+          "이름 또는 이메일로 사용자를 검색하세요.",
+        );
+
+  return (
+    <div className="space-y-8 mt-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
+      <div className="flex-1 flex flex-col lg:flex-row gap-8 min-h-0">
+        {/* Owners Card */}
+        <Card className="flex-1 flex flex-col min-h-0 border-none shadow-sm bg-[var(--color-panel)]">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-7 flex-shrink-0">
+            <div className="space-y-1">
+              <CardTitle className="text-2xl font-bold flex items-center gap-2">
+                <Crown className="h-6 w-6 text-yellow-500" />
+                {t("ui.admin.tenants.owners.title", "테넌트 소유자")}
+              </CardTitle>
+              <CardDescription className="text-muted-foreground">
+                {t(
+                  "msg.admin.tenants.owners.subtitle",
+                  "이 테넌트의 최상위 권한을 가진 소유자(조직장) 목록입니다.",
+                )}
+              </CardDescription>
+            </div>
+            <Button
+              className="bg-primary text-primary-foreground hover:bg-primary/90"
+              onClick={() => setDialogMode("owner")}
+            >
+              <UserPlus className="mr-2 h-4 w-4" />
+              {t("ui.admin.tenants.owners.add_button", "소유자 추가")}
+            </Button>
+          </CardHeader>
+          <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
+            <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
+              <div className="flex-1 overflow-auto relative custom-scrollbar">
+                <Table>
+                  <TableHeader className={commonStickyTableHeaderClass}>
+                    <TableRow>
+                      <TableHead className="w-[250px] font-bold">
+                        {t("ui.admin.tenants.owners.table_name", "이름")}
+                      </TableHead>
+                      <TableHead className="font-bold">
+                        {t("ui.admin.tenants.owners.table_email", "이메일")}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {ownersQuery.isLoading ? (
+                      <TableRow>
+                        <TableCell colSpan={2} className="h-32 text-center">
+                          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary mx-auto" />
+                        </TableCell>
+                      </TableRow>
+                    ) : currentOwners.length === 0 ? (
+                      <TableRow>
+                        <TableCell
+                          colSpan={2}
+                          className="h-32 text-center text-muted-foreground"
+                        >
+                          <div className="flex flex-col items-center gap-2">
+                            <Users className="h-8 w-8 opacity-20" />
+                            <p>
+                              {t(
+                                "msg.admin.tenants.owners.empty",
+                                "등록된 소유자가 없습니다.",
+                              )}
+                            </p>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      currentOwners.map((owner) => (
+                        <TableRow
+                          key={owner.id}
+                          className="hover:bg-muted/30 transition-colors group cursor-pointer"
+                          onClick={() => navigate(`/users/${owner.id}`)}
+                        >
+                          <TableCell className="font-medium">
+                            <div className="flex items-center gap-3">
+                              <div className="h-8 w-8 rounded-lg bg-secondary flex items-center justify-center text-secondary-foreground font-bold text-xs">
+                                {owner.name.charAt(0)}
+                              </div>
+                              <span>{owner.name}</span>
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-muted-foreground italic">
+                            {owner.email}
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Admins Card */}
+        <Card className="flex-1 flex flex-col min-h-0 border-none shadow-sm bg-[var(--color-panel)]">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-7 flex-shrink-0">
+            <div className="space-y-1">
+              <CardTitle className="text-2xl font-bold flex items-center gap-2">
+                <ShieldCheck className="h-6 w-6 text-primary" />
+                {t("ui.admin.tenants.admins.title", "테넌트 관리자")}
+              </CardTitle>
+              <CardDescription className="text-muted-foreground">
+                {t(
+                  "msg.admin.tenants.admins.subtitle",
+                  "이 테넌트의 자원을 관리할 수 있는 사용자 목록입니다.",
+                )}
+              </CardDescription>
+            </div>
+            <Button
+              className="bg-primary text-primary-foreground hover:bg-primary/90"
+              onClick={() => setDialogMode("admin")}
+            >
+              <UserPlus className="mr-2 h-4 w-4" />
+              {t("ui.admin.tenants.admins.add_button", "관리자 추가")}
+            </Button>
+          </CardHeader>
+          <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
+            <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
+              <div className="flex-1 overflow-auto relative custom-scrollbar">
+                <Table>
+                  <TableHeader className={commonStickyTableHeaderClass}>
+                    <TableRow>
+                      <TableHead className="w-[250px] font-bold">
+                        {t("ui.admin.tenants.admins.table_name", "이름")}
+                      </TableHead>
+                      <TableHead className="font-bold">
+                        {t("ui.admin.tenants.admins.table_email", "이메일")}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {adminsQuery.isLoading ? (
+                      <TableRow>
+                        <TableCell colSpan={2} className="h-32 text-center">
+                          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary mx-auto" />
+                        </TableCell>
+                      </TableRow>
+                    ) : currentAdmins.length === 0 ? (
+                      <TableRow>
+                        <TableCell
+                          colSpan={2}
+                          className="h-32 text-center text-muted-foreground"
+                        >
+                          <div className="flex flex-col items-center gap-2">
+                            <Users className="h-8 w-8 opacity-20" />
+                            <p>
+                              {t(
+                                "msg.admin.tenants.admins.empty",
+                                "등록된 관리자가 없습니다.",
+                              )}
+                            </p>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      currentAdmins.map((admin) => (
+                        <TableRow
+                          key={admin.id}
+                          className="hover:bg-muted/30 transition-colors group cursor-pointer"
+                          onClick={() => navigate(`/users/${admin.id}`)}
+                        >
+                          <TableCell className="font-medium">
+                            <div className="flex items-center gap-3">
+                              <div className="h-8 w-8 rounded-lg bg-secondary flex items-center justify-center text-secondary-foreground font-bold text-xs">
+                                {admin.name.charAt(0)}
+                              </div>
+                              <span>{admin.name}</span>
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-muted-foreground italic">
+                            {admin.email}
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Common Dialog for adding users */}
+      <Dialog
+        open={isDialogOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setDialogMode(null);
+            setSearchTerm("");
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-xl font-bold">
+              {dialogTitle}
+            </DialogTitle>
+            <DialogDescription>{dialogDescription}</DialogDescription>
+          </DialogHeader>
+
+          <div className="py-4 space-y-4">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder={t(
+                  "ui.admin.tenants.admins.dialog_search_placeholder",
+                  "사용자 검색 (최소 2자)...",
+                )}
+                className="pl-10 h-11"
+                autoFocus
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+
+            <div className="max-h-[300px] overflow-y-auto rounded-lg border border-border">
+              {searchTerm.length < 2 ? (
+                <div className="p-10 text-center text-muted-foreground flex flex-col items-center gap-2">
+                  <Search className="h-8 w-8 opacity-20" />
+                  <p className="text-sm">
+                    {t(
+                      "ui.admin.tenants.admins.dialog_search_hint",
+                      "검색어를 입력해 주세요.",
+                    )}
+                  </p>
+                </div>
+              ) : usersQuery.isLoading ? (
+                <div className="p-10 text-center">
+                  <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary mx-auto" />
+                </div>
+              ) : searchResults.length === 0 ? (
+                <div className="p-10 text-center text-muted-foreground">
+                  {t(
+                    "ui.admin.tenants.admins.dialog_no_results",
+                    "검색 결과가 없습니다.",
+                  )}
+                </div>
+              ) : (
+                <div className="divide-y divide-border">
+                  {searchResults.map((user) => {
+                    const isAlreadyOwner = currentOwners.some(
+                      (o) => o.id === user.id,
+                    );
+                    const isAlreadyAdmin = currentAdmins.some(
+                      (a) => a.id === user.id,
+                    );
+                    const isAlreadyMember =
+                      dialogMode === "owner" ? isAlreadyOwner : isAlreadyAdmin;
+
+                    return (
+                      <div
+                        key={user.id}
+                        className="flex items-center justify-between p-3 hover:bg-muted/50 transition-colors"
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className="h-9 w-9 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xs">
+                            {user.name.charAt(0)}
+                          </div>
+                          <div className="flex flex-col">
+                            <span className="text-sm font-medium">
+                              {user.name}
+                            </span>
+                            <span className="text-xs text-muted-foreground">
+                              {user.email}
+                            </span>
+                          </div>
+                        </div>
+                        <Button
+                          size="sm"
+                          variant={isAlreadyMember ? "ghost" : "outline"}
+                          disabled={
+                            isAlreadyMember ||
+                            addOwnerMutation.isPending ||
+                            addAdminMutation.isPending
+                          }
+                          onClick={() => handleAddUser(user.id)}
+                        >
+                          {isAlreadyMember ? (
+                            <Badge variant="secondary" className="font-normal">
+                              {dialogMode === "owner"
+                                ? t(
+                                    "ui.admin.tenants.owners.already_owner",
+                                    "이미 소유자",
+                                  )
+                                : t(
+                                    "ui.admin.tenants.admins.already_admin",
+                                    "이미 관리자",
+                                  )}
+                            </Badge>
+                          ) : (
+                            <>
+                              <Plus className="h-3 w-3 mr-1" />{" "}
+                              {t("ui.common.add", "추가")}
+                            </>
+                          )}
+                        </Button>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+export default TenantAdminsAndOwnersTab;
--- a/baron-sso/adminfront/src/features/tenants/routes/TenantCreatePage.tsx
+++ b/baron-sso/adminfront/src/features/tenants/routes/TenantCreatePage.tsx
@@ -0,0 +1,515 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Building2, Sparkles } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import { Checkbox } from "../../../components/ui/checkbox";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { Textarea } from "../../../components/ui/textarea";
+import { createTenant, fetchAllTenants } from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+import { DomainTagInput } from "../components/DomainTagInput";
+import { ParentTenantSelector } from "../components/ParentTenantSelector";
+import {
+  formatDomainConflictMessage,
+  type ServerDomainConflict,
+} from "../utils/domainTags";
+import {
+  mergeTenantOrgConfig,
+  ORG_UNIT_TYPE_OPTIONS,
+  shouldAllowHanmacOrgConfig,
+  TENANT_VISIBILITY_OPTIONS,
+  type TenantVisibility,
+} from "../utils/orgConfig";
+
+type AdminFrontTestHooks = {
+  selectTenantParent?: (tenantId: string) => Promise<void>;
+};
+
+function TenantCreatePage() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [name, setName] = useState("");
+  const [type, setType] = useState("COMPANY");
+  const [slug, setSlug] = useState("");
+  const [parentId, setParentId] = useState(
+    () => searchParams.get("parentId") ?? "",
+  );
+  const [parentStepConfirmed, setParentStepConfirmed] = useState(false);
+  const [orgUnitType, setOrgUnitType] = useState("");
+  const [visibility, setVisibility] = useState<TenantVisibility>("public");
+  const [worksmobileExcluded, setWorksmobileExcluded] = useState(false);
+  const [description, setDescription] = useState("");
+  const [status, setStatus] = useState("active");
+  const [domains, setDomains] = useState<string[]>([]);
+  const [forceDomainConflicts, setForceDomainConflicts] = useState<string[]>(
+    [],
+  );
+
+  const parentQuery = useQuery({
+    queryKey: ["tenants", "all"],
+    queryFn: () => fetchAllTenants(),
+  });
+  const tenants = parentQuery.data?.items ?? [];
+  const selectedParentTenant = tenants.find((tenant) => tenant.id === parentId);
+  const canConfigureHanmacOrg = useMemo(() => {
+    if (!selectedParentTenant) return false;
+    if (selectedParentTenant.slug.toLowerCase() === "hanmac-family") {
+      return true;
+    }
+    return shouldAllowHanmacOrgConfig(selectedParentTenant, tenants);
+  }, [selectedParentTenant, tenants]);
+  const canEditTenantDetails =
+    parentStepConfirmed || Boolean(selectedParentTenant);
+  const parentContextLabel = selectedParentTenant
+    ? canConfigureHanmacOrg
+      ? t(
+          "ui.admin.tenants.create.parent_context.hanmac",
+          "한맥가족 하위 테넌트",
+        )
+      : t("ui.admin.tenants.create.parent_context.general", "일반 하위 테넌트")
+    : parentStepConfirmed
+      ? t("ui.admin.tenants.create.parent_context.root", "최상위 테넌트")
+      : t(
+          "ui.admin.tenants.create.parent_context.pick_required",
+          "상위 테넌트 선택 필요",
+        );
+  const handleParentChange = useCallback((nextParentId: string) => {
+    setParentId(nextParentId);
+    setParentStepConfirmed(false);
+  }, []);
+
+  if (typeof window !== "undefined") {
+    const testWindow = window as Window &
+      typeof globalThis & {
+        __adminfrontTestHooks?: AdminFrontTestHooks;
+      };
+    const hooks = testWindow.__adminfrontTestHooks ?? {};
+    hooks.selectTenantParent = async (tenantId: string) => {
+      handleParentChange(tenantId);
+    };
+    testWindow.__adminfrontTestHooks = hooks;
+  }
+
+  const mutation = useMutation({
+    mutationFn: (overrideForceDomains?: string[]) =>
+      createTenant({
+        name,
+        type,
+        slug: slug || undefined,
+        parentId: parentId || undefined,
+        description: description || undefined,
+        status,
+        domains,
+        config: canConfigureHanmacOrg
+          ? mergeTenantOrgConfig(undefined, {
+              orgUnitType,
+              visibility,
+              worksmobileExcluded,
+            })
+          : undefined,
+        forceDomainConflicts: overrideForceDomains ?? forceDomainConflicts,
+      }),
+    onSuccess: () => {
+      navigate("/tenants");
+    },
+    onError: (
+      err: AxiosError<{
+        code?: string;
+        error?: string;
+        conflicts?: ServerDomainConflict[];
+      }>,
+    ) => {
+      const conflicts = err.response?.data?.conflicts ?? [];
+      if (
+        err.response?.data?.code === "tenant_domain_conflict" &&
+        conflicts.length > 0
+      ) {
+        const nextForceDomains = Array.from(
+          new Set([...forceDomainConflicts, ...conflicts.map((c) => c.domain)]),
+        );
+        const message = conflicts.map(formatDomainConflictMessage).join("\n");
+        if (window.confirm(message)) {
+          setForceDomainConflicts(nextForceDomains);
+          mutation.mutate(nextForceDomains);
+        }
+      }
+    },
+  });
+
+  const errorMsg = (mutation.error as AxiosError<{ error?: string }>)?.response
+    ?.data?.error;
+
+  return (
+    <div className="space-y-8">
+      <header className="space-y-2">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="space-y-2">
+            <h2 className="text-3xl font-semibold">
+              {t("ui.admin.tenants.create.title", "테넌트 생성")}
+            </h2>
+            <p className="text-sm text-[var(--color-muted)]">
+              {t(
+                "msg.admin.tenants.create.subtitle",
+                "새로운 테넌트를 시스템에 등록합니다.",
+              )}
+            </p>
+          </div>
+        </div>
+      </header>
+
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Building2 size={18} />
+            {t("ui.admin.tenants.create.profile.title", "Tenant Profile")}
+          </CardTitle>
+          <CardDescription>
+            {t(
+              "msg.admin.tenants.create.profile.subtitle",
+              "필수 정보만 입력해도 생성 가능합니다. Slug는 없으면 자동 생성됩니다.",
+            )}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div
+            data-testid="tenant-parent-org-config-layout"
+            className="grid gap-4 md:grid-cols-4"
+          >
+            <div
+              data-testid="tenant-parent-picker-slot"
+              className={
+                canConfigureHanmacOrg ? "md:col-span-2" : "md:col-span-4"
+              }
+            >
+              <ParentTenantSelector
+                id="parentId"
+                label={t(
+                  "ui.admin.tenants.create.form.parent",
+                  "상위 테넌트 (선택)",
+                )}
+                value={parentId}
+                onChange={handleParentChange}
+                tenants={tenants}
+                noneLabel={t("ui.common.none", "없음")}
+                contextLabel={parentContextLabel}
+                orgChartPickerLabel={t(
+                  "ui.admin.tenants.create.form.pick_hanmac_parent",
+                  "한맥가족에서 선택",
+                )}
+                localPickerLabel={t(
+                  "ui.admin.tenants.create.form.pick_other_parent",
+                  "다른 테넌트 선택",
+                )}
+                localTenantFilter={(tenant) =>
+                  tenant.slug.toLowerCase() !== "hanmac-family" &&
+                  !shouldAllowHanmacOrgConfig(tenant, tenants)
+                }
+                labelAction={
+                  !selectedParentTenant ? (
+                    <Button
+                      type="button"
+                      variant={parentStepConfirmed ? "default" : "outline"}
+                      size="sm"
+                      onClick={() => setParentStepConfirmed(true)}
+                    >
+                      {t(
+                        "ui.admin.tenants.create.form.root_tenant",
+                        "최상위 테넌트로 생성",
+                      )}
+                    </Button>
+                  ) : null
+                }
+              />
+              <button
+                type="button"
+                data-testid="tenant-test-select-hanmac-parent"
+                hidden
+                onClick={() => handleParentChange("family-1")}
+              >
+                test-select-hanmac-parent
+              </button>
+            </div>
+            {canConfigureHanmacOrg && (
+              <>
+                <div
+                  data-testid="tenant-org-unit-type-slot"
+                  className="space-y-2"
+                >
+                  <Label
+                    htmlFor="tenant-org-unit-type"
+                    className="text-sm font-semibold"
+                  >
+                    {t(
+                      "ui.admin.tenants.profile.org_unit_type",
+                      "조직 세부타입",
+                    )}
+                  </Label>
+                  <select
+                    id="tenant-org-unit-type"
+                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    value={orgUnitType}
+                    onChange={(event) => setOrgUnitType(event.target.value)}
+                  >
+                    <option value="">{t("ui.common.none", "없음")}</option>
+                    {ORG_UNIT_TYPE_OPTIONS.map((option) => (
+                      <option key={option} value={option}>
+                        {option}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div data-testid="tenant-visibility-slot" className="space-y-2">
+                  <Label
+                    htmlFor="tenant-visibility"
+                    className="text-sm font-semibold"
+                  >
+                    {t("ui.admin.tenants.profile.visibility", "공개 범위")}
+                  </Label>
+                  <select
+                    id="tenant-visibility"
+                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    value={visibility}
+                    onChange={(event) =>
+                      setVisibility(event.target.value as TenantVisibility)
+                    }
+                  >
+                    {TENANT_VISIBILITY_OPTIONS.map((option) => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div
+                  data-testid="tenant-worksmobile-excluded-slot"
+                  className="flex min-h-9 items-center gap-2 rounded-md border border-input px-3 py-2"
+                >
+                  <Checkbox
+                    id="worksmobileExcluded"
+                    checked={worksmobileExcluded}
+                    onCheckedChange={(checked) =>
+                      setWorksmobileExcluded(checked === true)
+                    }
+                  />
+                  <Label
+                    htmlFor="worksmobileExcluded"
+                    className="cursor-pointer text-sm font-semibold"
+                  >
+                    {t(
+                      "ui.admin.tenants.profile.worksmobile_excluded",
+                      "WORKS 연동 제외",
+                    )}
+                  </Label>
+                </div>
+              </>
+            )}
+          </div>
+          {canEditTenantDetails && (
+            <>
+              <div className="space-y-2">
+                <Label htmlFor="tenant-name" className="text-sm font-semibold">
+                  {t("ui.admin.tenants.create.form.name", "테넌트 이름")}{" "}
+                  <span className="text-destructive">*</span>
+                </Label>
+                <Input
+                  id="tenant-name"
+                  name="name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder={t(
+                    "ui.admin.tenants.create.form.name_placeholder",
+                    "테넌트 이름을 입력하세요",
+                  )}
+                />
+              </div>
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <Label
+                    htmlFor="tenant-type"
+                    className="text-sm font-semibold"
+                  >
+                    {t("ui.admin.tenants.create.form.type", "테넌트 유형")}
+                  </Label>
+                  <select
+                    id="tenant-type"
+                    name="type"
+                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                    value={type}
+                    onChange={(e) => setType(e.target.value)}
+                  >
+                    <option value="COMPANY">
+                      {t("domain.tenant_type.company", "COMPANY (일반 기업)")}
+                    </option>
+                    <option value="COMPANY_GROUP">
+                      {t(
+                        "domain.tenant_type.company_group",
+                        "COMPANY_GROUP (그룹사/지주사)",
+                      )}
+                    </option>
+                    <option value="ORGANIZATION">
+                      {t(
+                        "domain.tenant_type.organization",
+                        "ORGANIZATION (정규 조직)",
+                      )}
+                    </option>
+                    <option value="USER_GROUP">
+                      {t(
+                        "domain.tenant_type.user_group",
+                        "USER_GROUP (내부 부서/팀)",
+                      )}
+                    </option>
+                    <option value="PERSONAL">
+                      {t(
+                        "domain.tenant_type.personal",
+                        "PERSONAL (개인 워크스페이스)",
+                      )}
+                    </option>
+                  </select>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="tenant-slug" className="text-sm font-semibold">
+                  {t("ui.admin.tenants.create.form.slug", "슬러그 (Slug)")}
+                </Label>
+                <Input
+                  id="tenant-slug"
+                  name="slug"
+                  value={slug}
+                  onChange={(e) => setSlug(e.target.value)}
+                  placeholder={t(
+                    "ui.admin.tenants.create.form.slug_placeholder",
+                    "tenant-slug",
+                  )}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label
+                  htmlFor="tenant-description"
+                  className="text-sm font-semibold"
+                >
+                  {t("ui.admin.tenants.create.form.description", "설명")}
+                </Label>
+                <Textarea
+                  id="tenant-description"
+                  name="description"
+                  rows={3}
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label
+                  htmlFor="tenant-domains"
+                  className="text-sm font-semibold"
+                >
+                  {t(
+                    "ui.admin.tenants.create.form.domains_label",
+                    "허용된 도메인 (콤마로 구분)",
+                  )}
+                </Label>
+                <DomainTagInput
+                  id="tenant-domains"
+                  value={domains}
+                  onChange={setDomains}
+                  tenants={tenants}
+                  confirmedConflicts={forceDomainConflicts}
+                  onConfirmedConflictsChange={setForceDomainConflicts}
+                  placeholder={t(
+                    "ui.admin.tenants.create.form.domains_placeholder",
+                    "example.com, example.kr",
+                  )}
+                />
+                <p className="text-xs text-muted-foreground">
+                  {t(
+                    "msg.admin.tenants.create.form.domains_help",
+                    "이 도메인을 가진 이메일로 가입한 사용자는 자동으로 이 테넌트에 배정됩니다.",
+                  )}
+                </p>
+              </div>
+              <div className="space-y-2">
+                <Label className="text-sm font-semibold">
+                  {t("ui.admin.tenants.create.form.status", "상태")}
+                </Label>
+                <div className="flex gap-3">
+                  <Button
+                    type="button"
+                    variant={status === "active" ? "default" : "outline"}
+                    onClick={() => setStatus("active")}
+                  >
+                    {t("ui.common.status.active", "활성")}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant={status === "inactive" ? "default" : "outline"}
+                    onClick={() => setStatus("inactive")}
+                  >
+                    {t("ui.common.status.inactive", "비활성")}
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
+          {!canEditTenantDetails && (
+            <div className="rounded-md border border-dashed px-3 py-4 text-sm text-muted-foreground">
+              {t(
+                "msg.admin.tenants.create.pick_parent_first",
+                "상위 테넌트를 먼저 선택하세요.",
+              )}
+            </div>
+          )}
+
+          {errorMsg && (
+            <div className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {errorMsg}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Sparkles size={18} />
+            {t("ui.admin.tenants.create.memo.title", "정책 메모")}
+          </CardTitle>
+          <CardDescription>
+            {t(
+              "msg.admin.tenants.create.memo.subtitle",
+              "Tenant 권한 정책은 추후 Keto 연계로 확장 예정입니다.",
+            )}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="text-sm text-[var(--color-muted)]">
+          {t(
+            "msg.admin.tenants.create.memo.body",
+            "생성 직후에는 기본 활성 상태로 부여되며, 필요 시 상태를 수정하세요.",
+          )}
+        </CardContent>
+      </Card>
+
+      <div className="flex items-center justify-end gap-3">
+        <Button variant="outline" onClick={() => navigate("/tenants")}>
+          {t("ui.common.cancel", "취소")}
+        </Button>
+        <Button
+          onClick={() => mutation.mutate(undefined)}
+          disabled={mutation.isPending || name.trim() === ""}
+        >
+          {t("ui.common.create", "생성")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default TenantCreatePage;
--- a/baron-sso/adminfront/src/features/tenants/routes/TenantDetailPage.tsx
+++ b/baron-sso/adminfront/src/features/tenants/routes/TenantDetailPage.tsx
@@ -0,0 +1,135 @@
+import { useQuery } from "@tanstack/react-query";
+import { Copy } from "lucide-react";
+import { Link, Outlet, useLocation, useParams } from "react-router-dom";
+import { Button } from "../../../components/ui/button";
+import { fetchMe, fetchTenant } from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+import { normalizeAdminRole } from "../../../lib/roles";
+
+function TenantDetailPage() {
+  const params = useParams<{ tenantId: string }>();
+  const tenantId = params.tenantId ?? "";
+  const location = useLocation();
+
+  const tenantQuery = useQuery({
+    queryKey: ["tenant", tenantId],
+    queryFn: () => fetchTenant(tenantId),
+    enabled: tenantId.length > 0,
+  });
+
+  const { data: profile } = useQuery({
+    queryKey: ["me"],
+    queryFn: fetchMe,
+  });
+
+  const profileRole = normalizeAdminRole(profile?.role);
+  const canAccessSchema = profileRole === "super_admin";
+
+  const isPermissionsTab = location.pathname.includes("/permissions");
+  const isOrganizationTab = location.pathname.includes("/organization");
+  const isWorksmobileTab = location.pathname.includes("/worksmobile");
+
+  return (
+    <div className="space-y-8">
+      <header className="flex flex-wrap items-start justify-between gap-4">
+        <div className="space-y-2">
+          <div
+            className="flex flex-wrap items-center gap-3"
+            data-testid="tenant-detail-title-row"
+          >
+            <h2 className="text-3xl font-semibold">
+              {tenantQuery.data?.name ??
+                t("ui.admin.tenants.detail.loading", "불러오는 중...")}
+            </h2>
+            {tenantQuery.data?.id && (
+              <div
+                className="flex items-center gap-1.5"
+                data-testid="tenant-detail-uuid"
+              >
+                <code className="select-all rounded-md border border-border bg-muted/40 px-2 py-1 font-mono text-xs text-foreground">
+                  {tenantQuery.data.id}
+                </code>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8"
+                  onClick={() => {
+                    void navigator.clipboard?.writeText(tenantQuery.data.id);
+                  }}
+                  aria-label="테넌트 UUID 복사"
+                  title="테넌트 UUID 복사"
+                  data-testid="tenant-detail-copy-uuid"
+                >
+                  <Copy className="h-4 w-4" />
+                </Button>
+              </div>
+            )}
+          </div>
+          <p className="text-sm text-[var(--color-muted)]">
+            {t(
+              "ui.admin.tenants.detail.header_subtitle",
+              "테넌트 정보를 수정하거나 연동 설정을 관리합니다.",
+            )}
+          </p>
+        </div>
+      </header>
+
+      {/* Tabs */}
+      <div className="flex border-b border-border">
+        <Link
+          to={`/tenants/${tenantId}`}
+          className={`px-6 py-3 text-sm font-medium transition-colors relative ${
+            !isPermissionsTab &&
+            !location.pathname.includes("/schema") &&
+            !isWorksmobileTab &&
+            !isOrganizationTab
+              ? "text-primary border-b-2 border-primary"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          {t("ui.admin.tenants.detail.tab_profile", "프로필")}
+        </Link>
+        <Link
+          to={`/tenants/${tenantId}/permissions`}
+          className={`px-6 py-3 text-sm font-medium transition-colors relative ${
+            isPermissionsTab
+              ? "text-primary border-b-2 border-primary"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          {t("ui.admin.tenants.detail.tab_permissions", "권한")}
+        </Link>
+        <Link
+          to={`/tenants/${tenantId}/organization`}
+          className={`px-6 py-3 text-sm font-medium transition-colors relative ${
+            isOrganizationTab
+              ? "text-primary border-b-2 border-primary"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          {t("ui.admin.tenants.detail.tab_organization", "조직 관리")}
+        </Link>
+        {canAccessSchema && (
+          <Link
+            to={`/tenants/${tenantId}/schema`}
+            className={`px-6 py-3 text-sm font-medium transition-colors relative ${
+              location.pathname.includes("/schema")
+                ? "text-primary border-b-2 border-primary"
+                : "text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            {t("ui.admin.tenants.detail.tab_schema", "사용자 스키마")}
+          </Link>
+        )}
+      </div>
+
+      {/* Outlet for nested routes */}
+      <div className="animate-in fade-in duration-500">
+        <Outlet />
+      </div>
+    </div>
+  );
+}
+
+export default TenantDetailPage;
--- a/baron-sso/adminfront/src/features/tenants/routes/TenantDetailPage.worksmobile.test.tsx
+++ b/baron-sso/adminfront/src/features/tenants/routes/TenantDetailPage.worksmobile.test.tsx
@@ -0,0 +1,51 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import TenantDetailPage from "./TenantDetailPage";
+
+vi.mock("../../../lib/adminApi", () => ({
+  fetchMe: vi.fn(async () => ({ role: "super_admin" })),
+  fetchTenant: vi.fn(async () => ({
+    id: "hanmac-family-id",
+    name: "한맥 가족",
+    slug: "hanmac-family",
+    parentId: null,
+  })),
+}));
+
+function renderTenantDetailPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={["/tenants/hanmac-family-id"]}>
+        <Routes>
+          <Route path="/tenants/:tenantId/*" element={<TenantDetailPage />}>
+            <Route index element={<div>profile</div>} />
+          </Route>
+        </Routes>
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("TenantDetailPage Worksmobile navigation", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("does not render Worksmobile as a tenant detail tab", async () => {
+    renderTenantDetailPage();
+
+    await screen.findByText("프로필");
+
+    expect(screen.queryByRole("link", { name: /Worksmobile/i })).toBeNull();
+  });
+});
--- a/baron-sso/adminfront/src/features/tenants/routes/TenantGroupsPage.tsx
+++ b/baron-sso/adminfront/src/features/tenants/routes/TenantGroupsPage.tsx
@@ -0,0 +1,903 @@
+import {
+  type UseMutationResult,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import {
+  ArrowRightLeft,
+  ChevronDown,
+  ChevronRight,
+  Plus,
+  RefreshCw,
+  Search,
+  Shield,
+  Trash2,
+  UserMinus,
+  UserPlus,
+  Users,
+} from "lucide-react";
+import type React from "react";
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import { commonStickyTableHeaderClass } from "../../../../../common/ui/table";
+import { Badge } from "../../../components/ui/badge";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../../components/ui/dialog";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { ScrollArea } from "../../../components/ui/scroll-area";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import { toast } from "../../../components/ui/use-toast";
+import {
+  addGroupMember,
+  createGroup,
+  deleteGroup,
+  fetchGroups,
+  fetchTenant,
+  fetchUsers,
+  type GroupSummary,
+  removeGroupMember,
+} from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+
+type UserGroupNode = GroupSummary & {
+  children: UserGroupNode[];
+  isExpanded?: boolean;
+};
+
+function buildGroupTree(
+  groups: GroupSummary[],
+  parentId: string | null = null,
+): UserGroupNode[] {
+  const nodes: UserGroupNode[] = [];
+  const childrenOf = new Map<string, UserGroupNode[]>();
+
+  // First pass: Initialize all groups as nodes and populate childrenOf map
+  for (const group of groups) {
+    childrenOf.set(group.id, []);
+  }
+
+  // Second pass: Populate children
+  for (const group of groups) {
+    const node: UserGroupNode = {
+      ...group,
+      children: childrenOf.get(group.id) ?? [],
+    };
+    if (group.parentId === parentId) {
+      nodes.push(node);
+    } else {
+      // Check if the parent exists before adding to children
+      // This handles cases where a parent might not be in the current 'groups' list (e.g., filtered data)
+      if (group.parentId && childrenOf.has(group.parentId)) {
+        childrenOf.get(group.parentId)?.push(node);
+      } else {
+        // If parentId exists but parent not found, it's a root level group for this tree view
+        nodes.push(node);
+      }
+    }
+  }
+
+  // Sort children for consistent rendering (optional, but good for UI)
+  nodes.sort((a, b) => a.name.localeCompare(b.name));
+  for (const node of nodes) {
+    node.children.sort((a, b) => a.name.localeCompare(b.name));
+  }
+
+  return nodes;
+}
+
+interface UserGroupTreeNodeProps {
+  node: UserGroupNode;
+  level: number;
+  onSelect: (groupId: string) => void;
+  selectedGroupId: string | null;
+  onDelete: (groupId: string) => void;
+  onAddSubGroup: (parentId: string) => void;
+  addMemberMutation: UseMutationResult<
+    void,
+    AxiosError<{ error?: string }>,
+    { groupId: string; userId: string }
+  >;
+  removeMemberMutation: UseMutationResult<
+    void,
+    AxiosError<{ error?: string }>,
+    { groupId: string; userId: string }
+  >;
+}
+
+const UserGroupTreeNode: React.FC<UserGroupTreeNodeProps> = ({
+  node,
+  level,
+  onSelect,
+  selectedGroupId,
+  onDelete,
+  onAddSubGroup,
+  addMemberMutation,
+  removeMemberMutation,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const hasChildren = node.children.length > 0;
+
+  const handleToggleExpand = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <>
+      <TableRow
+        className={`cursor-pointer ${selectedGroupId === node.id ? "bg-primary/5" : ""}`}
+        onClick={() => onSelect(node.id)}
+      >
+        <TableCell style={{ paddingLeft: `${1 + level * 1.5}rem` }}>
+          <div className="flex items-center gap-2">
+            {hasChildren ? (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleToggleExpand}
+                className="h-6 w-6 p-0"
+              >
+                {isExpanded ? (
+                  <ChevronDown size={16} />
+                ) : (
+                  <ChevronRight size={16} />
+                )}
+              </Button>
+            ) : (
+              level > 0 && (
+                <span className="inline-block w-6 text-center">
+                  <ChevronRight
+                    size={16}
+                    className="text-muted-foreground inline-block align-middle"
+                  />
+                </span>
+              )
+            )}
+            <Users size={14} className="text-muted-foreground" />
+            <span className="font-semibold">{node.name}</span>
+            <Badge variant="secondary" className="text-[10px] font-mono">
+              {node.unitType || "Team"}
+            </Badge>
+          </div>
+        </TableCell>
+        <TableCell>
+          <Badge variant="secondary">
+            {t("msg.admin.groups.members.count", "{{count}} 명", {
+              count: node.members?.length || 0,
+            })}
+          </Badge>
+        </TableCell>
+        <TableCell className="text-right">
+          <div className="flex justify-end gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                onAddSubGroup(node.id);
+              }}
+            >
+              <Plus size={14} />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                onDelete(node.id);
+              }}
+            >
+              <Trash2 size={14} className="text-destructive" />
+            </Button>
+          </div>
+        </TableCell>
+      </TableRow>
+      {isExpanded &&
+        hasChildren &&
+        node.children.map((child) => (
+          <UserGroupTreeNode
+            key={child.id}
+            node={child}
+            level={level + 1}
+            onSelect={onSelect}
+            selectedGroupId={selectedGroupId}
+            onDelete={onDelete}
+            onAddSubGroup={onAddSubGroup}
+            addMemberMutation={addMemberMutation}
+            removeMemberMutation={removeMemberMutation}
+          />
+        ))}
+    </>
+  );
+};
+
+function TenantGroupsPage() {
+  const params = useParams<{ tenantId: string }>();
+  const tenantId = params.tenantId ?? "";
+  const _queryClient = useQueryClient();
+
+  const [newGroupName, setNewGroupName] = useState("");
+  const [newGroupDesc, setNewGroupNameDesc] = useState("");
+  const [newGroupUnitType, setNewGroupUnitType] = useState("Team");
+  const [newGroupParentId, setNewGroupParentId] = useState<string | null>(null);
+
+  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
+
+  // Modal States
+  const [isAddMemberModalOpen, setIsAddMemberModalOpen] = useState(false);
+  const [isMoveMemberModalOpen, setIsMoveMemberModalOpen] = useState(false);
+  const [memberActionTargetUserId, setMemberActionTargetUserId] = useState<
+    string | null
+  >(null);
+  const [userSearchTerm, setUserSearchTerm] = useState("");
+  const [groupSearchTerm, setGroupSearchTerm] = useState("");
+
+  // 테넌트 정보 조회 (slug 획득)
+  const tenantQuery = useQuery({
+    queryKey: ["tenant", tenantId],
+    queryFn: () => fetchTenant(tenantId),
+    enabled: tenantId.length > 0,
+  });
+  const tenantSlug = tenantQuery.data?.slug;
+
+  // 해당 테넌트의 사용자 목록 조회
+  const usersQuery = useQuery({
+    queryKey: ["users", { tenantSlug }],
+    queryFn: () => fetchUsers(1000, 0, undefined, tenantSlug),
+    enabled: !!tenantSlug,
+  });
+  const users = usersQuery.data?.items ?? [];
+
+  // 그룹 목록 조회
+  const groupsQuery = useQuery({
+    queryKey: ["groups", tenantId],
+    queryFn: () => fetchGroups(tenantId),
+    enabled: tenantId.length > 0,
+  });
+  // 그룹 생성
+  const createMutation = useMutation({
+    mutationFn: () =>
+      createGroup(tenantId, {
+        name: newGroupName,
+        description: newGroupDesc,
+        unitType: newGroupUnitType,
+        parentId: newGroupParentId || undefined,
+      }),
+    onSuccess: () => {
+      toast.success(
+        t(
+          "msg.admin.groups.list.create_success",
+          "그룹이 성공적으로 생성되었습니다.",
+        ),
+      );
+      groupsQuery.refetch();
+      setNewGroupName("");
+      setNewGroupNameDesc("");
+      setNewGroupUnitType("Team");
+      setNewGroupParentId(null);
+    },
+    onError: (error: AxiosError<{ error?: string }>) => {
+      toast.error(t("msg.admin.groups.list.create_error", "그룹 생성 실패"), {
+        description: error.response?.data?.error || error.message,
+      });
+    },
+  });
+
+  // 그룹 삭제
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteGroup(tenantId, id),
+    onSuccess: () => {
+      toast.success(
+        t("msg.admin.groups.list.delete_success", "그룹이 삭제되었습니다."),
+      );
+      groupsQuery.refetch();
+      setSelectedGroupId(null);
+    },
+    onError: (error: AxiosError<{ error?: string }>) => {
+      toast.error(t("msg.admin.groups.list.delete_error", "그룹 삭제 실패"), {
+        description: error.response?.data?.error || error.message,
+      });
+    },
+  });
+
+  // 멤버 추가
+  const addMemberMutation = useMutation({
+    mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
+      addGroupMember(tenantId, groupId, userId),
+    onSuccess: () => {
+      toast.success(
+        t("msg.admin.groups.members.add_success", "멤버가 추가되었습니다."),
+      );
+      groupsQuery.refetch();
+    },
+    onError: (error: AxiosError<{ error?: string }>) => {
+      toast.error(t("msg.common.error", "오류 발생"), {
+        description: error.response?.data?.error || error.message,
+      });
+    },
+  });
+
+  // 멤버 제거
+  const removeMemberMutation = useMutation({
+    mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
+      removeGroupMember(tenantId, groupId, userId),
+    onSuccess: () => {
+      toast.success(
+        t("msg.admin.groups.members.remove_success", "멤버가 제거되었습니다."),
+      );
+      groupsQuery.refetch();
+    },
+    onError: (error: AxiosError<{ error?: string }>) => {
+      toast.error(t("msg.common.error", "오류 발생"), {
+        description: error.response?.data?.error || error.message,
+      });
+    },
+  });
+
+  // 멤버 이동 (Remove -> Add)
+  const moveMemberMutation = useMutation({
+    mutationFn: async ({
+      sourceGroupId,
+      targetGroupId,
+      userId,
+    }: {
+      sourceGroupId: string;
+      targetGroupId: string;
+      userId: string;
+    }) => {
+      await removeGroupMember(tenantId, sourceGroupId, userId);
+      await addGroupMember(tenantId, targetGroupId, userId);
+    },
+    onSuccess: () => {
+      toast.success(
+        t("msg.admin.groups.members.move_success", "멤버가 이동되었습니다."),
+      );
+      groupsQuery.refetch();
+      setIsMoveMemberModalOpen(false);
+      setMemberActionTargetUserId(null);
+    },
+    onError: (error: AxiosError<{ error?: string }>) => {
+      toast.error(t("msg.common.error", "오류 발생"), {
+        description: error.response?.data?.error || error.message,
+      });
+    },
+  });
+
+  const groupTree = groupsQuery.data
+    ? buildGroupTree(groupsQuery.data, tenantId)
+    : [];
+
+  const handleAddSubGroup = (parentId: string) => {
+    setNewGroupParentId(parentId);
+  };
+  const currentGroup = groupsQuery.data?.find((g) => g.id === selectedGroupId);
+
+  return (
+    <>
+      <div className="space-y-6 mt-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
+        <div className="grid gap-6 md:grid-cols-3 flex-1 min-h-0">
+          {/* 그룹 생성 폼 */}
+          <Card className="flex flex-col min-h-0 bg-[var(--color-panel)] md:col-span-1 border-primary/20">
+            <CardHeader className="flex-shrink-0">
+              <CardTitle className="text-sm flex items-center gap-2">
+                <Plus size={16} />{" "}
+                {t("ui.admin.groups.create.title", "새 그룹 생성")}
+              </CardTitle>
+              <CardDescription>
+                {t(
+                  "ui.admin.groups.create.description",
+                  "새로운 사용자 그룹을 생성하고 계층 구조를 설정합니다.",
+                )}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4 flex-1 overflow-auto">
+              <div className="space-y-1">
+                <Label htmlFor="name">
+                  {t("ui.admin.groups.form.name_label", "그룹 이름")}
+                </Label>
+                <Input
+                  id="name"
+                  value={newGroupName}
+                  onChange={(e) => setNewGroupName(e.target.value)}
+                  placeholder={t(
+                    "ui.admin.groups.form.name_placeholder",
+                    "예: 개발팀, 인사팀",
+                  )}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="unitType">
+                  {t("ui.admin.groups.form.unit_level_label", "조직 단위 레벨")}
+                </Label>
+                <Input
+                  id="unitType"
+                  value={newGroupUnitType}
+                  onChange={(e) => setNewGroupUnitType(e.target.value)}
+                  placeholder={t(
+                    "ui.admin.groups.form.unit_level_placeholder",
+                    "예: 본부, 팀, 셀",
+                  )}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="parentId">
+                  {t("ui.admin.groups.form.parent_label", "상위 그룹 (선택)")}
+                </Label>
+                <select
+                  id="parentId"
+                  className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  value={newGroupParentId || ""}
+                  onChange={(e) => setNewGroupParentId(e.target.value || null)}
+                >
+                  <option value="">{t("ui.common.none", "없음")}</option>
+                  {groupsQuery.data?.map((group) => (
+                    <option key={group.id} value={group.id}>
+                      {group.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="desc">
+                  {t("ui.admin.groups.form.desc_label", "설명")}
+                </Label>
+                <Input
+                  id="desc"
+                  value={newGroupDesc}
+                  onChange={(e) => setNewGroupNameDesc(e.target.value)}
+                  placeholder={t(
+                    "ui.admin.groups.form.desc_placeholder",
+                    "그룹 용도 설명",
+                  )}
+                />
+              </div>
+              <Button
+                className="w-full"
+                onClick={() => createMutation.mutate()}
+                disabled={!newGroupName || createMutation.isPending}
+              >
+                {t("ui.admin.groups.form.submit", "생성하기")}
+              </Button>
+            </CardContent>
+          </Card>
+
+          {/* 그룹 목록 (트리 뷰) */}
+          <Card className="flex flex-col min-h-0 bg-[var(--color-panel)] md:col-span-2">
+            <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
+              <div>
+                <CardTitle>
+                  {t("ui.admin.groups.list.title", "User Groups")}
+                </CardTitle>
+                <CardDescription>
+                  {t(
+                    "msg.admin.groups.list.subtitle",
+                    "이 테넌트에 정의된 사용자 그룹 목록입니다.",
+                  )}
+                </CardDescription>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => groupsQuery.refetch()}
+                >
+                  <RefreshCw size={14} />
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
+              <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
+                <div className="flex-1 overflow-auto relative custom-scrollbar">
+                  <Table>
+                    <TableHeader className={commonStickyTableHeaderClass}>
+                      <TableRow>
+                        <TableHead>
+                          {t("ui.admin.groups.table.name", "NAME")}
+                        </TableHead>
+                        <TableHead>
+                          {t("ui.admin.groups.table.members", "MEMBERS")}
+                        </TableHead>
+                        <TableHead className="text-right">
+                          {t("ui.admin.groups.table.actions", "ACTIONS")}
+                        </TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {groupsQuery.isLoading && (
+                        <TableRow>
+                          <TableCell colSpan={3}>
+                            {t("msg.admin.groups.list.loading", "로딩 중...")}
+                          </TableCell>
+                        </TableRow>
+                      )}
+                      {!groupsQuery.isLoading && groupTree.length === 0 && (
+                        <TableRow>
+                          <TableCell
+                            colSpan={3}
+                            className="text-center py-8 text-muted-foreground"
+                          >
+                            {t(
+                              "msg.admin.groups.list.empty",
+                              "아직 등록된 그룹이 없습니다.",
+                            )}
+                          </TableCell>
+                        </TableRow>
+                      )}
+                      {groupTree.map((node) => (
+                        <UserGroupTreeNode
+                          key={node.id}
+                          node={node}
+                          level={0}
+                          onSelect={setSelectedGroupId}
+                          selectedGroupId={selectedGroupId}
+                          onDelete={(id) => {
+                            if (
+                              window.confirm(
+                                t(
+                                  "msg.admin.groups.list.delete_confirm",
+                                  "그룹을 삭제하시겠습니까?",
+                                ),
+                              )
+                            ) {
+                              deleteMutation.mutate(id);
+                            }
+                          }}
+                          onAddSubGroup={handleAddSubGroup}
+                          addMemberMutation={addMemberMutation}
+                          removeMemberMutation={removeMemberMutation}
+                        />
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* 멤버 관리 섹션 (선택된 그룹이 있을 때) */}
+        {currentGroup && (
+          <Card className="flex flex-col min-h-0 flex-1 bg-[var(--color-panel)] border-t-4 border-t-primary">
+            <CardHeader className="flex-shrink-0">
+              <CardTitle className="flex items-center gap-2">
+                <Shield size={18} className="text-primary" />
+                {t("msg.admin.groups.members.title", "[{{name}}] 멤버 관리", {
+                  name: currentGroup.name,
+                })}
+              </CardTitle>
+              <CardDescription>
+                {t(
+                  "ui.admin.groups.detail.members_subtitle",
+                  "그룹에 속한 멤버들을 확인하고 관리합니다.",
+                )}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
+              <div className="flex justify-end mb-4 flex-shrink-0">
+                <Button
+                  size="sm"
+                  onClick={() => setIsAddMemberModalOpen(true)}
+                  disabled={addMemberMutation.isPending}
+                >
+                  <UserPlus size={14} className="mr-1" />
+                  {t("ui.common.add", "멤버 추가")}
+                </Button>
+              </div>
+              <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
+                <div className="flex-1 overflow-auto relative custom-scrollbar">
+                  <Table>
+                    <TableHeader className={commonStickyTableHeaderClass}>
+                      <TableRow>
+                        <TableHead>
+                          {t("ui.admin.groups.members.table.name", "이름")}
+                        </TableHead>
+                        <TableHead>
+                          {t("ui.admin.groups.members.table.email", "이메일")}
+                        </TableHead>
+                        <TableHead className="text-right">
+                          {t("ui.admin.groups.members.table.actions", "관리")}
+                        </TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {currentGroup.members?.length === 0 && (
+                        <TableRow>
+                          <TableCell
+                            colSpan={3}
+                            className="text-center py-4 text-muted-foreground"
+                          >
+                            {t(
+                              "msg.admin.groups.members.empty",
+                              "멤버가 없습니다.",
+                            )}
+                          </TableCell>
+                        </TableRow>
+                      )}
+                      {currentGroup.members?.map((user) => (
+                        <TableRow key={user.id}>
+                          <TableCell className="font-medium">
+                            {user.name}
+                          </TableCell>
+                          <TableCell className="text-muted-foreground">
+                            {user.email}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            <div className="flex justify-end gap-1">
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => {
+                                  setMemberActionTargetUserId(user.id);
+                                  setIsMoveMemberModalOpen(true);
+                                }}
+                                disabled={moveMemberMutation.isPending}
+                                title={t("ui.common.move", "이동")}
+                              >
+                                <ArrowRightLeft
+                                  size={14}
+                                  className="text-primary"
+                                />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => {
+                                  if (
+                                    window.confirm(
+                                      t(
+                                        "msg.admin.groups.members.remove_confirm",
+                                        "'{{name}}' 님을 이 그룹에서 제외하시겠습니까?",
+                                        { name: user.name },
+                                      ),
+                                    )
+                                  ) {
+                                    removeMemberMutation.mutate({
+                                      groupId: currentGroup.id,
+                                      userId: user.id,
+                                    });
+                                  }
+                                }}
+                                disabled={removeMemberMutation.isPending}
+                                title={t("ui.common.remove", "제거")}
+                              >
+                                <UserMinus
+                                  size={14}
+                                  className="text-destructive"
+                                />
+                              </Button>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      {/* Add Member Modal */}
+      <Dialog
+        open={isAddMemberModalOpen}
+        onOpenChange={(val) => {
+          setIsAddMemberModalOpen(val);
+          if (!val) setUserSearchTerm("");
+        }}
+      >
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>
+              {t("ui.admin.groups.members.add_modal_title", "그룹에 멤버 추가")}
+            </DialogTitle>
+            <DialogDescription>
+              {t(
+                "msg.admin.groups.members.add_modal_desc",
+                "이 테넌트에 속한 사용자 중 추가할 멤버를 검색하여 선택하세요.",
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder={t("ui.common.search", "검색...")}
+                className="pl-9 h-9"
+                value={userSearchTerm}
+                onChange={(e) => setUserSearchTerm(e.target.value)}
+              />
+            </div>
+            <ScrollArea className="h-[250px] rounded-md border p-2">
+              <div className="space-y-1">
+                {usersQuery.isLoading ? (
+                  <div className="p-4 text-center text-sm text-muted-foreground">
+                    {t("ui.common.loading", "로딩 중...")}
+                  </div>
+                ) : (
+                  users
+                    .filter((u) => {
+                      const term = userSearchTerm.toLowerCase();
+                      return (
+                        u.name.toLowerCase().includes(term) ||
+                        u.email.toLowerCase().includes(term)
+                      );
+                    })
+                    .filter(
+                      (u) => !currentGroup?.members?.some((m) => m.id === u.id),
+                    ) // Exclude existing members
+                    .map((user) => (
+                      <div
+                        key={user.id}
+                        className="flex items-center justify-between rounded-lg px-3 py-2 text-sm transition hover:bg-muted"
+                      >
+                        <div>
+                          <p className="font-medium">{user.name}</p>
+                          <p className="text-xs text-muted-foreground">
+                            {user.email}
+                          </p>
+                        </div>
+                        <Button
+                          size="sm"
+                          variant="secondary"
+                          onClick={() => {
+                            if (currentGroup) {
+                              addMemberMutation.mutate({
+                                groupId: currentGroup.id,
+                                userId: user.id,
+                              });
+                            }
+                          }}
+                          disabled={addMemberMutation.isPending}
+                        >
+                          {t("ui.common.add", "추가")}
+                        </Button>
+                      </div>
+                    ))
+                )}
+                {users.length > 0 &&
+                  users.filter(
+                    (u) => !currentGroup?.members?.some((m) => m.id === u.id),
+                  ).length === 0 && (
+                    <div className="p-4 text-center text-sm text-muted-foreground">
+                      {t(
+                        "msg.admin.groups.members.all_added",
+                        "모든 테넌트 멤버가 이미 이 그룹에 속해 있습니다.",
+                      )}
+                    </div>
+                  )}
+              </div>
+            </ScrollArea>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsAddMemberModalOpen(false)}
+            >
+              {t("ui.common.close", "닫기")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Move Member Modal */}
+      <Dialog
+        open={isMoveMemberModalOpen}
+        onOpenChange={(val) => {
+          setIsMoveMemberModalOpen(val);
+          if (!val) {
+            setMemberActionTargetUserId(null);
+            setGroupSearchTerm("");
+          }
+        }}
+      >
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>
+              {t("ui.admin.groups.members.move_modal_title", "부서 이동")}
+            </DialogTitle>
+            <DialogDescription>
+              {t(
+                "msg.admin.groups.members.move_modal_desc",
+                "선택한 멤버를 이동할 대상 그룹을 선택하세요.",
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder={t("ui.common.search_group", "그룹 검색...")}
+                className="pl-9 h-9"
+                value={groupSearchTerm}
+                onChange={(e) => setGroupSearchTerm(e.target.value)}
+              />
+            </div>
+            <ScrollArea className="h-[250px] rounded-md border p-2">
+              <div className="space-y-1">
+                {groupsQuery.isLoading ? (
+                  <div className="p-4 text-center text-sm text-muted-foreground">
+                    {t("ui.common.loading", "로딩 중...")}
+                  </div>
+                ) : groupsQuery.data && groupsQuery.data.length > 0 ? (
+                  groupsQuery.data
+                    .filter((g) =>
+                      g.name
+                        .toLowerCase()
+                        .includes(groupSearchTerm.toLowerCase()),
+                    )
+                    .filter((g) => g.id !== currentGroup?.id) // Exclude current group
+                    .map((group) => (
+                      <div
+                        key={group.id}
+                        className="flex items-center justify-between rounded-lg px-3 py-2 text-sm transition hover:bg-muted"
+                      >
+                        <div className="flex items-center gap-2">
+                          <Users size={14} className="text-muted-foreground" />
+                          <span className="font-medium">{group.name}</span>
+                        </div>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => {
+                            if (currentGroup && memberActionTargetUserId) {
+                              moveMemberMutation.mutate({
+                                sourceGroupId: currentGroup.id,
+                                targetGroupId: group.id,
+                                userId: memberActionTargetUserId,
+                              });
+                            }
+                          }}
+                          disabled={moveMemberMutation.isPending}
+                        >
+                          {t("ui.common.move", "이동")}
+                        </Button>
+                      </div>
+                    ))
+                ) : (
+                  <div className="p-4 text-center text-sm text-muted-foreground">
+                    {t("msg.admin.groups.list.no_results", "그룹이 없습니다.")}
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsMoveMemberModalOpen(false)}
+            >
+              {t("ui.common.cancel", "취소")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+export default TenantGroupsPage;
--- a/baron-sso/adminfront/src/features/tenants/routes/TenantListPage.test.ts
+++ b/baron-sso/adminfront/src/features/tenants/routes/TenantListPage.test.ts
@@ -0,0 +1,100 @@
+import { describe, expect, it } from "vitest";
+import type { TenantSummary } from "../../../lib/adminApi";
+import {
+  filterTenantsByScope,
+  getTenantSearchMatchIds,
+  getTenantViewRows,
+  resolveTenantSelectionIds,
+  tenantMatchesListSearch,
+} from "./tenantListView";
+
+function tenant(
+  id: string,
+  name: string,
+  slug: string,
+  parentId?: string,
+): TenantSummary {
+  return {
+    id,
+    name,
+    slug,
+    parentId,
+    type: parentId ? "ORGANIZATION" : "COMPANY",
+    description: "",
+    status: "active",
+    memberCount: 0,
+    createdAt: "",
+    updatedAt: "",
+  };
+}
+
+const tenants = [
+  tenant("company-1", "한맥기술", "hanmac"),
+  tenant("dept-1", "기술기획", "planning", "company-1"),
+  tenant("team-1", "플랫폼팀", "platform", "dept-1"),
+  tenant("company-2", "삼안", "saman"),
+];
+
+describe("TenantListPage tenant list helpers", () => {
+  it("selects a parent tenant together with every descendant", () => {
+    expect(
+      resolveTenantSelectionIds({
+        currentIds: [],
+        tenant: tenants[0],
+        checked: true,
+        tenants,
+        deletableTenants: tenants,
+      }),
+    ).toEqual(["company-1", "dept-1", "team-1"]);
+  });
+
+  it("removes a parent tenant together with every descendant", () => {
+    expect(
+      resolveTenantSelectionIds({
+        currentIds: ["company-1", "dept-1", "team-1", "company-2"],
+        tenant: tenants[0],
+        checked: false,
+        tenants,
+        deletableTenants: tenants,
+      }),
+    ).toEqual(["company-2"]);
+  });
+
+  it("filters to descendants of the selected scope tenant", () => {
+    expect(
+      filterTenantsByScope(tenants, "company-1").map((item) => item.id),
+    ).toEqual(["dept-1", "team-1"]);
+  });
+
+  it("searches tenants by name, slug, and UUID", () => {
+    expect(tenantMatchesListSearch(tenants[2], "team-1")).toBe(true);
+    expect(tenantMatchesListSearch(tenants[2], "platform")).toBe(true);
+    expect(tenantMatchesListSearch(tenants[2], "플랫폼")).toBe(true);
+    expect(tenantMatchesListSearch(tenants[2], "삼안")).toBe(false);
+  });
+
+  it("can return tree rows or same-level table rows", () => {
+    expect(getTenantViewRows(tenants, "tree").map((row) => row.depth)).toEqual([
+      0, 1, 2, 0,
+    ]);
+    expect(getTenantViewRows(tenants, "table").map((row) => row.depth)).toEqual(
+      [0, 0, 0, 0],
+    );
+  });
+
+  it("marks only direct search matches when tree search includes ancestors", () => {
+    const treeRows = getTenantViewRows(
+      tenants.filter((item) => item.id !== "company-2"),
+      "tree",
+      "",
+      true,
+    );
+
+    expect(treeRows.map((row) => row.id)).toEqual([
+      "company-1",
+      "dept-1",
+      "team-1",
+    ]);
+    expect(getTenantSearchMatchIds(treeRows, "platform")).toEqual(["team-1"]);
+  });
+});
--- a/baron-sso/adminfront/src/features/tenants/routes/TenantListPage.tsx
+++ b/baron-sso/adminfront/src/features/tenants/routes/TenantListPage.tsx
--- a/baron-sso/adminfront/src/features/tenants/routes/TenantProfilePage.tsx
+++ b/baron-sso/adminfront/src/features/tenants/routes/TenantProfilePage.tsx
@@ -0,0 +1,525 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Save, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { Textarea } from "../../../components/ui/textarea";
+import { toast } from "../../../components/ui/use-toast";
+import {
+  approveTenant,
+  deleteTenant,
+  fetchAllTenants,
+  fetchTenant,
+  updateTenant,
+} from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+import { DomainTagInput } from "../components/DomainTagInput";
+import { ParentTenantSelector } from "../components/ParentTenantSelector";
+import {
+  formatDomainConflictMessage,
+  type ServerDomainConflict,
+} from "../utils/domainTags";
+import {
+  getOrgUnitTypeOptionsForTenantType,
+  mergeTenantOrgConfig,
+  readTenantOrgConfig,
+  removeTenantOrgConfig,
+  shouldAllowHanmacOrgConfig,
+  TENANT_VISIBILITY_OPTIONS,
+  type TenantVisibility,
+} from "../utils/orgConfig";
+import { isSeedTenant } from "../utils/protectedTenants";
+
+export function TenantProfilePage() {
+  const { tenantId: tenantIdParam } = useParams<{ tenantId: string }>();
+  const tenantId = tenantIdParam ?? "";
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const tenantQuery = useQuery({
+    queryKey: ["tenant", tenantId],
+    queryFn: () => fetchTenant(tenantId),
+    enabled: tenantId.length > 0,
+  });
+
+  const parentQuery = useQuery({
+    queryKey: ["tenants", "list-all"],
+    queryFn: () => fetchAllTenants(),
+  });
+
+  const [name, setName] = useState("");
+  const [type, setType] = useState("COMPANY");
+  const [slug, setSlug] = useState("");
+  const [description, setDescription] = useState("");
+  const [status, setStatus] = useState("active");
+  const [domains, setDomains] = useState<string[]>([]);
+  const [forceDomainConflicts, setForceDomainConflicts] = useState<string[]>(
+    [],
+  );
+  const [parentId, setParentId] = useState("");
+  const [orgUnitType, setOrgUnitType] = useState("");
+  const [tenantVisibility, setTenantVisibility] =
+    useState<TenantVisibility>("public");
+  const [worksmobileExcluded, setWorksmobileExcluded] = useState(false);
+
+  useEffect(() => {
+    if (tenantQuery.data) {
+      const orgConfig = readTenantOrgConfig(tenantQuery.data.config);
+      setName(tenantQuery.data.name);
+      setType(tenantQuery.data.type || "COMPANY");
+      setSlug(tenantQuery.data.slug);
+      setDescription(tenantQuery.data.description ?? "");
+      setStatus(tenantQuery.data.status);
+      setDomains(tenantQuery.data.domains ?? []);
+      setForceDomainConflicts([]);
+      setParentId(tenantQuery.data.parentId ?? "");
+      setOrgUnitType(orgConfig.orgUnitType);
+      setTenantVisibility(orgConfig.visibility);
+      setWorksmobileExcluded(orgConfig.worksmobileExcluded);
+    }
+  }, [tenantQuery.data]);
+
+  const allTenants = parentQuery.data?.items ?? [];
+  const orgConfigCandidate = tenantQuery.data
+    ? {
+        ...tenantQuery.data,
+        parentId: parentId || undefined,
+        slug,
+      }
+    : undefined;
+  const canEditOrgConfig = orgConfigCandidate
+    ? shouldAllowHanmacOrgConfig(orgConfigCandidate, [
+        ...allTenants,
+        orgConfigCandidate,
+      ])
+    : false;
+  const orgUnitTypeOptions = getOrgUnitTypeOptionsForTenantType(type);
+
+  const updateMutation = useMutation({
+    mutationFn: (overrideForceDomains?: string[]) => {
+      const baseConfig = tenantQuery.data?.config;
+      const config = canEditOrgConfig
+        ? mergeTenantOrgConfig(baseConfig, {
+            orgUnitType,
+            visibility: tenantVisibility,
+            worksmobileExcluded,
+          })
+        : removeTenantOrgConfig(baseConfig);
+
+      return updateTenant(tenantId, {
+        name,
+        type,
+        slug,
+        description: description || undefined,
+        status,
+        parentId: parentId || undefined,
+        domains,
+        forceDomainConflicts: overrideForceDomains ?? forceDomainConflicts,
+        config,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tenants"] });
+      queryClient.invalidateQueries({ queryKey: ["tenant", tenantId] });
+      toast.success(t("msg.info.saved_success", "저장되었습니다."));
+    },
+    onError: (
+      err: AxiosError<{
+        code?: string;
+        error?: string;
+        conflicts?: ServerDomainConflict[];
+      }>,
+    ) => {
+      const conflicts = err.response?.data?.conflicts ?? [];
+      if (
+        err.response?.data?.code === "tenant_domain_conflict" &&
+        conflicts.length > 0
+      ) {
+        const nextForceDomains = Array.from(
+          new Set([...forceDomainConflicts, ...conflicts.map((c) => c.domain)]),
+        );
+        const message = conflicts.map(formatDomainConflictMessage).join("\n");
+        if (window.confirm(message)) {
+          setForceDomainConflicts(nextForceDomains);
+          updateMutation.mutate(nextForceDomains);
+        }
+        return;
+      }
+      toast.error(
+        err.response?.data?.error ||
+          t("err.common.unknown", "오류가 발생했습니다."),
+      );
+    },
+  });
+
+  const approveMutation = useMutation({
+    mutationFn: () => approveTenant(tenantId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tenants"] });
+      queryClient.invalidateQueries({ queryKey: ["tenant", tenantId] });
+      toast.success(
+        t("msg.admin.tenants.approve_success", "테넌트가 승인되었습니다."),
+      );
+    },
+    onError: (err: AxiosError<{ error?: string }>) => {
+      toast.error(
+        err.response?.data?.error ||
+          t("err.common.unknown", "오류가 발생했습니다."),
+      );
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteTenant(tenantId),
+    onSuccess: () => {
+      navigate("/tenants");
+      toast.success(
+        t("msg.admin.tenants.delete_success", "테넌트가 삭제되었습니다."),
+      );
+    },
+  });
+
+  const errorMsg = (updateMutation.error as AxiosError<{ error?: string }>)
+    ?.response?.data?.error;
+  const loadError = (tenantQuery.error as AxiosError<{ error?: string }>)
+    ?.response?.data?.error;
+  const isProtectedSeedTenant = tenantQuery.data
+    ? isSeedTenant(tenantQuery.data)
+    : false;
+
+  if (!tenantId) {
+    return (
+      <div>{t("msg.admin.tenants.missing_id", "테넌트 ID가 없습니다.")}</div>
+    );
+  }
+
+  const handleDelete = () => {
+    if (isProtectedSeedTenant) {
+      return;
+    }
+    if (
+      window.confirm(
+        t("msg.admin.tenants.delete_confirm", "삭제하시겠습니까?", {
+          name: tenantQuery.data?.name ?? "",
+        }),
+      )
+    ) {
+      deleteMutation.mutate();
+    }
+  };
+
+  const handleApprove = () => {
+    if (
+      window.confirm(
+        t("msg.admin.tenants.approve_confirm", "이 테넌트를 승인하시겠습니까?"),
+      )
+    ) {
+      approveMutation.mutate();
+    }
+  };
+
+  return (
+    <>
+      <Card className="mt-4 bg-[var(--color-panel)]">
+        <CardHeader className="px-5 py-3">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div>
+              <CardTitle className="text-lg">
+                {t("ui.admin.tenants.profile.title", "테넌트 프로필")}
+              </CardTitle>
+              <CardDescription>
+                {t(
+                  "ui.admin.tenants.profile.subtitle",
+                  "슬러그 및 상태 변경은 즉시 적용됩니다.",
+                )}
+              </CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-3 px-5 pb-4">
+          {loadError && (
+            <div className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {loadError}
+            </div>
+          )}
+          <div
+            data-testid="tenant-profile-primary-row"
+            className="grid gap-3 lg:grid-cols-[minmax(180px,1fr)_minmax(160px,0.8fr)_minmax(320px,1.4fr)]"
+          >
+            <div data-testid="tenant-name-slot" className="space-y-1">
+              <Label className="text-sm font-semibold">
+                {t("ui.admin.tenants.profile.name", "테넌트 이름")}{" "}
+                <span className="text-destructive">*</span>
+              </Label>
+              <Input value={name} onChange={(e) => setName(e.target.value)} />
+            </div>
+            <div data-testid="tenant-slug-slot" className="space-y-1">
+              <Label className="text-sm font-semibold">
+                {t("ui.admin.tenants.profile.slug", "슬러그 (Slug)")}
+              </Label>
+              <Input value={slug} onChange={(e) => setSlug(e.target.value)} />
+            </div>
+            <div data-testid="tenant-parent-picker-slot" className="min-w-0">
+              <ParentTenantSelector
+                id="parentId"
+                label={t(
+                  "ui.admin.tenants.profile.form.parent",
+                  "상위 테넌트 (선택)",
+                )}
+                value={parentId}
+                onChange={setParentId}
+                tenants={parentQuery.data?.items ?? []}
+                noneLabel={t("ui.common.none", "없음 (최상위)")}
+                excludeTenantId={tenantId}
+                compact
+                controlTestId="tenant-parent-picker-control"
+              />
+            </div>
+          </div>
+          <div
+            data-testid="tenant-profile-config-row"
+            className="grid gap-3 lg:grid-cols-[minmax(190px,1fr)_minmax(150px,0.8fr)_minmax(150px,0.8fr)_minmax(190px,0.9fr)]"
+          >
+            <div data-testid="tenant-type-slot" className="space-y-1">
+              <Label className="text-sm font-semibold">
+                {t("ui.admin.tenants.profile.type", "테넌트 유형")}
+              </Label>
+              <select
+                id="type"
+                data-testid="tenant-type-select"
+                className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                value={type}
+                onChange={(e) => setType(e.target.value)}
+              >
+                <option value="COMPANY">
+                  {t("domain.tenant_type.company", "COMPANY (일반 기업)")}
+                </option>
+                <option value="COMPANY_GROUP">
+                  {t(
+                    "domain.tenant_type.company_group",
+                    "COMPANY_GROUP (그룹사/지주사)",
+                  )}
+                </option>
+                <option value="ORGANIZATION">
+                  {t(
+                    "domain.tenant_type.organization",
+                    "ORGANIZATION (정규 조직)",
+                  )}
+                </option>
+                <option value="USER_GROUP">
+                  {t(
+                    "domain.tenant_type.user_group",
+                    "USER_GROUP (내부 부서/팀)",
+                  )}
+                </option>
+                <option value="PERSONAL">
+                  {t(
+                    "domain.tenant_type.personal",
+                    "PERSONAL (개인 워크스페이스)",
+                  )}
+                </option>
+              </select>
+            </div>
+            {canEditOrgConfig && (
+              <>
+                <div
+                  data-testid="tenant-org-unit-type-slot"
+                  className="space-y-1"
+                >
+                  <Label className="text-sm font-semibold">
+                    {t(
+                      "ui.admin.tenants.profile.org_unit_type",
+                      "조직 세부타입",
+                    )}
+                  </Label>
+                  <select
+                    id="tenant-org-unit-type"
+                    name="tenant-org-unit-type"
+                    data-testid="tenant-org-unit-type-select"
+                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    value={orgUnitType}
+                    onChange={(event) => setOrgUnitType(event.target.value)}
+                  >
+                    <option value="">{t("ui.common.none", "없음")}</option>
+                    {orgUnitTypeOptions.map((option) => (
+                      <option key={option} value={option}>
+                        {option}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div data-testid="tenant-visibility-slot" className="space-y-1">
+                  <Label className="text-sm font-semibold">
+                    {t("ui.admin.tenants.profile.visibility", "공개 범위")}
+                  </Label>
+                  <select
+                    id="tenant-visibility"
+                    name="tenant-visibility"
+                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    value={tenantVisibility}
+                    onChange={(event) =>
+                      setTenantVisibility(
+                        event.target.value as TenantVisibility,
+                      )
+                    }
+                  >
+                    {TENANT_VISIBILITY_OPTIONS.map((option) => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div
+                  data-testid="tenant-worksmobile-excluded-slot"
+                  className="space-y-1"
+                >
+                  <Label className="text-sm font-semibold">
+                    {t(
+                      "ui.admin.tenants.profile.worksmobile_sync",
+                      "WORKS 연동",
+                    )}
+                  </Label>
+                  <select
+                    id="worksmobileExcluded"
+                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    value={worksmobileExcluded ? "excluded" : "enabled"}
+                    onChange={(event) =>
+                      setWorksmobileExcluded(event.target.value === "excluded")
+                    }
+                  >
+                    <option value="enabled">
+                      {t(
+                        "ui.admin.tenants.profile.worksmobile_enabled",
+                        "연동",
+                      )}
+                    </option>
+                    <option value="excluded">
+                      {t(
+                        "ui.admin.tenants.profile.worksmobile_excluded",
+                        "제외",
+                      )}
+                    </option>
+                  </select>
+                </div>
+              </>
+            )}
+          </div>
+          <div className="grid gap-3 lg:grid-cols-[minmax(260px,0.9fr)_minmax(360px,1.4fr)_auto]">
+            <div className="space-y-1">
+              <Label className="text-sm font-semibold">
+                {t("ui.admin.tenants.profile.description", "설명")}
+              </Label>
+              <Textarea
+                rows={2}
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-sm font-semibold">
+                {t(
+                  "ui.admin.tenants.profile.allowed_domains",
+                  "허용된 도메인 (콤마로 구분)",
+                )}
+              </Label>
+              <DomainTagInput
+                id="tenant-domains"
+                value={domains}
+                onChange={setDomains}
+                tenants={parentQuery.data?.items ?? []}
+                currentTenantId={tenantId}
+                confirmedConflicts={forceDomainConflicts}
+                onConfirmedConflictsChange={setForceDomainConflicts}
+                placeholder="example.com, example.kr"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-sm font-semibold">
+                {t("ui.admin.tenants.profile.status", "상태")}
+              </Label>
+              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  size="sm"
+                  variant={status === "active" ? "default" : "outline"}
+                  onClick={() => setStatus("active")}
+                >
+                  {t("ui.common.status.active", "활성")}
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant={status === "inactive" ? "default" : "outline"}
+                  onClick={() => setStatus("inactive")}
+                >
+                  {t("ui.common.status.inactive", "비활성")}
+                </Button>
+              </div>
+            </div>
+          </div>
+          {errorMsg && (
+            <div className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {errorMsg}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
+        <Button
+          variant="outline"
+          onClick={handleDelete}
+          disabled={deleteMutation.isPending || isProtectedSeedTenant}
+          title={
+            isProtectedSeedTenant
+              ? t(
+                  "msg.admin.tenants.seed_delete_blocked",
+                  "초기 설정 테넌트는 삭제할 수 없습니다.",
+                )
+              : undefined
+          }
+        >
+          <Trash2 size={16} />
+          {t("ui.common.delete", "삭제")}
+        </Button>
+        <div className="flex items-center gap-2">
+          {status === "pending" && (
+            <Button
+              variant="default"
+              className="bg-green-600 hover:bg-green-700"
+              onClick={handleApprove}
+              disabled={approveMutation.isPending}
+            >
+              {t("ui.admin.tenants.profile.approve_button", "테넌트 승인")}
+            </Button>
+          )}
+          <Button variant="outline" onClick={() => navigate("/tenants")}>
+            {t("ui.common.cancel", "취소")}
+          </Button>
+          <Button
+            onClick={() => updateMutation.mutate(undefined)}
+            disabled={
+              updateMutation.isPending ||
+              tenantQuery.isLoading ||
+              name.trim() === ""
+            }
+          >
+            <Save size={16} />
+            {t("ui.common.save", "저장")}
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/baron-sso/adminfront/src/features/tenants/routes/TenantSchemaPage.test.ts
+++ b/baron-sso/adminfront/src/features/tenants/routes/TenantSchemaPage.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import { createSchemaField, normalizeSchemaField } from "./tenantSchemaFields";
+
+describe("TenantSchemaPage schema field helpers", () => {
+  it("creates text fields without varchar maxLength policy", () => {
+    const field = createSchemaField();
+
+    expect(field.type).toBe("text");
+    expect("maxLength" in field).toBe(false);
+    expect(field.indexed).toBe(false);
+  });
+
+  it("does not add maxLength to legacy text schema fields", () => {
+    const field = normalizeSchemaField({
+      key: "emp_id",
+      label: "사번",
+      type: "text",
+    });
+
+    expect("maxLength" in field).toBe(false);
+  });
+
+  it("forces indexed when a field can be used as login ID", () => {
+    const field = normalizeSchemaField({
+      key: "emp_id",
+      label: "사번",
+      type: "text",
+      indexed: false,
+      isLoginId: true,
+    });
+
+    expect(field.indexed).toBe(true);
+    expect(field.isLoginId).toBe(true);
+  });
+});
--- a/baron-sso/adminfront/src/features/tenants/routes/TenantSchemaPage.tsx
+++ b/baron-sso/adminfront/src/features/tenants/routes/TenantSchemaPage.tsx
@@ -0,0 +1,400 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Plus, Save, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { toast } from "../../../components/ui/use-toast";
+import { fetchMe, fetchTenant, updateTenant } from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+import { normalizeAdminRole } from "../../../lib/roles";
+import {
+  createSchemaField,
+  isSchemaFieldType,
+  normalizeSchemaField,
+  type SchemaField,
+} from "./tenantSchemaFields";
+
+export function TenantSchemaPage() {
+  const { tenantId } = useParams<{ tenantId: string }>();
+  const queryClient = useQueryClient();
+
+  const { data: profile, isLoading: isProfileLoading } = useQuery({
+    queryKey: ["me"],
+    queryFn: fetchMe,
+  });
+
+  const profileRole = normalizeAdminRole(profile?.role);
+  const canAccess = profileRole === "super_admin";
+
+  const tenantQuery = useQuery({
+    queryKey: ["tenant", tenantId],
+    queryFn: () => {
+      if (!tenantId) throw new Error("Tenant ID is required");
+      return fetchTenant(tenantId);
+    },
+    enabled: !!tenantId && canAccess,
+  });
+
+  const [fields, setFields] = useState<SchemaField[]>([]);
+
+  useEffect(() => {
+    const rawSchema = tenantQuery.data?.config?.userSchema;
+
+    if (Array.isArray(rawSchema)) {
+      setFields(rawSchema.map(normalizeSchemaField));
+    }
+  }, [tenantQuery.data]);
+
+  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;
+      newConfig.userSchema = newFields;
+
+      return updateTenant(tenantId, {
+        config: newConfig,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tenant", tenantId] });
+      toast.success(
+        t(
+          "msg.admin.tenants.schema.update_success",
+          "스키마가 저장되었습니다.",
+        ),
+      );
+    },
+    onError: (err: AxiosError<{ error?: string }>) => {
+      toast.error(
+        err.response?.data?.error ||
+          t("msg.admin.tenants.schema.update_error", "저장에 실패했습니다."),
+      );
+    },
+  });
+
+  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, createSchemaField()]);
+  };
+
+  const removeField = (index: number) => {
+    setFields(fields.filter((_, i) => i !== index));
+  };
+
+  const updateField = (index: number, updates: Partial<SchemaField>) => {
+    const newFields = [...fields];
+    newFields[index] = { ...newFields[index], ...updates };
+    setFields(newFields);
+  };
+
+  return (
+    <div className="space-y-6 mt-6">
+      <Card className="border-none shadow-sm bg-[var(--color-panel)]">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <CardTitle className="text-2xl font-bold">
+                {t("ui.admin.tenants.schema.title", "사용자 스키마 확장")}
+              </CardTitle>
+              <CardDescription>
+                {t(
+                  "msg.admin.tenants.schema.subtitle",
+                  "이 테넌트 사용자를 위한 커스텀 속성을 정의합니다.",
+                )}
+              </CardDescription>
+            </div>
+            <Button onClick={addField} size="sm">
+              <Plus size={16} className="mr-2" />
+              {t("ui.admin.tenants.schema.add_field", "필드 추가")}
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {fields.length === 0 && (
+            <div className="py-12 text-center text-muted-foreground border border-dashed rounded-lg bg-muted/10">
+              {t(
+                "msg.admin.tenants.schema.empty",
+                '정의된 커스텀 필드가 없습니다. "필드 추가"를 눌러 시작하세요.',
+              )}
+            </div>
+          )}
+          {fields.map((field, index) => (
+            <div
+              key={field.id}
+              className="p-5 border border-border rounded-xl bg-muted/20 hover:bg-muted/30 transition-colors space-y-4"
+            >
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="space-y-2">
+                  <Label className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
+                    {t("ui.admin.tenants.schema.field.key", "필드 키 (ID)")}
+                  </Label>
+                  <Input
+                    value={field.key}
+                    onChange={(e) =>
+                      updateField(index, { key: e.target.value })
+                    }
+                    placeholder={t(
+                      "ui.admin.tenants.schema.field.key_placeholder",
+                      "예: employee_id",
+                    )}
+                    className="h-10"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
+                    {t("ui.admin.tenants.schema.field.label", "표시 라벨")}
+                  </Label>
+                  <Input
+                    value={field.label}
+                    onChange={(e) =>
+                      updateField(index, { label: e.target.value })
+                    }
+                    placeholder={t(
+                      "ui.admin.tenants.schema.field.label_placeholder",
+                      "예: 사번",
+                    )}
+                    className="h-10"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
+                    {t("ui.admin.tenants.schema.field.type", "유형")}
+                  </Label>
+                  <select
+                    id={`tenant-schema-field-type-${field.key || index}`}
+                    name={`tenant-schema-field-type-${field.key || index}`}
+                    className="flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus:ring-1 focus:ring-primary"
+                    value={field.type}
+                    onChange={(e) => {
+                      const nextType = e.target.value;
+                      if (isSchemaFieldType(nextType)) {
+                        updateField(index, {
+                          type: nextType,
+                          isLoginId:
+                            nextType === "text" ? field.isLoginId : false,
+                          indexed:
+                            nextType === "text"
+                              ? field.indexed || field.isLoginId || false
+                              : field.indexed,
+                        });
+                      }
+                    }}
+                  >
+                    <option value="text">
+                      {t(
+                        "ui.admin.tenants.schema.field.type_text",
+                        "텍스트 (Text)",
+                      )}
+                    </option>
+                    <option value="number">
+                      {t(
+                        "ui.admin.tenants.schema.field.type_number",
+                        "숫자 (Integer)",
+                      )}
+                    </option>
+                    <option value="float">
+                      {t(
+                        "ui.admin.tenants.schema.field.type_float",
+                        "실수 (Float)",
+                      )}
+                    </option>
+                    <option value="boolean">
+                      {t(
+                        "ui.admin.tenants.schema.field.type_boolean",
+                        "불리언 (Boolean)",
+                      )}
+                    </option>
+                    <option value="date">
+                      {t(
+                        "ui.admin.tenants.schema.field.type_date",
+                        "날짜 (Date)",
+                      )}
+                    </option>
+                    <option value="datetime">
+                      {t(
+                        "ui.admin.tenants.schema.field.type_datetime",
+                        "일시 (DateTime)",
+                      )}
+                    </option>
+                  </select>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
+                <div className="flex flex-wrap items-center gap-4">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      name={`tenant-schema-field-required-${field.key || index}`}
+                      type="checkbox"
+                      checked={field.required}
+                      onChange={(e) =>
+                        updateField(index, { required: e.target.checked })
+                      }
+                      className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
+                    />
+                    <span className="text-sm font-medium">
+                      {t("ui.admin.tenants.schema.field.required", "필수 입력")}
+                    </span>
+                  </label>
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      name={`tenant-schema-field-admin-only-${field.key || index}`}
+                      type="checkbox"
+                      checked={field.adminOnly}
+                      onChange={(e) =>
+                        updateField(index, { adminOnly: e.target.checked })
+                      }
+                      className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
+                    />
+                    <span className="text-sm font-medium">
+                      {t(
+                        "ui.admin.tenants.schema.field.admin_only",
+                        "관리자 전용",
+                      )}
+                    </span>
+                  </label>
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      name={`tenant-schema-field-login-id-${field.key || index}`}
+                      type="checkbox"
+                      checked={field.isLoginId || false}
+                      onChange={(e) =>
+                        updateField(index, {
+                          isLoginId: e.target.checked,
+                          indexed: e.target.checked ? true : field.indexed,
+                          type: e.target.checked ? "text" : field.type,
+                        })
+                      }
+                      className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
+                    />
+                    <span className="text-sm font-medium text-blue-600">
+                      {t(
+                        "ui.admin.tenants.schema.field.is_login_id",
+                        "로그인 ID로 사용",
+                      )}
+                    </span>
+                  </label>
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      name={`tenant-schema-field-indexed-${field.key || index}`}
+                      type="checkbox"
+                      checked={field.indexed || field.isLoginId || false}
+                      disabled={field.isLoginId}
+                      onChange={(e) =>
+                        updateField(index, { indexed: e.target.checked })
+                      }
+                      className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary disabled:opacity-60"
+                    />
+                    <span className="text-sm font-medium">
+                      {t(
+                        "ui.admin.tenants.schema.field.indexed",
+                        "검색 인덱스 필요",
+                      )}
+                    </span>
+                  </label>
+                  {(field.type === "number" || field.type === "float") && (
+                    <label className="flex items-center gap-2 cursor-pointer">
+                      <input
+                        name={`tenant-schema-field-unsigned-${field.key || index}`}
+                        type="checkbox"
+                        checked={field.unsigned}
+                        onChange={(e) =>
+                          updateField(index, { unsigned: e.target.checked })
+                        }
+                        className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
+                      />
+                      <span className="text-sm font-medium">
+                        {t(
+                          "ui.admin.tenants.schema.field.unsigned",
+                          "음수 불가",
+                        )}
+                      </span>
+                    </label>
+                  )}
+                </div>
+                <div className="space-y-2">
+                  <Input
+                    value={field.validation}
+                    onChange={(e) =>
+                      updateField(index, { validation: e.target.value })
+                    }
+                    placeholder={t(
+                      "ui.admin.tenants.schema.field.validation_placeholder",
+                      "정규식 (예: ^[0-9]+$)",
+                    )}
+                    className="h-9 text-xs font-mono"
+                  />
+                </div>
+                <div className="flex justify-end">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-destructive hover:bg-destructive/10 h-10 w-10"
+                    onClick={() => removeField(index)}
+                  >
+                    <Trash2 size={18} />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end pt-2">
+        <Button
+          onClick={() => updateMutation.mutate(fields)}
+          disabled={updateMutation.isPending || tenantQuery.isLoading}
+          className="px-8 h-11"
+        >
+          <Save size={18} className="mr-2" />
+          {t("ui.admin.tenants.schema.save", "변경사항 저장")}
+        </Button>
+      </div>
+    </div>
+  );
+}
--- a/baron-sso/adminfront/src/features/tenants/routes/TenantSubTenantsPage.tsx
+++ b/baron-sso/adminfront/src/features/tenants/routes/TenantSubTenantsPage.tsx
@@ -0,0 +1,128 @@
+import { useQuery } from "@tanstack/react-query";
+import { Building2, Plus } from "lucide-react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import {
+  commonStickyTableHeaderClass,
+  commonTableShellClass,
+  commonTableViewportClass,
+} from "../../../../../common/ui/table";
+import { Badge } from "../../../components/ui/badge";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import { fetchAllTenants } from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+
+function TenantSubTenantsPage() {
+  const { tenantId } = useParams<{ tenantId: string }>();
+  const navigate = useNavigate();
+
+  const { data } = useQuery({
+    queryKey: ["sub-tenants", tenantId],
+    queryFn: () => fetchAllTenants({ parentId: tenantId ?? undefined }),
+    enabled: !!tenantId,
+  });
+
+  const subTenants = data?.items ?? [];
+
+  return (
+    <Card className="mt-6 bg-[var(--color-panel)] flex-1 flex flex-col min-h-0 overflow-hidden">
+      <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
+        <div>
+          <CardTitle className="flex items-center gap-2">
+            <Building2 size={18} className="text-primary" />
+            {t("ui.admin.tenants.sub.title", "Sub-tenants ({{count}})", {
+              count: subTenants.length,
+            })}
+          </CardTitle>
+          <CardDescription>
+            {t(
+              "msg.admin.tenants.sub.subtitle",
+              "현재 테넌트 하위에 생성된 조직입니다.",
+            )}
+          </CardDescription>
+        </div>
+        <Button size="sm" asChild>
+          <Link to={`/tenants/new?parentId=${tenantId}`}>
+            <Plus size={14} className="mr-1" />
+            {t("ui.admin.tenants.sub.add", "하위 테넌트 추가")}
+          </Link>
+        </Button>
+      </CardHeader>
+      <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
+        <div className={commonTableShellClass}>
+          <div className={commonTableViewportClass}>
+            <Table>
+              <TableHeader className={commonStickyTableHeaderClass}>
+                <TableRow>
+                  <TableHead>
+                    {t("ui.admin.tenants.sub.table.name", "NAME")}
+                  </TableHead>
+                  <TableHead>
+                    {t("ui.admin.tenants.sub.table.slug", "SLUG")}
+                  </TableHead>
+                  <TableHead>
+                    {t("ui.admin.tenants.sub.table.status", "STATUS")}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {subTenants.length === 0 && (
+                  <TableRow>
+                    <TableCell
+                      colSpan={3}
+                      className="text-center py-8 text-muted-foreground"
+                    >
+                      {t(
+                        "msg.admin.tenants.sub.empty",
+                        "하위 테넌트가 없습니다.",
+                      )}
+                    </TableCell>
+                  </TableRow>
+                )}
+                {subTenants.map((tenant) => (
+                  <TableRow
+                    key={tenant.id}
+                    className="cursor-pointer hover:bg-muted/50 transition-colors"
+                    onClick={() => navigate(`/tenants/${tenant.id}`)}
+                  >
+                    <TableCell className="font-semibold">
+                      {tenant.name}
+                    </TableCell>
+                    <TableCell className="text-xs font-mono">
+                      {tenant.slug}
+                    </TableCell>
+                    <TableCell>
+                      <Badge
+                        variant={
+                          tenant.status === "active" ? "default" : "secondary"
+                        }
+                      >
+                        {t(`ui.common.status.${tenant.status}`, tenant.status)}
+                      </Badge>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default TenantSubTenantsPage;
--- a/baron-sso/adminfront/src/features/tenants/routes/TenantUsersPage.export.test.tsx
+++ b/baron-sso/adminfront/src/features/tenants/routes/TenantUsersPage.export.test.tsx
@@ -0,0 +1,148 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18nMock } from "../../../test/i18nMock";
+import TenantUsersPage from "./TenantUsersPage";
+
+const exportUsersCSVMock = vi.hoisted(() => vi.fn());
+const updateUserMock = vi.hoisted(() => vi.fn());
+const fetchUsersMock = vi.hoisted(() => vi.fn());
+
+vi.mock("../../../lib/i18n", () => createI18nMock());
+
+vi.mock("../../../lib/adminApi", () => ({
+  fetchTenant: vi.fn(async () => ({
+    id: "tenant-team-id",
+    name: "기술기획팀",
+    slug: "tech-planning",
+  })),
+  fetchUsers: fetchUsersMock,
+  exportUsersCSV: exportUsersCSVMock,
+  updateUser: updateUserMock,
+}));
+
+function renderTenantUsersPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={["/tenants/tenant-team-id/users"]}>
+        <Routes>
+          <Route
+            path="/tenants/:tenantId/users"
+            element={<TenantUsersPage />}
+          />
+        </Routes>
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("TenantUsersPage export", () => {
+  beforeEach(() => {
+    exportUsersCSVMock.mockReset();
+    updateUserMock.mockReset();
+    fetchUsersMock.mockReset();
+    fetchUsersMock.mockResolvedValue({
+      items: [
+        {
+          id: "user-1",
+          name: "Alice",
+          email: "alice@example.com",
+          role: "user",
+          status: "active",
+        },
+      ],
+      total: 1,
+    });
+    exportUsersCSVMock.mockResolvedValue({
+      blob: new Blob(["email,name\nalice@example.com,Alice\n"], {
+        type: "text/csv",
+      }),
+      filename: "users_export_20260609.csv",
+    });
+    vi.spyOn(window.URL, "createObjectURL").mockReturnValue(
+      "blob:tenant-users-export",
+    );
+    vi.spyOn(window.URL, "revokeObjectURL").mockImplementation(() => {});
+  });
+
+  it("exports only the currently opened tenant users by tenant slug", async () => {
+    renderTenantUsersPage();
+
+    await screen.findByText("Alice");
+
+    fireEvent.click(screen.getByTestId("tenant-users-export-menu-item"));
+
+    await waitFor(() => {
+      expect(exportUsersCSVMock).toHaveBeenCalledWith(
+        "",
+        "tech-planning",
+        false,
+      );
+    });
+  });
+
+  it("queues searched users and adds all queued users to the tenant at once", async () => {
+    fetchUsersMock
+      .mockResolvedValueOnce({ items: [], total: 0 })
+      .mockResolvedValueOnce({
+        items: [
+          {
+            id: "user-2",
+            name: "Bob",
+            email: "bob@example.com",
+            role: "user",
+            status: "active",
+          },
+          {
+            id: "user-3",
+            name: "Carol",
+            email: "carol@example.com",
+            role: "user",
+            status: "active",
+          },
+        ],
+        total: 2,
+      })
+      .mockResolvedValue({ items: [], total: 0 });
+    updateUserMock.mockResolvedValue({});
+
+    renderTenantUsersPage();
+
+    const addButton = await screen.findByTestId(
+      "tenant-member-add-existing-btn",
+    );
+    await waitFor(() => expect(addButton).not.toBeDisabled());
+    fireEvent.click(addButton);
+    fireEvent.change(screen.getByTestId("tenant-member-search-input"), {
+      target: { value: "bo" },
+    });
+
+    fireEvent.click(await screen.findByText("Bob"));
+    fireEvent.click(await screen.findByText("Carol"));
+
+    expect(screen.getByTestId("tenant-member-add-queue")).toHaveTextContent(
+      "Bob",
+    );
+    expect(screen.getByTestId("tenant-member-add-queue")).toHaveTextContent(
+      "Carol",
+    );
+
+    fireEvent.click(screen.getByTestId("tenant-member-add-submit-btn"));
+
+    await waitFor(() => {
+      expect(updateUserMock).toHaveBeenCalledWith("user-2", {
+        tenantSlug: "tech-planning",
+        isAddTenant: true,
+      });
+      expect(updateUserMock).toHaveBeenCalledWith("user-3", {
+        tenantSlug: "tech-planning",
+        isAddTenant: true,
+      });
+    });
+  });
+});
--- a/baron-sso/adminfront/src/features/tenants/routes/TenantUsersPage.tsx
+++ b/baron-sso/adminfront/src/features/tenants/routes/TenantUsersPage.tsx
@@ -0,0 +1,475 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import {
+  FileDown,
+  Loader2,
+  Mail,
+  Plus,
+  Search,
+  User,
+  UserPlus,
+  X,
+} from "lucide-react";
+import * as React from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { commonStickyTableHeaderClass } from "../../../../../common/ui/table";
+import { Badge } from "../../../components/ui/badge";
+import { Button } from "../../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../../components/ui/dialog";
+import { Input } from "../../../components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import { toast } from "../../../components/ui/use-toast";
+import {
+  exportUsersCSV,
+  fetchTenant,
+  fetchUsers,
+  type UserSummary,
+  updateUser,
+} from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+
+function TenantUsersPage() {
+  const params = useParams<{ tenantId: string }>();
+  const navigate = useNavigate();
+  const tenantId = params.tenantId ?? "";
+  const queryClient = useQueryClient();
+  const [addMembersOpen, setAddMembersOpen] = React.useState(false);
+  const [memberSearch, setMemberSearch] = React.useState("");
+  const [queuedMembers, setQueuedMembers] = React.useState<UserSummary[]>([]);
+
+  // 테넌트의 슬러그(tenantSlug)를 먼저 가져옴
+  const tenantQuery = useQuery({
+    queryKey: ["tenant", tenantId],
+    queryFn: () => fetchTenant(tenantId),
+    enabled: tenantId.length > 0,
+  });
+
+  const tenantSlug = tenantQuery.data?.slug;
+
+  // 해당 슬러그로 사용자 검색
+  const usersQuery = useQuery({
+    queryKey: ["users", { tenantSlug }],
+    queryFn: () => fetchUsers(100, 0, undefined, tenantSlug),
+    enabled: !!tenantSlug,
+  });
+
+  const memberSearchTerm = memberSearch.trim();
+  const memberSearchQuery = useQuery({
+    queryKey: ["tenant-member-search", tenantSlug, memberSearchTerm],
+    queryFn: () => fetchUsers(20, 0, memberSearchTerm),
+    enabled: addMembersOpen && memberSearchTerm.length >= 2,
+  });
+
+  const exportMutation = useMutation({
+    mutationFn: (includeIds: boolean) =>
+      exportUsersCSV("", tenantSlug ?? "", includeIds),
+    onSuccess: ({ blob, filename }) => {
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(url);
+    },
+    onError: () => {
+      toast.error(
+        t("msg.admin.users.export_error", "사용자 내보내기에 실패했습니다."),
+      );
+    },
+  });
+
+  const removeTenantMutation = useMutation({
+    mutationFn: ({ userId, slug }: { userId: string; slug: string }) =>
+      updateUser(userId, { tenantSlug: slug, isRemoveTenant: true }),
+    onSuccess: () => {
+      toast.success(
+        t(
+          "msg.admin.tenants.members.remove_success",
+          "조직에서 제외되었습니다.",
+        ),
+      );
+      usersQuery.refetch();
+      queryClient.invalidateQueries({ queryKey: ["tenant", tenantId] });
+    },
+    onError: (err: AxiosError<{ error?: string }>) => {
+      toast.error(
+        err.response?.data?.error ||
+          t("msg.admin.tenants.members.remove_error", "제외 실패"),
+      );
+    },
+  });
+
+  const addMembersMutation = useMutation({
+    mutationFn: async (members: UserSummary[]) => {
+      if (!tenantSlug || members.length === 0) return;
+      await Promise.all(
+        members.map((member) =>
+          updateUser(member.id, { tenantSlug, isAddTenant: true }),
+        ),
+      );
+    },
+    onSuccess: () => {
+      const count = queuedMembers.length;
+      toast.success(
+        t(
+          "msg.admin.tenants.members.add_success",
+          "{{count}}명의 구성원이 추가되었습니다.",
+          { count },
+        ),
+      );
+      setQueuedMembers([]);
+      setMemberSearch("");
+      setAddMembersOpen(false);
+      usersQuery.refetch();
+      queryClient.invalidateQueries({ queryKey: ["tenant", tenantId] });
+    },
+    onError: (err: AxiosError<{ error?: string }>) => {
+      toast.error(
+        err.response?.data?.error ||
+          t("msg.admin.tenants.members.add_error", "구성원 추가 실패"),
+      );
+    },
+  });
+
+  const _handleRemoveMember = (userId: string, userName: string) => {
+    if (!tenantSlug) return;
+    if (
+      window.confirm(
+        t(
+          "msg.admin.tenants.members.remove_confirm",
+          "'{{name}}'님을 이 조직에서 제외하시겠습니까?",
+          { name: userName },
+        ),
+      )
+    ) {
+      removeTenantMutation.mutate({ userId, slug: tenantSlug });
+    }
+  };
+
+  const users = usersQuery.data?.items ?? [];
+  const existingUserIds = React.useMemo(
+    () => new Set(users.map((user) => user.id)),
+    [users],
+  );
+  const queuedUserIds = React.useMemo(
+    () => new Set(queuedMembers.map((user) => user.id)),
+    [queuedMembers],
+  );
+  const searchResults = memberSearchQuery.data?.items ?? [];
+
+  const queueMember = (member: UserSummary) => {
+    if (existingUserIds.has(member.id) || queuedUserIds.has(member.id)) {
+      return;
+    }
+    setQueuedMembers((current) => [...current, member]);
+  };
+
+  const removeQueuedMember = (memberId: string) => {
+    setQueuedMembers((current) =>
+      current.filter((member) => member.id !== memberId),
+    );
+  };
+
+  return (
+    <Card className="mt-6 bg-[var(--color-panel)] flex-1 flex flex-col min-h-0 overflow-hidden">
+      <CardHeader className="flex-shrink-0 flex flex-row items-center justify-between">
+        <CardTitle className="flex items-center gap-2">
+          <User size={18} className="text-primary" />
+          {t("ui.admin.tenants.members.title", "Tenant Members ({{count}})", {
+            count: users.length,
+          })}
+        </CardTitle>
+        <div className="flex flex-wrap items-center justify-end gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            className="gap-2"
+            disabled={!tenantSlug || exportMutation.isPending}
+            data-testid="tenant-users-export-menu-item"
+            onClick={() => exportMutation.mutate(false)}
+          >
+            <FileDown size={16} />
+            {t("ui.common.export_without_ids", "UUID 제외 내보내기")}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="gap-2"
+            disabled={!tenantSlug || exportMutation.isPending}
+            data-testid="tenant-users-export-with-ids-menu-item"
+            onClick={() => exportMutation.mutate(true)}
+          >
+            <FileDown size={16} />
+            {t("ui.common.export_with_ids", "UUID 포함 내보내기")}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="gap-2"
+            disabled={!tenantSlug}
+            data-testid="tenant-member-add-existing-btn"
+            onClick={() => setAddMembersOpen(true)}
+          >
+            <UserPlus size={16} />
+            {t("ui.admin.tenants.members.add_existing", "기존 멤버 배정")}
+          </Button>
+          <Button size="sm" asChild className="gap-2">
+            <Link to={`/users/new?tenantSlug=${tenantSlug}`}>
+              <Plus size={16} />
+              {t("ui.admin.tenants.members.create_new", "신규 멤버 생성")}
+            </Link>
+          </Button>
+        </div>
+      </CardHeader>
+      <Dialog open={addMembersOpen} onOpenChange={setAddMembersOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {t("ui.admin.tenants.members.add_existing", "기존 멤버 배정")}
+            </DialogTitle>
+            <DialogDescription>
+              {t(
+                "ui.admin.tenants.members.add_existing_description",
+                "검색 결과를 선택해 추가 명단에 담은 뒤 한 번에 배정합니다.",
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="relative">
+              <Search
+                size={16}
+                className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+              />
+              <Input
+                value={memberSearch}
+                onChange={(event) => setMemberSearch(event.target.value)}
+                className="h-9 pl-9"
+                placeholder={t(
+                  "ui.admin.tenants.members.search_placeholder",
+                  "이름 또는 이메일 검색",
+                )}
+                data-testid="tenant-member-search-input"
+              />
+            </div>
+            <div className="rounded-md border">
+              <div className="max-h-56 overflow-auto">
+                {memberSearchTerm.length < 2 ? (
+                  <div className="px-3 py-6 text-center text-sm text-muted-foreground">
+                    {t(
+                      "ui.admin.tenants.members.search_min_length",
+                      "두 글자 이상 입력하세요.",
+                    )}
+                  </div>
+                ) : memberSearchQuery.isFetching ? (
+                  <div className="flex items-center justify-center gap-2 px-3 py-6 text-sm text-muted-foreground">
+                    <Loader2 size={16} className="animate-spin" />
+                    {t("ui.common.searching", "검색 중...")}
+                  </div>
+                ) : searchResults.length === 0 ? (
+                  <div className="px-3 py-6 text-center text-sm text-muted-foreground">
+                    {t("ui.common.no_results", "검색 결과가 없습니다.")}
+                  </div>
+                ) : (
+                  <div className="divide-y">
+                    {searchResults.map((user) => {
+                      const disabled =
+                        existingUserIds.has(user.id) ||
+                        queuedUserIds.has(user.id);
+                      return (
+                        <button
+                          key={user.id}
+                          type="button"
+                          className="flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-muted/50 disabled:cursor-not-allowed disabled:opacity-50"
+                          disabled={disabled}
+                          onClick={() => queueMember(user)}
+                        >
+                          <span className="min-w-0">
+                            <span className="block truncate font-medium">
+                              {user.name}
+                            </span>
+                            <span className="block truncate text-xs text-muted-foreground">
+                              {user.email}
+                            </span>
+                          </span>
+                          <Plus size={16} className="flex-shrink-0" />
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div
+              className="min-h-20 rounded-md border bg-muted/20 p-3"
+              data-testid="tenant-member-add-queue"
+            >
+              {queuedMembers.length === 0 ? (
+                <div className="flex h-14 items-center justify-center text-sm text-muted-foreground">
+                  {t(
+                    "ui.admin.tenants.members.queue_empty",
+                    "추가할 구성원을 선택하세요.",
+                  )}
+                </div>
+              ) : (
+                <div className="flex flex-wrap gap-2">
+                  {queuedMembers.map((user) => (
+                    <span
+                      key={user.id}
+                      className="inline-flex max-w-full items-center gap-2 rounded-md border bg-background px-2 py-1 text-sm"
+                    >
+                      <span className="max-w-52 truncate">{user.name}</span>
+                      <button
+                        type="button"
+                        className="text-muted-foreground hover:text-foreground"
+                        onClick={() => removeQueuedMember(user.id)}
+                        aria-label={t(
+                          "ui.admin.tenants.members.queue_remove",
+                          "추가 명단에서 제거",
+                        )}
+                      >
+                        <X size={14} />
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setAddMembersOpen(false)}
+              disabled={addMembersMutation.isPending}
+            >
+              {t("ui.common.cancel", "취소")}
+            </Button>
+            <Button
+              onClick={() => addMembersMutation.mutate(queuedMembers)}
+              disabled={
+                queuedMembers.length === 0 || addMembersMutation.isPending
+              }
+              data-testid="tenant-member-add-submit-btn"
+            >
+              {addMembersMutation.isPending && (
+                <Loader2 size={16} className="animate-spin" />
+              )}
+              {t("ui.admin.tenants.members.add_queued", "선택 구성원 추가")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
+        <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
+          <div className="flex-1 overflow-auto relative custom-scrollbar">
+            <Table>
+              <TableHeader className={commonStickyTableHeaderClass}>
+                <TableRow>
+                  <TableHead>
+                    {t("ui.admin.tenants.members.table.name", "NAME")}
+                  </TableHead>
+                  <TableHead>
+                    {t("ui.admin.tenants.members.table.email", "EMAIL")}
+                  </TableHead>
+                  <TableHead>
+                    {t("ui.admin.tenants.members.table.role", "ROLE")}
+                  </TableHead>
+                  <TableHead>
+                    {t("ui.admin.tenants.members.table.status", "STATUS")}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {usersQuery.isLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={4} className="text-center py-20">
+                      <div className="flex flex-col items-center gap-2">
+                        <Loader2
+                          className="animate-spin text-muted-foreground"
+                          size={24}
+                        />
+                        <span className="text-sm text-muted-foreground">
+                          {t("ui.common.loading", "Loading...")}
+                        </span>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ) : users.length === 0 ? (
+                  <TableRow>
+                    <TableCell
+                      colSpan={4}
+                      className="text-center py-8 text-muted-foreground"
+                    >
+                      {t(
+                        "msg.admin.tenants.members.empty",
+                        "소속된 사용자가 없습니다.",
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  users.map((user) => (
+                    <TableRow
+                      key={user.id}
+                      className="cursor-pointer hover:bg-muted/50 transition-colors"
+                      onClick={() => navigate(`/users/${user.id}`)}
+                    >
+                      <TableCell className="font-semibold">
+                        {user.name}
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-1 text-xs">
+                          <Mail size={12} className="text-muted-foreground" />
+                          {user.email}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline" className="capitalize">
+                          {t(
+                            `ui.common.role.${user.role}`,
+                            user.role.replace("_", " "),
+                          )}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={
+                            user.status === "active" ? "default" : "muted"
+                          }
+                        >
+                          {t(`ui.common.status.${user.status}`, user.status)}
+                        </Badge>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default TenantUsersPage;
--- a/baron-sso/adminfront/src/features/tenants/routes/TenantWorksmobilePage.test.ts
+++ b/baron-sso/adminfront/src/features/tenants/routes/TenantWorksmobilePage.test.ts
@@ -0,0 +1,627 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildWorksmobilePasswordManageUrl,
+  canCreateWorksmobileRow,
+  canOpenWorksmobilePasswordManage,
+  canSelectWorksmobileRow,
+  comparisonFilterOptions,
+  filterVisibleWorksmobileComparisonRows,
+  filterWorksmobileComparisonRows,
+  filterWorksmobileComparisonRowsBySearch,
+  formatWorksmobileOrgDetails,
+  formatWorksmobilePersonName,
+  formatWorksmobileUpdateDetails,
+  getDefaultGroupComparisonFilters,
+  getDefaultUserComparisonFilters,
+  getDefaultWorksmobileComparisonColumns,
+  getWorksmobileComparisonStatusLabel,
+  getWorksmobileRowSelectionKey,
+  getWorksmobileSelectedActionIds,
+  getWorksmobileSelectedCreateUserIds,
+  getWorksmobileSelectedMissingExternalKeyOrgUnitIds,
+  getWorksmobileSelectedUpdateUserIds,
+  getWorksmobileSelectedWorksOnlyOrgUnitIds,
+  isImmutableWorksmobileAccount,
+  summarizeWorksmobileComparison,
+  userFilterOptions,
+} from "./worksmobileComparison";
+
+describe("TenantWorksmobilePage comparison helpers", () => {
+  it("summarizes comparison rows by status", () => {
+    const summary = summarizeWorksmobileComparison([
+      { resourceType: "USER", status: "matched" },
+      { resourceType: "GROUP", status: "needs_update" },
+      { resourceType: "USER", status: "missing_in_worksmobile" },
+      { resourceType: "USER", status: "missing_in_baron" },
+      { resourceType: "USER", status: "missing_external_key" },
+      { resourceType: "USER", status: "missing_in_baron" },
+    ]);
+
+    expect(summary).toEqual({
+      total: 6,
+      matched: 1,
+      needsUpdate: 1,
+      missingInWorksmobile: 1,
+      missingInBaron: 2,
+      missingExternalKey: 1,
+    });
+  });
+
+  it("returns Korean labels for known comparison statuses", () => {
+    expect(getWorksmobileComparisonStatusLabel("matched")).toBe("일치");
+    expect(getWorksmobileComparisonStatusLabel("missing_in_worksmobile")).toBe(
+      "WORKS 없음",
+    );
+    expect(getWorksmobileComparisonStatusLabel("missing_in_baron")).toBe(
+      "Baron 없음",
+    );
+    expect(getWorksmobileComparisonStatusLabel("missing_external_key")).toBe(
+      "ex_key 없음",
+    );
+    expect(getWorksmobileComparisonStatusLabel("needs_update")).toBe(
+      "업데이트 필요",
+    );
+    expect(getWorksmobileComparisonStatusLabel("unknown_status")).toBe(
+      "unknown_status",
+    );
+  });
+
+  it("allows WORKS creation only for Baron rows missing in WORKS", () => {
+    expect(
+      canCreateWorksmobileRow({
+        resourceType: "USER",
+        status: "missing_in_worksmobile",
+        baronId: "user-1",
+      }),
+    ).toBe(true);
+
+    expect(
+      canCreateWorksmobileRow({
+        resourceType: "USER",
+        status: "missing_in_worksmobile",
+      }),
+    ).toBe(false);
+
+    expect(
+      canCreateWorksmobileRow({
+        resourceType: "USER",
+        status: "missing_in_baron",
+        worksmobileId: "works-user-1",
+      }),
+    ).toBe(false);
+  });
+
+  it("allows selection for Baron-only, WORKS-only, and matched rows", () => {
+    expect(
+      canSelectWorksmobileRow({
+        resourceType: "USER",
+        status: "missing_in_worksmobile",
+        baronId: "user-1",
+      }),
+    ).toBe(true);
+    expect(
+      canSelectWorksmobileRow({
+        resourceType: "USER",
+        status: "missing_in_baron",
+        worksmobileId: "works-user-1",
+      }),
+    ).toBe(true);
+    expect(
+      canSelectWorksmobileRow({
+        resourceType: "USER",
+        status: "matched",
+        baronId: "user-2",
+        worksmobileId: "works-user-2",
+      }),
+    ).toBe(true);
+  });
+
+  it("does not allow selection for immutable WORKS accounts", () => {
+    expect(
+      isImmutableWorksmobileAccount({
+        resourceType: "USER",
+        status: "missing_in_baron",
+        worksmobileEmail: "cyhan@samaneng.com",
+        worksmobileId: "works-cyhan",
+      }),
+    ).toBe(true);
+    expect(
+      canSelectWorksmobileRow({
+        resourceType: "USER",
+        status: "missing_in_baron",
+        worksmobileEmail: "CYHAN1@HANMACENG.CO.KR",
+        worksmobileId: "works-cyhan1",
+      }),
+    ).toBe(false);
+    expect(
+      canSelectWorksmobileRow({
+        resourceType: "USER",
+        status: "missing_in_baron",
+        worksmobileEmail: "normal@samaneng.com",
+        worksmobileId: "works-normal",
+      }),
+    ).toBe(true);
+  });
+
+  it("does not allow password management for immutable WORKS accounts", () => {
+    expect(
+      canOpenWorksmobilePasswordManage(
+        {
+          resourceType: "USER",
+          status: "missing_in_baron",
+          worksmobileEmail: "su-@samaneng.com",
+          worksmobileDomainId: 300285955,
+          worksmobileId: "works-su",
+        },
+        "works-tenant-1",
+      ),
+    ).toBe(false);
+  });
+
+  it("hides protected WORKS member accounts from comparison lists", () => {
+    const rows = [
+      {
+        resourceType: "USER",
+        status: "missing_in_baron",
+        worksmobileEmail: "su-@samaneng.com",
+        worksmobileId: "works-su",
+      },
+      {
+        resourceType: "USER",
+        status: "matched",
+        baronEmail: "CYHAN1@HANMACENG.CO.KR",
+        baronId: "baron-cyhan1",
+        worksmobileEmail: "cyhan1@hanmaceng.co.kr",
+        worksmobileId: "works-cyhan1",
+      },
+      {
+        resourceType: "USER",
+        status: "missing_in_baron",
+        worksmobileEmail: "normal@samaneng.com",
+        worksmobileId: "works-normal",
+      },
+      {
+        resourceType: "GROUP",
+        status: "missing_in_baron",
+        worksmobileEmail: "su-@samaneng.com",
+        worksmobileId: "works-group",
+      },
+    ];
+
+    expect(filterVisibleWorksmobileComparisonRows(rows)).toEqual([
+      rows[2],
+      rows[3],
+    ]);
+  });
+
+  it("keeps row selection keys separate from Baron action ids", () => {
+    const rows = [
+      {
+        resourceType: "USER",
+        status: "missing_in_worksmobile",
+        baronId: "baron-only",
+      },
+      {
+        resourceType: "USER",
+        status: "missing_in_baron",
+        worksmobileId: "works-only",
+      },
+      {
+        resourceType: "USER",
+        status: "matched",
+        baronId: "matched-baron",
+        worksmobileId: "matched-works",
+      },
+    ];
+
+    const selectedKeys = rows.map(getWorksmobileRowSelectionKey);
+
+    expect(selectedKeys).toEqual([
+      "USER:baron:baron-only",
+      "USER:works:works-only",
+      "USER:baron:matched-baron",
+    ]);
+    expect(getWorksmobileSelectedActionIds(rows, selectedKeys)).toEqual([
+      "baron-only",
+      "matched-baron",
+    ]);
+  });
+
+  it("separates selected WORKS user creation ids from update-needed user ids", () => {
+    const rows = [
+      {
+        resourceType: "USER",
+        status: "missing_in_worksmobile",
+        baronId: "baron-only",
+      },
+      {
+        resourceType: "USER",
+        status: "needs_update",
+        baronId: "needs-update",
+        worksmobileId: "works-needs-update",
+      },
+      {
+        resourceType: "USER",
+        status: "matched",
+        baronId: "matched",
+        worksmobileId: "works-matched",
+      },
+      {
+        resourceType: "USER",
+        status: "missing_in_baron",
+        worksmobileId: "works-only",
+      },
+    ];
+    const selectedKeys = rows.map(getWorksmobileRowSelectionKey);
+
+    expect(getWorksmobileSelectedCreateUserIds(rows, selectedKeys)).toEqual([
+      "baron-only",
+    ]);
+    expect(getWorksmobileSelectedUpdateUserIds(rows, selectedKeys)).toEqual([
+      "needs-update",
+    ]);
+  });
+
+  it("uses compact comparison columns by default", () => {
+    expect(getDefaultWorksmobileComparisonColumns()).toEqual({
+      status: true,
+      baronId: false,
+      baron: true,
+      baronOrg: true,
+      worksmobileId: false,
+      externalKey: false,
+      worksmobileDomain: true,
+      worksmobile: true,
+      worksmobileOrg: true,
+      manage: true,
+    });
+  });
+
+  it("filters user comparison rows by selected relationship", () => {
+    const rows = [
+      {
+        resourceType: "USER",
+        status: "missing_in_worksmobile",
+        baronId: "baron-only",
+        baronName: "Baron only",
+      },
+      {
+        resourceType: "USER",
+        status: "missing_in_baron",
+        worksmobileId: "works-only",
+        worksmobileName: "WORKS only",
+      },
+      {
+        resourceType: "USER",
+        status: "matched",
+        baronId: "matched",
+        worksmobileId: "works-matched",
+      },
+      {
+        resourceType: "USER",
+        status: "missing_external_key",
+        worksmobileId: "missing-external-key",
+      },
+    ];
+
+    expect(filterWorksmobileComparisonRows(rows, ["baron_only"])).toEqual([
+      rows[0],
+    ]);
+    expect(filterWorksmobileComparisonRows(rows, ["works_only"])).toEqual([
+      rows[1],
+      rows[3],
+    ]);
+    expect(filterWorksmobileComparisonRows(rows, ["matched"])).toEqual([
+      rows[2],
+    ]);
+    expect(
+      filterWorksmobileComparisonRows(rows, ["baron_only", "works_only"]),
+    ).toEqual([rows[0], rows[1], rows[3]]);
+    expect(filterWorksmobileComparisonRows(rows, [], true)).toEqual([]);
+    expect(filterWorksmobileComparisonRows(rows, [])).toEqual([]);
+    expect(
+      filterWorksmobileComparisonRows(rows, [
+        "baron_only",
+        "works_only",
+        "matched",
+      ]),
+    ).toEqual(rows);
+    expect(
+      filterWorksmobileComparisonRows(
+        rows,
+        ["baron_only", "works_only", "matched"],
+        true,
+      ),
+    ).toEqual([rows[0], rows[2], rows[3]]);
+  });
+
+  it("narrows works-only rows to missing external key rows from the detail filter", () => {
+    const rows = [
+      {
+        resourceType: "GROUP",
+        status: "missing_in_worksmobile",
+        baronId: "baron-only",
+        baronName: "Baron only",
+      },
+      {
+        resourceType: "GROUP",
+        status: "missing_in_baron",
+        worksmobileId: "works-only",
+        worksmobileName: "WORKS only",
+      },
+      {
+        resourceType: "GROUP",
+        status: "missing_external_key",
+        worksmobileId: "missing-external-key",
+      },
+      {
+        resourceType: "GROUP",
+        status: "matched",
+        baronId: "matched",
+        worksmobileId: "works-matched",
+      },
+    ];
+
+    expect(
+      filterWorksmobileComparisonRows(rows, ["works_only"], false),
+    ).toEqual([rows[1], rows[2]]);
+    expect(filterWorksmobileComparisonRows(rows, ["works_only"], true)).toEqual(
+      [rows[2]],
+    );
+    expect(filterWorksmobileComparisonRows(rows, [], true)).toEqual([]);
+    expect(filterWorksmobileComparisonRows(rows, ["baron_only"], true)).toEqual(
+      [rows[0]],
+    );
+  });
+
+  it("filters comparison rows by names and identifiers in real time", () => {
+    const rows = [
+      {
+        resourceType: "USER",
+        status: "matched",
+        baronId: "baron-user-uuid",
+        baronName: "홍길동",
+        worksmobileName: "Hong Gildong",
+      },
+      {
+        resourceType: "GROUP",
+        status: "missing_external_key",
+        worksmobileId: "works-org-uuid",
+        worksmobileName: "기술연구소",
+        worksmobileParentName: "한맥가족",
+      },
+      {
+        resourceType: "GROUP",
+        status: "missing_in_worksmobile",
+        baronId: "baron-org-uuid",
+        baronSlug: "baron-group-design",
+        baronName: "디자인팀",
+      },
+    ];
+
+    expect(filterWorksmobileComparisonRowsBySearch(rows, "")).toEqual(rows);
+    expect(filterWorksmobileComparisonRowsBySearch(rows, "홍길동")).toEqual([
+      rows[0],
+    ]);
+    expect(filterWorksmobileComparisonRowsBySearch(rows, "WORKS-ORG")).toEqual([
+      rows[1],
+    ]);
+    expect(filterWorksmobileComparisonRowsBySearch(rows, "design")).toEqual([
+      rows[2],
+    ]);
+    expect(filterWorksmobileComparisonRowsBySearch(rows, "없음")).toEqual([]);
+  });
+
+  it("returns only selected missing-external-key WORKS orgunit ids for delete", () => {
+    const rows = [
+      {
+        resourceType: "GROUP",
+        status: "missing_external_key",
+        worksmobileId: "works-missing-key",
+      },
+      {
+        resourceType: "GROUP",
+        status: "missing_in_baron",
+        worksmobileId: "works-only",
+      },
+      {
+        resourceType: "USER",
+        status: "missing_external_key",
+        worksmobileId: "works-user-missing-key",
+      },
+    ];
+
+    expect(
+      getWorksmobileSelectedMissingExternalKeyOrgUnitIds(rows, [
+        getWorksmobileRowSelectionKey(rows[0]),
+        getWorksmobileRowSelectionKey(rows[1]),
+        getWorksmobileRowSelectionKey(rows[2]),
+      ]),
+    ).toEqual(["works-missing-key"]);
+  });
+
+  it("returns selected WORKS-only orgunit ids for Baron SSOT cleanup", () => {
+    const rows = [
+      {
+        resourceType: "GROUP",
+        status: "missing_external_key",
+        worksmobileId: "works-missing-key",
+      },
+      {
+        resourceType: "GROUP",
+        status: "missing_in_baron",
+        worksmobileId: "works-only",
+        externalKey: "legacy-external-key",
+      },
+      {
+        resourceType: "GROUP",
+        status: "matched",
+        baronId: "baron-matched",
+        worksmobileId: "works-matched",
+      },
+    ];
+
+    expect(
+      getWorksmobileSelectedWorksOnlyOrgUnitIds(
+        rows,
+        rows.map(getWorksmobileRowSelectionKey),
+      ),
+    ).toEqual(["works-missing-key", "works-only"]);
+  });
+
+  it("orders user comparison filter options from Baron-only first", () => {
+    expect(userFilterOptions.map((option) => option.value)).toEqual([
+      "baron_only",
+      "needs_update",
+      "works_only",
+      "matched",
+    ]);
+  });
+
+  it("keeps all organization/group comparison filter labels available", () => {
+    expect(comparisonFilterOptions).toEqual([
+      { value: "baron_only", label: "바론에만 있음" },
+      { value: "needs_update", label: "업데이트 필요" },
+      { value: "works_only", label: "웍스에만 있음" },
+      { value: "matched", label: "양쪽 다 있음" },
+    ]);
+  });
+
+  it("shows update-needed group rows by default", () => {
+    const rows = [
+      { resourceType: "GROUP", status: "needs_update", baronId: "org-1" },
+      { resourceType: "GROUP", status: "matched", baronId: "org-2" },
+    ];
+
+    expect(
+      filterWorksmobileComparisonRows(rows, getDefaultGroupComparisonFilters()),
+    ).toEqual([rows[0]]);
+  });
+
+  it("shows update-needed user rows by default", () => {
+    const rows = [
+      { resourceType: "USER", status: "needs_update", baronId: "user-1" },
+      { resourceType: "USER", status: "matched", baronId: "user-2" },
+    ];
+
+    expect(
+      filterWorksmobileComparisonRows(rows, getDefaultUserComparisonFilters()),
+    ).toEqual([rows[0]]);
+  });
+
+  it("formats update details for changed organization rows", () => {
+    expect(
+      formatWorksmobileUpdateDetails({
+        resourceType: "GROUP",
+        status: "needs_update",
+        baronId: "818c856b-9545-442f-b827-d1c569f200b0",
+        baronName: "삼안기술개발센터(조직도용)",
+        worksmobileName: "기술개발센터(조직도용)",
+        baronParentId: "9caf62e1-297d-4e8f-870b-61780998bbeb",
+        baronParentWorksmobileId: "works-saman",
+        baronParentWorksmobileName: "삼안",
+        worksmobileParentId: "works-other",
+        worksmobileParentName: "다른 상위",
+      }),
+    ).toEqual([
+      "이름: 기술개발센터(조직도용) -> 삼안기술개발센터(조직도용)",
+      "상위: 다른 상위 -> 삼안",
+    ]);
+  });
+
+  it("formats WORKS account name with level on one line", () => {
+    expect(
+      formatWorksmobilePersonName({
+        resourceType: "USER",
+        status: "matched",
+        worksmobileName: "홍길동",
+        worksmobileLevelName: "책임",
+      }),
+    ).toBe("홍길동 책임");
+  });
+
+  it("formats WORKS organization details with task and manager status", () => {
+    expect(
+      formatWorksmobileOrgDetails({
+        resourceType: "USER",
+        status: "matched",
+        worksmobileTask: "기술검토",
+        worksmobilePrimaryOrgPositionName: "팀장",
+        worksmobilePrimaryOrgIsManager: true,
+      }),
+    ).toEqual(["직책 팀장", "직무 기술검토", "조직장"]);
+  });
+
+  it("builds the WORKS admin password management URL from remote user identifiers", () => {
+    const url = buildWorksmobilePasswordManageUrl({
+      tenantId: " works-tenant-1 ",
+      domainId: 300285955,
+      userIdNo: " works-user-1 ",
+    });
+
+    const parsed = new URL(url);
+    expect(parsed.origin + parsed.pathname).toBe(
+      "https://auth.worksmobile.com/integrate/password/manage",
+    );
+    expect(parsed.searchParams.get("usage")).toBe("admin");
+    expect(parsed.searchParams.get("targetUserTenantId")).toBe(
+      "works-tenant-1",
+    );
+    expect(parsed.searchParams.get("targetUserDomainId")).toBe("300285955");
+    expect(parsed.searchParams.get("targetUserIdNo")).toBe("works-user-1");
+    expect(parsed.searchParams.get("accessUrl")).toBe(
+      "https://admin.worksmobile.com/assets/self-close.html",
+    );
+  });
+
+  it("does not open WORKS password management without required identifiers", () => {
+    const row = {
+      resourceType: "USER",
+      status: "matched",
+      worksmobileDomainId: 300285955,
+      worksmobileId: "works-user-1",
+    };
+
+    expect(canOpenWorksmobilePasswordManage(row, "works-tenant-1")).toBe(true);
+    expect(canOpenWorksmobilePasswordManage(row, undefined)).toBe(false);
+    expect(
+      canOpenWorksmobilePasswordManage(
+        { ...row, worksmobileDomainId: undefined },
+        "works-tenant-1",
+      ),
+    ).toBe(false);
+    expect(
+      canOpenWorksmobilePasswordManage(
+        { ...row, worksmobileId: undefined },
+        "works-tenant-1",
+      ),
+    ).toBe(false);
+    expect(
+      canOpenWorksmobilePasswordManage(
+        { ...row, resourceType: "GROUP" },
+        "works-tenant-1",
+      ),
+    ).toBe(false);
+    expect(
+      buildWorksmobilePasswordManageUrl({
+        tenantId: "works-tenant-1",
+        domainId: 0,
+        userIdNo: "works-user-1",
+      }),
+    ).toBe("");
+  });
+
+  it("allows WORKS password management for WORKS-only user rows", () => {
+    expect(
+      canOpenWorksmobilePasswordManage(
+        {
+          resourceType: "USER",
+          status: "missing_in_baron",
+          worksmobileDomainId: 300285955,
+          worksmobileId: "works-user-1",
+        },
+        "works-tenant-1",
+      ),
+    ).toBe(true);
+  });
+});
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>