모바일 승인 완료 화면에서 verify_failed 오류 노출 개선

Reviewed-on: baron/baron-sso#626

.dockerignore

@@ -0,0 +1,18 @@
+.git
+.gitea
+.codex
+.env
+.env.*
+**/.dart_tool
+**/.packages
+**/build
+**/node_modules
+**/dist
+**/.next
+**/.cache
+**/coverage
+**/tmp
+**/logs
+**/*.log
+**/*.swp
+**/.DS_Store

.env.sample

@@ -0,0 +1,145 @@
+# ==========================================
+# Baron SSO - Unified Environment Configuration
+# ==========================================
+
+# --- General System ---
+APP_ENV=stage # 애플리케이션 실행 환경 (dev, stage, production)
+TZ=Asia/Seoul
+
+
+# IDP_PROVIDER는 우선순위 순으로 콤마 구분 (예: Kratos/Hydra 우선, Descope 백업)
+IDP_PROVIDER=ory
+
+# --- Infrastructure Ports ---
+DB_PORT=5432
+CLICKHOUSE_PORT_HTTP=8123
+CLICKHOUSE_PORT_NATIVE=9000
+BACKEND_PORT=3000
+ADMINFRONT_PORT=5173
+DEVFRONT_PORT=5174
+USERFRONT_PORT=5000
+
+# --- Database Credentials (PostgreSQL) ---
+DB_USER=baron
+DB_PASSWORD=password
+DB_NAME=baron_sso
+
+# --- Backend Configuration ---
+# Must be 32 bytes. Generate with `openssl rand -hex 32`
+COOKIE_SECRET=super-secret-key-must-be-32-bytes!
+JWT_SECRET=super-secret-key-must-be-32-bytes!
+# Optional backend slog override: debug, info, warn, error
+BACKEND_LOG_LEVEL=
+REDIS_ADDR=redis:6389 # compose.infra.yaml의 redis 포트(컨테이너 내부 기준)
+CORS_ALLOWED_ORIGINS=http://localhost:5000 # 쿠키 인증 사용 시 정확한 Origin 지정 필요
+
+# Audit System Configuration
+AUDIT_WORKER_COUNT=5      # 비동기 감사 로그 처리를 위한 고루틴 워커 수
+AUDIT_QUEUE_SIZE=2000      # 감사 로그 대기열(채널) 버퍼 크기
+
+# Redis Cache Configuration
+PROFILE_CACHE_TTL=30m     # User Profile Redis 캐시 만료 시간
+
+# --- Naver Cloud Services ---
+NAVER_CLOUD_ACCESS_KEY=ncp_iam_...
+NAVER_CLOUD_SECRET_KEY=ncp_iam_...
+NAVER_CLOUD_SERVICE_ID=ncp:sms:kr:...:...
+NAVER_SENDER_PHONE_NUMBER=...
+
+ # --- AWS SES (이메일 발송용) ---
+AWS_REGION=ap-northeast-2
+AWS_ACCESS_KEY_ID=...
+AWS_SECRET_ACCESS_KEY=...
+AWS_SES_SENDER=no-reply@baron.co.kr
+
+# --- 관리자 page pw ---
+ADMIN_EMAIL=admin@baron.co.kr
+ADMIN_PASSWORD=adminPasswordIsNotSimple
+
+# --- URLs for Proxy/Handoff ---
+# Project Public Base URL (Served by UserFront Nginx)
+USERFRONT_URL=https://sso.hmac.kr
+
+# Services proxied via Nginx
+BACKEND_PUBLIC_URL=${USERFRONT_URL}
+BACKEND_URL=${USERFRONT_URL}
+OATHKEEPER_PUBLIC_URL=${USERFRONT_URL}
+
+# ory-stack 변수들
+ORY_POSTGRES_TAG=17-trixie
+ORY_POSTGRES_USER=ory
+ORY_POSTGRES_PASSWORD=EuBV5ywvXFehkggHQrnYo5727MseEi6i9
+ORY_POSTGRES_DB=ory
+# ORY_POSTGRES_PORT=5433 # Internal only
+
+KRATOS_DB=ory_kratos
+HYDRA_DB=ory_hydra
+KETO_DB=ory_keto
+
+# Ory Kratos Configuration
+KRATOS_VERSION=v25.4.0-distroless
+# KRATOS_PUBLIC_PORT=4433 # Internal only
+# KRATOS_ADMINFRONT_PORT=4434 # Internal only
+
+KRATOS_UI_NODE_VERSION=v25.4.0
+# KRATOS_UI_PORT=4455 # Internal only
+
+# Ory Hydra Configuration
+HYDRA_VERSION=v25.4.0-distroless
+# HYDRA_PUBLIC_PORT=4441 # Internal only
+# HYDRA_ADMINFRONT_PORT=4445 # Internal only
+
+# Ory Keto Configuration
+KETO_VERSION=v25.4.0-distroless
+# KETO_READ_PORT=4466 # Internal only
+# KETO_WRITE_PORT=4467 # Internal only
+KETO_READ_URL=http://keto:4466
+KETO_WRITE_URL=http://keto:4467
+
+# Kratos Selfservice UI upstreams (override for deployments)
+ORY_SDK_URL=http://kratos:4433
+KRATOS_PUBLIC_URL=http://kratos:4433
+KRATOS_ADMIN_URL=http://kratos:4434
+
+# 브라우저가 접근할 Kratos Public/UI 외부 URL
+# Oathkeeper가 /auth 경로를 Kratos Public API로 라우팅합니다.
+KRATOS_BROWSER_URL=${OATHKEEPER_PUBLIC_URL}/auth
+# Kratos UI는 UserFront가 렌더링합니다.
+KRATOS_UI_URL=http://localhost:5000
+
+HYDRA_ADMIN_URL=http://hydra:4445
+# Oathkeeper가 /oidc 경로를 Hydra Public API로 라우팅합니다.
+HYDRA_PUBLIC_URL=${OATHKEEPER_PUBLIC_URL}/oidc
+
+# Kratos allowed_return_urls 확장 목록 (콤마 구분, 선택)
+# 기본값은 KRATOS_UI_URL, USERFRONT_URL, 각 callback URL을 자동 포함합니다.
+KRATOS_ALLOWED_RETURN_URLS_EXTRA=[]
+
+# Oathkeeper JWKS (내부 통신용)
+JWKS_URL=http://oathkeeper:4456/.well-known/jwks.json
+
+# Oathkeeper 실행 사용자/프로브 설정
+OATHKEEPER_VERSION=v25.4.0
+OATHKEEPER_UID=1001
+OATHKEEPER_GID=1001
+OATHKEEPER_HEALTH_URL=http://oathkeeper:4456/health/ready
+OATHKEEPER_HEALTH_INTERVAL_SECONDS=10
+OATHKEEPER_HEALTH_TIMEOUT_SECONDS=2
+OATHKEEPER_HEALTH_ENABLED=true
+
+# Kratos Selfservice UI required secrets (local only)
+COOKIE_SECRET=localcookie123
+CSRF_COOKIE_NAME=__HOST-baronSSO_csrf
+CSRF_COOKIE_SECRET=localcsrf123
+
+# AdminFront OIDC 설정
+ADMINFRONT_URL=http://localhost:5173
+ADMINFRONT_CALLBACK_URLS=http://localhost:5173/auth/callback,https://sso.hmac.kr/auth/callback
+
+# DevFront OIDC 설정
+VITE_OIDC_CLIENT_ID=devfront
+VITE_OIDC_AUTHORITY=https://sso.hmac.kr/oidc
+DEVFRONT_URL=http://localhost:5174
+DEVFRONT_CALLBACK_URLS=http://localhost:5174/auth/callback,https://sso.hmac.kr/devfront/auth/callback
+ORGFRONT_CALLBACK_URLS=http://localhost:5175/auth/callback,http://172.16.10.176:5175/auth/callback,https://baron-orgchart.hmac.kr/auth/callback
+VITE_ORGCHART_URL=

.gitea/coverage.json

@@ -0,0 +1,7 @@
+{
+    "Path": "./backend/coverage.out",
+    "Thresholds": {
+        "baron-sso-backend/internal/handler": 10,
+        "baron-sso-backend/internal/service": 10
+    }
+}

.gitea/workflows/backend_coverage_check.yml

@@ -0,0 +1,29 @@
+name: Backend Test Coverage Check
+
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  coverage:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: "1.25"
+          cache-dependency-path: backend/go.sum
+
+      - name: Run tests with coverage
+        working-directory: ./backend
+        run: |
+          go test -v -coverprofile=coverage.out -covermode=atomic ./internal/handler/... ./internal/service/...
+
+      - name: Check coverage
+        uses: vladopajic/go-test-coverage@v2
+        with:
+          config: ./.gitea/coverage.json

.gitea/workflows/build_RC.yml

@@ -0,0 +1,117 @@
+name: Build Baron SSO RC
+
+on:
+  workflow_dispatch:
+    inputs:
+      version_tag:
+        description: "The version tag to release to staging (e.g., v1.2601.1)"
+        required: true
+        type: string
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: sudo apt-get update && sudo apt-get install -y jq curl
+
+      - name: Login to Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ vars.HARBOR_ENDPOINT }}
+          username: ${{ vars.HARBOR_ROBOT_ACCOUNT }}
+          password: ${{ secrets.HARBOR_ROBOT_KEY }}
+
+      - name: Calculate next RC tag
+        id: rc_calculator
+        env:
+          INPUT_TAG: ${{ github.event.inputs.version_tag }}
+          REGISTRY_URL: ${{ vars.HARBOR_ENDPOINT }}
+          HARBOR_USER: ${{ vars.HARBOR_ROBOT_ACCOUNT }}
+          HARBOR_PASSWORD: ${{ secrets.HARBOR_ROBOT_KEY }}
+        run: |
+          # Generate YYMM dynamically for the new tag
+          CURRENT_YYMM=$(date +'%y%m')
+
+          # Reconstruct the base tag with the current YYMM
+          MAJOR_VERSION=$(echo "${INPUT_TAG}" | cut -d'.' -f1)
+          MINOR_VERSION=$(echo "${INPUT_TAG}" | cut -d'.' -f3)
+          BASE_TAG="${MAJOR_VERSION}.${CURRENT_YYMM}.${MINOR_VERSION}"
+
+          echo "Input tag: ${INPUT_TAG}"
+          echo "Generated dynamic base tag: ${BASE_TAG}"
+
+          # Using the backend repository as the source for RC version calculation
+          API_URL="${REGISTRY_URL}/api/v2.0/projects/baron_sso/repositories/backend/artifacts?sort=-creation_time&page_size=100"
+
+          AUTH_HEADER=$(echo -n "${HARBOR_USER}:${HARBOR_PASSWORD}" | base64)
+          API_RESPONSE=$(curl -s -k -H "Authorization: Basic ${AUTH_HEADER}" "${API_URL}")
+
+          # Define a search pattern to find RCs across different months for the same major/minor version
+          # e.g., matches v1.2508.1-RC, v1.2509.1-RC, etc.
+          SEARCH_PATTERN="^${MAJOR_VERSION}\.[0-9]{4}\.${MINOR_VERSION}-RC"
+          echo "Using search pattern: ${SEARCH_PATTERN}"
+
+          # Disable pipefail for grep, as it will exit with 1 if no match is found
+          set +o pipefail
+          # Find the highest RC number regardless of the YYMM part
+          LATEST_RC_NUM=$(echo "${API_RESPONSE}" | jq -r '.[] | .tags[]? | .name' | grep -E "${SEARCH_PATTERN}" | sed 's/.*-RC//' | sort -rn | head -n 1)
+          set -o pipefail
+
+          if [ -z "$LATEST_RC_NUM" ]; then
+            NEXT_RC_NUM=1
+          else
+            NEXT_RC_NUM=$((LATEST_RC_NUM + 1))
+          fi
+
+          # Create the new tag using the dynamically generated BASE_TAG and the incremented RC number
+          NEW_RC_TAG="${BASE_TAG}-RC${NEXT_RC_NUM}"
+          echo "new_rc_tag=$NEW_RC_TAG" >> $GITHUB_OUTPUT
+          echo "Found latest RC number: ${LATEST_RC_NUM:-0}"
+          echo "Calculated new RC tag: $NEW_RC_TAG"
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push backend RC image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./backend
+          file: ./backend/Dockerfile
+          push: true
+          tags: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/backend:${{ steps.rc_calculator.outputs.new_rc_tag }}
+          provenance: false
+          sbom: false
+
+      - name: Build and push adminfront RC image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./adminfront
+          file: ./adminfront/Dockerfile
+          push: true
+          tags: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/adminfront:${{ steps.rc_calculator.outputs.new_rc_tag }}
+          provenance: false
+          sbom: false
+
+      - name: Build and push devfront RC image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./devfront
+          file: ./devfront/Dockerfile
+          push: true
+          tags: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/devfront:${{ steps.rc_calculator.outputs.new_rc_tag }}
+          provenance: false
+          sbom: false
+
+      - name: Build and push userfront RC image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./userfront
+          file: ./userfront/Dockerfile
+          push: true
+          tags: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/userfront:${{ steps.rc_calculator.outputs.new_rc_tag }}
+          provenance: false
+          sbom: false

.gitea/workflows/code_check.yml

@@ -0,0 +1,811 @@
+name: Code Check
+
+on:
+    push:
+        branches:
+            - dev
+    pull_request:
+        branches:
+            - dev
+    workflow_dispatch:
+        inputs:
+            run_lint:
+                description: "Run lint/format checks for Go, Flutter, adminfront, devfront"
+                required: true
+                type: boolean
+                default: true
+            run_backend_tests:
+                description: "Run backend Go tests"
+                required: true
+                type: boolean
+                default: true
+            run_userfront_tests:
+                description: "Run userfront Flutter tests"
+                required: true
+                type: boolean
+                default: true
+            run_userfront_e2e_tests:
+                description: "Run userfront WASM Playwright E2E tests"
+                required: true
+                type: boolean
+                default: true
+            run_adminfront_tests:
+                description: "Run adminfront Playwright tests"
+                required: true
+                type: boolean
+                default: true
+            run_devfront_tests:
+                description: "Run devfront Playwright tests"
+                required: true
+                type: boolean
+                default: true
+
+jobs:
+    lint:
+        if: ${{ github.event_name != 'workflow_dispatch' || inputs.run_lint == true }}
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "24"
+                  cache: "npm"
+                  cache-dependency-path: |
+                    adminfront/package-lock.json
+                    devfront/package-lock.json
+
+            - name: i18n resource check
+              run: |
+                  mkdir -p reports
+                  node tools/i18n-scanner/index.js
+                  node tools/i18n-scanner/report.js
+                  cat reports/i18n-report.txt
+
+            - name: i18n value quality check
+              run: |
+                  mkdir -p reports
+                  node tools/i18n-scanner/value-check.js
+                  cat reports/i18n-value-report.txt
+
+            - name: Setup Go
+              uses: actions/setup-go@v5
+              with:
+                  go-version: "1.25"
+                  cache-dependency-path: backend/go.sum
+
+            - name: Setup Flutter
+              uses: subosito/flutter-action@v2
+              with:
+                  channel: "stable"
+                  cache: true
+
+            - name: Install adminfront dependencies
+              run: |
+                  cd adminfront
+                  npm ci
+
+            - name: Biome check adminfront (lint + format)
+              run: |
+                  cd adminfront
+                  npx biome check . --formatter-enabled=false --organize-imports-enabled=false
+                  npx biome check . --linter-enabled=false --organize-imports-enabled=false
+
+            - name: Install devfront dependencies
+              run: |
+                  cd devfront
+                  npm ci
+
+            - name: Biome check devfront (lint + format)
+              run: |
+                  cd devfront
+                  npx biome check . --formatter-enabled=false --organize-imports-enabled=false
+                  npx biome check . --linter-enabled=false --organize-imports-enabled=false
+
+            - name: Lint Go backend
+              run: |
+                  docker run --rm \
+                    -v "${PWD}/backend:/app" \
+                    -w /app \
+                    golangci/golangci-lint:v2.10.1 \
+                    golangci-lint fmt -E gofmt -E gofumpt -d
+
+            - name: Sync userfront locales
+              run: |
+                  /bin/sh ./scripts/sync_userfront_locales.sh
+
+            - name: Install Userfront dependencies
+              run: |
+                  cd userfront
+                  flutter pub get
+
+            - name: Format Flutter userfront
+              run: |
+                  cd userfront
+                  dart format --output=none --set-exit-if-changed lib test
+
+            - name: Analyze Flutter userfront
+              run: |
+                  cd userfront
+                  flutter analyze --no-fatal-warnings --no-fatal-infos
+
+    backend-tests:
+        needs: lint
+        if: ${{ always() && (github.event_name != 'workflow_dispatch' || inputs.run_backend_tests == true) }}
+        runs-on: ubuntu-latest
+        services:
+            redis:
+                image: redis:7-alpine
+                options: >
+                    --health-cmd "redis-cli ping" --health-interval 10s --health-timeout 5s --health-retries 5
+            clickhouse:
+                image: clickhouse/clickhouse-server:24.6
+                options: >
+                    --health-cmd "wget -qO- 'http://localhost:8123/ping'" --health-interval 10s --health-timeout 5s --health-retries 5
+
+        env:
+            REDIS_ADDR: redis:6379
+            CLICKHOUSE_HOST: clickhouse
+            CLICKHOUSE_PORT_NATIVE: 9000
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup Go
+              uses: actions/setup-go@v5
+              with:
+                  go-version: "1.25"
+                  cache-dependency-path: backend/go.sum
+
+            - name: Run backend tests
+              run: |
+                  mkdir -p reports
+                  set +e
+                  cd backend
+                  go test -v ./... 2>&1 | tee ../reports/backend-test.log
+                  test_exit_code=${PIPESTATUS[0]}
+                  cd ..
+
+                  if [ "$test_exit_code" -ne 0 ]; then
+                    {
+                      echo "# Backend Test Failure Report"
+                      echo
+                      echo "- Workflow: \`${GITHUB_WORKFLOW:-Code Check}\`"
+                      echo "- Job: \`backend-tests\`"
+                      echo "- Exit Code: \`$test_exit_code\`"
+                      echo
+                      echo "## Command"
+                      echo "\`go test -v ./...\`"
+                      echo
+                      echo "## Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/backend-test.log
+                      echo '```'
+                    } > reports/backend-test-failure-report.md
+                  fi
+
+                  exit "$test_exit_code"
+
+            - name: Publish backend failure summary
+              if: ${{ failure() }}
+              run: |
+                  if [ -f reports/backend-test-failure-report.md ]; then
+                    cat reports/backend-test-failure-report.md >> "$GITHUB_STEP_SUMMARY"
+                  fi
+
+            - name: Upload backend failure report artifact
+              if: ${{ failure() }}
+              uses: actions/upload-artifact@v3
+              continue-on-error: true
+              with:
+                  name: backend-test-failure-report
+                  path: |
+                      reports/backend-test-failure-report.md
+                      reports/backend-test.log
+                  if-no-files-found: ignore
+
+    userfront-tests:
+        needs: lint
+        if: ${{ always() && (github.event_name != 'workflow_dispatch' || inputs.run_userfront_tests == true) }}
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup Flutter
+              uses: subosito/flutter-action@v2
+              with:
+                  channel: "stable"
+                  cache: true
+
+            - name: Sync userfront locales
+              run: |
+                  /bin/sh ./scripts/sync_userfront_locales.sh
+
+            - name: Run userfront tests
+              run: |
+                  cd userfront
+                  if [ -d test ]; then
+                    mkdir -p ../reports
+                    set +e
+                    flutter test 2>&1 | tee ../reports/userfront-test.log
+                    test_exit_code=${PIPESTATUS[0]}
+                    set -e
+
+                    if [ "$test_exit_code" -ne 0 ]; then
+                      {
+                        echo "# Userfront Test Failure Report"
+                        echo
+                        echo "- Workflow: \`${GITHUB_WORKFLOW:-Code Check}\`"
+                        echo "- Job: \`userfront-tests\`"
+                        echo "- Exit Code: \`$test_exit_code\`"
+                        echo
+                        echo "## Command"
+                        echo "\`flutter test\`"
+                        echo
+                        if [ -f ../reports/userfront-test.log ]; then
+                          echo "## Test Log Tail (last 200 lines)"
+                          echo '```text'
+                          tail -n 200 ../reports/userfront-test.log
+                          echo '```'
+                        fi
+                      } > ../reports/userfront-test-failure-report.md
+                      exit 1
+                    fi
+                  else
+                    echo "No userfront tests: skipping (test/ directory not found)."
+                  fi
+
+            - name: Ensure userfront failure report exists
+              if: ${{ failure() }}
+              run: |
+                  mkdir -p reports
+                  if [ -f reports/userfront-test-failure-report.md ]; then
+                    exit 0
+                  fi
+
+                  {
+                    echo "# Userfront Test Failure Report"
+                    echo
+                    echo "- Workflow: \`${GITHUB_WORKFLOW:-Code Check}\`"
+                    echo "- Job: \`userfront-tests\`"
+                    echo "- Reason: \`Job failed before detailed report generation\`"
+                    echo
+                    if [ -f reports/userfront-test.log ]; then
+                      echo "## Test Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/userfront-test.log
+                      echo '```'
+                    fi
+                  } > reports/userfront-test-failure-report.md
+
+            - name: Publish userfront failure summary
+              if: ${{ failure() }}
+              run: |
+                  if [ -f reports/userfront-test-failure-report.md ]; then
+                    cat reports/userfront-test-failure-report.md >> "$GITHUB_STEP_SUMMARY"
+                  fi
+
+            - name: Upload userfront failure report artifact
+              if: ${{ failure() }}
+              uses: actions/upload-artifact@v3
+              continue-on-error: true
+              with:
+                  name: userfront-test-failure-report
+                  path: |
+                      reports/userfront-test-failure-report.md
+                      reports/userfront-test.log
+                  if-no-files-found: ignore
+
+    userfront-e2e-tests:
+        needs: lint
+        if: ${{ always() && (github.event_name != 'workflow_dispatch' || inputs.run_userfront_e2e_tests == true) }}
+        runs-on: ubuntu-latest
+        timeout-minutes: 40
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "24"
+                  cache: "npm"
+                  cache-dependency-path: userfront-e2e/package-lock.json
+
+            - name: Get Playwright version
+              id: playwright-version
+              run: |
+                cd userfront-e2e
+                echo "version=$(npm list @playwright/test | grep @playwright/test | awk -F@ '{print $NF}')" >> "$GITHUB_OUTPUT"
+
+            - name: Cache Playwright Browsers
+              uses: actions/cache@v4
+              id: playwright-cache
+              with:
+                path: ~/.cache/ms-playwright
+                key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}
+                restore-keys: |
+                  ${{ runner.os }}-playwright-
+
+            - name: Setup Flutter
+              uses: subosito/flutter-action@v2
+              with:
+                  channel: "stable"
+                  cache: true
+
+            - name: Sync userfront locales
+              run: |
+                  /bin/sh ./scripts/sync_userfront_locales.sh
+
+            - name: Install userfront-e2e dependencies
+              run: |
+                  mkdir -p reports
+                  set +e
+                  cd userfront-e2e
+                  npm ci 2>&1 | tee ../reports/userfront-e2e-install.log
+                  install_exit_code=${PIPESTATUS[0]}
+                  cd ..
+                  set -e
+
+                  if [ "$install_exit_code" -ne 0 ]; then
+                    {
+                      echo "# Userfront E2E Test Failure Report"
+                      echo
+                      echo "- Workflow: \`${GITHUB_WORKFLOW:-Code Check}\`"
+                      echo "- Job: \`userfront-e2e-tests\`"
+                      echo "- Reason: \`Dependency install failed\`"
+                      echo "- Exit Code: \`$install_exit_code\`"
+                      echo
+                      echo "## Command"
+                      echo "\`cd userfront-e2e && npm ci\`"
+                      echo
+                      echo "## Install Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/userfront-e2e-install.log
+                      echo '```'
+                    } > reports/userfront-e2e-test-failure-report.md
+                    exit 1
+                  fi
+
+            - name: Build userfront WASM
+              run: |
+                  mkdir -p reports
+                  set +e
+                  cd userfront
+                  flutter build web --wasm --release 2>&1 | tee ../reports/userfront-e2e-build.log
+                  build_exit_code=${PIPESTATUS[0]}
+                  cd ..
+                  set -e
+
+                  if [ "$build_exit_code" -ne 0 ]; then
+                    {
+                      echo "# Userfront E2E Test Failure Report"
+                      echo
+                      echo "- Workflow: \`${GITHUB_WORKFLOW:-Code Check}\`"
+                      echo "- Job: \`userfront-e2e-tests\`"
+                      echo "- Reason: \`WASM build failed\`"
+                      echo "- Exit Code: \`$build_exit_code\`"
+                      echo
+                      echo "## Command"
+                      echo "\`cd userfront && flutter build web --wasm --release\`"
+                      echo
+                      echo "## Build Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/userfront-e2e-build.log
+                      echo '```'
+                    } > reports/userfront-e2e-test-failure-report.md
+                    exit 1
+                  fi
+
+            - name: Provision browsers for userfront-e2e tests
+              run: |
+                  set +e
+                  cd userfront-e2e
+                  npx playwright install --with-deps chromium 2>&1 | tee ../reports/userfront-e2e-provision.log
+                  provision_exit_code=${PIPESTATUS[0]}
+                  cd ..
+                  set -e
+
+                  if [ "$provision_exit_code" -ne 0 ]; then
+                    {
+                      echo "# Userfront E2E Test Failure Report"
+                      echo
+                      echo "- Workflow: \`${GITHUB_WORKFLOW:-Code Check}\`"
+                      echo "- Job: \`userfront-e2e-tests\`"
+                      echo "- Reason: \`Browser provisioning failed\`"
+                      echo "- Exit Code: \`$provision_exit_code\`"
+                      echo
+                      echo "## Command"
+                      echo "\`cd userfront-e2e && npx playwright install --with-deps chromium\`"
+                      echo
+                      echo "## Provision Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/userfront-e2e-provision.log
+                      echo '```'
+                    } > reports/userfront-e2e-test-failure-report.md
+                    exit 1
+                  fi
+
+            - name: Run userfront-e2e tests
+              run: |
+                  mkdir -p reports
+                  set +e
+                  cd userfront-e2e
+                  npm test 2>&1 | tee ../reports/userfront-e2e-test.log
+                  test_exit_code=${PIPESTATUS[0]}
+                  cd ..
+                  set -e
+
+                  if [ "$test_exit_code" -ne 0 ]; then
+                    {
+                      echo "# Userfront E2E Test Failure Report"
+                      echo
+                      echo "- Workflow: \`${GITHUB_WORKFLOW:-Code Check}\`"
+                      echo "- Job: \`userfront-e2e-tests\`"
+                      echo "- Exit Code: \`$test_exit_code\`"
+                      echo
+                      echo "## Commands"
+                      echo "1. \`cd userfront-e2e\`"
+                      echo "2. \`npm ci\`"
+                      echo "3. \`cd ../userfront && flutter build web --wasm --release\`"
+                      echo "4. \`cd ../userfront-e2e && npx playwright install --with-deps chromium\`"
+                      echo "5. \`npm test\`"
+                      echo
+                      echo "## Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/userfront-e2e-test.log
+                      echo '```'
+                    } > reports/userfront-e2e-test-failure-report.md
+                  fi
+
+                  exit "$test_exit_code"
+
+            - name: Ensure userfront-e2e failure report exists
+              if: ${{ failure() }}
+              run: |
+                  mkdir -p reports
+                  if [ -f reports/userfront-e2e-test-failure-report.md ]; then
+                    exit 0
+                  fi
+
+                  {
+                    echo "# Userfront E2E Test Failure Report"
+                    echo
+                    echo "- Workflow: \`${GITHUB_WORKFLOW:-Code Check}\`"
+                    echo "- Job: \`userfront-e2e-tests\`"
+                    echo "- Reason: \`Job failed before detailed report generation\`"
+                    echo
+                    if [ -f reports/userfront-e2e-install.log ]; then
+                      echo "## Install Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/userfront-e2e-install.log
+                      echo '```'
+                      echo
+                    fi
+                    if [ -f reports/userfront-e2e-build.log ]; then
+                      echo "## Build Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/userfront-e2e-build.log
+                      echo '```'
+                      echo
+                    fi
+                    if [ -f reports/userfront-e2e-provision.log ]; then
+                      echo "## Provision Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/userfront-e2e-provision.log
+                      echo '```'
+                      echo
+                    fi
+                    if [ -f reports/userfront-e2e-test.log ]; then
+                      echo "## Test Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/userfront-e2e-test.log
+                      echo '```'
+                    fi
+                  } > reports/userfront-e2e-test-failure-report.md
+
+            - name: Publish userfront-e2e failure summary
+              if: ${{ failure() }}
+              run: |
+                  if [ -f reports/userfront-e2e-test-failure-report.md ]; then
+                    cat reports/userfront-e2e-test-failure-report.md >> "$GITHUB_STEP_SUMMARY"
+                  fi
+
+            - name: Upload userfront-e2e failure report artifact
+              if: ${{ failure() }}
+              uses: actions/upload-artifact@v3
+              continue-on-error: true
+              with:
+                  name: userfront-e2e-test-failure-report
+                  path: |
+                      reports/userfront-e2e-test-failure-report.md
+                      reports/userfront-e2e-install.log
+                      reports/userfront-e2e-build.log
+                      reports/userfront-e2e-provision.log
+                      reports/userfront-e2e-test.log
+                      userfront-e2e/playwright-report
+                      userfront-e2e/test-results
+                  if-no-files-found: ignore
+
+    adminfront-tests:
+        needs: lint
+        if: ${{ always() && (github.event_name != 'workflow_dispatch' || inputs.run_adminfront_tests == true) }}
+        runs-on: ubuntu-latest
+        timeout-minutes: 30
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "24"
+                  cache: "npm"
+                  cache-dependency-path: adminfront/package-lock.json
+
+            - name: Get Playwright version
+              id: playwright-version
+              run: |
+                cd adminfront
+                echo "version=$(npm list @playwright/test | grep @playwright/test | awk -F@ '{print $NF}')" >> "$GITHUB_OUTPUT"
+
+            - name: Cache Playwright Browsers
+              uses: actions/cache@v4
+              id: playwright-cache
+              with:
+                path: ~/.cache/ms-playwright
+                key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}
+                restore-keys: |
+                  ${{ runner.os }}-playwright-
+
+            - name: Run adminfront tests
+              env:
+                PLAYWRIGHT_WORKERS: 2
+              run: |
+                  scripts/run_adminfront_ci_tests.sh adminfront-tests
+
+            - name: Ensure adminfront failure report exists
+              if: ${{ failure() }}
+              run: |
+                  mkdir -p reports
+                  if [ -f reports/adminfront-test-failure-report.md ]; then
+                    exit 0
+                  fi
+
+                  {
+                    echo "# Adminfront Test Failure Report"
+                    echo
+                    echo "- Workflow: \`${GITHUB_WORKFLOW:-Code Check}\`"
+                    echo "- Job: \`adminfront-tests\`"
+                    echo "- Reason: \`Job failed before detailed report generation\`"
+                    echo
+                    if [ -f reports/adminfront-install.log ]; then
+                      echo "## Install Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/adminfront-install.log
+                      echo '```'
+                      echo
+                    fi
+                    if [ -f reports/adminfront-provision.log ]; then
+                      echo "## Provision Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/adminfront-provision.log
+                      echo '```'
+                      echo
+                    fi
+                    if [ -f reports/adminfront-test.log ]; then
+                      echo "## Test Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/adminfront-test.log
+                      echo '```'
+                    fi
+                  } > reports/adminfront-test-failure-report.md
+
+            - name: Publish adminfront failure summary
+              if: ${{ failure() }}
+              run: |
+                  if [ -f reports/adminfront-test-failure-report.md ]; then
+                    cat reports/adminfront-test-failure-report.md >> "$GITHUB_STEP_SUMMARY"
+                  fi
+
+            - name: Upload adminfront failure report artifact
+              if: ${{ failure() }}
+              uses: actions/upload-artifact@v3
+              continue-on-error: true
+              with:
+                  name: adminfront-test-failure-report
+                  path: |
+                      reports/adminfront-test-failure-report.md
+                      reports/adminfront-install.log
+                      reports/adminfront-provision.log
+                      reports/adminfront-test.log
+                      adminfront/playwright-report
+                      adminfront/test-results
+                  if-no-files-found: ignore
+
+    devfront-tests:
+        needs: lint
+        if: ${{ always() && (github.event_name != 'workflow_dispatch' || inputs.run_devfront_tests == true) }}
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "24"
+                  cache: "npm"
+                  cache-dependency-path: devfront/package-lock.json
+
+            - name: Get Playwright version
+              id: playwright-version
+              run: |
+                cd devfront
+                echo "version=$(npm list @playwright/test | grep @playwright/test | awk -F@ '{print $NF}')" >> "$GITHUB_OUTPUT"
+
+            - name: Cache Playwright Browsers
+              uses: actions/cache@v4
+              id: playwright-cache
+              with:
+                path: ~/.cache/ms-playwright
+                key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}
+                restore-keys: |
+                  ${{ runner.os }}-playwright-
+
+            - name: Install devfront dependencies
+              run: |
+                  mkdir -p reports
+                  set +e
+                  cd devfront
+                  npm ci 2>&1 | tee ../reports/devfront-install.log
+                  install_exit_code=${PIPESTATUS[0]}
+                  cd ..
+                  set -e
+
+                  if [ "$install_exit_code" -ne 0 ]; then
+                    {
+                      echo "# Devfront Test Failure Report"
+                      echo
+                      echo "- Workflow: \`${GITHUB_WORKFLOW:-Code Check}\`"
+                      echo "- Job: \`devfront-tests\`"
+                      echo "- Reason: \`Dependency install failed\`"
+                      echo "- Exit Code: \`$install_exit_code\`"
+                      echo
+                      echo "## Command"
+                      echo "\`cd devfront && npm ci\`"
+                      echo
+                      echo "## Install Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/devfront-install.log
+                      echo '```'
+                    } > reports/devfront-test-failure-report.md
+                    exit 1
+                  fi
+
+            - name: Provision browsers for devfront tests
+              run: |
+                  set +e
+                  cd devfront
+                  npx playwright install --with-deps 2>&1 | tee ../reports/devfront-provision.log
+                  provision_exit_code=${PIPESTATUS[0]}
+                  cd ..
+                  set -e
+
+                  if [ "$provision_exit_code" -ne 0 ]; then
+                    {
+                      echo "# Devfront Test Failure Report"
+                      echo
+                      echo "- Workflow: \`${GITHUB_WORKFLOW:-Code Check}\`"
+                      echo "- Job: \`devfront-tests\`"
+                      echo "- Reason: \`Browser provisioning failed\`"
+                      echo "- Exit Code: \`$provision_exit_code\`"
+                      echo
+                      echo "## Command"
+                      echo "\`cd devfront && npx playwright install --with-deps\`"
+                      echo
+                      echo "## Provision Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/devfront-provision.log
+                      echo '```'
+                    } > reports/devfront-test-failure-report.md
+                    exit 1
+                  fi
+
+            - name: Run devfront tests
+              env:
+                PLAYWRIGHT_WORKERS: 2
+              run: |
+                  mkdir -p reports
+                  set +e
+                  cd devfront
+                  npm test 2>&1 | tee ../reports/devfront-test.log
+                  test_exit_code=${PIPESTATUS[0]}
+                  cd ..
+                  set -e
+
+                  if [ "$test_exit_code" -ne 0 ]; then
+                    {
+                      echo "# Devfront Test Failure Report"
+                      echo
+                      echo "- Workflow: \`${GITHUB_WORKFLOW:-Code Check}\`"
+                      echo "- Job: \`devfront-tests\`"
+                      echo "- Exit Code: \`$test_exit_code\`"
+                      echo
+                      echo "## Commands"
+                      echo "1. \`cd devfront\`"
+                      echo "2. \`npm ci\`"
+                      echo "3. \`npx playwright install --with-deps\`"
+                      echo "4. \`npm test\`"
+                      echo
+                      echo "## Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/devfront-test.log
+                      echo '```'
+                    } > reports/devfront-test-failure-report.md
+                  fi
+
+                  exit "$test_exit_code"
+
+            - name: Ensure devfront failure report exists
+              if: ${{ failure() }}
+              run: |
+                  mkdir -p reports
+                  if [ -f reports/devfront-test-failure-report.md ]; then
+                    exit 0
+                  fi
+
+                  {
+                    echo "# Devfront Test Failure Report"
+                    echo
+                    echo "- Workflow: \`${GITHUB_WORKFLOW:-Code Check}\`"
+                    echo "- Job: \`devfront-tests\`"
+                    echo "- Reason: \`Job failed before detailed report generation\`"
+                    echo
+                    if [ -f reports/devfront-install.log ]; then
+                      echo "## Install Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/devfront-install.log
+                      echo '```'
+                      echo
+                    fi
+                    if [ -f reports/devfront-provision.log ]; then
+                      echo "## Provision Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/devfront-provision.log
+                      echo '```'
+                      echo
+                    fi
+                    if [ -f reports/devfront-test.log ]; then
+                      echo "## Test Log Tail (last 200 lines)"
+                      echo '```text'
+                      tail -n 200 reports/devfront-test.log
+                      echo '```'
+                    fi
+                  } > reports/devfront-test-failure-report.md
+
+            - name: Publish devfront failure summary
+              if: ${{ failure() }}
+              run: |
+                  if [ -f reports/devfront-test-failure-report.md ]; then
+                    cat reports/devfront-test-failure-report.md >> "$GITHUB_STEP_SUMMARY"
+                  fi
+
+            - name: Upload devfront failure report artifact
+              if: ${{ failure() }}
+              uses: actions/upload-artifact@v3
+              continue-on-error: true
+              with:
+                  name: devfront-test-failure-report
+                  path: |
+                      reports/devfront-test-failure-report.md
+                      reports/devfront-install.log
+                      reports/devfront-provision.log
+                      reports/devfront-test.log
+                      devfront/playwright-report
+                      devfront/test-results
+                  if-no-files-found: ignore

.gitea/workflows/production_release.yml

@@ -0,0 +1,144 @@
+name: Release Baron SSO to Production
+
+on:
+  workflow_dispatch:
+    inputs:
+      rc_version_tag:
+        description: "The version tag to release to production (e.g., v1.2601.1-RC1)"
+        required: true
+        type: string
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Login to Harbor Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ vars.HARBOR_ENDPOINT }}
+          username: ${{ vars.HARBOR_ROBOT_ACCOUNT }}
+          password: ${{ secrets.HARBOR_ROBOT_KEY }}
+
+      - name: Parse RC and re-tag to final
+        id: retag
+        env:
+          HARBOR_HOSTNAME: ${{ vars.HARBOR_HOSTNAME }}
+          HARBOR_USER: ${{ vars.HARBOR_ROBOT_ACCOUNT }}
+          HARBOR_PASSWORD: ${{ secrets.HARBOR_ROBOT_KEY }}
+        run: |
+          BASE_TAG=$(echo "${{ github.event.inputs.rc_version_tag }}" | xargs)
+
+          if [[ ! "$BASE_TAG" =~ ^v[0-9]+\.[0-9]{4}\.[0-9]+-RC[0-9]+$ ]]; then
+            echo "::error::rc_version_tag must look like vX.YYMM.Z-RC## (got: $BASE_TAG)"
+            exit 1
+          fi
+          RE_TAG="${BASE_TAG%-RC*}"
+          echo "Final tag will be: ${RE_TAG}"
+
+          if ! command -v skopeo >/dev/null 2>&1; then
+            sudo apt-get update -y && sudo apt-get install -y skopeo
+          fi
+
+          # Re-tag backend image
+          echo "Re-tagging backend image..."
+          skopeo copy --preserve-digests \
+                      --src-creds "${HARBOR_USER}:${HARBOR_PASSWORD}" --dest-creds "${HARBOR_USER}:${HARBOR_PASSWORD}" \
+                      --src-tls-verify=false --dest-tls-verify=false \
+                      "docker://${HARBOR_HOSTNAME}/baron_sso/backend:${BASE_TAG}" "docker://${HARBOR_HOSTNAME}/baron_sso/backend:${RE_TAG}"
+
+          # Re-tag userfront image
+          echo "Re-tagging userfront image..."
+          skopeo copy --preserve-digests \
+                      --src-creds "${HARBOR_USER}:${HARBOR_PASSWORD}" --dest-creds "${HARBOR_USER}:${HARBOR_PASSWORD}" \
+                      --src-tls-verify=false --dest-tls-verify=false \
+                      "docker://${HARBOR_HOSTNAME}/baron_sso/userfront:${BASE_TAG}" "docker://${HARBOR_HOSTNAME}/baron_sso/userfront:${RE_TAG}"
+
+          echo "final_image_tag=${RE_TAG}" >> "$GITHUB_OUTPUT"
+
+      - name: Setup SSH
+        uses: webfactory/ssh-agent@v0.9.0
+        with:
+          ssh-private-key: ${{ secrets.PROD_SSH_PRIVATE_KEY }}
+
+      - name: Deploy to Production
+        env:
+          IMAGE_TAG: ${{ steps.retag.outputs.final_image_tag }}
+          BACKEND_IMAGE_NAME: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/backend
+          USERFRONT_IMAGE_NAME: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/userfront
+          DEPLOY_PATH: ${{ vars.PROD_DEPLOY_PATH }}
+          PROD_HOST: ${{ vars.PROD_HOST }}
+          PROD_USER: ${{ vars.PROD_USER }}
+          HARBOR_ENDPOINT: ${{ vars.HARBOR_ENDPOINT }}
+          HARBOR_ROBOT_ACCOUNT: ${{ vars.HARBOR_ROBOT_ACCOUNT }}
+          HARBOR_ROBOT_KEY: ${{ secrets.HARBOR_ROBOT_KEY }}
+        run: |
+          set -euo pipefail
+
+          echo "DEBUG: PROD_USER='${PROD_USER}'"
+          echo "DEBUG: PROD_HOST='${PROD_HOST}'"
+          echo "DEBUG: DEPLOY_PATH='${DEPLOY_PATH}'"
+
+          # Sanity check (fail fast with a clear message)
+          if [ -z "${PROD_USER}" ] || [ -z "${PROD_HOST}" ] || [ -z "${DEPLOY_PATH}" ]; then
+            echo "::error::Missing required vars (PROD_USER/PROD_HOST/DEPLOY_PATH). Check Gitea repo variables."
+            exit 1
+          fi
+
+          ssh-keyscan -H "${PROD_HOST}" >> ~/.ssh/known_hosts
+
+          ssh "${PROD_USER}@${PROD_HOST}" "mkdir -p '${DEPLOY_PATH}'"
+
+          # Create the main .env file for Baron SSO on the remote server
+          # Note: All values are pulled from Gitea secrets and variables
+          printf '%s\n' \
+            "APP_ENV=production" \
+            "TZ=Asia/Seoul" \
+            "DB_PORT=${{ vars.PROD_DB_PORT }}" \
+            "CLICKHOUSE_PORT_HTTP=${{ vars.PROD_CLICKHOUSE_PORT_HTTP }}" \
+            "CLICKHOUSE_PORT_NATIVE=${{ vars.PROD_CLICKHOUSE_PORT_NATIVE }}" \
+            "CLICKHOUSE_USER=${{ vars.PROD_CLICKHOUSE_USER }}" \
+            "CLICKHOUSE_PASSWORD=${{ secrets.PROD_CLICKHOUSE_PASSWORD }}" \
+            "BACKEND_PORT=${{ vars.PROD_BACKEND_PORT }}" \
+            "USERFRONT_PORT=${{ vars.PROD_USERFRONT_PORT }}" \
+            "DB_USER=${{ vars.PROD_DB_USER }}" \
+            "DB_PASSWORD=${{ secrets.PROD_DB_PASSWORD }}" \
+            "DB_NAME=${{ vars.PROD_DB_NAME }}" \
+            "COOKIE_SECRET=${{ secrets.PROD_COOKIE_SECRET }}" \
+            "JWT_SECRET=${{ secrets.PROD_JWT_SECRET }}" \
+            "REDIS_ADDR=${{ vars.PROD_REDIS_ADDR }}" \
+            "NAVER_CLOUD_ACCESS_KEY=${{ vars.NAVER_CLOUD_ACCESS_KEY }}" \
+            "NAVER_CLOUD_SECRET_KEY=${{ secrets.NAVER_CLOUD_SECRET_KEY }}" \
+            "NAVER_CLOUD_SERVICE_ID=${{ vars.NAVER_CLOUD_SERVICE_ID }}" \
+            "NAVER_SENDER_PHONE_NUMBER=${{ vars.NAVER_SENDER_PHONE_NUMBER }}" \
+            "AWS_REGION=${{ vars.AWS_REGION }}" \
+            "AWS_ACCESS_KEY_ID=${{ vars.AWS_ACCESS_KEY_ID }}" \
+            "AWS_SECRET_ACCESS_KEY=${{ secrets.AWS_SECRET_ACCESS_KEY }}" \
+            "AWS_SES_SENDER=${{ vars.AWS_SES_SENDER }}" \
+            "USERFRONT_URL=${{ vars.PROD_USERFRONT_URL }}" \
+            "BACKEND_URL=${{ vars.PROD_BACKEND_URL }}" \
+            > .env
+
+          # Copy compose template and .env file to the remote server
+          scp docker/docker-compose.template.yaml .env "${PROD_USER}@${PROD_HOST}:${DEPLOY_PATH}/"
+          scp docker/compose.infra.prd.yaml "${PROD_USER}@${PROD_HOST}:${DEPLOY_PATH}/compose.infra.yml"
+
+          # Deploy Baron SSO
+          echo "${HARBOR_ROBOT_KEY}" | ssh "${PROD_USER}@${PROD_HOST}" \
+            "export DEPLOY_PATH='${DEPLOY_PATH}'; \
+             export BACKEND_IMAGE_NAME='${BACKEND_IMAGE_NAME}'; \
+             export USERFRONT_IMAGE_NAME='${USERFRONT_IMAGE_NAME}'; \
+             export IMAGE_TAG='${IMAGE_TAG}'; \
+             export HARBOR_ENDPOINT='${HARBOR_ENDPOINT}'; \
+             export HARBOR_ROBOT_ACCOUNT='${HARBOR_ROBOT_ACCOUNT}'; \
+             set -e; \
+             cd \"\${DEPLOY_PATH}\"; \
+             docker login \"\${HARBOR_ENDPOINT}\" -u \"\${HARBOR_ROBOT_ACCOUNT}\" --password-stdin; \
+             set -a; \
+             . ./.env; \
+             set +a; \
+             envsubst < docker-compose.template.yaml > docker-compose.yml; \
+             docker compose -f compose.infra.yml -f docker-compose.yml pull; \
+             docker compose -f compose.infra.yml -f docker-compose.yml up -d --remove-orphans"

.gitea/workflows/staging_code_pull.yml

@@ -0,0 +1,194 @@
+name: Release Baron SSO to Staging
+
+on:
+    workflow_dispatch:
+        inputs:
+            target_branch:
+                description: "Branch to deploy"
+                required: true
+                default: "dev"
+
+jobs:
+    deploy-staging:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup SSH
+              uses: webfactory/ssh-agent@v0.9.0
+              with:
+                  ssh-private-key: ${{ secrets.STAGE_SSH_PRIVATE_KEY }}
+
+            - name: Deploy to Staging by git pull
+              env:
+                  DEPLOY_PATH: ${{ vars.STAGE_DEPLOY_PATH }}
+                  STAGE_HOST: ${{ vars.STAGE_HOST }}
+                  STAGE_USER: ${{ vars.STAGE_USER }}
+                  TARGET_BRANCH: ${{ inputs.target_branch }}
+              run: |
+                  set -euo pipefail
+
+                  echo "DEBUG: STAGE_USER='${STAGE_USER}'"
+                  echo "DEBUG: STAGE_HOST='${STAGE_HOST}'"
+                  echo "DEBUG: DEPLOY_PATH='${DEPLOY_PATH}'"
+                  echo "DEBUG: TARGET_BRANCH='${TARGET_BRANCH}'"
+
+                  # Sanity check
+                  if [ -z "${STAGE_USER}" ] || [ -z "${STAGE_HOST}" ] || [ -z "${DEPLOY_PATH}" ] || [ -z "${TARGET_BRANCH}" ]; then
+                    echo "::error::Missing required vars (STAGE_USER/STAGE_HOST/DEPLOY_PATH/TARGET_BRANCH)."
+                    exit 1
+                  fi
+
+                  ssh-keyscan -H "${STAGE_HOST}" >> ~/.ssh/known_hosts
+                  ssh "${STAGE_USER}@${STAGE_HOST}" "mkdir -p '${DEPLOY_PATH}'"
+
+                  # .env 파일 생성
+                  cat <<'EOF' > .env
+                  APP_ENV=stage
+                  BACKEND_LOG_LEVEL=debug
+                  CLIENT_LOG_DEBUG=true
+                  TZ=Asia/Seoul
+                  IDP_PROVIDER=ory
+
+                  # DB & Clickhouse
+                  DB_PORT=${{ vars.DB_PORT }}
+                  CLICKHOUSE_PORT_HTTP=${{ vars.CLICKHOUSE_PORT_HTTP }}
+                  CLICKHOUSE_PORT_NATIVE=${{ vars.CLICKHOUSE_PORT_NATIVE }}
+                  CLICKHOUSE_HOST=${{ vars.CLICKHOUSE_HOST }}
+                  CLICKHOUSE_USER=${{ vars.CLICKHOUSE_USER }}
+                  CLICKHOUSE_PASSWORD=${{ secrets.CLICKHOUSE_PASSWORD }}
+
+
+                  BACKEND_PORT=${{ vars.BACKEND_PORT }}
+                  ADMINFRONT_PORT=${{ vars.ADMINFRONT_PORT }}
+                  DEVFRONT_PORT=${{ vars.DEVFRONT_PORT }}
+                  USERFRONT_PORT=${{ vars.USERFRONT_PORT }}
+
+                  OATHKEEPER_API_URL=${{ vars.OATHKEEPER_API_URL }}
+
+                  DB_USER=${{ vars.DB_USER }}
+                  DB_PASSWORD=${{ secrets.STG_DB_PASSWORD }}
+                  DB_NAME=${{ vars.DB_NAME }}
+                  COOKIE_SECRET=${{ secrets.STG_COOKIE_SECRET }}
+                  JWT_SECRET=${{ secrets.STG_JWT_SECRET }}
+                  REDIS_ADDR=${{ vars.REDIS_ADDR }}
+                  CORS_ALLOWED_ORIGINS=${{ vars.CORS_ALLOWED_ORIGINS }}
+                  AUDIT_WORKER_COUNT=5
+                  AUDIT_QUEUE_SIZE=2000
+                  PROFILE_CACHE_TTL=${{ vars.PROFILE_CACHE_TTL }}
+                  DESCOPE_TEST_ACCOUNT=${{ vars.DESCOPE_TEST_ACCOUNT }}
+                  NAVER_CLOUD_ACCESS_KEY=${{ vars.NAVER_CLOUD_ACCESS_KEY }}
+                  NAVER_CLOUD_SECRET_KEY=${{ secrets.NAVER_CLOUD_SECRET_KEY }}
+                  NAVER_CLOUD_SERVICE_ID=${{ vars.NAVER_CLOUD_SERVICE_ID }}
+                  NAVER_SENDER_PHONE_NUMBER=${{ vars.NAVER_SENDER_PHONE_NUMBER }}
+                  AWS_REGION=${{ vars.AWS_REGION }}
+                  AWS_ACCESS_KEY_ID=${{ vars.AWS_ACCESS_KEY_ID }}
+                  AWS_SECRET_ACCESS_KEY=${{ secrets.AWS_SECRET_ACCESS_KEY }}
+                  AWS_SES_SENDER=${{ vars.AWS_SES_SENDER }}
+                  ADMIN_EMAIL=${{ vars.ADMIN_EMAIL }}
+                  ADMIN_PASSWORD=${{ secrets.STG_ADMIN_PASSWORD }}
+                  USERFRONT_URL=${{ vars.USERFRONT_URL }}
+                  ADMINFRONT_URL=${{ vars.ADMINFRONT_URL }}
+                  DEVFRONT_URL=${{ vars.DEVFRONT_URL }}
+                  VITE_ORGCHART_URL=${{ vars.VITE_ORGCHART_URL }}
+                  BACKEND_PUBLIC_URL=${{ vars.BACKEND_URL }}
+                  BACKEND_URL=${{ vars.BACKEND_URL }}
+                  OATHKEEPER_PUBLIC_URL=${{ vars.OATHKEEPER_PUBLIC_URL }}
+                  ORY_POSTGRES_TAG=${{ vars.ORY_POSTGRES_TAG }}
+                  ORY_POSTGRES_USER=${{ vars.ORY_POSTGRES_USER }}
+                  ORY_POSTGRES_PASSWORD=${{ secrets.STG_ORY_POSTGRES_PASSWORD }}
+                  ORY_POSTGRES_DB=${{ vars.ORY_POSTGRES_DB }}
+                  KRATOS_DB=${{ vars.KRATOS_DB }}
+                  HYDRA_DB=${{ vars.HYDRA_DB }}
+                  KETO_DB=${{ vars.KETO_DB }}
+                  KRATOS_VERSION=${{ vars.KRATOS_VERSION }}
+                  KRATOS_UI_NODE_VERSION=${{ vars.KRATOS_UI_NODE_VERSION }}
+                  HYDRA_VERSION=${{ vars.HYDRA_VERSION }}
+                  KETO_VERSION=${{ vars.KETO_VERSION }}
+                  ORY_SDK_URL=${{ vars.ORY_SDK_URL }}
+                  KRATOS_PUBLIC_URL=${{ vars.KRATOS_PUBLIC_URL }}
+                  KRATOS_ADMIN_URL=${{ vars.KRATOS_ADMIN_URL }}
+                  KRATOS_BROWSER_URL=${{ vars.KRATOS_BROWSER_URL }}
+                  KRATOS_UI_URL=${{ vars.KRATOS_UI_URL }}
+                  HYDRA_ADMIN_URL=${{ vars.HYDRA_ADMIN_URL }}
+                  HYDRA_PUBLIC_URL=${{ vars.HYDRA_PUBLIC_URL }}
+                  JWKS_URL=${{ vars.JWKS_URL }}
+                  OATHKEEPER_VERSION=${{ vars.OATHKEEPER_VERSION }}
+                  OATHKEEPER_UID=${{ vars.OATHKEEPER_UID }}
+                  OATHKEEPER_GID=${{ vars.OATHKEEPER_GID }}
+                  OATHKEEPER_HEALTH_URL=${{ vars.OATHKEEPER_HEALTH_URL }}
+                  OATHKEEPER_HEALTH_INTERVAL_SECONDS=${{ vars.OATHKEEPER_HEALTH_INTERVAL_SECONDS }}
+                  OATHKEEPER_HEALTH_TIMEOUT_SECONDS=${{ vars.OATHKEEPER_HEALTH_TIMEOUT_SECONDS }}
+                  OATHKEEPER_HEALTH_ENABLED=${{ vars.OATHKEEPER_HEALTH_ENABLED }}
+                  CSRF_COOKIE_NAME=${{ vars.CSRF_COOKIE_NAME }}
+                  CSRF_COOKIE_SECRET=${{ secrets.STG_CSRF_COOKIE_SECRET }}
+
+                  # Frontend OIDC configs for Staging
+                  VITE_OIDC_AUTHORITY=https://sso.hmac.kr/oidc
+                  ADMINFRONT_CALLBACK_URLS=http://localhost:5173/auth/callback,https://sso.hmac.kr/auth/callback,http://172.16.10.176:5173/auth/callback,https://sadmin.hmac.kr/auth/callback
+                  DEVFRONT_CALLBACK_URLS=http://localhost:5174/auth/callback,https://sso.hmac.kr/devfront/auth/callback,http://172.16.10.176:5174/auth/callback,https://sdev.hmac.kr/auth/callback
+                  ORGFRONT_CALLBACK_URLS=http://localhost:5175/auth/callback,http://172.16.10.176:5175/auth/callback,https://baron-orgchart.hmac.kr/auth/callback
+                  # OATHKEEPER_INTROSPECT_CLIENT_ID=${{ vars.OATHKEEPER_INTROSPECT_CLIENT_ID }}
+                  # OATHKEEPER_INTROSPECT_CLIENT_SECRET=${{ secrets.STG_OATHKEEPER_INTROSPECT_CLIENT_SECRET }}
+                  EOF
+
+                  # 코드 업데이트 (Git)
+                  ssh "${STAGE_USER}@${STAGE_HOST}" "mkdir -p '${DEPLOY_PATH}' && cd '${DEPLOY_PATH}' && \
+                  if [ ! -d .git ]; then
+                    git init
+                    git remote add origin  ssh://git@172.16.10.175:222/baron/baron-sso.git
+                  else
+                    git remote set-url origin  ssh://git@172.16.10.175:222/baron/baron-sso.git
+                  fi
+                  git fetch --depth 1 origin '${TARGET_BRANCH}' && \
+                  git reset --hard FETCH_HEAD && \
+                  git clean -fd && \
+                  git checkout -B '${TARGET_BRANCH}' FETCH_HEAD"
+
+                  # .env 파일 복사
+                  scp .env "${STAGE_USER}@${STAGE_HOST}:${DEPLOY_PATH}/"
+
+                  # 배포 실행
+                  ssh "${STAGE_USER}@${STAGE_HOST}" "DEPLOY_PATH='${DEPLOY_PATH}' bash -s" <<'EOSSH'
+                  set -euo pipefail
+                  cd "${DEPLOY_PATH}"
+                  set -a; . ./.env; set +a;
+
+                  # 네트워크 생성
+                  for net in baron_net public_net ory-net hydranet kratosnet; do
+                    docker network inspect "${net}" >/dev/null 2>&1 || docker network create "${net}"
+                  done
+
+
+                  # [중요] 설정 파일 권한 문제 해결 (Ory 이미지는 root가 아닌 사용자로 실행됨)
+                  chmod -R 777 docker/ory || true
+
+                  cp docker/staging_pull_compose.template.yaml staging_pull_compose.yaml
+
+                  docker compose -f staging_pull_compose.yaml pull
+
+                  # 코드 변경 반영을 위해 build 수행 (userfront nginx.conf 등)
+                  docker compose -f staging_pull_compose.yaml build --pull
+
+                  docker compose -f staging_pull_compose.yaml up -d --remove-orphans
+                  docker compose -f staging_pull_compose.yaml up -d init-rp
+
+                  # 배포 후 상태 확인 (실패 시 로그 출력을 위함)
+                  sleep 10
+                  
+                  echo "===== INIT-RP LOGS ====="
+                  docker compose -f staging_pull_compose.yaml logs init-rp || true
+                  echo "========================"
+                  
+                  kratos_migrate_cid="$(docker compose -f staging_pull_compose.yaml ps -q kratos-migrate || true)"
+                  if [ -n "${kratos_migrate_cid}" ]; then
+                    if [ "$(docker inspect -f '{{.State.ExitCode}}' "${kratos_migrate_cid}")" -ne 0 ]; then
+                       echo 'Kratos Migrate Failed. Logs:'
+                       docker logs "${kratos_migrate_cid}"
+                       exit 1
+                    fi
+                  else
+                    echo "WARN: kratos-migrate container not found; skipping exit-code check."
+                  fi
+                  EOSSH

.gitea/workflows/staging_release.yml

@@ -0,0 +1,197 @@
+name: Release Baron SSO to Staging
+
+on:
+  workflow_dispatch:
+    inputs:
+      rc_version_tag:
+        description: "The version tag to deploy to staging (e.g., v1.2601.1-RC1)"
+        required: true
+        type: string
+
+jobs:
+  deploy-staging:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup SSH
+        uses: webfactory/ssh-agent@v0.9.0
+        with:
+          ssh-private-key: ${{ secrets.STAGE_SSH_PRIVATE_KEY }}
+
+      - name: Deploy to Staging
+        env:
+          IMAGE_TAG: ${{ github.event.inputs.rc_version_tag }}
+          BACKEND_IMAGE_NAME: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/backend
+          USERFRONT_IMAGE_NAME: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/userfront
+          ADMINFRONT_IMAGE_NAME: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/adminfront
+          DEVFRONT_IMAGE_NAME: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/devfront
+          
+          # Staging-specific variables
+          DEPLOY_PATH: ${{ vars.STAGE_DEPLOY_PATH }}
+          STAGE_HOST: ${{ vars.STAGE_HOST }}
+          STAGE_USER: ${{ vars.STAGE_USER }}
+
+          HARBOR_ENDPOINT: ${{ vars.HARBOR_ENDPOINT }}
+          HARBOR_ROBOT_ACCOUNT: ${{ vars.HARBOR_ROBOT_ACCOUNT }}
+          HARBOR_ROBOT_KEY: ${{ secrets.HARBOR_ROBOT_KEY }}
+        run: |
+          set -euo pipefail
+
+          echo "DEBUG: STAGE_USER='${STAGE_USER}'"
+          echo "DEBUG: STAGE_HOST='${STAGE_HOST}'"
+          echo "DEBUG: DEPLOY_PATH='${DEPLOY_PATH}'"
+
+          # Sanity check
+          if [ -z "${STAGE_USER}" ] || [ -z "${STAGE_HOST}" ] || [ -z "${DEPLOY_PATH}" ]; then
+            echo "::error::Missing required vars (STAGE_USER/STAGE_HOST/DEPLOY_PATH)."
+            exit 1
+          fi
+
+          ssh-keyscan -H "${STAGE_HOST}" >> ~/.ssh/known_hosts
+          ssh "${STAGE_USER}@${STAGE_HOST}" "mkdir -p '${DEPLOY_PATH}'"
+
+          # .env 파일 생성
+          cat <<'EOF' > .env
+          APP_ENV=stage
+          BACKEND_LOG_LEVEL=debug
+          CLIENT_LOG_DEBUG=true
+          TZ=Asia/Seoul
+          IDP_PROVIDER=ory
+
+          # DB & Clickhouse
+          DB_PORT=${{ vars.DB_PORT }}
+          CLICKHOUSE_PORT_HTTP=${{ vars.CLICKHOUSE_PORT_HTTP }}
+          CLICKHOUSE_PORT_NATIVE=${{ vars.CLICKHOUSE_PORT_NATIVE }}
+          CLICKHOUSE_HOST=${{ vars.CLICKHOUSE_HOST }}
+          CLICKHOUSE_USER=${{ vars.CLICKHOUSE_USER }}
+          CLICKHOUSE_PASSWORD=${{ vars.CLICKHOUSE_PASSWORD }}
+
+
+          BACKEND_PORT=${{ vars.BACKEND_PORT }}
+          ADMINFRONT_PORT=${{ vars.ADMINFRONT_PORT }}
+          DEVFRONT_PORT=${{ vars.DEVFRONT_PORT }}
+          USERFRONT_PORT=${{ vars.USERFRONT_PORT }}
+          
+          OATHKEEPER_API_URL=${{ vars.OATHKEEPER_API_URL }}
+
+          DB_USER=${{ vars.DB_USER }}
+          DB_PASSWORD=${{ secrets.STG_DB_PASSWORD }}
+          DB_NAME=${{ vars.DB_NAME }}
+          COOKIE_SECRET=${{ secrets.STG_COOKIE_SECRET }}
+          JWT_SECRET=${{ secrets.STG_JWT_SECRET }}
+          REDIS_ADDR=${{ vars.REDIS_ADDR }}
+          CORS_ALLOWED_ORIGINS=${{ vars.CORS_ALLOWED_ORIGINS }}
+          AUDIT_WORKER_COUNT=5
+          AUDIT_QUEUE_SIZE=2000
+          PROFILE_CACHE_TTL=${{ vars.PROFILE_CACHE_TTL }}
+          DESCOPE_TEST_ACCOUNT=${{ vars.DESCOPE_TEST_ACCOUNT }}
+          NAVER_CLOUD_ACCESS_KEY=${{ vars.NAVER_CLOUD_ACCESS_KEY }}
+          NAVER_CLOUD_SECRET_KEY=${{ secrets.NAVER_CLOUD_SECRET_KEY }}
+          NAVER_CLOUD_SERVICE_ID=${{ vars.NAVER_CLOUD_SERVICE_ID }}
+          NAVER_SENDER_PHONE_NUMBER=${{ vars.NAVER_SENDER_PHONE_NUMBER }}
+          AWS_REGION=${{ vars.AWS_REGION }}
+          AWS_ACCESS_KEY_ID=${{ vars.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY=${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_SES_SENDER=${{ vars.AWS_SES_SENDER }}
+          ADMIN_EMAIL=${{ vars.ADMIN_EMAIL }}
+          ADMIN_PASSWORD=${{ secrets.STG_ADMIN_PASSWORD }}
+          USERFRONT_URL=${{ vars.USERFRONT_URL }}
+          BACKEND_PUBLIC_URL=${{ vars.BACKEND_URL }}
+          BACKEND_URL=${{ vars.BACKEND_URL }}
+          OATHKEEPER_PUBLIC_URL=${{ vars.OATHKEEPER_PUBLIC_URL }}
+          ORY_POSTGRES_TAG=${{ vars.ORY_POSTGRES_TAG }}
+          ORY_POSTGRES_USER=${{ vars.ORY_POSTGRES_USER }}
+          ORY_POSTGRES_PASSWORD=${{ secrets.STG_ORY_POSTGRES_PASSWORD }}
+          ORY_POSTGRES_DB=${{ vars.ORY_POSTGRES_DB }}
+          KRATOS_DB=${{ vars.KRATOS_DB }}
+          HYDRA_DB=${{ vars.HYDRA_DB }}
+          KETO_DB=${{ vars.KETO_DB }}
+          KRATOS_VERSION=${{ vars.KRATOS_VERSION }}
+          KRATOS_UI_NODE_VERSION=${{ vars.KRATOS_UI_NODE_VERSION }}
+          HYDRA_VERSION=${{ vars.HYDRA_VERSION }}
+          KETO_VERSION=${{ vars.KETO_VERSION }}
+          ORY_SDK_URL=${{ vars.ORY_SDK_URL }}
+          KRATOS_PUBLIC_URL=${{ vars.KRATOS_PUBLIC_URL }}
+          KRATOS_ADMIN_URL=${{ vars.KRATOS_ADMIN_URL }}
+          KRATOS_BROWSER_URL=${{ vars.KRATOS_BROWSER_URL }}
+          KRATOS_UI_URL=${{ vars.KRATOS_UI_URL }}
+          HYDRA_ADMIN_URL=${{ vars.HYDRA_ADMIN_URL }}
+          HYDRA_PUBLIC_URL=${{ vars.HYDRA_PUBLIC_URL }}
+          JWKS_URL=${{ vars.JWKS_URL }}
+          OATHKEEPER_VERSION=${{ vars.OATHKEEPER_VERSION }}
+          OATHKEEPER_UID=${{ vars.OATHKEEPER_UID }}
+          OATHKEEPER_GID=${{ vars.OATHKEEPER_GID }}
+          OATHKEEPER_HEALTH_URL=${{ vars.OATHKEEPER_HEALTH_URL }}
+          OATHKEEPER_HEALTH_INTERVAL_SECONDS=${{ vars.OATHKEEPER_HEALTH_INTERVAL_SECONDS }}
+          OATHKEEPER_HEALTH_TIMEOUT_SECONDS=${{ vars.OATHKEEPER_HEALTH_TIMEOUT_SECONDS }}
+          OATHKEEPER_HEALTH_ENABLED=${{ vars.OATHKEEPER_HEALTH_ENABLED }}
+          CSRF_COOKIE_NAME=${{ vars.CSRF_COOKIE_NAME }}
+          CSRF_COOKIE_SECRET=${{ secrets.STG_CSRF_COOKIE_SECRET }}
+          
+          VITE_OIDC_AUTHORITY=${{ vars.VITE_OIDC_AUTHORITY }}
+          ADMINFRONT_CALLBACK_URLS=${{ vars.ADMINFRONT_CALLBACK_URLS }}
+          DEVFRONT_CALLBACK_URLS=${{ vars.DEVFRONT_CALLBACK_URLS }}
+          # OATHKEEPER_INTROSPECT_CLIENT_ID=${{ vars.OATHKEEPER_INTROSPECT_CLIENT_ID }}
+          # OATHKEEPER_INTROSPECT_CLIENT_SECRET=${{ secrets.STG_OATHKEEPER_INTROSPECT_CLIENT_SECRET }}
+          EOF
+
+          # 파일 복사
+          ssh "${STAGE_USER}@${STAGE_HOST}" "mkdir -p ${DEPLOY_PATH}/docker"
+          
+          # [중요] docker/ory 폴더 복사 (여기에 init-db/1-createdb.sql이 있어야 함)
+          scp -r docker/ory "${STAGE_USER}@${STAGE_HOST}:${DEPLOY_PATH}/docker/"
+          
+          if [ -d "docker/init-metadata" ]; then
+            scp -r docker/init-metadata "${STAGE_USER}@${STAGE_HOST}:${DEPLOY_PATH}/docker/"
+          fi
+          
+          if [ -d "gateway" ]; then
+             scp -r gateway "${STAGE_USER}@${STAGE_HOST}:${DEPLOY_PATH}/"
+          fi
+
+          scp docker/docker-compose.staging.template.yaml .env "${STAGE_USER}@${STAGE_HOST}:${DEPLOY_PATH}/"
+          scp docker/compose.infra.yaml "${STAGE_USER}@${STAGE_HOST}:${DEPLOY_PATH}/compose.infra.yml"
+          scp docker/compose.ory.yaml "${STAGE_USER}@${STAGE_HOST}:${DEPLOY_PATH}/compose.ory.yml"
+
+          # 배포 실행
+          echo "${HARBOR_ROBOT_KEY}" | ssh "${STAGE_USER}@${STAGE_HOST}" \
+            "export DEPLOY_PATH='${DEPLOY_PATH}'; \
+             export BACKEND_IMAGE_NAME='${BACKEND_IMAGE_NAME}'; \
+             export USERFRONT_IMAGE_NAME='${USERFRONT_IMAGE_NAME}'; \
+             export ADMINFRONT_IMAGE_NAME='${ADMINFRONT_IMAGE_NAME}'; \
+             export DEVFRONT_IMAGE_NAME='${DEVFRONT_IMAGE_NAME}'; \
+             export IMAGE_TAG='${IMAGE_TAG}'; \
+             export HARBOR_ENDPOINT='${HARBOR_ENDPOINT}'; \
+             export HARBOR_ROBOT_ACCOUNT='${HARBOR_ROBOT_ACCOUNT}'; \
+             cd \"\${DEPLOY_PATH}\"; \
+             docker login \"\${HARBOR_ENDPOINT}\" -u \"\${HARBOR_ROBOT_ACCOUNT}\" --password-stdin; \
+             set -a; . ./.env; set +a; \
+             
+             # 네트워크 생성
+             for net in baron_net public_net ory-net hydranet kratosnet; do
+               docker network inspect \"\$net\" >/dev/null 2>&1 || docker network create \"\$net\"
+             done
+             
+             envsubst < docker-compose.staging.template.yaml > docker-compose.yml; \
+
+             # [중요] 설정 파일 권한 문제 해결 (Ory 이미지는 root가 아닌 사용자로 실행됨)
+             chmod -R 777 docker/ory
+             
+             docker compose -f compose.infra.yml -f compose.ory.yml -f docker-compose.yml pull; \
+             
+             # [주의] DB 초기화 스크립트는 '새로운 볼륨'에서만 실행됨. 
+             # DB 초기화 문제를 확실히 해결하기 위해 기존 볼륨을 날리고 다시 띄움 (데이터 삭제됨 주의)
+             # 스테이징이므로 초기화 진행. 데이터 보존이 필요하면 이 줄 제거하고 수동으로 DB 만들어야 함.
+             docker compose -f compose.infra.yml -f compose.ory.yml -f docker-compose.yml down -v || true
+             
+             docker compose -f compose.infra.yml -f compose.ory.yml -f docker-compose.yml up -d --remove-orphans; \
+             
+             # 배포 후 상태 확인 (실패 시 로그 출력을 위함)
+             sleep 10; \
+             if [ \$(docker inspect -f '{{.State.ExitCode}}' baron-sso-staging-kratos-migrate-1) -ne 0 ]; then \
+                echo 'Kratos Migrate Failed. Logs:'; \
+                docker logs baron-sso-staging-kratos-migrate-1; \
+                exit 1; \
+             fi"

.gitignore

@@ -0,0 +1,44 @@
+# General
+.env
+.temp
+.DS_Store
+.idea/
+.vscode/
+.codex
+.codex/
+.serena/
+.generated/
+*.swp
+*.log
+*.out
+*.exe
+.npm-cache/
+reports
+reports/*
+
+# Docker Services Data (Volumes)
+postgres_data/
+clickhouse_data/
+docker/ory/oathkeeper/logs/
+
+# Backend (Go)
+backend/main
+backend/bin/
+backend/vendor/
+backend/tmp/
+backend/.env
+backend/server
+
+# userfront (Flutter)
+# Note: userfront might have its own .gitignore, but adding here just in case
+userfront/build/
+userfront/.dart_tool/
+userfront/.packages
+userfront/.pub/
+userfront/.env
+
+# Frontend test artifacts
+adminfront/test-results/
+devfront/test-results/
+adminfront/playwright-report/
+devfront/playwright-report/

Makefile

@@ -0,0 +1,289 @@
+# Baron SSO용 Docker Compose 헬퍼
+
+# 환경 변수 로드
+ifneq (,$(wildcard ./.env))
+    include .env
+    export
+endif
+
+# Compose 파일 경로
+COMPOSE_INFRA := compose.infra.yaml
+COMPOSE_ORY := compose.ory.yaml
+COMPOSE_APP := docker-compose.yaml
+AUTH_CONFIG_ENV := .generated/auth-config.env
+
+COMPOSE_CLI_ENV_ARGS :=
+ifneq (,$(wildcard ./.env))
+COMPOSE_CLI_ENV_ARGS += --env-file .env
+endif
+COMPOSE_CLI_ENV_ARGS += --env-file $(AUTH_CONFIG_ENV)
+
+# --- 인증 설정 빌드/검증 ---
+build-auth-config:
+	@echo "Building auth config..."
+	@mkdir -p .generated
+	@bash scripts/auth_config.sh build
+
+validate-auth-config: build-auth-config
+	@echo "Validating auth config..."
+	@bash scripts/auth_config.sh validate
+
+verify-auth-config: validate-auth-config
+	@echo "Verifying auth config wiring..."
+	@bash scripts/auth_config.sh verify
+
+# --- 기본 실행 ---
+# 주의: --remove-orphan 사용 금지 (다른 스택이 orphan으로 판단되어 종료될 수 있음)
+up-all: validate-auth-config
+	@echo "Starting ALL stacks (infra + ory + app)..."
+	docker compose $(COMPOSE_CLI_ENV_ARGS) -f $(COMPOSE_INFRA) -f $(COMPOSE_ORY) -f $(COMPOSE_APP) up -d
+
+# --- 개별 스택 실행 ---
+up-infra:
+	@echo "Starting Infra stack (postgres/clickhouse/redis)..."
+	docker compose -f $(COMPOSE_INFRA) up -d
+
+up-ory: validate-auth-config
+	@echo "Starting Ory stack (kratos/hydra/keto/oathkeeper)..."
+	docker compose $(COMPOSE_CLI_ENV_ARGS) -f $(COMPOSE_ORY) up -d
+
+up-app: validate-auth-config
+	@echo "Starting App stack (backend/userfront/adminfront/devfront)..."
+	docker compose $(COMPOSE_CLI_ENV_ARGS) -f $(COMPOSE_APP) up -d
+
+up-backend: validate-auth-config
+	@echo "Starting Backend only..."
+	docker compose $(COMPOSE_CLI_ENV_ARGS) -f $(COMPOSE_APP) up -d backend
+
+up-dev: up-infra up-ory
+	@echo "Dev stack is up (infra + ory)."
+
+up-front-dev: up-infra up-ory up-backend
+	@echo "Dev stack is up (infra + ory + backend)."
+
+# --- 종료 (Down) ---
+down:
+	@echo "Stopping ALL stacks (infra + ory + app)..."
+	docker compose -f $(COMPOSE_INFRA) -f $(COMPOSE_ORY) -f $(COMPOSE_APP) down
+
+down-app:
+	@echo "Stopping App stack..."
+	docker compose -f $(COMPOSE_APP) down
+
+down-backend:
+	@echo "Stopping Backend only..."
+	docker compose -f $(COMPOSE_APP) stop backend
+
+down-infra:
+	@echo "Stopping Infra stack..."
+	docker compose -f $(COMPOSE_INFRA) down
+
+down-ory:
+	@echo "Stopping Ory stack..."
+	docker compose -f $(COMPOSE_ORY) down
+
+# --- 유틸리티 ---
+# 인프라 상태 확인
+check-infra:
+	@echo "Checking infra status..."
+	@if [ "$$(docker inspect -f '{{.State.Health.Status}}' baron_postgres 2>/dev/null)" != "healthy" ]; then \
+			echo "Error: PostgreSQL is not running or not healthy."; \
+			echo "Please run 'make up-infra' first."; \
+			exit 1; \
+	else \
+			echo "PostgreSQL is healthy."; \
+	fi
+
+ps:
+	docker compose -f $(COMPOSE_INFRA) -f $(COMPOSE_ORY) -f $(COMPOSE_APP) ps
+
+logs-infra:
+	docker compose -f $(COMPOSE_INFRA) logs -f
+
+logs-ory:
+	docker compose -f $(COMPOSE_ORY) logs -f
+
+logs-app:
+	docker compose -f $(COMPOSE_APP) logs -f
+
+# --- 로컬 통합 코드 체크 ---
+PLAYWRIGHT_BROWSERS_PATH := $(HOME)/.cache/ms-playwright
+PLAYWRIGHT_CHROMIUM_COMPLETE := $(PLAYWRIGHT_BROWSERS_PATH)/chromium-1208/INSTALLATION_COMPLETE
+PLAYWRIGHT_FIREFOX_COMPLETE := $(PLAYWRIGHT_BROWSERS_PATH)/firefox-1509/INSTALLATION_COMPLETE
+PLAYWRIGHT_WEBKIT_COMPLETE := $(PLAYWRIGHT_BROWSERS_PATH)/webkit-2248/INSTALLATION_COMPLETE
+
+ifeq ($(CI),)
+PLAYWRIGHT_INSTALL_ALL := sh -c 'if [ -f "$(PLAYWRIGHT_CHROMIUM_COMPLETE)" ] && [ -f "$(PLAYWRIGHT_FIREFOX_COMPLETE)" ] && [ -f "$(PLAYWRIGHT_WEBKIT_COMPLETE)" ]; then echo "Playwright browsers already installed"; else npx playwright install; fi'
+PLAYWRIGHT_INSTALL_CHROMIUM := sh -c 'if [ -f "$(PLAYWRIGHT_CHROMIUM_COMPLETE)" ]; then echo "Playwright chromium already installed"; else npx playwright install chromium; fi'
+else
+PLAYWRIGHT_INSTALL_ALL := npx playwright install --with-deps
+PLAYWRIGHT_INSTALL_CHROMIUM := npx playwright install --with-deps chromium
+endif
+
+.PHONY: code-check code-check-lint code-check-test-jobs code-check-i18n code-check-i18n-values code-check-go-lint code-check-sync-userfront-locales code-check-userfront-install code-check-userfront-lint code-check-front-lint code-check-backend-tests code-check-userfront-tests code-check-adminfront-tests code-check-devfront-tests code-check-userfront-e2e-tests
+
+CODE_CHECK_TEST_JOBS ?= 1
+PLAYWRIGHT_WORKERS ?= 1
+FLUTTER_TEST_CONCURRENCY ?= 1
+
+code-check: code-check-lint code-check-test-jobs
+	@echo "code-check complete."
+
+code-check-lint: code-check-i18n code-check-i18n-values code-check-front-lint code-check-go-lint code-check-sync-userfront-locales code-check-userfront-install code-check-userfront-lint
+
+code-check-test-jobs:
+	@echo "==> run CI-equivalent test jobs (parallel)"
+	@$(MAKE) --no-print-directory -j$(CODE_CHECK_TEST_JOBS) --output-sync=target \
+		code-check-backend-tests \
+		code-check-userfront-tests \
+		code-check-userfront-e2e-tests \
+		code-check-adminfront-tests \
+		code-check-devfront-tests
+
+code-check-i18n:
+	@echo "==> i18n resource check"
+	@mkdir -p reports
+	node tools/i18n-scanner/index.js
+	node tools/i18n-scanner/report.js
+	@cat reports/i18n-report.txt
+
+code-check-i18n-values:
+	@echo "==> i18n value quality check"
+	@mkdir -p reports
+	node tools/i18n-scanner/value-check.js
+	@cat reports/i18n-value-report.txt
+
+code-check-go-lint:
+	@echo "==> go lint/format check"
+	@if command -v golangci-lint >/dev/null 2>&1; then \
+		cd backend && golangci-lint fmt -E gofmt -E gofumpt -d; \
+	elif command -v docker >/dev/null 2>&1; then \
+		docker run --rm \
+			-v "$$(pwd)/backend:/app" \
+			-w /app \
+			golangci/golangci-lint:v2.10.1 \
+			golangci-lint fmt -E gofmt -E gofumpt -d; \
+	else \
+		echo "ERROR: golangci-lint not found and docker is unavailable."; \
+		echo "Install golangci-lint v2.10.1 or Docker to match CI lint step."; \
+		exit 1; \
+	fi
+
+code-check-sync-userfront-locales:
+	@echo "==> sync userfront locales"
+	/bin/sh ./scripts/sync_userfront_locales.sh
+
+code-check-userfront-install:
+	@echo "==> install userfront dependencies"
+	cd userfront && flutter pub get
+
+code-check-userfront-lint:
+	@echo "==> userfront format/analyze"
+	cd userfront && dart format --output=none --set-exit-if-changed lib test
+	cd userfront && flutter analyze --no-fatal-warnings --no-fatal-infos
+
+code-check-front-lint:
+	@echo "==> adminfront biome lint/format check"
+	rm -rf adminfront/playwright-report adminfront/test-results
+	cd adminfront && npm ci
+	cd adminfront && npx biome check . --formatter-enabled=false --organize-imports-enabled=false
+	cd adminfront && npx biome check . --linter-enabled=false --organize-imports-enabled=false
+	@echo "==> devfront biome lint/format check"
+	rm -rf devfront/playwright-report devfront/test-results
+	cd devfront && npm ci
+	cd devfront && npx biome check . --formatter-enabled=false --organize-imports-enabled=false
+	cd devfront && npx biome check . --linter-enabled=false --organize-imports-enabled=false
+
+code-check-backend-tests:
+	@echo "==> backend tests"
+	cd backend && GOCACHE=/tmp/baron-sso-go-cache go test -v ./...
+
+code-check-userfront-tests:
+	@echo "==> userfront tests (isolated workspace)"
+	@tmp_dir="$$(mktemp -d /tmp/baron-sso-userfront-tests.XXXXXX)"; \
+	trap 'rm -rf "$$tmp_dir"' EXIT INT TERM; \
+	mkdir -p "$$tmp_dir/scripts"; \
+	cp scripts/sync_userfront_locales.sh "$$tmp_dir/scripts/"; \
+	cp -R locales "$$tmp_dir/locales"; \
+	if command -v rsync >/dev/null 2>&1; then \
+		rsync -a --delete \
+			--exclude '.dart_tool' \
+			--exclude 'build' \
+			--exclude '.pub-cache' \
+			--exclude '.flutter-plugins' \
+			--exclude '.flutter-plugins-dependencies' \
+			userfront/ "$$tmp_dir/userfront/"; \
+	else \
+		cp -R userfront "$$tmp_dir/userfront"; \
+		rm -rf "$$tmp_dir/userfront/.dart_tool" "$$tmp_dir/userfront/build"; \
+	fi; \
+	cd "$$tmp_dir" && /bin/sh ./scripts/sync_userfront_locales.sh; \
+	cd "$$tmp_dir/userfront" && flutter test --concurrency=$(FLUTTER_TEST_CONCURRENCY)
+
+code-check-adminfront-tests:
+	@echo "==> adminfront tests"
+	PLAYWRIGHT_WORKERS=$(PLAYWRIGHT_WORKERS) ./scripts/run_adminfront_ci_tests.sh adminfront-tests
+
+code-check-devfront-tests:
+	@echo "==> devfront tests"
+	@mkdir -p reports/devfront
+	@rm -rf reports/devfront/playwright-report reports/devfront/test-results
+	@status=0; \
+	(cd devfront && npm ci) || status=$$?; \
+	if [ $$status -eq 0 ]; then \
+		(cd devfront && $(PLAYWRIGHT_INSTALL_ALL)) || status=$$?; \
+	fi; \
+	if [ $$status -eq 0 ]; then \
+		(cd devfront && PLAYWRIGHT_WORKERS=$(PLAYWRIGHT_WORKERS) npm test) || status=$$?; \
+	fi; \
+	[ -d devfront/playwright-report ] && cp -R devfront/playwright-report reports/devfront/ || true; \
+	[ -d devfront/test-results ] && cp -R devfront/test-results reports/devfront/ || true; \
+	exit $$status
+
+code-check-userfront-e2e-tests:
+	@echo "==> userfront wasm playwright e2e tests (isolated workspace)"
+	@mkdir -p reports/userfront-e2e
+	@rm -rf reports/userfront-e2e/playwright-report reports/userfront-e2e/test-results
+	@tmp_dir="$$(mktemp -d /tmp/baron-sso-userfront-e2e-tests.XXXXXX)"; \
+	trap 'rm -rf "$$tmp_dir"' EXIT INT TERM; \
+	mkdir -p "$$tmp_dir/scripts"; \
+	cp scripts/sync_userfront_locales.sh "$$tmp_dir/scripts/"; \
+	cp -R locales "$$tmp_dir/locales"; \
+	if command -v rsync >/dev/null 2>&1; then \
+		rsync -a --delete \
+			--exclude '.dart_tool' \
+			--exclude 'build' \
+			--exclude '.pub-cache' \
+			--exclude '.flutter-plugins' \
+			--exclude '.flutter-plugins-dependencies' \
+			userfront/ "$$tmp_dir/userfront/"; \
+		rsync -a --delete \
+			--exclude 'node_modules' \
+			--exclude 'playwright-report' \
+			--exclude 'test-results' \
+			userfront-e2e/ "$$tmp_dir/userfront-e2e/"; \
+	else \
+		cp -R userfront "$$tmp_dir/userfront"; \
+		rm -rf "$$tmp_dir/userfront/.dart_tool" "$$tmp_dir/userfront/build"; \
+		cp -R userfront-e2e "$$tmp_dir/userfront-e2e"; \
+		rm -rf "$$tmp_dir/userfront-e2e/node_modules" "$$tmp_dir/userfront-e2e/playwright-report" "$$tmp_dir/userfront-e2e/test-results"; \
+	fi; \
+	status=0; \
+	(cd "$$tmp_dir" && /bin/sh ./scripts/sync_userfront_locales.sh) || status=$$?; \
+	if [ $$status -eq 0 ]; then \
+		(cd "$$tmp_dir/userfront-e2e" && npm ci) || status=$$?; \
+	fi; \
+	if [ $$status -eq 0 ]; then \
+		(cd "$$tmp_dir/userfront" && flutter build web --wasm --release) || status=$$?; \
+	fi; \
+	if [ $$status -eq 0 ]; then \
+		(cd "$$tmp_dir/userfront-e2e" && $(PLAYWRIGHT_INSTALL_CHROMIUM)) || status=$$?; \
+	fi; \
+	if [ $$status -eq 0 ]; then \
+		port="$$(node -e "const net=require('node:net'); const s=net.createServer(); s.listen(0,'127.0.0.1',()=>{console.log(s.address().port); s.close();});")"; \
+		echo "==> userfront-e2e using PORT=$$port"; \
+		(cd "$$tmp_dir/userfront-e2e" && PORT=$$port PLAYWRIGHT_WORKERS=$(PLAYWRIGHT_WORKERS) npm test) || status=$$?; \
+	fi; \
+	[ -d "$$tmp_dir/userfront-e2e/playwright-report" ] && cp -R "$$tmp_dir/userfront-e2e/playwright-report" reports/userfront-e2e/ || true; \
+	[ -d "$$tmp_dir/userfront-e2e/test-results" ] && cp -R "$$tmp_dir/userfront-e2e/test-results" reports/userfront-e2e/ || true; \
+	exit $$status

README.md

@@ -0,0 +1,571 @@
+# Baron SSO
+
+**Baron 로그인**은 화이트 라벨링된 가족사의 모든 소프트웨어 Auth를 총괄하는 사용자 인증/인가 허브입니다.
+
+## 📂 프로젝트 구조 (Project Structure)
+
+```
+baron_sso/
+├── backend/            # Go Fiber 애플리케이션
+│   ├── cmd/server/     # 진입점 (Entry point)
+│   ├── internal/       # 도메인, 핸들러, 저장소(Repository)
+│   └── Dockerfile
+├── userfront/          # Flutter 애플리케이션
+│   ├── src/            # UI 및 로직
+│   └── pubspec.yaml
+├── adminfront/         # React 기반 관리
+│   ├── src/            # UI 및 로직
+│   └── pubspec.yaml
+├── gateway/            # Nginx 기반 Gateway (UserFront 프록시)
+├── compose.ory-stack.yaml  # DB 서비스 (Postgres, ClickHouse)
+├── compose.infra.yaml  # DB 서비스 (Postgres, ClickHouse)
+├── docker-compose.yaml # 앱 서비스 (Front, Back)
+├── .env.sample         # 환경 설정 템플릿
+└── README.md           # 본 파일
+```
+* Ory Stack으로 모든 구성요소를 self-hosting 합니다.
+* Backend는 Go (Fiber)로 구성된 Ory Stack의 유일한 Command 전송 포인트입니다. 모든 Command는 ClickHouse로 강제 전송되며 Audit Log 시스템을 구성합니다.
+* Front는 Backend를 통해서만 연동하며 자체가 Ory Stack의 RP기도 합니다. 크게 3개 계층으로 분리됩니다.
+  * UserFront: Flutter로 구현된 커스텀 UI를 통해 매끄러운 사용자 경험을 보장합니다.
+    * 로그인 : 비밀번호, SMS, QR 스캔 등의 수단으로 로그인 가능
+    * 향후 모바일 앱 지원으로 인증 Push 승인 등 MFA 확장 (예정)
+    * 정보변경, 앱 연동 이력 확인 등 개인화 기능
+    * 사용 가능한 앱 리스트 (예정)
+  * AdminFront: 사용자 관리 등 Admin 기능
+  * DevFront: RP 관리 등 개발자 기능
+
+
+## 🏗 아키텍처 (Architecture)
+
+### 0. Ory Stack
+- Ory Kratos: 사용자 인증/계정 관리(Identity).
+- Ory Hydra: OAuth2/OIDC 발급 및 토큰 관리.
+- Ory Keto: 권한/정책 기반 접근 제어.
+- Oathkeeper: 인증/인가 프록시 및 라우팅 게이트웨이.
+
+```mermaid
+flowchart
+    subgraph Edge
+      OK["Oathkeeper<br/>(Only Public Entry)"]
+    end
+
+    subgraph App
+      BE["Backend<br/>(Only Upstream)"]
+    end
+
+    subgraph OryStack
+      KR[Kratos]
+      HY[Hydra]
+      KE[Keto]
+      KR --- HY --- KE
+    end
+    BE -->|Command| OryStack
+    OK -->|Query| KR
+    OK -->|Query| HY
+    OK -->|Query| KE
+```
+
+### 1. Backend (Go Fiber)
+- **Language**: Go 1.25+
+- **Framework**: Fiber v2.25+
+- **Database**:
+  - **ClickHouse**: 감사 로그 (고성능 데이터 수집)
+  - **PostgreSQL**: 메타데이터 저장소 (Primary)
+- **Features**:
+  - 인증용 SMS 발송 등 Ory-Stack으로 구현 어려운 부분 직접 구현
+  - `POST /api/v1/audit`: 감사 로그 수집 API
+  - userfront가 바라보는 backend
+
+### 2. UserFront(Flutter Web/App)
+- **Framework**: Flutter 3.38.0+
+- **Key Packages**: `flutter_riverpod`, `go_router`
+- **Features**:
+  - 탭 기반 로그인 UI (비밀번호 기반 / 링크 기반 / QR 기반 등)
+
+### 3. adminfront(Web)
+- **Framework**: Vite, React 19+, Shadcn/ui 등
+- **Features**:
+  - 사용자 관리, 권한 부여 등 관리자 기능
+  - 앱 별 사용량(호출량) 등 통계
+  - 핵심 Audit 대상 
+
+### 4. devfront(Web)
+- **Framework**: Vite, React 19+, Shadcn/ui 등
+- **Features**:
+  - RP 등록 및 관리
+  - RP별 Consent 관리
+
+
+### 4. 주요 시나리오 (Core Scenarios)
+1.  **Same Browser SSO**: Baron 로그인 서비스에 로그인된 상태에서 런처를 통해 타 앱/서비스로 이동 (자동 로그인).
+  1.1. 단 약관동의(Consent) 이력이 없으면 Consent 단계로 이동
+2.  **Cross-Device Auth**: 이메일 SMS 등의 수단으로 링크를 전달받고 해당 링크를 사용자가 클릭하면 최초 로그인 요청한 세션이 활성화
+  2.1 향후 App Push 등 2차 인증 강화수단 검토 필요
+3.  **QR Login**: 최초 진입 시 사전 로그인되어 있는 웹/앱을 이용해 QR 코드를 스캔하여, QR코드가 로딩된 Device를 로그인 상태로 전환
+
+### 5. Headless Login ID/Password Flow
+- 목적: headless login을 허용한 클라이언트가 자체 로그인 화면에서 `ID/password`를 수집하되, Baron Backend가 OIDC 로그인 흐름만 계속 진행하고 RP에는 `sessionJwt`를 직접 넘기지 않습니다.
+- 대상 엔드포인트: `POST /api/v1/auth/headless/password/login`
+- 관련 구현:
+  - `backend/internal/handler/auth_handler.go`
+  - `backend/internal/domain/hydra_models.go`
+  - `backend/internal/handler/auth_handler_login_test.go`
+
+#### 호출 순서
+1. RP 브라우저가 Hydra Public의 `/oauth2/auth`를 호출해 OIDC 인증을 시작합니다.
+2. Hydra가 로그인 단계로 넘긴 `login_challenge`를 RP가 확보합니다.
+3. RP backend가 자기 private key로 `client_assertion` JWT를 서명합니다.
+4. RP backend가 Baron Backend의 `POST /api/v1/auth/headless/password/login`에 `client_id`, `client_assertion`, `login_challenge`, `loginId`, `password`를 전송합니다.
+5. Baron Backend가 Hydra login request와 RP 설정을 검증한 뒤 Kratos sign-in 및 Hydra login accept를 수행합니다.
+6. 성공 시 Baron Backend는 `redirectTo`만 반환하고, RP 브라우저는 그 URL로 이동해 OIDC 흐름을 이어갑니다.
+
+#### 요청 바디
+```json
+{
+  "client_id": "headless-login-client",
+  "client_assertion": "<signed-jwt>",
+  "login_challenge": "<hydra-login-challenge>",
+  "loginId": "employee001",
+  "password": "secret"
+}
+```
+
+#### 성공 응답
+```json
+{
+  "status": "ok",
+  "provider": "ory",
+  "redirectTo": "https://rp.example.com/callback?code=..."
+}
+```
+
+#### RP / Hydra 선행 조건
+- Hydra login request의 `client.client_id`와 요청 바디의 `client_id`가 반드시 같아야 합니다.
+- client가 headless login 선행 조건을 만족해야 합니다.
+  - `headless_token_endpoint_auth_method == "private_key_jwt"` 또는 top-level `token_endpoint_auth_method == "private_key_jwt"`
+  - `headless_jwks_uri`가 존재해야 합니다.
+  - inline `headless_jwks`는 더 이상 지원하지 않습니다.
+- `headless_login_enabled == true`가 필요합니다.
+- `metadata.status == "inactive"`인 client는 차단됩니다.
+
+#### `client_assertion` 규칙
+- 구현상 `client_assertion`은 현재 필수입니다.
+- 허용 서명 알고리즘:
+  - `RS256`, `RS384`, `RS512`
+  - `PS256`, `PS384`, `PS512`
+  - `ES256`, `ES384`, `ES512`
+  - `EdDSA`
+- JWT claim의 `iss`와 `sub`는 모두 `client_id`와 같아야 합니다.
+- `exp`는 현재 시각 이후여야 합니다.
+- `nbf`, `iat`가 있으면 미래 시각이면 안 됩니다.
+- `aud`는 다음 둘 중 하나와 일치해야 합니다.
+  - `https://<backend-origin>/api/v1/auth/headless/password/login`
+  - `/api/v1/auth/headless/password/login`
+- 서명 검증용 public key는 `headless_jwks_uri`에서만 읽습니다.
+
+#### 내부 JWKS 캐시 정책
+- Baron Backend는 `headless_jwks_uri`를 직접 외부 스펙으로 저장하고, 실제 JWKS 문서는 내부 캐시에 저장해 사용합니다.
+- 등록/수정 이후에는 내부 캐시 동기화를 시도하고, 성공/실패 상태를 DevFront에서 확인할 수 있습니다.
+- 로그인 시 재조회는 다음 조건으로 제한합니다.
+  - 캐시에 `kid`가 없을 때
+  - `kid`는 있지만 서명 검증이 실패할 때
+  - 캐시 TTL이 만료되었을 때
+- 그 외에는 내부 캐시를 사용합니다.
+- 백그라운드 worker가 TTL보다 짧은 주기로 `jwksUri`를 선제 점검해 첫 사용자 실패를 줄입니다.
+
+#### DevFront 운영 액션
+- Settings > `Public Key Registration` 카드에서 다음 정보를 확인할 수 있습니다.
+  - 최근 JWKS 캐시 갱신 시각
+  - 최근 검증 성공 시각
+  - 최근 에러와 연속 실패 횟수
+  - 현재 cached `kid` 목록
+  - 파싱된 key summary
+    - `kid`
+    - `kty`
+    - `use`
+    - `alg`
+    - RSA key의 `n` preview (앞/뒤 일부만 표시)
+- 수동 운영 액션:
+  - `Refresh JWKS Cache`
+  - `Revoke JWKS Cache`
+- RP가 키를 교체했으면 실제 트래픽 전에 `Refresh JWKS Cache`를 먼저 호출하는 것을 권장합니다.
+
+#### 일반 로그인과의 차이
+- `POST /api/v1/auth/password/login`
+  - UserFront 기본 비밀번호 로그인용입니다.
+  - `login_challenge`가 없으면 `sessionJwt`를 반환합니다.
+  - `login_challenge`가 있으면 Hydra accept 후 `redirectTo`를 반환합니다.
+- `POST /api/v1/auth/headless/password/login`
+  - headless login 허용 클라이언트 전용입니다.
+  - `client_assertion` 검증이 추가됩니다.
+  - 항상 `sessionJwt` 없이 `redirectTo`만 반환합니다.
+
+#### 실패 패턴 요약
+- `400 bad_request`
+  - 필수 필드 누락
+  - `client_assertion` 누락
+- `401 invalid_client_assertion`
+  - `jwksUri` 조회 실패
+  - 서명 불일치
+  - `aud`/`iss`/`sub`/`exp` 검증 실패
+- `401 invalid_client_assertion` with explicit message
+  - `Headless login requires jwksUri. Inline jwks is not supported.`
+  - `Configured jwksUri returned no keys for headless login.`
+  - `Failed to refresh headless login jwks from jwksUri.`
+- `403 forbidden`
+  - `client_id` 불일치
+  - `headless_login_enabled` 미설정
+  - inactive client
+- `401 password_or_email_mismatch`
+  - 사용자 인증 실패
+
+
+### 전체 연결 구조도
+
+```mermaid
+flowchart TD
+    subgraph Clients ["External Clients"]
+        AF[adminfront]
+        DF[devfront]
+        UF["userfront"]
+        DS["일반SW"]
+    end
+
+    subgraph AppService ["Control Plane"]
+        BE["Backend (Command/Audit Controller)"]
+    end
+
+    subgraph OryBundle ["Ory Deployment Stack"]
+        direction TB
+        OK["Oathkeeper (Public Proxy/OIDC)"]
+        
+        subgraph OryEngines ["Ory Services"]
+            direction LR
+            HY["Hydra"]
+            KR["Kratos"]
+            KE["Keto"]
+        end
+        
+        ICH[(Internal Clickhouse)]
+        
+        %% Internal Flow within Bundle
+        OK -->|Routing/Queries| OryEngines
+        OK -.->|Access/Usage Log| ICH
+    end
+
+    subgraph AuditDB ["Audit Storage"]
+        ECH[(External Clickhouse)]
+    end
+
+    %% Key Command Path
+    AF & DF & UF & DS ==>|Actions / Commands| BE
+    
+    %% Backend Responsibilities
+    BE -->|Admin/State Control| OryEngines
+    BE -.->|Mandatory Audit Log| ECH
+
+    %% Connection Note (Hidden flow mentioned in logic)
+    %% OK is technically the entry for OIDC, but removed as per request
+
+    %% Styles
+    style OryBundle fill:#f8f9fa,stroke:#333,stroke-width:2px
+    style BE fill:#bbf,stroke:#333,stroke-width:2px
+    style ECH fill:#fdd,stroke:#333
+    style ICH fill:#dfd,stroke:#333
+    style OK fill:#f9f,stroke:#333
+    style OryEngines fill:#fff,stroke:#999,stroke-dasharray: 5 5
+```
+
+
+Kratos가 사용자 SoT이며 Hydra는 순수 OIDC 토큰 엔진입니다. 비지니스로직은 Backend를 통해서, 기본 인증 로직은 Ory Stack을 통해 진행됩니다.
+
+---
+
+## 🚀 시작하기 (Getting Started)
+
+### 사전 요구사항 (Prerequisites)
+- Docker & Docker Compose
+- Flutter SDK (로컬 개발용, 3.38.0+)
+- Go (로컬 백엔드 개발용)
+
+### 환경 설정 (Environment Setup)
+1. 예제 환경 설정 파일을 복사합니다.
+   ```bash
+   cp .env.sample .env
+   ```
+2. `.env`를 작성합니다. (아래 작성 규칙 필수)
+
+### `.env` 작성 규칙 (중요)
+- `KEY=value` 한 줄만 사용하고, **값 뒤에 같은 줄 주석을 붙이지 않습니다.**
+- 주석이 필요하면 반드시 **윗줄에 별도 주석 라인**으로 작성합니다.
+- URL 값 끝에 공백이 들어가면 Hydra/Kratos 기동 실패로 이어질 수 있습니다.
+
+잘못된 예:
+```env
+USERFRONT_URL=https://sso.example.com # 이렇게 같은 줄 주석 금지
+```
+
+올바른 예:
+```env
+# UserFront 공개 URL
+USERFRONT_URL=https://sso.example.com
+```
+
+### `.env` 핵심 변수 가이드
+- `IDP_PROVIDER`: 기본 `ory`
+- `USERFRONT_URL`: 브라우저 기준 공개 도메인 (예: `https://sso.example.com`)
+- `OATHKEEPER_PUBLIC_URL`: 보통 `${USERFRONT_URL}`
+- `HYDRA_PUBLIC_URL`: 보통 `${OATHKEEPER_PUBLIC_URL}/oidc`
+- `KRATOS_BROWSER_URL`: 보통 `${OATHKEEPER_PUBLIC_URL}/auth`
+- `KRATOS_UI_URL`: UserFront UI URL (로컬 예: `http://localhost:5000`)
+- `ADMINFRONT_CALLBACK_URLS`: 콤마 구분 콜백 목록 (예: `http://localhost:5173/auth/callback`)
+- `DEVFRONT_CALLBACK_URLS`: 콤마 구분 콜백 목록 (예: `http://localhost:5174/callback`)
+  - 주의: callback URL 끝에 `/`가 붙으면 `make validate-auth-config`에서 실패 처리됩니다.
+- `KRATOS_ALLOWED_RETURN_URLS_EXTRA`: 추가 허용 return URL (선택)
+  - 빈값: `[]`
+  - 다중값: `["https://a.example.com/callback","https://b.example.com/callback"]` 또는 `https://a.example.com/callback,https://b.example.com/callback`
+- `CLIENT_LOG_DEBUG`: 클라이언트 로그 디버그 모드 강제 (기본: 비운영 `true`, 운영 `false`)
+  - 운영(`APP_ENV=production|prod`)에서 `true|1|on|yes` 설정 시 `INFO/DEBUG` 클라이언트 로그 수집 허용
+  - 미설정(기본) 시 운영에서는 `WARN/ERROR`만 수집
+- `BACKEND_LOG_LEVEL`: Backend `slog` 레벨 override (선택)
+  - 허용 값: `debug`, `info`, `warn`, `error`
+  - 미설정 시 `APP_ENV` 기준으로 결정됩니다.
+    - `dev|local|development`: `debug`
+    - 그 외(`stage`, `production`, `prod` 등): `info`
+- `USERFRONT_DEBUG_LOG`: UserFront 측 디버그 로그 fallback 플래그
+  - `CLIENT_LOG_DEBUG`가 없을 때만 UserFront에서 대체로 참조
+
+### 클라이언트 로그 정책 (중요)
+- 기본 원칙: 운영 환경에서는 민감정보 보호를 우선하며, 과도한 로그 수집을 제한합니다.
+- 환경별 동작:
+  - 비운영(`dev/local/stage` 등): 디버그 로그 허용 (`INFO/DEBUG/WARN/ERROR`)
+  - 운영(`production/prod`) + `CLIENT_LOG_DEBUG` 미설정: `WARN/ERROR`만 수집
+  - 운영(`production/prod`) + `CLIENT_LOG_DEBUG=true`: 디버그 로그 허용
+- 민감정보는 환경과 무관하게 마스킹합니다.
+  - 예: `password`, `newPassword`, `token`, `authorization`, `cookie`, `sessionJwt`
+  - 문자열 패턴(`token=...`, `authorization:...`, JSON body 내 민감 key)도 마스킹
+- 상세 정책 문서: `docs/client-log-policy.md`
+
+### Backend 로그 정책 (중요)
+- Backend 서버 로그는 `APP_ENV` 기준으로 기본 레벨이 정해집니다.
+  - `dev|local|development`: `debug`
+  - 그 외(`stage`, `production`, `prod` 등): `info`
+- 운영/스테이징에서 장애 분석이 필요할 때만 `BACKEND_LOG_LEVEL=debug`를 일시적으로 설정하는 것을 권장합니다.
+- headless login 같은 경로의 상세 진단 필드는 `debug` 레벨에서만 추가로 남습니다.
+- 상세 정책 문서: `docs/backend-log-policy.md`
+
+### `.env` 작성 후 권장 점검
+```bash
+make validate-auth-config
+```
+위 검증은 callback/allowed_return_urls/게이트웨이 매핑 규칙을 점검하고 `.generated/auth-config.env`를 생성합니다.
+
+### 전체 스택 실행 (Running the Stack)
+
+#### 1. 네트워크 생성 (최초 1회)
+Ory Stack과 애플리케이션 간 통신을 위한 도커 네트워크를 생성합니다.
+```bash
+# ory-net은 bridge 모드로 생성
+docker network create -d bridge ory-net
+docker network create hydranet
+docker network create kratosnet
+docker network create public_net #서비스용
+```
+
+#### 2. 인프라 및 Ory Stack 실행
+데이터베이스와 Ory 서비스(Kratos, Hydra, Keto 등)를 실행합니다.
+```bash
+# 권장: Make 실행 (인증 설정 검증 포함)
+make up-dev
+```
+
+#### 3. 애플리케이션 실행
+userfront와 backend 서비스를 실행합니다.
+```bash
+make up-app
+```
+(또는 전체 스택 한번에 실행: `make up-all`)
+
+### Make 기반 인증 설정 검증 (권장)
+`up-*` 타깃은 실행 전 인증 리다이렉트 설정을 자동 검증합니다.
+
+```bash
+# 1) 인증 설정 생성
+make build-auth-config
+
+# 2) 정적 검증 (callback / allowed_return_urls / 게이트웨이 매핑)
+make validate-auth-config
+
+# 3) 배선 + (가능 시) 런타임 Hydra client 검증
+make verify-auth-config
+```
+
+- 생성 파일: `.generated/auth-config.env` (compose 실행 시 자동 주입)
+- 게이트웨이 경유 환경은 URL 문자열 완전일치 대신 매핑 유효성(`direct_match` / `mapped_match`) 기준으로 검증합니다.
+- 관련 정책 문서: `docs/oidc_redirect_mapping_validation_policy.md`
+
+### 권장 실행 순서
+```bash
+cp .env.sample .env
+# .env 편집
+make validate-auth-config
+make up-dev
+make up-app
+```
+
+직접 Compose를 사용하려면 다음처럼 env 파일을 함께 주입하세요.
+```bash
+docker compose --env-file .env --env-file .generated/auth-config.env -f compose.infra.yaml -f compose.ory.yaml up -d
+docker compose --env-file .env --env-file .generated/auth-config.env -f docker-compose.yaml up -d
+```
+
+- **gateway (UserFront 프록시)**: http://localhost:5000 접속
+- **backend**: http://localhost:3000 (API)
+- **ClickHouse**: http://localhost:8123
+- **Kratos Public**: http://localhost:4433
+- **Hydra Public**: http://localhost:4444
+- **Kratos UI (UserFront)**: http://localhost:5000
+
+### MCP 서버 (Hydra/Kratos/Keto)
+MCP 서버는 기존 Hydra/Kratos에 연결하며 별도 Ory 스택이나 포트를 추가로 띄우지 않습니다.  
+프로덕션에서는 실행하지 않도록 `mcp` 프로파일을 로컬에서만 켜세요.
+
+```bash
+docker compose -f compose.ory.yaml --profile mcp up -d hydra-mcp-server kratos-mcp-server keto-mcp-server
+```
+
+- MCP 서버는 stdio 기반이라 외부 포트를 열지 않습니다.
+- 최초 실행시거나 빌드된 이미지가 없으면 `docker compose -f mcp/compose.mcp.ory.yaml build' 후에 사용 가능합니다
+
+```toml
+[mcp_servers.kratos-mcp]
+command = "docker"
+args = ["compose", "-f", "mcp/compose.mcp.ory.yaml", "run", "--rm", "--no-deps", "kratos-mcp-server"]
+
+[mcp_servers.kratos-mcp.env]
+KRATOS_ADMIN_URL = "http://kratos:4434"
+
+[mcp_servers.hydra-mcp]
+command = "docker"
+args = ["compose", "-f", "mcp/compose.mcp.ory.yaml", "run", "--rm", "--no-deps", "hydra-mcp-server"]
+
+[mcp_servers.hydra-mcp.env]
+HYDRA_PUBLIC_URL = "http://hydra:4444"
+HYDRA_ADMIN_URL = "http://hydra:4445"
+
+[mcp_servers.keto-mcp]
+command = "docker"
+args = ["compose", "-f", "mcp/compose.mcp.ory.yaml", "run", "--rm", "--no-deps", "keto-mcp-server"]
+
+[mcp_servers.keto-mcp.env]
+KETO_READ_URL = "http://keto:4466"
+KETO_WRITE_URL = "http://keto:4467"
+```
+
+## 🌐 i18n 구조 (간략)
+- **Source of Truth**: `locales/template.toml`이 전체 키의 기준이며 `locales/ko.toml`, `locales/en.toml`과 항상 동기화합니다.
+- **React(Admin/Dev)**: `adminfront/src/lib/i18n.ts`, `devfront/src/lib/i18n.ts`에서 `t(key, fallback, vars)`로 사용하고 TOML을 `?raw`로 로드합니다.
+- **Flutter(User)**: `userfront/lib/i18n.dart`에서 `tr(key, fallback, params)` 사용. `locales/*.toml`을 `tools/i18n-scanner/gen-flutter-i18n.js`로 `userfront/lib/i18n_data.dart`에 사전 생성합니다.
+- **UserFront 동기화 규칙**: `locales/*.toml`을 수정한 뒤에는 반드시 `./scripts/sync_userfront_locales.sh`를 실행해 `userfront/assets/translations/*.toml`과 런타임 번역 리소스를 동기화합니다.
+- **검증**: `node tools/i18n-scanner/index.js`로 코드-키-로케일 동기화 상태를 점검합니다.
+
+## 🧪 Code Check CI
+워크플로우 파일: `.gitea/workflows/code_check.yml`
+
+### 트리거
+- `push` (`dev` 브랜치)
+- `pull_request` (`dev` 대상)
+- `workflow_dispatch` (수동 실행)
+
+### workflow_dispatch 입력값
+- `run_lint`: Go/Flutter lint 실행 여부
+- `run_backend_tests`: backend 테스트 실행 여부
+- `run_userfront_tests`: userfront 테스트 실행 여부
+- `run_userfront_e2e_tests`: userfront WASM Playwright E2E 실행 여부
+- `run_adminfront_tests`: adminfront 테스트 실행 여부
+- `run_devfront_tests`: devfront 테스트 실행 여부
+
+### 실행 잡
+- `lint`
+- `backend-tests`
+- `userfront-tests`
+- `userfront-e2e-tests`
+- `adminfront-tests`
+- `devfront-tests`
+
+### 프런트 테스트 브라우저 프리비저닝 정책
+- `userfront-tests`
+  - `flutter test`(VM)만 실행
+  - `locale_storage` 정책 테스트는 엔진 단위로 통합되어 별도 브라우저 실행이 필요하지 않음
+- `adminfront-tests`, `devfront-tests`
+  - Playwright 기반 테스트
+  - `npx playwright install --with-deps`로 브라우저/OS 의존성을 사전 설치
+
+### 실패 보고서 확인 방법
+테스트가 실패하면 다음이 자동 생성됩니다.
+- Job Summary: 실패 원인 요약(Markdown) 즉시 확인
+- Artifact: 상세 로그/리포트 다운로드
+  - `backend-test-failure-report`
+  - `userfront-test-failure-report`
+  - `adminfront-test-failure-report`
+  - `devfront-test-failure-report`
+
+### userfront `locale_storage` 테스트 정책
+- `locale_storage_platform_test.dart`는 `LocaleStorageEngine` 기반 정책 테스트로 통합되었습니다.
+- 일반 `flutter test`(VM) 실행에 포함되며, 브라우저 전용 `kIsWeb` 케이스를 사용하지 않습니다.
+- 단일 파일만 확인하려면 다음 명령을 사용합니다.
+  - `flutter test test/locale_storage_platform_test.dart`
+
+### userfront WASM Playwright E2E
+- 워크스페이스: `userfront-e2e/`
+- 빌드+실행:
+  - `cd userfront-e2e && npm run test:wasm`
+- 빌드 결과가 이미 있을 때:
+  - `cd userfront-e2e && npm test`
+- Makefile 타깃:
+  - `make code-check-userfront-e2e-tests`
+- 전수 인벤토리:
+  - `https://gitea.hmac.kr/baron/baron-sso/wiki/UserFront-WASM-E2E-Inventory.-`
+
+### 로컬 개발 (Manual)
+Docker 없이는 개발할 수 없지만 Backend 및 [user/admin/dev]Front 코드는 개발모드로 수정하며 개발가능.
+백그라운드로 infra 및 ory stack이 구동중이라는 가정
+
+**Backend:**
+```bash
+cd backend
+go mod tidy
+go run cmd/server/main.go
+```
+
+**userfront:**
+```bash
+cd userfront
+flutter pub get
+flutter run -d chrome
+# 정책: 웹 빌드는 기본적으로 WASM 사용
+flutter build web --wasm
+```
+
+**adminfront:**
+```bash
+cd adminfront
+npm install
+npm run dev
+```
+
+**devfront:**
+```bash
+cd devfront
+npm install
+npm run dev
+```
+---
+
+
+## 버그 대응 대원칙 (필수)
+- 모든 버그 수정은 반드시 **재현 테스트를 먼저 작성**합니다. (Failing test first)
+- 재현 테스트 없이 코드만 먼저 고치는 행위를 금지합니다.
+- 수정 후에는 **해당 재현 테스트가 통과할 때까지 반복**해서 원인 분석/수정/검증을 수행합니다.
+- “테스트 통과”는 최소 기준입니다. 실제 재현 시나리오(로그인, 새로고침, 리다이렉트 등)까지 확인한 뒤에만 이슈를 종료합니다.
+- 관련 변경이 발생하면 테스트 문서(`docs/test-plan/*`, `docs/trouble-shooting/*`)를 함께 업데이트합니다.

README_en.md

@@ -0,0 +1,110 @@
+# Baron SSO
+
+**Baron SSO** is a white-labeled User Authentication Hub and Unified Launcher.
+It leverages **Descope** for secure, passwordless authentication (Enchanted Link / Magic Link) and provides a custom Flutter UI for a seamless user experience. A Go (Fiber) backend manages Audit Logs via ClickHouse.
+
+## 🏗 Architecture
+
+### 1. Frontend (Flutter Web)
+- **Framework**: Flutter 3.38.0+
+- **Organization**: `kr.co.baroncs`
+- **Key Packages**: `descope`, `flutter_riverpod`, `go_router`
+- **Features**:
+  - Login UI with Tabs (Email / SMS)
+  - Descope SDK Integration (Enchanted Link, Magic Link)
+
+### 2. Backend (Go Fiber)
+- **Language**: Go 1.25+
+- **Framework**: Fiber v2.25+
+- **Database**:
+  - **ClickHouse**: Audit Logs (High performance ingestion)
+  - **PostgreSQL**: Metadata storage (Primary)
+- **Features**:
+  - `POST /api/v1/audit`: Endpoint to ingest audit logs.
+
+### 3. Infrastructure (Docker)
+- **Services**: `postgres`, `clickhouse` (defined in `compose.infra.yaml`)
+- **App**: `userfront`, `backend` (defined in `docker-compose.yaml`)
+
+---
+
+## 🚀 Getting Started
+
+### Prerequisites
+- Docker & Docker Compose
+- Flutter SDK (for local development, 3.38.0+)
+- Go (for local backend development)
+
+### Environment Setup
+1. Copy the sample environment file.
+   ```bash
+   cp .env.sample .env
+   ```
+
+2. Set the **IDP priority and Ory admin endpoints**. The default is Ory first with Descope as fallback.
+   ```env
+   IDP_PROVIDER=ory,descope
+   KRATOS_ADMIN_URL=http://kratos:4434
+   HYDRA_ADMIN_URL=http://hydra:4445
+   ```
+
+### Running the Stack
+
+#### 1. Start Infrastructure (Databases)
+Start the persistent data layer first.
+```bash
+docker compose -f compose.infra.yaml up -d
+```
+
+#### 2. Start Applications
+Start the userfront and backend services.
+```bash
+docker compose up
+```
+
+- **userfront**: Accessible at http://localhost:5000
+- **backend**: API active at http://localhost:3000
+- **ClickHouse**: http://localhost:8123
+
+### Local Development (Manual)
+If you prefer running without Docker for code editing:
+
+**Backend:**
+```bash
+cd backend
+go mod tidy
+go run cmd/server/main.go
+```
+
+**userfront:**
+```bash
+cd userfront
+flutter pub get
+flutter run -d chrome
+```
+
+---
+
+## 📂 Project Structure
+
+```
+baron_sso/
+├── backend/            # Go Fiber Application
+│   ├── cmd/server/     # Entry point
+│   ├── internal/       # Domain, Handlers, Repository
+│   └── Dockerfile
+├── userfront/         # Flutter Application
+│   ├── lib/            # UI & Logic
+│   └── pubspec.yaml
+├── compose.infra.yaml  # DB Services (Postgres, ClickHouse)
+├── docker-compose.yaml # App Services
+├── .env.sample         # Env Config Template
+└── README.md           # This file
+```
+
+## 📝 Status & Roadmap
+- [x] **Phase 1**: Initial Setup & Architecture (Done)
+- [x] **Phase 2**: Backend Audit API (Done)
+- [x] **Phase 3**: Frontend Login UI & Descope Auth Logic (Done)
+- [ ] **Phase 4**: Connect Frontend to Audit API (Todo)
+- [ ] **Phase 5**: Dashboard & Unified Launcher (Todo)

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?

adminfront/Dockerfile

@@ -0,0 +1,20 @@
+FROM node:lts
+
+WORKDIR /app
+
+# 패키지 정보 복사 및 의존성 설치
+COPY package*.json ./
+RUN npm ci
+
+# 프로덕션 서빙을 위한 serve 패키지 글로벌 설치
+RUN npm install -g serve
+
+# 소스 코드 복사
+COPY . .
+
+# Vite 기본 포트
+EXPOSE 5173
+
+# 실행 스크립트: APP_ENV에 따라 개발 서버 또는 빌드 후 서빙
+RUN chmod +x ./scripts/runtime-mode.sh
+CMD ["sh", "./scripts/runtime-mode.sh"]

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 도입 및 폼/테이블 컴포넌트 연결

adminfront/biome.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "style": {
+        "useEnumInitializers": "off"
+      },
+      "a11y": {
+        "noLabelWithoutControl": "off"
+      }
+    }
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "files": {
+    "ignore": [
+      "dist",
+      "node_modules",
+      "tsconfig*.json",
+      "test-results",
+      "playwright-report"
+    ]
+  }
+}

adminfront/i18n-scan-output.txt

@@ -0,0 +1,474 @@
+
+> adminfront@0.0.0 i18n-scan
+> cd .. && node tools/i18n-scanner/index.js && node tools/i18n-scanner/report.js
+
+
+ko.toml에 없는 키
+- ui.admin.users.list.table.msg.admin.users.detail.history_desc
+- ui.admin.users.list.table.msg.admin.users.detail.no_history
+- ui.admin.users.list.table.msg.admin.users.detail.no_tenants
+- ui.admin.users.list.table.msg.admin.users.detail.reset_auto_desc
+- ui.admin.users.list.table.msg.admin.users.detail.security_desc
+- ui.admin.users.list.table.msg.admin.users.detail.tenant_slug_help
+- ui.admin.users.list.table.msg.admin.users.detail.tenants_desc
+- ui.admin.users.list.table.msg.common.copied
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.allowed_algorithms_tooltip
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.missing_algorithm_badge
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.missing_algorithm_reason
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.missing_algorithms_help
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.missing_algorithms_title
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.parsed_keys_empty
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.parsed_keys_help
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.unsupported_algorithm_reason
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.unsupported_algorithms_help
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.unsupported_algorithms_title
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_empty
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_help
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_refresh_failed
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_refreshed
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_revoke_confirm
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_revoke_failed
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_revoked
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.validation.missing_parsed_algorithms
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.validation.unsupported_parsed_algorithms
+- ui.admin.users.list.table.ui.admin.users.create.form.is_login_id
+- ui.admin.users.list.table.ui.admin.users.detail.form.email
+- ui.admin.users.list.table.ui.admin.users.detail.form.is_login_id
+- ui.admin.users.list.table.ui.admin.users.detail.form.role_rp_admin
+- ui.admin.users.list.table.ui.admin.users.detail.form.tenant_slug
+- ui.admin.users.list.table.ui.admin.users.detail.generate_button
+- ui.admin.users.list.table.ui.admin.users.detail.history_title
+- ui.admin.users.list.table.ui.admin.users.detail.manual_confirm
+- ui.admin.users.list.table.ui.admin.users.detail.manual_password
+- ui.admin.users.list.table.ui.admin.users.detail.password_done
+- ui.admin.users.list.table.ui.admin.users.detail.reset_auto
+- ui.admin.users.list.table.ui.admin.users.detail.reset_execute
+- ui.admin.users.list.table.ui.admin.users.detail.reset_manual
+- ui.admin.users.list.table.ui.admin.users.detail.save_tenants
+- ui.admin.users.list.table.ui.admin.users.detail.tabs.info
+- ui.admin.users.list.table.ui.admin.users.detail.tabs.security
+- ui.admin.users.list.table.ui.admin.users.detail.tabs.tenants
+- ui.admin.users.list.table.ui.admin.users.detail.updated_at
+- ui.admin.users.list.table.ui.common.generate
+- ui.admin.users.list.table.ui.common.status.blocked
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.allowed_algorithms_info
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.auth_method
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.auth_method_client_secret_basic
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.auth_method_none
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.auth_method_private_key_jwt
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.cached_at
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.error
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.expires_at
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.failures
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.kids
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.last_checked_at
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.last_success
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.parsed_key_n
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.parsed_keys
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.status
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.title
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.uri
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.guide_toggle
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.headless_disabled
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.headless_enabled
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.jwks_inline
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.jwks_inline_placeholder
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.request_object_alg
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.request_object_alg_placeholder
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.revoke_cache
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.source
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.source_uri
+- ui.admin.users.list.table.ui.dev.clients.general.security.trusted_rp_enable
+- ui.admin.users.list.table.ui.dev.clients.general.security.trusted_rp_enable_help
+- ui.admin.users.list.table.ui.dev.clients.help.docs_body
+- ui.admin.users.list.table.ui.dev.clients.help.subtitle
+- ui.admin.users.list.table.ui.dev.clients.registry.description
+- ui.admin.users.list.table.ui.dev.clients.scopes.email
+- ui.admin.users.list.table.ui.dev.clients.scopes.openid
+- ui.admin.users.list.table.ui.dev.clients.scopes.profile
+- ui.admin.users.list.table.ui.dev.session.refresh
+- ui.admin.users.list.table.ui.dev.session.refreshing
+
+en.toml에 없는 키
+- ui.admin.users.list.table.msg.admin.users.detail.history_desc
+- ui.admin.users.list.table.msg.admin.users.detail.no_history
+- ui.admin.users.list.table.msg.admin.users.detail.no_tenants
+- ui.admin.users.list.table.msg.admin.users.detail.reset_auto_desc
+- ui.admin.users.list.table.msg.admin.users.detail.security_desc
+- ui.admin.users.list.table.msg.admin.users.detail.tenant_slug_help
+- ui.admin.users.list.table.msg.admin.users.detail.tenants_desc
+- ui.admin.users.list.table.msg.common.copied
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.allowed_algorithms_tooltip
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.missing_algorithm_badge
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.missing_algorithm_reason
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.missing_algorithms_help
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.missing_algorithms_title
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.parsed_keys_empty
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.parsed_keys_help
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.unsupported_algorithm_reason
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.unsupported_algorithms_help
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.unsupported_algorithms_title
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_empty
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_help
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_refresh_failed
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_refreshed
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_revoke_confirm
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_revoke_failed
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_revoked
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.validation.missing_parsed_algorithms
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.validation.unsupported_parsed_algorithms
+- ui.admin.users.list.table.ui.admin.users.create.form.is_login_id
+- ui.admin.users.list.table.ui.admin.users.detail.form.email
+- ui.admin.users.list.table.ui.admin.users.detail.form.is_login_id
+- ui.admin.users.list.table.ui.admin.users.detail.form.role_rp_admin
+- ui.admin.users.list.table.ui.admin.users.detail.form.tenant_slug
+- ui.admin.users.list.table.ui.admin.users.detail.generate_button
+- ui.admin.users.list.table.ui.admin.users.detail.history_title
+- ui.admin.users.list.table.ui.admin.users.detail.manual_confirm
+- ui.admin.users.list.table.ui.admin.users.detail.manual_password
+- ui.admin.users.list.table.ui.admin.users.detail.password_done
+- ui.admin.users.list.table.ui.admin.users.detail.reset_auto
+- ui.admin.users.list.table.ui.admin.users.detail.reset_execute
+- ui.admin.users.list.table.ui.admin.users.detail.reset_manual
+- ui.admin.users.list.table.ui.admin.users.detail.save_tenants
+- ui.admin.users.list.table.ui.admin.users.detail.tabs.info
+- ui.admin.users.list.table.ui.admin.users.detail.tabs.security
+- ui.admin.users.list.table.ui.admin.users.detail.tabs.tenants
+- ui.admin.users.list.table.ui.admin.users.detail.updated_at
+- ui.admin.users.list.table.ui.common.generate
+- ui.admin.users.list.table.ui.common.status.blocked
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.allowed_algorithms_info
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.auth_method
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.auth_method_client_secret_basic
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.auth_method_none
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.auth_method_private_key_jwt
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.cached_at
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.error
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.expires_at
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.failures
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.kids
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.last_checked_at
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.last_success
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.parsed_key_n
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.parsed_keys
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.status
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.title
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.uri
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.guide_toggle
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.headless_disabled
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.headless_enabled
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.jwks_inline
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.jwks_inline_placeholder
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.request_object_alg
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.request_object_alg_placeholder
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.revoke_cache
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.source
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.source_uri
+- ui.admin.users.list.table.ui.dev.clients.general.security.trusted_rp_enable
+- ui.admin.users.list.table.ui.dev.clients.general.security.trusted_rp_enable_help
+- ui.admin.users.list.table.ui.dev.clients.help.docs_body
+- ui.admin.users.list.table.ui.dev.clients.help.subtitle
+- ui.admin.users.list.table.ui.dev.clients.registry.description
+- ui.admin.users.list.table.ui.dev.clients.scopes.email
+- ui.admin.users.list.table.ui.dev.clients.scopes.openid
+- ui.admin.users.list.table.ui.dev.clients.scopes.profile
+- ui.admin.users.list.table.ui.dev.session.refresh
+- ui.admin.users.list.table.ui.dev.session.refreshing
+
+template.toml에 없는 코드 사용 키
+- msg.admin.users.detail.history_desc
+- msg.admin.users.detail.no_history
+- msg.admin.users.detail.no_tenants
+- msg.admin.users.detail.reset_auto_desc
+- msg.admin.users.detail.security_desc
+- msg.admin.users.detail.tenant_slug_help
+- msg.admin.users.detail.tenants_desc
+- msg.common.copied
+- msg.dev.clients.general.public_key.allowed_algorithms_tooltip
+- msg.dev.clients.general.public_key.cache.missing_algorithm_badge
+- msg.dev.clients.general.public_key.cache.missing_algorithm_reason
+- msg.dev.clients.general.public_key.cache.missing_algorithms_help
+- msg.dev.clients.general.public_key.cache.missing_algorithms_title
+- msg.dev.clients.general.public_key.cache.parsed_keys_empty
+- msg.dev.clients.general.public_key.cache.parsed_keys_help
+- msg.dev.clients.general.public_key.cache.unsupported_algorithm_reason
+- msg.dev.clients.general.public_key.cache.unsupported_algorithms_help
+- msg.dev.clients.general.public_key.cache.unsupported_algorithms_title
+- msg.dev.clients.general.public_key.cache_empty
+- msg.dev.clients.general.public_key.cache_help
+- msg.dev.clients.general.public_key.cache_refresh_failed
+- msg.dev.clients.general.public_key.cache_refreshed
+- msg.dev.clients.general.public_key.cache_revoke_confirm
+- msg.dev.clients.general.public_key.cache_revoke_failed
+- msg.dev.clients.general.public_key.cache_revoked
+- msg.dev.clients.general.public_key.validation.missing_parsed_algorithms
+- msg.dev.clients.general.public_key.validation.unsupported_parsed_algorithms
+- ui.admin.users.create.form.is_login_id
+- ui.admin.users.detail.form.email
+- ui.admin.users.detail.form.is_login_id
+- ui.admin.users.detail.form.role_rp_admin
+- ui.admin.users.detail.form.tenant_slug
+- ui.admin.users.detail.generate_button
+- ui.admin.users.detail.history_title
+- ui.admin.users.detail.manual_confirm
+- ui.admin.users.detail.manual_password
+- ui.admin.users.detail.password_done
+- ui.admin.users.detail.reset_auto
+- ui.admin.users.detail.reset_execute
+- ui.admin.users.detail.reset_manual
+- ui.admin.users.detail.save_tenants
+- ui.admin.users.detail.tabs.info
+- ui.admin.users.detail.tabs.security
+- ui.admin.users.detail.tabs.tenants
+- ui.admin.users.detail.updated_at
+- ui.dev.clients.general.public_key.allowed_algorithms_info
+- ui.dev.clients.general.public_key.cache.cached_at
+- ui.dev.clients.general.public_key.cache.error
+- ui.dev.clients.general.public_key.cache.expires_at
+- ui.dev.clients.general.public_key.cache.failures
+- ui.dev.clients.general.public_key.cache.kids
+- ui.dev.clients.general.public_key.cache.last_checked_at
+- ui.dev.clients.general.public_key.cache.last_success
+- ui.dev.clients.general.public_key.cache.parsed_key_n
+- ui.dev.clients.general.public_key.cache.parsed_keys
+- ui.dev.clients.general.public_key.cache.status
+- ui.dev.clients.general.public_key.cache.title
+- ui.dev.clients.general.public_key.cache.uri
+- ui.dev.clients.general.public_key.revoke_cache
+
+코드에서 사용되지 않는 키
+- err.backend.authorization_pending
+- err.backend.bad_request
+- err.backend.conflict
+- err.backend.expired_token
+- err.backend.forbidden
+- err.backend.internal_error
+- err.backend.invalid_code
+- err.backend.invalid_or_expired_code
+- err.backend.invalid_session
+- err.backend.invalid_session_reference
+- err.backend.not_found
+- err.backend.not_supported
+- err.backend.password_or_email_mismatch
+- err.backend.rate_limited
+- err.backend.service_unavailable
+- err.backend.slow_down
+- msg.admin.groups.create.description
+- msg.admin.groups.create.title
+- msg.admin.groups.list.import_error
+- msg.admin.groups.list.import_success
+- msg.admin.header.subtitle
+- msg.admin.idp_env_prod
+- msg.admin.notice.idp_policy
+- msg.admin.notice.scope
+- msg.admin.overview.idp_fallback
+- msg.admin.overview.idp_primary
+- msg.admin.overview.playbook.description
+- msg.admin.overview.playbook.idp_body
+- msg.admin.overview.playbook.idp_title
+- msg.admin.overview.playbook.tenant_body
+- msg.admin.overview.playbook.tenant_title
+- msg.admin.overview.quick_links.description
+- msg.admin.overview.summary.audit_events_24h
+- msg.admin.overview.summary.oidc_clients
+- msg.admin.overview.summary.policy_gate
+- msg.admin.overview.summary.total_tenants
+- msg.admin.scope_admin
+- msg.admin.session_ttl
+- msg.admin.tenant_headers
+- msg.admin.users.create.form.login_id_help
+- msg.admin.users.detail.delete_error
+- msg.admin.users.detail.password_generated_help
+- msg.admin.users.detail.reset_password_confirm
+- msg.admin.users.detail.security.password_hint
+- msg.admin.users.detail.update_success
+- msg.common.copied_to_clipboard
+- msg.dev.audit.forbidden
+- msg.dev.clients.general.public_key.auth_method_client_secret_basic_help
+- msg.dev.clients.general.public_key.auth_method_none_help
+- msg.dev.clients.general.public_key.auth_method_private_key_jwt_help
+- msg.dev.clients.general.public_key.guide_example
+- msg.dev.clients.general.public_key.guide_intro
+- msg.dev.clients.general.public_key.guide_step_1
+- msg.dev.clients.general.public_key.guide_step_2
+- msg.dev.clients.general.public_key.guide_step_3
+- msg.dev.clients.general.public_key.jwks_inline_help
+- msg.dev.clients.general.public_key.request_object_alg_help
+- msg.dev.clients.general.public_key.source_help
+- msg.dev.clients.general.public_key.validation.headless_requires_alg
+- msg.dev.clients.general.public_key.validation.headless_requires_private_key_jwt
+- msg.dev.clients.general.public_key.validation.headless_requires_public_key
+- msg.dev.clients.general.public_key.validation.invalid_jwks_inline
+- msg.dev.clients.general.public_key.validation.missing_jwks_inline
+- msg.dev.clients.general.public_key.validation.private_key_jwt_requires_public_key
+- msg.userfront.signup.privacy_full
+- msg.userfront.signup.tos_full
+- non.existent.key
+- test.key
+- ui.admin.api_keys.list.breadcrumb.list
+- ui.admin.api_keys.list.breadcrumb.section
+- ui.admin.audit.breadcrumb.logs
+- ui.admin.audit.breadcrumb.section
+- ui.admin.groups.import_csv
+- ui.admin.overview.kicker
+- ui.admin.overview.playbook.title
+- ui.admin.overview.quick_links.add_tenant
+- ui.admin.overview.quick_links.api_key_management
+- ui.admin.overview.quick_links.user_management
+- ui.admin.overview.quick_links.view_audit_logs
+- ui.admin.tenants.breadcrumb.list
+- ui.admin.tenants.breadcrumb.section
+- ui.admin.tenants.create.breadcrumb.action
+- ui.admin.tenants.create.breadcrumb.section
+- ui.admin.tenants.detail.breadcrumb_list
+- ui.admin.tenants.detail.title
+- ui.admin.users.create.breadcrumb.new
+- ui.admin.users.create.breadcrumb.section
+- ui.admin.users.create.form.login_id
+- ui.admin.users.create.form.login_id_placeholder
+- ui.admin.users.detail.breadcrumb.section
+- ui.admin.users.detail.contact_title
+- ui.admin.users.detail.form.department_placeholder
+- ui.admin.users.detail.form.job_title_placeholder
+- ui.admin.users.detail.form.login_id
+- ui.admin.users.detail.form.login_id_placeholder
+- ui.admin.users.detail.form.name_placeholder
+- ui.admin.users.detail.form.phone_placeholder
+- ui.admin.users.detail.form.position_placeholder
+- ui.admin.users.detail.form.status_active
+- ui.admin.users.detail.form.status_inactive
+- ui.admin.users.detail.generate_password
+- ui.admin.users.detail.password_mode_generated
+- ui.admin.users.detail.password_mode_manual
+- ui.admin.users.detail.password_result_title
+- ui.admin.users.detail.reset_password_apply
+- ui.admin.users.detail.security.password
+- ui.admin.users.detail.security.password_placeholder
+- ui.admin.users.detail.security.title
+- ui.admin.users.detail.status_title
+- ui.admin.users.detail.tenants_section.additional
+- ui.admin.users.detail.tenants_section.primary
+- ui.admin.users.detail.tenants_section.title
+- ui.admin.users.detail.title
+- ui.admin.users.detail.toggle_password_visibility
+- ui.admin.users.list.breadcrumb.list
+- ui.admin.users.list.breadcrumb.section
+- ui.admin.users.list.empty
+- ui.admin.users.list.fetch_error
+- ui.admin.users.list.registry.count
+- ui.admin.users.list.subtitle
+- ui.admin.users.list.table.login_id
+- ui.admin.users.list.table.msg.admin.users.detail.history_desc
+- ui.admin.users.list.table.msg.admin.users.detail.no_history
+- ui.admin.users.list.table.msg.admin.users.detail.no_tenants
+- ui.admin.users.list.table.msg.admin.users.detail.reset_auto_desc
+- ui.admin.users.list.table.msg.admin.users.detail.security_desc
+- ui.admin.users.list.table.msg.admin.users.detail.tenant_slug_help
+- ui.admin.users.list.table.msg.admin.users.detail.tenants_desc
+- ui.admin.users.list.table.msg.common.copied
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.allowed_algorithms_tooltip
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.missing_algorithm_badge
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.missing_algorithm_reason
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.missing_algorithms_help
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.missing_algorithms_title
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.parsed_keys_empty
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.parsed_keys_help
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.unsupported_algorithm_reason
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.unsupported_algorithms_help
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache.unsupported_algorithms_title
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_empty
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_help
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_refresh_failed
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_refreshed
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_revoke_confirm
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_revoke_failed
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.cache_revoked
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.validation.missing_parsed_algorithms
+- ui.admin.users.list.table.msg.dev.clients.general.public_key.validation.unsupported_parsed_algorithms
+- ui.admin.users.list.table.ui.admin.users.create.form.is_login_id
+- ui.admin.users.list.table.ui.admin.users.detail.form.email
+- ui.admin.users.list.table.ui.admin.users.detail.form.is_login_id
+- ui.admin.users.list.table.ui.admin.users.detail.form.role_rp_admin
+- ui.admin.users.list.table.ui.admin.users.detail.form.tenant_slug
+- ui.admin.users.list.table.ui.admin.users.detail.generate_button
+- ui.admin.users.list.table.ui.admin.users.detail.history_title
+- ui.admin.users.list.table.ui.admin.users.detail.manual_confirm
+- ui.admin.users.list.table.ui.admin.users.detail.manual_password
+- ui.admin.users.list.table.ui.admin.users.detail.password_done
+- ui.admin.users.list.table.ui.admin.users.detail.reset_auto
+- ui.admin.users.list.table.ui.admin.users.detail.reset_execute
+- ui.admin.users.list.table.ui.admin.users.detail.reset_manual
+- ui.admin.users.list.table.ui.admin.users.detail.save_tenants
+- ui.admin.users.list.table.ui.admin.users.detail.tabs.info
+- ui.admin.users.list.table.ui.admin.users.detail.tabs.security
+- ui.admin.users.list.table.ui.admin.users.detail.tabs.tenants
+- ui.admin.users.list.table.ui.admin.users.detail.updated_at
+- ui.admin.users.list.table.ui.common.generate
+- ui.admin.users.list.table.ui.common.status.blocked
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.allowed_algorithms_info
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.auth_method
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.auth_method_client_secret_basic
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.auth_method_none
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.auth_method_private_key_jwt
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.cached_at
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.error
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.expires_at
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.failures
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.kids
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.last_checked_at
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.last_success
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.parsed_key_n
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.parsed_keys
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.status
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.title
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.cache.uri
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.guide_toggle
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.headless_disabled
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.headless_enabled
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.jwks_inline
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.jwks_inline_placeholder
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.request_object_alg
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.request_object_alg_placeholder
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.revoke_cache
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.source
+- ui.admin.users.list.table.ui.dev.clients.general.public_key.source_uri
+- ui.admin.users.list.table.ui.dev.clients.general.security.trusted_rp_enable
+- ui.admin.users.list.table.ui.dev.clients.general.security.trusted_rp_enable_help
+- ui.admin.users.list.table.ui.dev.clients.help.docs_body
+- ui.admin.users.list.table.ui.dev.clients.help.subtitle
+- ui.admin.users.list.table.ui.dev.clients.registry.description
+- ui.admin.users.list.table.ui.dev.clients.scopes.email
+- ui.admin.users.list.table.ui.dev.clients.scopes.openid
+- ui.admin.users.list.table.ui.dev.clients.scopes.profile
+- ui.admin.users.list.table.ui.dev.session.refresh
+- ui.admin.users.list.table.ui.dev.session.refreshing
+- ui.common.generate
+- ui.common.status.blocked
+- ui.dev.clients.general.public_key.auth_method
+- ui.dev.clients.general.public_key.auth_method_client_secret_basic
+- ui.dev.clients.general.public_key.auth_method_none
+- ui.dev.clients.general.public_key.auth_method_private_key_jwt
+- ui.dev.clients.general.public_key.guide_toggle
+- ui.dev.clients.general.public_key.headless_disabled
+- ui.dev.clients.general.public_key.headless_enabled
+- ui.dev.clients.general.public_key.jwks_inline
+- ui.dev.clients.general.public_key.jwks_inline_placeholder
+- ui.dev.clients.general.public_key.request_object_alg
+- ui.dev.clients.general.public_key.request_object_alg_placeholder
+- ui.dev.clients.general.public_key.source
+- ui.dev.clients.general.public_key.source_uri
+- ui.dev.clients.general.security.trusted_rp_enable
+- ui.dev.clients.general.security.trusted_rp_enable_help
+- ui.dev.clients.help.docs_body
+- ui.dev.clients.help.subtitle
+- ui.dev.clients.registry.description
+- ui.dev.clients.scopes.email
+- ui.dev.clients.scopes.openid
+- ui.dev.clients.scopes.profile
+- ui.dev.session.refresh
+- ui.dev.session.refreshing
+
+요약
+- [Sync Error] ko.toml 누락 키 84개
+- [Sync Error] en.toml 누락 키 84개
+- [Missing Key] template.toml 누락 키 59개

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>

adminfront/package.json

@@ -0,0 +1,64 @@
+{
+  "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": "npx playwright test",
+    "test:unit": "vitest run",
+    "test:ui": "npx 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.4",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-scroll-area": "^1.1.2",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@tanstack/react-query": "^5.66.8",
+    "@tanstack/react-query-devtools": "^5.66.8",
+    "axios": "^1.7.9",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.563.0",
+    "oidc-client-ts": "^3.4.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.71.1",
+    "react-oidc-context": "^3.3.0",
+    "react-router-dom": "^6.28.2",
+    "tailwind-merge": "^3.4.0",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@playwright/test": "^1.58.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.4.23",
+    "jsdom": "^28.1.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.14",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.3",
+    "vitest": "^4.0.18"
+  }
+}

adminfront/playwright.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from "@playwright/test";
+
+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;
+
+/**
+ * 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"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      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
+          ? `npm run build && npm run preview -- --host 127.0.0.1 --port ${port}`
+          : `npm run dev -- --host 127.0.0.1 --port ${port}`,
+        url: defaultBaseUrl,
+        reuseExistingServer,
+        timeout: 120 * 1000,
+      },
+});

adminfront/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

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>

adminfront/scripts/runtime-mode.sh

@@ -0,0 +1,26 @@
+#!/usr/bin/env sh
+set -eu
+
+app_env="$(printf '%s' "${APP_ENV:-development}" | tr '[:upper:]' '[:lower:]')"
+
+case "$app_env" in
+  production|prod|stage|staging)
+    mode="production"
+    ;;
+  *)
+    mode="development"
+    ;;
+esac
+
+if [ "${1:-}" = "--print-mode" ]; then
+  printf '%s\n' "$mode"
+  exit 0
+fi
+
+if [ "$mode" = "production" ]; then
+  echo "Running in production mode with Vite preview..."
+  exec sh -c "npm run build && npm run preview -- --host 0.0.0.0"
+fi
+
+echo "Running in development mode..."
+exec npm run dev -- --host 0.0.0.0

adminfront/src/app/queryClient.ts

@@ -0,0 +1,11 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30_000,
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+});

adminfront/src/app/routes.tsx

@@ -0,0 +1,64 @@
+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 AuthPage from "../features/auth/AuthPage";
+import LoginPage from "../features/auth/LoginPage";
+import GlobalOverviewPage from "../features/overview/GlobalOverviewPage";
+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 TenantUserGroupsTab from "../features/user-groups/routes/TenantUserGroupsTab";
+import { UserGroupDetailPage } from "../features/user-groups/routes/UserGroupDetailPage";
+import UserCreatePage from "../features/users/UserCreatePage";
+import UserDetailPage from "../features/users/UserDetailPage";
+import UserListPage from "../features/users/UserListPage";
+
+export const router = createBrowserRouter(
+  [
+    {
+      path: "/login",
+      element: <LoginPage />,
+    },
+    {
+      path: "/auth/callback",
+      element: <AuthCallbackPage />,
+    },
+    {
+      path: "/",
+      element: <AppLayout />,
+      children: [
+        { index: true, element: <GlobalOverviewPage /> },
+        { path: "audit-logs", element: <AuditLogsPage /> },
+        { path: "auth", element: <AuthPage /> },
+        { path: "users", element: <UserListPage /> },
+        { path: "users/new", element: <UserCreatePage /> },
+        { path: "users/:id", element: <UserDetailPage /> },
+        { path: "tenants", element: <TenantListPage /> },
+        { path: "tenants/new", element: <TenantCreatePage /> },
+        {
+          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 /> },
+      ],
+    },
+  ],
+  // React Router v7 플래그는 Provider에서 적용합니다.
+);

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>

adminfront/src/components/auth/RoleGuard.tsx

@@ -0,0 +1,40 @@
+import { useQuery } from "@tanstack/react-query";
+import type * as React from "react";
+import { fetchMe } from "../../lib/adminApi";
+
+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 = profile?.role || "user";
+  const hasAccess = roles.includes(userRole);
+
+  if (!hasAccess) {
+    return <>{fallback}</>;
+  }
+
+  return <>{children}</>;
+}

adminfront/src/components/common/LanguageSelector.tsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { t } from "../../lib/i18n";
+
+const LOCALE_STORAGE_KEY = "locale";
+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());
+
+  const handleChange = (next: Locale) => {
+    if (next === locale) {
+      return;
+    }
+    window.localStorage.setItem(LOCALE_STORAGE_KEY, next);
+    setLocale(next);
+    window.location.reload();
+  };
+
+  return (
+    <select
+      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;

adminfront/src/components/layout/AppLayout.tsx

@@ -0,0 +1,738 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  Building2,
+  ChevronDown,
+  Key,
+  KeyRound,
+  LayoutDashboard,
+  LogOut,
+  Moon,
+  Network,
+  NotebookTabs,
+  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 { fetchMe } from "../../lib/adminApi";
+import { t } from "../../lib/i18n";
+import {
+  shouldAttemptSlidingSessionRenew,
+  shouldAttemptUnlimitedSessionRenew,
+} from "../../lib/sessionSliding";
+import LanguageSelector from "../common/LanguageSelector";
+import RoleSwitcher from "./RoleSwitcher";
+
+interface NavItem {
+  label: string;
+  to: string;
+  icon: React.ComponentType<{ size?: number | string }>;
+  isExternal?: boolean;
+}
+
+const staticNavItems: NavItem[] = [
+  { label: "ui.admin.nav.overview", to: "/", icon: LayoutDashboard },
+  { label: "ui.admin.nav.users", to: "/users", icon: Users },
+  { label: "ui.admin.nav.api_keys", to: "/api-keys", icon: Key },
+  { label: "ui.admin.nav.audit_logs", to: "/audit-logs", icon: NotebookTabs },
+  { label: "ui.admin.nav.auth_guard", to: "/auth", icon: KeyRound },
+];
+
+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 isDevRoleOverrideEnabled =
+    import.meta.env.MODE === "development" ||
+    (window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
+      ._IS_TEST_MODE === true;
+  const isMockRoleEnabled =
+    isDevRoleOverrideEnabled &&
+    window.localStorage.getItem("X-Mock-Role-Enabled") === "true";
+  const mockRoleOverride = isMockRoleEnabled
+    ? window.localStorage.getItem("X-Mock-Role")
+    : null;
+  const [theme, setTheme] = useState<"light" | "dark">(() => {
+    const stored = window.localStorage.getItem("admin_theme");
+    return stored === "dark" ? "dark" : "light";
+  });
+  const [isProfileOpen, setIsProfileOpen] = useState(false);
+  const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(() => {
+    const stored = window.localStorage.getItem("baron_session_expiry_enabled");
+    return stored !== "false";
+  });
+  const [nowMs, setNowMs] = useState(() => Date.now());
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      setNowMs(Date.now());
+    }, 1000);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, []);
+
+  const {
+    data: profile,
+    isLoading: isProfileLoading,
+    error: profileError,
+  } = useQuery({
+    queryKey: ["me"],
+    queryFn: async () => {
+      console.debug("[AppLayout] Fetching profile...");
+      try {
+        const data = await fetchMe();
+        console.debug("[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(() => {
+    const items = [...staticNavItems];
+    const isTest =
+      (window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
+        ._IS_TEST_MODE === true;
+    const effectiveRole = mockRoleOverride || profile?.role;
+
+    const isSuperAdmin = isTest || effectiveRole === "super_admin";
+    const isTenantAdmin = effectiveRole === "tenant_admin";
+    const manageableCount = profile?.manageableTenants?.length ?? 0;
+
+    const filteredItems = items.filter((item) => {
+      if (isTest) return true;
+      if (item.to === "/api-keys") return isSuperAdmin;
+      return true;
+    });
+
+    if (isSuperAdmin) {
+      filteredItems.splice(1, 0, {
+        label: "ui.admin.nav.tenants",
+        to: "/tenants",
+        icon: Building2,
+      });
+      filteredItems.splice(2, 0, {
+        label: "ui.admin.nav.org_chart",
+        to: import.meta.env.VITE_ORGCHART_URL || "http://localhost:5175",
+        icon: Network,
+        isExternal: true,
+      });
+    } else if (isTenantAdmin || manageableCount > 0) {
+      if (manageableCount <= 1 && profile?.tenantId) {
+        filteredItems.splice(1, 0, {
+          label: "ui.admin.nav.my_tenant",
+          to: `/tenants/${profile.tenantId}`,
+          icon: Building2,
+        });
+      } else if (manageableCount > 1) {
+        filteredItems.splice(1, 0, {
+          label: "ui.admin.nav.tenants",
+          to: "/tenants",
+          icon: Building2,
+        });
+      }
+      filteredItems.splice(
+        manageableCount <= 1 && profile?.tenantId ? 2 : 2,
+        0,
+        {
+          label: "ui.admin.nav.org_chart",
+          to: import.meta.env.VITE_ORGCHART_URL || "http://localhost:5175",
+          icon: Network,
+          isExternal: true,
+        },
+      );
+    } else {
+      // 일반 사용자(Tenant Member)도 조직도 메뉴를 볼 수 있도록 추가합니다.
+      filteredItems.splice(1, 0, {
+        label: "ui.admin.nav.org_chart",
+        to: import.meta.env.VITE_ORGCHART_URL || "http://localhost:5175",
+        icon: Network,
+        isExternal: true,
+      });
+    }
+
+    return filteredItems;
+  }, [mockRoleOverride, 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;
+
+    console.debug("[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(() => {
+    const root = document.documentElement;
+    root.classList.remove("light", "dark");
+    if (theme === "light") {
+      root.classList.add("light");
+    } else {
+      root.classList.add("dark");
+    }
+    window.localStorage.setItem("admin_theme", theme);
+  }, [theme]);
+
+  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(() => {
+    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 profileName =
+    profile?.name?.trim() ||
+    auth.user?.profile.name?.toString().trim() ||
+    auth.user?.profile.preferred_username?.toString().trim() ||
+    t("ui.dev.profile.unknown_name", "Unknown User");
+  const profileEmail =
+    profile?.email?.trim() ||
+    auth.user?.profile.email?.toString().trim() ||
+    t("ui.dev.profile.unknown_email", "unknown@example.com");
+  const profileInitial = profileName.charAt(0).toUpperCase();
+  const profileRoleKey = mockRoleOverride || profile?.role || "user";
+  const expiresAtSec = auth.user?.expires_at;
+  const remainingMs =
+    typeof expiresAtSec === "number" ? expiresAtSec * 1000 - nowMs : null;
+  const remainingTotalSec =
+    remainingMs !== null ? Math.max(0, Math.floor(remainingMs / 1000)) : null;
+  const remainingMinutes =
+    remainingTotalSec !== null ? Math.floor(remainingTotalSec / 60) : null;
+  const remainingSeconds =
+    remainingTotalSec !== null ? remainingTotalSec % 60 : null;
+
+  let sessionToneClass =
+    "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
+  let sessionText = t("ui.dev.session.active", "세션 활성");
+
+  if (remainingMs === null) {
+    sessionToneClass = "border-border bg-card text-muted-foreground";
+    sessionText = t("ui.dev.session.unknown", "알 수 없음");
+  } else if (remainingMs <= 0) {
+    sessionToneClass =
+      "border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300";
+    sessionText = t("ui.dev.session.expired", "세션 만료");
+  } else if (
+    remainingMinutes !== null &&
+    remainingSeconds !== null &&
+    remainingMinutes <= 5
+  ) {
+    sessionToneClass =
+      "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300";
+    sessionText = t(
+      "ui.dev.session.expiring",
+      "만료 임박: {{minutes}}분 {{seconds}}초 남음",
+      {
+        minutes: remainingMinutes,
+        seconds: remainingSeconds,
+      },
+    );
+  } else {
+    sessionText = t(
+      "ui.dev.session.remaining",
+      "만료 예정: {{minutes}}분 {{seconds}}초 남음",
+      {
+        minutes: remainingMinutes ?? 0,
+        seconds: remainingSeconds ?? 0,
+      },
+    );
+  }
+
+  const handleSessionExpiryToggle = () => {
+    setIsSessionExpiryEnabled((prev) => {
+      const next = !prev;
+      window.localStorage.setItem("baron_session_expiry_enabled", String(next));
+      return next;
+    });
+  };
+
+  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="grid min-h-screen bg-background text-foreground md:grid-cols-[240px,1fr]">
+      <aside className="border-b border-border bg-card md:sticky md:top-0 md:h-screen md:border-b-0 md:border-r md:bg-card md:backdrop-blur">
+        <div className="flex items-center justify-between px-5 py-4 md:block md:space-y-6 md:py-6">
+          <div className="flex items-center gap-3 md:flex-col md:items-start">
+            <div className="grid h-11 w-11 place-items-center rounded-xl bg-primary/15 text-primary shadow-[0_12px_30px_rgba(54,211,153,0.22)]">
+              <ShieldHalf size={20} />
+            </div>
+            <div>
+              <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
+                {t("ui.admin.brand", "Baron 로그인")}
+              </p>
+              <h1 className="text-lg font-semibold">
+                {t("ui.admin.title", "Admin Control")}
+              </h1>
+            </div>
+          </div>
+        </div>
+        <nav className="px-2 pb-4 md:px-3 md:pb-8">
+          <div className="flex flex-col gap-1">
+            {navItems.map((item: NavItem) => {
+              const { label, to, icon: Icon, isExternal } = item;
+              const isOrgChart = location.pathname === "/tenants/org-chart";
+              const isTenantsRoot = to === "/tenants";
+              const isCustomActive = isTenantsRoot
+                ? location.pathname.startsWith("/tenants") && !isOrgChart
+                : to === "/"
+                  ? location.pathname === "/"
+                  : location.pathname.startsWith(to);
+
+              if (isExternal) {
+                return (
+                  <a
+                    key={to}
+                    href={to}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-3 rounded-xl px-3 py-3 text-sm text-muted-foreground transition hover:bg-muted/10 hover:text-foreground"
+                  >
+                    <Icon size={18} />
+                    <span>{t(label, label)}</span>
+                  </a>
+                );
+              }
+
+              return (
+                <NavLink
+                  key={to}
+                  to={to}
+                  className={() =>
+                    [
+                      "flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition",
+                      isCustomActive
+                        ? "bg-primary/10 text-primary shadow-[0_12px_40px_rgba(54,211,153,0.18)]"
+                        : "text-muted-foreground hover:bg-muted/10 hover:text-foreground",
+                    ].join(" ")
+                  }
+                >
+                  <Icon size={18} />
+                  <span>{t(label, label)}</span>
+                </NavLink>
+              );
+            })}
+          </div>
+
+          <div className="border-t border-border/50 px-3 pt-4">
+            <button
+              type="button"
+              onClick={handleLogout}
+              className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
+            >
+              <LogOut size={18} />
+              <span>{t("ui.admin.nav.logout", "Logout")}</span>
+            </button>
+          </div>
+        </nav>
+      </aside>
+
+      <div className="relative">
+        <header className="sticky top-0 z-50 border-b border-border bg-background/90 backdrop-blur">
+          <div className="flex items-center justify-between px-5 py-4 md:px-8">
+            <div className="flex flex-col gap-1">
+              <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="flex items-center gap-2 text-sm">
+              <LanguageSelector />
+              <button
+                type="button"
+                onClick={toggleTheme}
+                className="inline-flex items-center gap-2 rounded-full border border-border px-3 py-2 text-muted-foreground transition hover:bg-muted/20"
+                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 ? (
+                <span
+                  className={[
+                    "hidden rounded-full border px-3 py-2 text-xs font-medium md:inline-flex",
+                    sessionToneClass,
+                  ].join(" ")}
+                >
+                  {sessionText}
+                </span>
+              ) : 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.dev.profile.menu_aria", "계정 메뉴 열기")}
+                >
+                  <div className="grid h-8 w-8 place-items-center rounded-full bg-primary/15 text-xs font-semibold text-primary">
+                    {profileInitial}
+                  </div>
+                  <div className="hidden min-w-0 text-left md:block">
+                    <p className="truncate text-xs font-medium text-foreground">
+                      {profileName}
+                    </p>
+                    <p className="truncate text-[11px] text-muted-foreground">
+                      {profileEmail}
+                    </p>
+                  </div>
+                  <ChevronDown
+                    size={14}
+                    className={`transition-transform duration-200 ${isProfileOpen ? "rotate-180" : ""}`}
+                  />
+                </button>
+
+                {isProfileOpen ? (
+                  <div
+                    role="menu"
+                    className="absolute right-0 z-30 mt-2 w-72 rounded-xl border border-border bg-card p-3 shadow-xl"
+                  >
+                    <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
+                      {t("ui.dev.profile.menu_title", "Account")}
+                    </p>
+                    <div className="mt-2 flex flex-col gap-2 rounded-lg border border-border px-3 py-3">
+                      <div>
+                        <p className="truncate text-sm font-semibold text-foreground">
+                          {profileName}
+                        </p>
+                        <p className="truncate text-xs text-muted-foreground">
+                          {profileEmail}
+                        </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.admin.role.${profileRoleKey}`,
+                            profileRoleKey.toUpperCase(),
+                          )}
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="mt-2 rounded-lg border border-border px-3 py-3">
+                      <div className="flex items-center justify-between gap-3">
+                        <div>
+                          <p className="text-sm font-medium text-foreground">
+                            {t("ui.dev.session.auto_extend", "세션 만료 관리")}
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            {isSessionExpiryEnabled
+                              ? sessionText
+                              : t(
+                                  "ui.dev.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.userfront.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.admin.nav.logout", "Logout")}</span>
+                    </button>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        </header>
+        <main className="px-5 py-6 md:px-10 md:py-10">
+          <Outlet />
+        </main>
+        <RoleSwitcher />
+      </div>
+    </div>
+  );
+}
+
+export default AppLayout;

adminfront/src/components/layout/RoleSwitcher.tsx

@@ -0,0 +1,175 @@
+import { ChevronDown, ChevronUp, Wrench } from "lucide-react";
+import type { FC } from "react";
+import { useEffect, useState } from "react";
+import { t } from "../../lib/i18n";
+
+const RoleSwitcher: FC = () => {
+  const [currentRole, setCurrentRole] = useState<string>("");
+  const [isOverrideEnabled, setIsOverrideEnabled] = useState<boolean>(false);
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(() => {
+    return window.localStorage.getItem("RoleSwitcher-Collapsed") === "true";
+  });
+
+  useEffect(() => {
+    const savedRole = window.localStorage.getItem("X-Mock-Role");
+    const savedEnabled =
+      window.localStorage.getItem("X-Mock-Role-Enabled") === "true";
+    setIsOverrideEnabled(savedEnabled);
+    if (savedRole) {
+      setCurrentRole(savedRole);
+    }
+  }, []);
+
+  const toggleCollapse = () => {
+    const nextState = !isCollapsed;
+    setIsCollapsed(nextState);
+    window.localStorage.setItem("RoleSwitcher-Collapsed", String(nextState));
+  };
+
+  const switchRole = (role: string) => {
+    window.localStorage.setItem("X-Mock-Role", role);
+    window.localStorage.setItem("X-Mock-Role-Enabled", "true");
+    setCurrentRole(role);
+    setIsOverrideEnabled(true);
+    window.location.reload();
+  };
+
+  const clearRoleOverride = () => {
+    window.localStorage.removeItem("X-Mock-Role-Enabled");
+    setIsOverrideEnabled(false);
+    window.location.reload();
+  };
+
+  if (import.meta.env.MODE === "production") return null;
+
+  const roleLabels: Record<string, string> = {
+    super_admin: t("ui.admin.role.super_admin", "SUPER ADMIN"),
+    tenant_admin: t("ui.admin.role.tenant_admin", "TENANT ADMIN"),
+    rp_admin: t("ui.admin.role.rp_admin", "RP ADMIN"),
+    user: t("ui.admin.role.user", "TENANT MEMBER"),
+  };
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        bottom: "20px",
+        right: "20px",
+        zIndex: 9999,
+        background: "#1A1F2C",
+        color: "white",
+        padding: "8px 12px",
+        borderRadius: "8px",
+        boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+        display: "flex",
+        flexDirection: "column",
+        gap: isCollapsed ? "0" : "8px",
+        fontSize: "12px",
+        transition: "all 0.3s ease",
+        border: "1px solid #333",
+      }}
+    >
+      <button
+        type="button"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "12px",
+          cursor: "pointer",
+          fontWeight: "bold",
+          paddingBottom: isCollapsed ? "0" : "4px",
+          borderBottom: isCollapsed ? "none" : "1px solid #444",
+          background: "transparent",
+          border: "none",
+          width: "100%",
+          color: "inherit",
+          textAlign: "inherit",
+        }}
+        onClick={toggleCollapse}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+          <Wrench size={14} className="text-blue-400" />
+          {!isCollapsed && (
+            <span>{t("ui.admin.dev_role_switcher", "DEV Role Switcher")}</span>
+          )}
+          {isCollapsed && (
+            <span style={{ fontSize: "10px", color: "#888" }}>
+              {isOverrideEnabled && currentRole
+                ? currentRole.toUpperCase()
+                : "REAL ROLE"}
+            </span>
+          )}
+        </div>
+        {isCollapsed ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+      </button>
+
+      {!isCollapsed && (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "6px",
+            marginTop: "4px",
+          }}
+        >
+          <button
+            type="button"
+            onClick={clearRoleOverride}
+            style={{
+              background: !isOverrideEnabled ? "#3b82f6" : "#333",
+              color: "white",
+              border: "none",
+              padding: "4px 8px",
+              borderRadius: "4px",
+              cursor: "pointer",
+              textAlign: "left",
+              transition: "background 0.2s",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <span>
+              {t("ui.admin.dev_role_switcher_real", "실제 역할 사용")}
+            </span>
+            {!isOverrideEnabled && (
+              <span style={{ marginLeft: "8px" }}>✅</span>
+            )}
+          </button>
+          {(["super_admin", "tenant_admin", "rp_admin", "user"] as const).map(
+            (role) => (
+              <button
+                key={role}
+                type="button"
+                onClick={() => switchRole(role)}
+                style={{
+                  background: currentRole === role ? "#3b82f6" : "#333",
+                  color: "white",
+                  border: "none",
+                  padding: "4px 8px",
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                  textAlign: "left",
+                  transition: "background 0.2s",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <span>
+                  {roleLabels[role] ?? role.toUpperCase().replace("_", " ")}
+                </span>
+                {isOverrideEnabled && currentRole === role && (
+                  <span style={{ marginLeft: "8px" }}>✅</span>
+                )}
+              </button>
+            ),
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RoleSwitcher;

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, AvatarImage, AvatarFallback };

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");
+  });
+});

adminfront/src/components/ui/badge.tsx

@@ -0,0 +1,38 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
+import { cn } from "../../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "text-foreground",
+        muted: "border-border bg-secondary/60 text-muted-foreground",
+        success:
+          "border-transparent bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300",
+        warning:
+          "border-transparent bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

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();
+  });
+});

adminfront/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        muted: "bg-muted text-muted-foreground hover:bg-muted/80",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-6 text-base",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

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");
+  });
+});

adminfront/src/components/ui/card.tsx

@@ -0,0 +1,72 @@
+import type * as React from "react";
+import { cn } from "../../lib/utils";
+
+function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "rounded-2xl border border-border bg-card/90 text-card-foreground shadow-card",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      className={cn("text-lg font-semibold leading-none", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p className={cn("text-sm text-muted-foreground", className)} {...props} />
+  );
+}
+
+function CardContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("p-6 pt-0", className)} {...props} />;
+}
+
+function CardFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+};

adminfront/src/components/ui/checkbox.tsx

@@ -0,0 +1,31 @@
+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, ...props }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onCheckedChange?.(e.target.checked);
+    };
+
+    return (
+      <input
+        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 };

adminfront/src/components/ui/dialog.tsx

@@ -0,0 +1,120 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close 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>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+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<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

adminfront/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-tighter opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

adminfront/src/components/ui/input.test.tsx

@@ -0,0 +1,28 @@
+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("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();
+  });
+});

adminfront/src/components/ui/input.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

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");
+  });
+});

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

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

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,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

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

adminfront/src/components/ui/switch.tsx

@@ -0,0 +1,26 @@
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    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,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      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",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

adminfront/src/components/ui/table.tsx

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-muted/50 font-medium text-foreground", className)}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/30 data-[state=selected]:bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-6 text-left text-xs font-bold uppercase tracking-[0.08em] text-foreground align-middle sticky top-0 bg-inherit",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-6 align-middle text-sm", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

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, TabsList, TabsTrigger, TabsContent };

adminfront/src/components/ui/textarea.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        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 };

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>
+  );
+}

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;
+};

adminfront/src/features/api-keys/ApiKeyCreatePage.tsx

@@ -0,0 +1,394 @@
+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";
+
+const AVAILABLE_SCOPES = [
+  {
+    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: "테넌트 정보를 직접 제어합니다.",
+  },
+];
+
+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_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;

adminfront/src/features/api-keys/ApiKeyListPage.tsx

@@ -0,0 +1,214 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Key, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { Link } from "react-router-dom";
+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 { deleteApiKey, fetchApiKeys } from "../../lib/adminApi";
+import { t } from "../../lib/i18n";
+
+function ApiKeyListPage() {
+  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 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);
+  };
+
+  return (
+    <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
+      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
+        <div className="space-y-2">
+          <h2 className="text-3xl font-semibold">
+            {t("ui.admin.api_keys.list.title", "API 키 관리 (M2M)")}
+          </h2>
+          <p className="text-sm text-[var(--color-muted)]">
+            {t(
+              "msg.admin.api_keys.list.subtitle",
+              "서버 간 통신(Machine-to-Machine)을 위한 API 키를 발급하고 관리합니다.",
+            )}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <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>
+        </div>
+      </header>
+
+      <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>
+              {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="sticky top-0 z-10 bg-secondary shadow-sm">
+                  <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">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleDelete(key.id, key.name)}
+                          disabled={deleteMutation.isPending}
+                        >
+                          <Trash2 size={14} />
+                          {t("ui.common.delete", "삭제")}
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default ApiKeyListPage;

adminfront/src/features/audit/AuditLogsPage.tsx

@@ -0,0 +1,606 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import {
+  ChevronDown,
+  ChevronUp,
+  Copy,
+  ListChecks,
+  RefreshCw,
+  Search,
+  Terminal,
+} from "lucide-react";
+import * as React from "react";
+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 type { AuditLog } from "../../lib/adminApi";
+import { fetchAuditLogs } from "../../lib/adminApi";
+import { t } from "../../lib/i18n";
+
+const defaultAuditFilters = [
+  "method:POST path:/api/v1/*",
+  "status:failure",
+  "latency_ms:>1000",
+];
+
+type AuditDetails = {
+  request_id?: string;
+  method?: string;
+  path?: string;
+  status?: number;
+  latency_ms?: number;
+  error?: string;
+  tenant_id?: string;
+  actor_id?: string;
+  action?: string;
+  target?: string;
+  before?: unknown;
+  after?: unknown;
+};
+
+function parseDetails(details?: string): AuditDetails {
+  if (!details) {
+    return {};
+  }
+  try {
+    const parsed = JSON.parse(details);
+    if (parsed && typeof parsed === "object") {
+      return parsed as AuditDetails;
+    }
+  } catch {}
+  return {};
+}
+
+function formatCellValue(value: unknown) {
+  if (value === null || value === undefined || value === "") {
+    return "-";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function formatIsoDateTime(value: string) {
+  if (!value) {
+    return { date: "-", time: "-" };
+  }
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) {
+    return { date: value, time: "-" };
+  }
+  const date = parsed.toISOString().slice(0, 10);
+  const time = parsed.toLocaleTimeString("ko-KR", { hour12: false });
+  return { date, time };
+}
+
+function AuditLogsPage() {
+  const [filters, setFilters] = React.useState(defaultAuditFilters);
+  const [filterDraft, setFilterDraft] = React.useState("");
+  const [expandedRows, setExpandedRows] = React.useState<
+    Record<string, boolean>
+  >({});
+
+  const handleCopy = (value: string) => {
+    if (!value) {
+      return;
+    }
+    navigator.clipboard.writeText(value);
+  };
+  const {
+    data,
+    isLoading,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isFetching,
+    refetch,
+  } = useInfiniteQuery({
+    queryKey: ["audit-logs"],
+    queryFn: ({ pageParam }) => fetchAuditLogs(50, pageParam),
+    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)) ?? [],
+    ) ?? [];
+
+  const handleAddFilter = () => {
+    const trimmed = filterDraft.trim();
+    if (!trimmed) {
+      return;
+    }
+    setFilters((prev) => (prev.includes(trimmed) ? prev : [...prev, trimmed]));
+    setFilterDraft("");
+  };
+
+  if (isLoading) {
+    return (
+      <div className="p-8 text-center">
+        {t("msg.admin.audit.loading", "Loading audit logs...")}
+      </div>
+    );
+  }
+
+  if (error) {
+    const errMsg =
+      (error as AxiosError<{ error?: string }>).response?.data?.error ??
+      (error as Error).message;
+    return (
+      <div className="p-8 text-center text-red-500">
+        {t("msg.admin.audit.load_error", "Error loading logs: {{error}}", {
+          error: errMsg,
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
+      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
+        <div>
+          <h2 className="text-3xl font-semibold">
+            {t("ui.admin.audit.title", "감사 로그")}
+          </h2>
+          <p className="text-sm text-[var(--color-muted)]">
+            {t(
+              "msg.admin.audit.subtitle",
+              "Command 요청 기반 ClickHouse 로그를 조회합니다. 사용자/테넌트는 추후 세션 연동 시 자동 채워집니다.",
+            )}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            onClick={() => refetch()}
+            disabled={isFetching}
+          >
+            <RefreshCw size={16} />
+            {t("ui.common.refresh", "새로고침")}
+          </Button>
+          <Button>
+            <ListChecks size={16} />
+            {t("ui.admin.audit.export_csv", "Export CSV")}
+          </Button>
+        </div>
+      </header>
+
+      <Card className="glass-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>
+              {t("ui.admin.audit.registry.title", "Log Registry")}
+            </CardTitle>
+            <CardDescription>
+              {t("msg.admin.audit.registry.count", "총 {{count}}개 로그", {
+                count: logs.length,
+              })}
+            </CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
+          <div className="mb-4 flex flex-wrap items-center gap-2 flex-shrink-0">
+            <div className="flex flex-1 items-center gap-2 rounded-full border border-[var(--color-border)] bg-[rgba(255,255,255,0.02)] px-4 py-2 text-[var(--color-muted)]">
+              <Search size={14} />
+              <input
+                value={filterDraft}
+                onChange={(event) => setFilterDraft(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    handleAddFilter();
+                  }
+                }}
+                placeholder={t(
+                  "ui.admin.audit.filters.placeholder",
+                  "필터 추가 (예: status:failure)",
+                )}
+                className="w-full bg-transparent text-sm text-foreground outline-none"
+              />
+              <Button size="sm" variant="outline" onClick={handleAddFilter}>
+                {t("ui.common.add", "추가")}
+              </Button>
+            </div>
+            {filters.length === 0 ? (
+              <span className="text-xs text-[var(--color-muted)]">
+                {t("msg.admin.audit.filters.empty", "필터 없음")}
+              </span>
+            ) : (
+              filters.map((filter) => (
+                <span
+                  key={filter}
+                  className="inline-flex items-center gap-2 rounded-full border border-[var(--color-border)] bg-[rgba(255,255,255,0.04)] px-3 py-1 text-xs text-[var(--color-muted)]"
+                >
+                  <Terminal size={12} />
+                  {filter}
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setFilters((prev) =>
+                        prev.filter((item) => item !== filter),
+                      )
+                    }
+                    className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-[var(--color-border)] text-[10px] text-[var(--color-muted)]"
+                    aria-label={t(
+                      "ui.admin.audit.filters.remove",
+                      "{{filter}} 필터 제거",
+                      { filter },
+                    )}
+                  >
+                    ×
+                  </button>
+                </span>
+              ))
+            )}
+          </div>
+          <div className="flex-1 rounded-md border overflow-hidden flex flex-col">
+            <div className="flex-1 overflow-auto relative custom-scrollbar">
+              <Table className="table-fixed">
+                <TableHeader className="sticky top-0 z-10 bg-secondary shadow-sm">
+                  <TableRow>
+                    <TableHead className="w-[140px]">
+                      {t("ui.admin.audit.table.time", "TIME")}
+                    </TableHead>
+                    <TableHead className="w-[160px]">
+                      {t("ui.admin.audit.table.actor", "ACTOR (ID)")}
+                    </TableHead>
+                    <TableHead>
+                      {t("ui.admin.audit.table.request", "REQUEST")}
+                    </TableHead>
+                    <TableHead>
+                      {t("ui.admin.audit.table.path", "PATH")}
+                    </TableHead>
+                    <TableHead className="w-[120px]">
+                      {t("ui.admin.audit.table.status", "STATUS")}
+                    </TableHead>
+                    <TableHead>
+                      {t(
+                        "ui.admin.audit.table.action_target",
+                        "Action / Target",
+                      )}
+                    </TableHead>
+                    <TableHead className="w-[80px]" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {isLoading && (
+                    <TableRow>
+                      <TableCell colSpan={7}>
+                        {t("msg.common.loading", "로딩 중...")}
+                      </TableCell>
+                    </TableRow>
+                  )}
+                  {!isLoading && logs.length === 0 && (
+                    <TableRow>
+                      <TableCell colSpan={7}>
+                        {t(
+                          "msg.admin.audit.empty",
+                          "아직 수집된 감사 로그가 없습니다.",
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  )}
+                  {logs.map((row, index) => {
+                    const details = parseDetails(row.details);
+                    const actionLabel =
+                      details.action ||
+                      (details.method && details.path
+                        ? `${details.method} ${details.path}`
+                        : row.event_type);
+                    const rowKey = `${row.event_id}-${row.timestamp}-${index}`;
+                    const isExpanded = Boolean(expandedRows[rowKey]);
+                    return (
+                      <React.Fragment key={rowKey}>
+                        <TableRow className="bg-card/40">
+                          <TableCell className="text-xs text-[var(--color-muted)]">
+                            {(() => {
+                              const { date, time } = formatIsoDateTime(
+                                row.timestamp,
+                              );
+                              return (
+                                <div className="space-y-1">
+                                  <div>{date}</div>
+                                  <div>{time}</div>
+                                </div>
+                              );
+                            })()}
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex items-center gap-2">
+                              <code className="rounded-md bg-secondary/60 px-2 py-1 text-xs text-muted-foreground">
+                                {row.user_id || details.actor_id || "-"}
+                              </code>
+                              {(row.user_id || details.actor_id) && (
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-7 w-7 text-muted-foreground hover:text-primary"
+                                  aria-label={t(
+                                    "ui.admin.audit.copy.actor_id",
+                                    "Copy actor id",
+                                  )}
+                                  onClick={() =>
+                                    handleCopy(
+                                      row.user_id || details.actor_id || "",
+                                    )
+                                  }
+                                >
+                                  <Copy className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-xs text-[var(--color-muted)]">
+                            <div className="flex items-start gap-2">
+                              <span className="break-all">
+                                {formatCellValue(details.request_id)}
+                              </span>
+                              {details.request_id && (
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-7 w-7 text-muted-foreground hover:text-primary"
+                                  aria-label={t(
+                                    "ui.admin.audit.copy.request_id",
+                                    "Copy request id",
+                                  )}
+                                  onClick={() =>
+                                    handleCopy(details.request_id || "")
+                                  }
+                                >
+                                  <Copy className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-xs text-[var(--color-muted)]">
+                            <div className="font-semibold text-foreground">
+                              {formatCellValue(details.method)}
+                            </div>
+                            <div className="break-all">
+                              {formatCellValue(details.path)}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <Badge
+                              variant={
+                                row.status === "success" || row.status === "ok"
+                                  ? "success"
+                                  : "warning"
+                              }
+                            >
+                              {row.status}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-xs text-[var(--color-muted)]">
+                            <div className="font-semibold text-foreground">
+                              {actionLabel}
+                            </div>
+                            {details.target && (
+                              <div className="flex items-center gap-2">
+                                <span className="break-all">
+                                  {t(
+                                    "ui.admin.audit.target",
+                                    "Target · {{target}}",
+                                    {
+                                      target: details.target,
+                                    },
+                                  )}
+                                </span>
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-7 w-7 text-muted-foreground hover:text-primary"
+                                  aria-label={t(
+                                    "ui.admin.audit.copy.target",
+                                    "Copy target",
+                                  )}
+                                  onClick={() =>
+                                    handleCopy(details.target || "")
+                                  }
+                                >
+                                  <Copy className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            )}
+                          </TableCell>
+                          <TableCell className="text-right">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() =>
+                                setExpandedRows((prev) => ({
+                                  ...prev,
+                                  [rowKey]: !isExpanded,
+                                }))
+                              }
+                            >
+                              {isExpanded ? (
+                                <ChevronUp className="h-4 w-4" />
+                              ) : (
+                                <ChevronDown className="h-4 w-4" />
+                              )}
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                        {isExpanded && (
+                          <TableRow className="bg-card/20">
+                            <TableCell colSpan={7} className="text-xs">
+                              <div className="grid gap-4 text-[var(--color-muted)] md:grid-cols-3">
+                                <div className="space-y-1">
+                                  <div className="uppercase tracking-[0.16em]">
+                                    {t(
+                                      "ui.admin.audit.details.request",
+                                      "Request",
+                                    )}
+                                  </div>
+                                  <div className="break-all">
+                                    {t(
+                                      "ui.admin.audit.details.request_id",
+                                      "Request ID · {{value}}",
+                                      {
+                                        value: formatCellValue(
+                                          details.request_id,
+                                        ),
+                                      },
+                                    )}
+                                  </div>
+                                  <div className="break-all">
+                                    {t(
+                                      "ui.admin.audit.details.event_id",
+                                      "Event ID · {{value}}",
+                                      {
+                                        value: formatCellValue(row.event_id),
+                                      },
+                                    )}
+                                  </div>
+                                  <div>
+                                    {t(
+                                      "ui.admin.audit.details.ip",
+                                      "IP · {{value}}",
+                                      {
+                                        value: formatCellValue(row.ip_address),
+                                      },
+                                    )}
+                                  </div>
+                                  <div>
+                                    {t(
+                                      "ui.admin.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.admin.audit.details.actor", "Actor")}
+                                  </div>
+                                  <div>
+                                    {t(
+                                      "ui.admin.audit.details.actor_id",
+                                      "Actor ID · {{value}}",
+                                      {
+                                        value:
+                                          row.user_id ||
+                                          details.actor_id ||
+                                          "-",
+                                      },
+                                    )}
+                                  </div>
+                                  <div>
+                                    {t(
+                                      "ui.admin.audit.details.tenant",
+                                      "Tenant · {{value}}",
+                                      {
+                                        value: formatCellValue(
+                                          details.tenant_id,
+                                        ),
+                                      },
+                                    )}
+                                  </div>
+                                  <div>
+                                    {t(
+                                      "ui.admin.audit.details.device",
+                                      "Device · {{value}}",
+                                      {
+                                        value: formatCellValue(row.device_id),
+                                      },
+                                    )}
+                                  </div>
+                                </div>
+                                <div className="space-y-1">
+                                  <div className="uppercase tracking-[0.16em]">
+                                    {t(
+                                      "ui.admin.audit.details.result",
+                                      "Result",
+                                    )}
+                                  </div>
+                                  <div className="break-all">
+                                    {t(
+                                      "ui.admin.audit.details.error",
+                                      "Error · {{value}}",
+                                      {
+                                        value: formatCellValue(details.error),
+                                      },
+                                    )}
+                                  </div>
+                                  <div className="break-all">
+                                    {t(
+                                      "ui.admin.audit.details.before",
+                                      "Before · {{value}}",
+                                      {
+                                        value: formatCellValue(details.before),
+                                      },
+                                    )}
+                                  </div>
+                                  <div className="break-all">
+                                    {t(
+                                      "ui.admin.audit.details.after",
+                                      "After · {{value}}",
+                                      {
+                                        value: formatCellValue(details.after),
+                                      },
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+          <div className="pt-4 text-center flex-shrink-0">
+            {hasNextPage ? (
+              <Button
+                variant="outline"
+                onClick={() => fetchNextPage()}
+                disabled={isFetchingNextPage}
+              >
+                {isFetchingNextPage
+                  ? t("msg.common.loading", "Loading...")
+                  : t("ui.admin.audit.load_more", "Load more")}
+              </Button>
+            ) : (
+              <span className="text-xs text-[var(--color-muted)]">
+                {t("msg.admin.audit.end", "End of audit feed")}
+              </span>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default AuditLogsPage;

adminfront/src/features/auth/AuthCallbackPage.tsx

@@ -0,0 +1,55 @@
+import { ShieldHalf } from "lucide-react";
+import { useEffect } from "react";
+import { useAuth } from "react-oidc-context";
+import { useNavigate } from "react-router-dom";
+
+function AuthCallbackPage() {
+  const auth = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    console.debug("[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;

adminfront/src/features/auth/AuthPage.tsx

@@ -0,0 +1,111 @@
+import { ArrowRight, Fingerprint, Smartphone, Sparkles } from "lucide-react";
+
+const flows = [
+  {
+    title: "Admin login",
+    description:
+      "Enforce short TTL and step-up MFA. Keep admin session separate from app session.",
+    pill: "15m TTL",
+  },
+  {
+    title: "Tenant pick",
+    description:
+      "Admin chooses target tenant before hitting APIs. Propagate X-Tenant-ID on every call.",
+    pill: "Header-ready",
+  },
+  {
+    title: "Device approval",
+    description:
+      "If app session exists and user opts in, use push/deeplink approval as MFA replacement.",
+    pill: "App session",
+  },
+];
+
+function AuthPage() {
+  return (
+    <div className="space-y-8">
+      <section className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6 shadow-[var(--shadow-card)]">
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div>
+            <p className="text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
+              Admin auth
+            </p>
+            <h2 className="text-2xl font-semibold">Admin auth guardrails</h2>
+            <p className="text-sm text-[var(--color-muted)]">
+              Build the admin-only login flow first, keeping app login separate.
+              Respect the “fallback only when user chooses” rule for SMS/email
+              vs app approval.
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="rounded-full border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-muted)]">
+              IDP session placeholder
+            </span>
+            <button
+              type="button"
+              className="inline-flex items-center gap-2 rounded-full bg-[var(--color-accent)] px-4 py-2 text-sm font-semibold text-black"
+            >
+              <Sparkles size={14} />
+              Connect auth layer
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-3">
+        {flows.map((flow) => (
+          <div
+            key={flow.title}
+            className="rounded-xl border border-[var(--color-border)] bg-[var(--color-panel)] p-5"
+          >
+            <div className="flex items-center justify-between text-xs uppercase tracking-[0.16em] text-[var(--color-muted)]">
+              <span>{flow.pill}</span>
+              <Fingerprint size={14} />
+            </div>
+            <h3 className="mt-3 text-lg font-semibold">{flow.title}</h3>
+            <p className="text-sm text-[var(--color-muted)]">
+              {flow.description}
+            </p>
+          </div>
+        ))}
+      </section>
+
+      <section className="grid gap-6 md:grid-cols-[1fr,0.9fr]">
+        <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6">
+          <div className="flex items-center gap-2 text-[var(--color-muted)]">
+            <Smartphone size={16} />
+            <span className="text-xs uppercase tracking-[0.18em]">
+              App-based approvals
+            </span>
+          </div>
+          <h3 className="mt-2 text-xl font-semibold">
+            App session as MFA replacement
+          </h3>
+          <p className="text-sm text-[var(--color-muted)]">
+            If the admin keeps the mobile app signed in and opts in, use
+            push/deeplink approval instead of OTP. Otherwise fall back to
+            SMS/email based on user choice.
+          </p>
+        </div>
+        <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-panel)] p-6">
+          <div className="flex items-center gap-2 text-[var(--color-muted)]">
+            <ArrowRight size={16} />
+            <span className="text-xs uppercase tracking-[0.18em]">
+              TTL discipline
+            </span>
+          </div>
+          <h3 className="mt-2 text-xl font-semibold">
+            Keep admin sessions short
+          </h3>
+          <p className="text-sm text-[var(--color-muted)]">
+            Default admin TTL is 15 minutes. Show countdown and nudge re-auth
+            with step-up MFA when critical actions (rotate secret, export logs)
+            happen.
+          </p>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default AuthPage;

adminfront/src/features/auth/LoginPage.tsx

@@ -0,0 +1,150 @@
+import { ExternalLink, LogIn, ShieldHalf } from "lucide-react";
+import { useEffect, useRef } 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";
+
+function LoginPage() {
+  const auth = useAuth();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const autoStartedRef = useRef(false);
+  const returnTo = searchParams.get("returnTo") || "/";
+  const shouldAutoLogin = searchParams.get("auto") === "1";
+
+  useEffect(() => {
+    console.debug("[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;
+    }
+
+    autoStartedRef.current = true;
+    void auth.signinRedirect({
+      state: {
+        returnTo,
+      },
+    });
+  }, [auth, auth.activeNavigator, auth.isLoading, returnTo, shouldAutoLogin]);
+
+  const handleSSOLogin = () => {
+    void auth.signinRedirect({
+      state: {
+        returnTo: "/",
+      },
+    });
+  };
+
+  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={() => {
+                window.location.href =
+                  window.location.origin + window.location.pathname;
+              }}
+            >
+              다시 시도하기
+            </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>
+
+            <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;

adminfront/src/features/overview/GlobalOverviewPage.tsx

@@ -0,0 +1,203 @@
+import {
+  Activity,
+  ArrowUpRight,
+  Database,
+  Key,
+  PlusCircle,
+  ShieldCheck,
+  Users,
+} from "lucide-react";
+import { Link } from "react-router-dom";
+import { RoleGuard } from "../../components/auth/RoleGuard";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+import { t } from "../../lib/i18n";
+import PermissionChecker from "./components/PermissionChecker";
+
+function GlobalOverviewPage() {
+  return (
+    <div className="space-y-8 animate-in fade-in duration-500">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div className="space-y-1">
+          <h2 className="text-3xl font-bold tracking-tight">
+            {t("ui.admin.overview.title", "Dashboard")}
+          </h2>
+          <p className="text-muted-foreground">
+            {t(
+              "msg.admin.overview.description",
+              "시스템 전반의 주요 현황을 확인하고 관리합니다.",
+            )}
+          </p>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <RoleGuard roles={["super_admin"]}>
+          <Card className="transition-all hover:shadow-md">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">
+                {t("ui.admin.overview.summary.total_tenants", "총 테넌트")}
+              </CardTitle>
+              <div className="rounded-full bg-primary/10 p-2 text-primary">
+                <Users size={16} />
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">-</div>
+              <p className="mt-1 text-xs text-muted-foreground">
+                활성화된 테넌트 수
+              </p>
+            </CardContent>
+          </Card>
+          <Card className="transition-all hover:shadow-md">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">
+                {t("ui.admin.overview.summary.oidc_clients", "연동 클라이언트")}
+              </CardTitle>
+              <div className="rounded-full bg-blue-500/10 p-2 text-blue-500">
+                <ShieldCheck size={16} />
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">-</div>
+              <p className="mt-1 text-xs text-muted-foreground">
+                등록된 OIDC 앱
+              </p>
+            </CardContent>
+          </Card>
+        </RoleGuard>
+
+        <Card className="transition-all hover:shadow-md">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t(
+                "ui.admin.overview.summary.audit_events_24h",
+                "최근 감사 로그 (24h)",
+              )}
+            </CardTitle>
+            <div className="rounded-full bg-orange-500/10 p-2 text-orange-500">
+              <Activity size={16} />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">-</div>
+            <p className="mt-1 text-xs text-muted-foreground">
+              발생한 이벤트 수
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="transition-all hover:shadow-md">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t("ui.admin.overview.summary.policy_gate", "정책 상태")}
+            </CardTitle>
+            <div className="rounded-full bg-green-500/10 p-2 text-green-500">
+              <Database size={16} />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-green-600 dark:text-green-500">
+              Active
+            </div>
+            <p className="mt-1 text-xs text-muted-foreground">
+              접근 제어 정상 동작
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold tracking-tight">
+          {t("ui.admin.overview.quick_links.title", "빠른 작업")}
+        </h3>
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <RoleGuard roles={["super_admin"]}>
+            <Link
+              to="/tenants/new"
+              className="group flex flex-col justify-between rounded-xl border border-border bg-card p-5 shadow-sm transition-all hover:border-primary/50 hover:shadow-md"
+            >
+              <div className="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
+                <PlusCircle size={20} />
+              </div>
+              <div>
+                <h4 className="font-semibold transition-colors group-hover:text-primary">
+                  테넌트 추가
+                </h4>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  새로운 조직이나 그룹을 생성합니다.
+                </p>
+              </div>
+            </Link>
+          </RoleGuard>
+
+          <Link
+            to="/users"
+            className="group flex flex-col justify-between rounded-xl border border-border bg-card p-5 shadow-sm transition-all hover:border-blue-500/50 hover:shadow-md"
+          >
+            <div className="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-500/10 text-blue-500 transition-colors group-hover:bg-blue-500 group-hover:text-white">
+              <Users size={20} />
+            </div>
+            <div>
+              <h4 className="font-semibold transition-colors group-hover:text-blue-500">
+                사용자 관리
+              </h4>
+              <p className="mt-1 text-xs text-muted-foreground">
+                전체 사용자를 조회하고 관리합니다.
+              </p>
+            </div>
+          </Link>
+
+          <RoleGuard roles={["super_admin"]}>
+            <Link
+              to="/api-keys"
+              className="group flex flex-col justify-between rounded-xl border border-border bg-card p-5 shadow-sm transition-all hover:border-purple-500/50 hover:shadow-md"
+            >
+              <div className="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-purple-500/10 text-purple-500 transition-colors group-hover:bg-purple-500 group-hover:text-white">
+                <Key size={20} />
+              </div>
+              <div>
+                <h4 className="font-semibold transition-colors group-hover:text-purple-500">
+                  API 키 관리
+                </h4>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  시스템 연동을 위한 키를 발급합니다.
+                </p>
+              </div>
+            </Link>
+          </RoleGuard>
+
+          <Link
+            to="/audit-logs"
+            className="group flex flex-col justify-between rounded-xl border border-border bg-card p-5 shadow-sm transition-all hover:border-orange-500/50 hover:shadow-md"
+          >
+            <div className="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-orange-500/10 text-orange-500 transition-colors group-hover:bg-orange-500 group-hover:text-white">
+              <Activity size={20} />
+            </div>
+            <div>
+              <h4 className="font-semibold transition-colors group-hover:text-orange-500">
+                감사 로그
+              </h4>
+              <p className="mt-1 text-xs text-muted-foreground">
+                보안 이벤트를 모니터링합니다.
+              </p>
+            </div>
+          </Link>
+        </div>
+      </div>
+
+      <RoleGuard roles={["super_admin"]}>
+        <div className="pt-4">
+          <PermissionChecker />
+        </div>
+      </RoleGuard>
+    </div>
+  );
+}
+
+export default GlobalOverviewPage;

adminfront/src/features/overview/components/PermissionChecker.tsx

@@ -0,0 +1,142 @@
+import { useMutation } from "@tanstack/react-query";
+import { CheckCircle2, ShieldAlert, 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";
+
+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="bg-[var(--color-panel)] border-primary/20">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <ShieldAlert size={20} className="text-primary" />
+          ReBAC 권한 검증 도구
+        </CardTitle>
+        <CardDescription>
+          특정 주체(Subject)가 특정 리소스(Object)에 대해 권한이 있는지 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>Namespace</Label>
+            <select
+              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">Tenant</option>
+              <option value="TenantGroup">TenantGroup</option>
+              <option value="RelyingParty">RelyingParty</option>
+              <option value="System">System</option>
+            </select>
+          </div>
+          <div className="space-y-2">
+            <Label>Relation</Label>
+            <Input
+              placeholder="view, manage, admins..."
+              value={relation}
+              onChange={(e) => setRelation(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Object ID</Label>
+            <Input
+              placeholder="Tenant UUID 등"
+              value={object}
+              onChange={(e) => setObject(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Subject (User:ID)</Label>
+            <Input
+              placeholder="User:uuid 또는 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 md:w-auto px-12"
+          >
+            {checkMutation.isPending ? "검증 중..." : "권한 확인 실행"}
+          </Button>
+        </div>
+
+        {checkMutation.isSuccess && result && (
+          <div
+            className={`p-6 rounded-xl border-2 flex flex-col items-center justify-center gap-3 animate-in zoom-in duration-300 ${
+              result.allowed
+                ? "bg-green-500/10 border-green-500/50 text-green-600"
+                : "bg-destructive/10 border-destructive/50 text-destructive"
+            }`}
+          >
+            {result.allowed ? (
+              <>
+                <CheckCircle2 size={48} />
+                <div className="text-xl font-bold">Access ALLOWED</div>
+                <p className="text-sm opacity-80 text-center">
+                  해당 사용자는 요청한 리소스에 대해 권한이 있습니다. (상속
+                  포함)
+                </p>
+              </>
+            ) : (
+              <>
+                <XCircle size={48} />
+                <div className="text-xl font-bold">Access DENIED</div>
+                <p className="text-sm opacity-80 text-center">
+                  해당 사용자는 요청한 리소스에 대해 권한이 없습니다.
+                </p>
+              </>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default PermissionChecker;

adminfront/src/features/tenants/components/OrgChartUploadModal.tsx

@@ -0,0 +1,295 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import {
+  AlertCircle,
+  CheckCircle2,
+  Download,
+  FileText,
+  Loader2,
+  Upload,
+} from "lucide-react";
+import * as React from "react";
+import { Button } from "../../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { toast } from "../../../components/ui/use-toast";
+import {
+  type ImportResult,
+  fetchImportProgress,
+  importOrgChart,
+} from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+
+interface OrgChartUploadModalProps {
+  tenantId: string;
+  onSuccess?: () => void;
+}
+
+export function OrgChartUploadModal({
+  tenantId,
+  onSuccess,
+}: OrgChartUploadModalProps) {
+  const [open, setOpen] = React.useState(false);
+  const [file, setFile] = React.useState<File | null>(null);
+  const [result, setResult] = React.useState<ImportResult | null>(null);
+  const [progressId, setProgressId] = React.useState<string | null>(null);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const mutation = useMutation({
+    mutationFn: ({ file, pid }: { file: File; pid: string }) =>
+      importOrgChart(tenantId, file, pid),
+    onSuccess: (data) => {
+      setResult(data);
+      setProgressId(null);
+      if (data.errors.length === 0) {
+        toast.success(
+          t(
+            "msg.admin.org.import_success",
+            "조직도가 성공적으로 업로드되었습니다.",
+          ),
+        );
+      } else {
+        toast.error(
+          t(
+            "msg.admin.org.import_partial_success",
+            "일부 데이터 업로드 중 오류가 발생했습니다.",
+          ),
+        );
+      }
+      onSuccess?.();
+    },
+    onError: (error: AxiosError<{ error?: string }>) => {
+      setProgressId(null);
+      toast.error(t("msg.admin.org.import_error", "조직도 업로드 실패"), {
+        description: error.response?.data?.error || error.message,
+      });
+    },
+  });
+
+  const { data: progressData } = useQuery({
+    queryKey: ["importProgress", progressId],
+    queryFn: () =>
+      progressId ? fetchImportProgress(tenantId, progressId) : null,
+    enabled: !!progressId && mutation.isPending,
+    refetchInterval: 500,
+  });
+  const percent =
+    progressData && progressData.total > 0
+      ? Math.round((progressData.current / progressData.total) * 100)
+      : 0;
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0];
+    if (selectedFile) {
+      setFile(selectedFile);
+      setResult(null);
+    }
+  };
+
+  const handleUpload = () => {
+    if (file) {
+      const pid = Math.random().toString(36).substring(2, 15);
+      setProgressId(pid);
+      mutation.mutate({ file, pid });
+    }
+  };
+
+  const downloadTemplate = () => {
+    const headers = "이메일,이름,소속,직급,직무,구분,그룹,디비젼,팀,셀";
+    const example = `test1@example.com,홍길동,한맥,수석,기획,팀장,전략그룹,기획실,인사팀,-
+test2@example.com,이몽룡,삼안,선임,개발,팀원,기술본부,개발실,개발1팀,A셀`;
+    const blob = new Blob([`\uFEFF${headers}\n${example}`], {
+      type: "text/csv;charset=utf-8",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "org_chart_template.csv";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(val) => {
+        setOpen(val);
+        if (!val) {
+          setFile(null);
+          setResult(null);
+        }
+      }}
+    >
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-2">
+          <Upload size={14} />
+          {t("ui.admin.org.import_btn", "조직도 임포트 (CSV/XLSX)")}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>
+            {t("ui.admin.org.import_title", "조직도 일괄 등록")}
+          </DialogTitle>
+          <DialogDescription>
+            {t(
+              "msg.admin.org.import_description",
+              "CSV 또는 XLSX 파일을 업로드하여 조직 계층과 멤버를 한 번에 구성합니다.",
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        {!result ? (
+          <div className="space-y-4 py-4">
+            <div className="flex justify-between items-center">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={downloadTemplate}
+                className="gap-2"
+                disabled={mutation.isPending}
+              >
+                <Download size={14} />
+                {t("ui.admin.org.download_template", "템플릿 다운로드")}
+              </Button>
+              <input
+                type="file"
+                accept=".csv, .xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+                className="hidden"
+                ref={fileInputRef}
+                onChange={handleFileChange}
+                disabled={mutation.isPending}
+              />
+              <Button
+                onClick={() => fileInputRef.current?.click()}
+                variant="secondary"
+                size="sm"
+                disabled={mutation.isPending}
+              >
+                {file
+                  ? t("ui.common.change_file", "파일 변경")
+                  : t("ui.common.select_file", "파일 선택")}
+              </Button>
+            </div>
+            {file && (
+              <div className="rounded-lg border p-4 bg-muted/20 flex flex-col gap-3">
+                <div className="flex items-center gap-3">
+                  <FileText className="text-primary" />
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium truncate">{file.name}</div>
+                    <div className="text-xs text-muted-foreground">
+                      {(file.size / 1024).toFixed(1)} KB
+                    </div>
+                  </div>
+                </div>
+                {mutation.isPending && progressId && (
+                  <div className="w-full mt-2 animate-in fade-in slide-in-from-bottom-2 duration-500">
+                    <div className="flex justify-between text-xs mb-1 font-medium text-muted-foreground">
+                      <span>데이터 처리 중...</span>
+                      <span>
+                        {percent}% ({progressData?.current || 0} /{" "}
+                        {progressData?.total || 0})
+                      </span>
+                    </div>
+                    <div className="w-full bg-slate-200 rounded-full h-2 overflow-hidden relative">
+                      <div
+                        className="bg-primary h-full rounded-full transition-all duration-300 ease-out absolute top-0 left-0"
+                        style={{ width: `${Math.max(5, percent)}%` }}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4 py-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="p-4 rounded-lg bg-primary/5 border border-primary/10">
+                <div className="text-sm font-medium text-muted-foreground">
+                  전체 행
+                </div>
+                <div className="text-2xl font-bold">{result.totalRows}</div>
+              </div>
+              <div className="p-4 rounded-lg bg-green-500/5 border border-green-500/10">
+                <div className="text-sm font-medium text-muted-foreground">
+                  처리 완료
+                </div>
+                <div className="text-2xl font-bold text-green-600">
+                  {result.processed}
+                </div>
+              </div>
+              <div className="p-4 rounded-lg bg-blue-500/5 border border-blue-500/10">
+                <div className="text-sm font-medium text-muted-foreground">
+                  사용자 생성/업데이트
+                </div>
+                <div className="text-xl font-bold text-blue-600">
+                  {result.userCreated} / {result.userUpdated}
+                </div>
+              </div>
+              <div className="p-4 rounded-lg bg-orange-500/5 border border-orange-500/10">
+                <div className="text-sm font-medium text-muted-foreground">
+                  조직(테넌트) 생성
+                </div>
+                <div className="text-2xl font-bold text-orange-600">
+                  {result.tenantCreated}
+                </div>
+              </div>
+            </div>
+
+            {result.errors.length > 0 && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 text-sm font-medium text-destructive">
+                  <AlertCircle size={16} />
+                  오류 목록 ({result.errors.length})
+                </div>
+                <div className="max-h-48 overflow-y-auto border rounded-md p-2 bg-destructive/5 text-xs font-mono space-y-1">
+                  {result.errors.map((err, idx) => (
+                    <div
+                      // biome-ignore lint/suspicious/noArrayIndexKey: Errors are a static list returned from the server.
+                      key={idx}
+                      className="text-destructive border-b border-destructive/10 pb-1 last:border-0"
+                    >
+                      {" "}
+                      {err}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        <DialogFooter>
+          {!result ? (
+            <Button
+              onClick={handleUpload}
+              disabled={!file || mutation.isPending}
+              className="w-full sm:w-auto relative"
+            >
+              {mutation.isPending ? (
+                <>
+                  <Loader2 size={16} className="mr-2 animate-spin" />
+                  처리 중 ({percent}%)
+                </>
+              ) : (
+                t("ui.admin.org.start_import", "임포트 시작")
+              )}
+            </Button>
+          ) : (
+            <Button onClick={() => setOpen(false)} className="w-full sm:w-auto">
+              {t("ui.common.close", "닫기")}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

adminfront/src/features/tenants/routes/TenantAdminsAndOwnersTab.tsx

@@ -0,0 +1,729 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import {
+  Crown,
+  Plus,
+  Search,
+  ShieldCheck,
+  Trash2,
+  UserPlus,
+  Users,
+} from "lucide-react";
+import { useState } from "react";
+import { useAuth } from "react-oidc-context";
+import { useParams } from "react-router-dom";
+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,
+  DialogTrigger,
+} 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 {
+  type TenantAdmin,
+  addTenantAdmin,
+  addTenantOwner,
+  fetchTenantAdmins,
+  fetchTenantOwners,
+  fetchUsers,
+  removeTenantAdmin,
+  removeTenantOwner,
+} from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+
+type DialogMode = "owner" | "admin";
+
+export function TenantAdminsAndOwnersTab() {
+  const auth = useAuth();
+  const currentUserId = auth.user?.profile.sub;
+  const { tenantId } = useParams<{ tenantId: string }>();
+  const queryClient = useQueryClient();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [dialogMode, setDialogMode] = useState<DialogMode | null>(null);
+
+  if (!tenantId) return null;
+
+  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) {
+        queryClient.setQueryData<TenantAdmin[]>(
+          ["tenant-owners", tenantId],
+          (old) => {
+            if (!old)
+              return [
+                { id: userId, name: addedUser.name, email: addedUser.email },
+              ];
+            if (old.some((o) => o.id === userId)) return old;
+            return [
+              ...old,
+              { id: userId, name: addedUser.name, email: addedUser.email },
+            ];
+          },
+        );
+      }
+      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) => {
+      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,
+      ]);
+      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) {
+        queryClient.setQueryData<TenantAdmin[]>(
+          ["tenant-admins", tenantId],
+          (old) => {
+            if (!old)
+              return [
+                { id: userId, name: addedUser.name, email: addedUser.email },
+              ];
+            if (old.some((a) => a.id === userId)) return old;
+            return [
+              ...old,
+              { id: userId, name: addedUser.name, email: addedUser.email },
+            ];
+          },
+        );
+      }
+      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) => {
+      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,
+      ]);
+      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);
+    }
+  };
+
+  const currentOwners = ownersQuery.data || [];
+  const currentAdmins = adminsQuery.data || [];
+  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="sticky top-0 z-10 bg-secondary shadow-sm">
+                    <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>
+                      <TableHead className="text-right font-bold w-[100px]">
+                        {t("ui.admin.tenants.owners.table_actions", "액션")}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {ownersQuery.isLoading ? (
+                      <TableRow>
+                        <TableCell colSpan={3} 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={3}
+                          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"
+                        >
+                          <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>
+                          <TableCell className="text-right">
+                            <span className="relative inline-block group/tt">
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className={`opacity-0 group-hover:opacity-100 transition-all ${
+                                  owner.id === currentUserId ||
+                                  currentOwners.length <= 1
+                                    ? "opacity-50 cursor-not-allowed pointer-events-none"
+                                    : "text-destructive hover:text-destructive hover:bg-destructive/10"
+                                }`}
+                                onClick={() =>
+                                  handleRemoveOwner(owner.id, owner.name)
+                                }
+                                disabled={
+                                  removeOwnerMutation.isPending ||
+                                  owner.id === currentUserId ||
+                                  currentOwners.length <= 1
+                                }
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                              <span className="pointer-events-none absolute bottom-full right-0 z-[100] mb-2 w-max rounded bg-foreground px-2 py-1 text-xs text-background opacity-0 shadow-lg transition-opacity group-hover/tt:opacity-100">
+                                {owner.id === currentUserId
+                                  ? t(
+                                      "msg.admin.tenants.owners.remove_self",
+                                      "본인의 권한은 회수할 수 없습니다.",
+                                    )
+                                  : currentOwners.length <= 1
+                                    ? t(
+                                        "msg.admin.tenants.owners.remove_last",
+                                        "마지막 소유자는 회수할 수 없습니다.",
+                                      )
+                                    : t(
+                                        "ui.admin.tenants.owners.remove_title",
+                                        "소유자 권한 회수",
+                                      )}
+                              </span>
+                            </span>
+                          </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="sticky top-0 z-10 bg-secondary shadow-sm">
+                    <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>
+                      <TableHead className="text-right font-bold w-[100px]">
+                        {t("ui.admin.tenants.admins.table_actions", "액션")}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {adminsQuery.isLoading ? (
+                      <TableRow>
+                        <TableCell colSpan={3} 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={3}
+                          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"
+                        >
+                          <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>
+                          <TableCell className="text-right">
+                            <span className="relative inline-block group/tt">
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className={`opacity-0 group-hover:opacity-100 transition-all ${
+                                  admin.id === currentUserId ||
+                                  currentAdmins.length <= 1
+                                    ? "opacity-50 cursor-not-allowed pointer-events-none"
+                                    : "text-destructive hover:text-destructive hover:bg-destructive/10"
+                                }`}
+                                onClick={() =>
+                                  handleRemoveAdmin(admin.id, admin.name)
+                                }
+                                disabled={
+                                  removeAdminMutation.isPending ||
+                                  admin.id === currentUserId ||
+                                  currentAdmins.length <= 1
+                                }
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                              <span className="pointer-events-none absolute bottom-full right-0 z-[100] mb-2 w-max rounded bg-foreground px-2 py-1 text-xs text-background opacity-0 shadow-lg transition-opacity group-hover/tt:opacity-100">
+                                {admin.id === currentUserId
+                                  ? t(
+                                      "msg.admin.tenants.admins.remove_self",
+                                      "본인의 권한은 회수할 수 없습니다.",
+                                    )
+                                  : currentAdmins.length <= 1
+                                    ? t(
+                                        "msg.admin.tenants.admins.remove_last",
+                                        "마지막 관리자는 회수할 수 없습니다.",
+                                      )
+                                    : t(
+                                        "ui.admin.tenants.admins.remove_title",
+                                        "관리자 권한 회수",
+                                      )}
+                              </span>
+                            </span>
+                          </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;

adminfront/src/features/tenants/routes/TenantCreatePage.tsx

@@ -0,0 +1,281 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Building2, Sparkles } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+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 { Label } from "../../../components/ui/label";
+import { Textarea } from "../../../components/ui/textarea";
+import { createTenant, fetchTenants } from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+
+function TenantCreatePage() {
+  const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [type, setType] = useState("COMPANY");
+  const [slug, setSlug] = useState("");
+  const [parentId, setParentId] = useState("");
+  const [description, setDescription] = useState("");
+  const [status, setStatus] = useState("active");
+  const [domains, setDomains] = useState("");
+
+  const parentQuery = useQuery({
+    queryKey: ["tenants", { limit: 1000 }],
+    queryFn: () => fetchTenants(1000, 0),
+  });
+
+  const mutation = useMutation({
+    mutationFn: () =>
+      createTenant({
+        name,
+        type,
+        slug: slug || undefined,
+        parentId: parentId || undefined,
+        description: description || undefined,
+        status,
+        domains: domains
+          .split(",")
+          .map((d) => d.trim())
+          .filter((d) => d !== ""),
+      }),
+    onSuccess: () => {
+      navigate("/tenants");
+    },
+  });
+
+  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 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="USER_GROUP">
+                  {t(
+                    "domain.tenant_type.user_group",
+                    "USER_GROUP (내부 부서/팀)",
+                  )}
+                </option>
+                <option value="PERSONAL">
+                  {t(
+                    "domain.tenant_type.personal",
+                    "PERSONAL (개인 워크스페이스)",
+                  )}
+                </option>
+              </select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="parentId" className="text-sm font-semibold">
+                {t("ui.admin.tenants.create.form.parent", "상위 테넌트 (선택)")}
+              </Label>
+              <select
+                id="parentId"
+                name="parentId"
+                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={parentId}
+                onChange={(e) => setParentId(e.target.value)}
+              >
+                <option value="">{t("ui.common.none", "없음")}</option>
+                {parentQuery.data?.items?.map((t) => (
+                  <option key={t.id} value={t.id}>
+                    {t.name} ({t.slug})
+                  </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>
+            <Input
+              id="tenant-domains"
+              name="domains"
+              value={domains}
+              onChange={(e) => setDomains(e.target.value)}
+              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>
+
+          {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()}
+          disabled={mutation.isPending || name.trim() === ""}
+        >
+          {t("ui.common.create", "생성")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default TenantCreatePage;

adminfront/src/features/tenants/routes/TenantDetailPage.tsx

@@ -0,0 +1,103 @@
+import { useQuery } from "@tanstack/react-query";
+import { ArrowLeft } from "lucide-react";
+import { Link, Outlet, useLocation, useParams } from "react-router-dom";
+import { Badge } from "../../../components/ui/badge";
+import { fetchMe, fetchTenant } from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+
+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 canAccessSchema =
+    profile?.role === "super_admin" || profile?.role === "tenant_admin";
+
+  const isPermissionsTab = location.pathname.includes("/permissions");
+  const isOrganizationTab = location.pathname.includes("/organization");
+
+  return (
+    <div className="space-y-8">
+      <header className="flex flex-wrap items-start justify-between gap-4">
+        <div className="space-y-2">
+          <h2 className="text-3xl font-semibold">
+            {tenantQuery.data?.name ??
+              t("ui.admin.tenants.detail.loading", "불러오는 중...")}
+          </h2>
+          <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") &&
+            !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;

adminfront/src/features/tenants/routes/TenantGroupsPage.tsx

@@ -0,0 +1,625 @@
+import {
+  type UseMutationResult,
+  useMutation,
+  useQuery,
+} from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import {
+  ChevronDown,
+  ChevronRight,
+  Plus,
+  RefreshCw,
+  Shield,
+  Trash2,
+  UserMinus,
+  UserPlus,
+  Users,
+} from "lucide-react";
+import type React from "react";
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+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 { Label } from "../../../components/ui/label";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import { toast } from "../../../components/ui/use-toast";
+import {
+  type GroupSummary,
+  addGroupMember,
+  createGroup,
+  deleteGroup,
+  fetchGroups,
+  removeGroupMember,
+} from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+import { OrgChartUploadModal } from "../components/OrgChartUploadModal";
+
+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 [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);
+
+  // 그룹 목록 조회
+  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,
+      });
+    },
+  });
+
+  const groupTree = groupsQuery.data
+    ? buildGroupTree(groupsQuery.data, tenantId)
+    : [];
+
+  const handleAddSubGroup = (parentId: string) => {
+    setNewGroupParentId(parentId);
+    // Optionally scroll to the create form or highlight it
+  };
+
+  const handleAddMember = (groupId: string) => {
+    const userId = window.prompt(
+      t(
+        "msg.admin.groups.prompt.user_id",
+        "추가할 사용자의 UUID를 입력하세요:",
+      ),
+    );
+    if (userId) {
+      addMemberMutation.mutate({ groupId, userId });
+    }
+  };
+
+  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">
+              <OrgChartUploadModal
+                tenantId={tenantId}
+                onSuccess={() => groupsQuery.refetch()}
+              />
+              <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="sticky top-0 z-10 bg-secondary shadow-sm">
+                    <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={() => handleAddMember(currentGroup.id)}
+                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="sticky top-0 z-10 bg-secondary shadow-sm">
+                    <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.remove", "제거")}
+                      </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">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() =>
+                              removeMemberMutation.mutate({
+                                groupId: currentGroup.id,
+                                userId: user.id,
+                              })
+                            }
+                            disabled={removeMemberMutation.isPending}
+                          >
+                            <UserMinus size={14} className="text-destructive" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+export default TenantGroupsPage;

adminfront/src/features/tenants/routes/TenantListPage.tsx

@@ -0,0 +1,417 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import {
+  CornerDownRight,
+  Pencil,
+  Plus,
+  RefreshCw,
+  Search,
+  Trash2,
+} from "lucide-react";
+import * as React from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { RoleGuard } from "../../../components/auth/RoleGuard";
+import { Badge } from "../../../components/ui/badge";
+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 {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import {
+  type TenantSummary,
+  deleteTenant,
+  deleteTenantsBulk,
+  fetchMe,
+  fetchTenants,
+} from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+import { OrgChartUploadModal } from "../components/OrgChartUploadModal";
+
+function TenantListPage() {
+  const navigate = useNavigate();
+  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+  const [search, setSearch] = React.useState("");
+
+  const { data: profile } = useQuery({
+    queryKey: ["me"],
+    queryFn: fetchMe,
+  });
+
+  // Redirect tenant_admin ONLY if they have one or fewer manageable tenants in the list
+  React.useEffect(() => {
+    if (profile?.role === "tenant_admin") {
+      const manageableCount = profile.manageableTenants?.length ?? 0;
+      if (
+        (manageableCount === 1 || manageableCount === 0) &&
+        profile.tenantId
+      ) {
+        navigate(`/tenants/${profile.tenantId}`, { replace: true });
+      }
+    }
+  }, [profile, navigate]);
+
+  const query = useQuery({
+    queryKey: ["tenants", { limit: 1000, offset: 0 }],
+    queryFn: () => fetchTenants(1000, 0),
+    enabled:
+      profile?.role === "super_admin" ||
+      (profile?.role === "tenant_admin" &&
+        (profile.manageableTenants?.length ?? 0) > 1),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (tenantId: string) => deleteTenant(tenantId),
+    onSuccess: () => {
+      query.refetch();
+    },
+  });
+
+  const deleteBulkMutation = useMutation({
+    mutationFn: (ids: string[]) => deleteTenantsBulk(ids),
+    onSuccess: () => {
+      setSelectedIds([]);
+      query.refetch();
+    },
+  });
+
+  if (
+    profile &&
+    profile.role !== "super_admin" &&
+    profile.role !== "tenant_admin"
+  ) {
+    return (
+      <div className="flex h-[50vh] flex-col items-center justify-center space-y-4">
+        <h3 className="text-xl font-bold">
+          {t("msg.admin.common.forbidden", "접근 권한이 없습니다.")}
+        </h3>
+        <Button onClick={() => navigate("/")}>
+          {t("ui.common.go_home", "홈으로 이동")}
+        </Button>
+      </div>
+    );
+  }
+
+  if (
+    profile?.role === "tenant_admin" &&
+    (profile.manageableTenants?.length ?? 0) <= 1
+  ) {
+    return null;
+  }
+
+  const errorMsg = (query.error as AxiosError<{ error?: string }>)?.response
+    ?.data?.error;
+  const fallbackError =
+    !errorMsg && query.isError
+      ? t("msg.admin.tenants.fetch_error", "테넌트 목록 조회에 실패했습니다.")
+      : null;
+
+  const allTenants = query.data?.items ?? [];
+  const tenants = React.useMemo(() => {
+    if (!search.trim()) return allTenants;
+    const term = search.toLowerCase();
+    return allTenants.filter(
+      (t) =>
+        t.name.toLowerCase().includes(term) ||
+        t.slug.toLowerCase().includes(term),
+    );
+  }, [allTenants, search]);
+
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      setSelectedIds(tenants.map((t) => t.id));
+    } else {
+      setSelectedIds([]);
+    }
+  };
+
+  const handleSelect = (id: string, checked: boolean) => {
+    if (checked) {
+      setSelectedIds((prev) => [...prev, id]);
+    } else {
+      setSelectedIds((prev) => prev.filter((i) => i !== id));
+    }
+  };
+
+  const handleDeleteBulk = () => {
+    if (selectedIds.length === 0) return;
+    if (
+      !window.confirm(
+        t(
+          "msg.admin.tenants.delete_bulk_confirm",
+          "선택한 {{count}}개 테넌트를 삭제할까요?",
+          { count: selectedIds.length },
+        ),
+      )
+    ) {
+      return;
+    }
+    deleteBulkMutation.mutate(selectedIds);
+  };
+
+  const rootTenant =
+    tenants.find((t) => t.type === "COMPANY_GROUP") || tenants[0];
+
+  const handleDelete = (tenantId: string, tenantName: string) => {
+    if (
+      !window.confirm(
+        t(
+          "msg.admin.tenants.delete_confirm",
+          '테넌트 "{{name}}"를 삭제할까요?',
+          { name: tenantName },
+        ),
+      )
+    ) {
+      return;
+    }
+    deleteMutation.mutate(tenantId);
+  };
+
+  return (
+    <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
+      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
+        <div className="space-y-2">
+          <h2 className="text-3xl font-semibold">
+            {t("ui.admin.tenants.title", "테넌트 목록")}
+          </h2>
+          <p className="text-sm text-[var(--color-muted)]">
+            {t(
+              "msg.admin.tenants.subtitle",
+              "시스템에 등록된 모든 테넌트를 평면 목록으로 확인하고 관리합니다.",
+            )}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <RoleGuard roles={["super_admin"]}>
+            {selectedIds.length > 0 && (
+              <Button
+                variant="destructive"
+                onClick={handleDeleteBulk}
+                disabled={deleteBulkMutation.isPending}
+                className="gap-2"
+              >
+                <Trash2 size={16} />
+                {t("ui.admin.tenants.delete_selected", "선택 삭제")} (
+                {selectedIds.length})
+              </Button>
+            )}
+          </RoleGuard>
+
+          <RoleGuard roles={["super_admin"]}>
+            <OrgChartUploadModal
+              tenantId={rootTenant?.id || "root"}
+              onSuccess={() => query.refetch()}
+            />
+          </RoleGuard>
+
+          <Button
+            variant="outline"
+            onClick={() => query.refetch()}
+            disabled={query.isFetching}
+          >
+            <RefreshCw size={16} />
+            {t("ui.common.refresh", "새로고침")}
+          </Button>
+          <RoleGuard roles={["super_admin"]}>
+            <Button asChild>
+              <Link to="/tenants/new">
+                <Plus size={16} />
+                {t("ui.admin.tenants.add", "테넌트 추가")}
+              </Link>
+            </Button>
+          </RoleGuard>
+        </div>
+      </header>
+
+      <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>
+              {t("ui.admin.tenants.registry.title", "Tenant Registry")}
+            </CardTitle>
+            <CardDescription>
+              {t("msg.admin.tenants.registry.count", "총 {{count}}개 테넌트", {
+                count: query.data?.total ?? 0,
+              })}
+            </CardDescription>
+          </div>
+        </CardHeader>{" "}
+        <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
+          <div className="mb-6 flex items-center gap-4 flex-shrink-0">
+            <div className="relative flex-1 min-w-[240px] max-w-sm">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder={t(
+                  "ui.admin.tenants.list.search_placeholder",
+                  "테넌트 이름 또는 슬러그 검색...",
+                )}
+                className="pl-9"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+            </div>
+          </div>
+
+          {(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="sticky top-0 z-10 bg-secondary shadow-sm">
+                  <TableRow>
+                    <TableHead className="w-[40px]">
+                      <Checkbox
+                        checked={
+                          tenants.length > 0 &&
+                          selectedIds.length === tenants.length
+                        }
+                        onCheckedChange={(checked) =>
+                          handleSelectAll(!!checked)
+                        }
+                      />
+                    </TableHead>
+                    <TableHead>
+                      {t("ui.admin.tenants.table.name", "NAME")}
+                    </TableHead>
+                    <TableHead>
+                      {t("ui.admin.tenants.table.type", "TYPE")}
+                    </TableHead>
+                    <TableHead>
+                      {t("ui.admin.tenants.table.slug", "SLUG")}
+                    </TableHead>
+                    <TableHead>
+                      {t("ui.admin.tenants.table.status", "STATUS")}
+                    </TableHead>
+                    <TableHead>
+                      {t("ui.admin.tenants.table.members", "MEMBERS")}
+                    </TableHead>
+                    <TableHead>
+                      {t("ui.admin.tenants.table.updated", "UPDATED")}
+                    </TableHead>
+                    <TableHead className="text-right">
+                      {t("ui.admin.tenants.table.actions", "ACTIONS")}
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {query.isLoading && (
+                    <TableRow>
+                      <TableCell colSpan={8}>
+                        {t("msg.common.loading", "로딩 중...")}
+                      </TableCell>
+                    </TableRow>
+                  )}
+                  {!query.isLoading && tenants.length === 0 && (
+                    <TableRow>
+                      <TableCell
+                        colSpan={8}
+                        className="text-center py-8 text-muted-foreground"
+                      >
+                        {t(
+                          "msg.admin.tenants.empty",
+                          "아직 등록된 테넌트가 없습니다.",
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  )}
+                  {tenants.map((tenant) => (
+                    <TableRow key={tenant.id}>
+                      <TableCell>
+                        <Checkbox
+                          checked={selectedIds.includes(tenant.id)}
+                          onCheckedChange={(checked) =>
+                            handleSelect(tenant.id, !!checked)
+                          }
+                        />
+                      </TableCell>
+                      <TableCell className="font-semibold">
+                        {tenant.name}
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant="outline"
+                          className="text-[10px] font-mono"
+                        >
+                          {t(
+                            `domain.tenant_type.${tenant.type?.toLowerCase()}`,
+                            tenant.type,
+                          )}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="font-mono text-xs">
+                        {tenant.slug}
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={
+                            tenant.status === "active"
+                              ? "default"
+                              : tenant.status === "pending"
+                                ? "secondary"
+                                : "muted"
+                          }
+                        >
+                          {t(
+                            `ui.common.status.${tenant.status}`,
+                            tenant.status,
+                          )}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="font-medium">
+                        {tenant.memberCount}
+                      </TableCell>
+                      <TableCell className="text-xs">
+                        {tenant.updatedAt
+                          ? new Date(tenant.updatedAt).toLocaleString("ko-KR")
+                          : "-"}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex justify-end gap-2">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => navigate(`/tenants/${tenant.id}`)}
+                          >
+                            <Pencil size={14} />
+                            {t("ui.common.edit", "편집")}
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleDelete(tenant.id, tenant.name)}
+                            disabled={deleteMutation.isPending}
+                          >
+                            <Trash2 size={14} />
+                            {t("ui.common.delete", "삭제")}
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default TenantListPage;

adminfront/src/features/tenants/routes/TenantProfilePage.tsx

@@ -0,0 +1,339 @@
+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,
+  fetchTenant,
+  fetchTenants,
+  updateTenant,
+} from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+
+export function TenantProfilePage() {
+  const { tenantId } = useParams<{ tenantId: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  if (!tenantId) {
+    return (
+      <div>{t("msg.admin.tenants.missing_id", "테넌트 ID가 없습니다.")}</div>
+    );
+  }
+
+  const tenantQuery = useQuery({
+    queryKey: ["tenant", tenantId],
+    queryFn: () => fetchTenant(tenantId),
+  });
+
+  const parentQuery = useQuery({
+    queryKey: ["tenants", "list-all"],
+    queryFn: () => fetchTenants(1000, 0),
+  });
+
+  const availableParents =
+    parentQuery.data?.items?.filter((t) => t.id !== tenantId) || [];
+
+  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("");
+  const [parentId, setParentId] = useState("");
+
+  useEffect(() => {
+    if (tenantQuery.data) {
+      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?.join(", ") ?? "");
+      setParentId(tenantQuery.data.parentId ?? "");
+    }
+  }, [tenantQuery.data]);
+
+  const updateMutation = useMutation({
+    mutationFn: () =>
+      updateTenant(tenantId, {
+        name,
+        type,
+        slug,
+        description: description || undefined,
+        status,
+        parentId: parentId || undefined,
+        domains: domains
+          .split(",")
+          .map((d) => d.trim())
+          .filter((d) => d !== ""),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tenants"] });
+      queryClient.invalidateQueries({ queryKey: ["tenant", tenantId] });
+      toast.success(t("msg.info.saved_success", "저장되었습니다."));
+    },
+    onError: (err: AxiosError<{ error?: string }>) => {
+      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 handleDelete = () => {
+    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="bg-[var(--color-panel)] mt-6">
+        <CardHeader>
+          <CardTitle>
+            {t("ui.admin.tenants.profile.title", "테넌트 프로필")}
+          </CardTitle>
+          <CardDescription>
+            {t(
+              "ui.admin.tenants.profile.subtitle",
+              "슬러그 및 상태 변경은 즉시 적용됩니다.",
+            )}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {loadError && (
+            <div className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {loadError}
+            </div>
+          )}
+          <div className="space-y-2">
+            <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 className="space-y-2">
+            <Label className="text-sm font-semibold">
+              {t("ui.admin.tenants.profile.type", "테넌트 유형")}
+            </Label>
+            <select
+              id="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="USER_GROUP">
+                {t(
+                  "domain.tenant_type.user_group",
+                  "USER_GROUP (내부 부서/팀)",
+                )}
+              </option>
+              <option value="PERSONAL">
+                {t(
+                  "domain.tenant_type.personal",
+                  "PERSONAL (개인 워크스페이스)",
+                )}
+              </option>
+            </select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="parentId" className="text-sm font-semibold">
+              {t("ui.admin.tenants.profile.form.parent", "상위 테넌트 (선택)")}
+            </Label>
+            <select
+              id="parentId"
+              name="parentId"
+              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={parentId}
+              onChange={(e) => setParentId(e.target.value)}
+            >
+              <option value="">{t("ui.common.none", "없음 (최상위)")}</option>
+              {availableParents.map((t) => (
+                <option key={t.id} value={t.id}>
+                  {t.name} ({t.slug})
+                </option>
+              ))}
+            </select>
+            <p className="text-xs text-muted-foreground mt-1">
+              {t(
+                "ui.admin.tenants.profile.form.parent_help",
+                "하위 조직을 종속시킬 경우 상위 테넌트를 선택해주세요.",
+              )}
+            </p>
+          </div>
+          <div className="space-y-2">
+            <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 className="space-y-2">
+            <Label className="text-sm font-semibold">
+              {t("ui.admin.tenants.profile.description", "설명")}
+            </Label>
+            <Textarea
+              rows={3}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">
+              {t(
+                "ui.admin.tenants.profile.allowed_domains",
+                "허용된 도메인 (콤마로 구분)",
+              )}
+            </Label>
+            <Input
+              value={domains}
+              onChange={(e) => setDomains(e.target.value)}
+              placeholder="example.com, example.kr"
+            />
+            <p className="text-xs text-muted-foreground">
+              {t(
+                "ui.admin.tenants.profile.allowed_domains_help",
+                "이 도메인을 가진 이메일로 가입한 사용자는 자동으로 이 테넌트에 배정됩니다.",
+              )}
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">
+              {t("ui.admin.tenants.profile.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>
+          {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-8 flex flex-wrap items-center justify-between gap-3">
+        <Button
+          variant="outline"
+          onClick={handleDelete}
+          disabled={deleteMutation.isPending}
+        >
+          <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()}
+            disabled={
+              updateMutation.isPending ||
+              tenantQuery.isLoading ||
+              name.trim() === ""
+            }
+          >
+            <Save size={16} />
+            {t("ui.common.save", "저장")}
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}

adminfront/src/features/tenants/routes/TenantSchemaPage.tsx

@@ -0,0 +1,425 @@
+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";
+
+type SchemaFieldType =
+  | "text"
+  | "number"
+  | "boolean"
+  | "date"
+  | "float"
+  | "datetime";
+
+type SchemaField = {
+  id: string;
+  key: string;
+  label: string;
+  type: SchemaFieldType;
+  required: boolean;
+  adminOnly: boolean;
+  validation?: string;
+  unsigned?: boolean;
+  isLoginId?: boolean;
+};
+
+function createFieldId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+
+export function TenantSchemaPage() {
+  const { tenantId } = useParams<{ tenantId: string }>();
+  const queryClient = useQueryClient();
+
+  const { data: profile, isLoading: isProfileLoading } = useQuery({
+    queryKey: ["me"],
+    queryFn: fetchMe,
+  });
+
+  const canAccess =
+    profile?.role === "super_admin" || profile?.role === "tenant_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((field) => ({
+          id: typeof field?.id === "string" ? field.id : createFieldId(),
+          key: typeof field?.key === "string" ? field.key : "",
+          label: typeof field?.label === "string" ? field.label : "",
+          type:
+            field?.type === "number" ||
+            field?.type === "boolean" ||
+            field?.type === "date" ||
+            field?.type === "float" ||
+            field?.type === "datetime"
+              ? field.type
+              : "text",
+          required: Boolean(field?.required),
+          adminOnly: Boolean(field?.adminOnly),
+          validation:
+            typeof field?.validation === "string" ? field.validation : "",
+          unsigned: Boolean(field?.unsigned),
+          isLoginId: Boolean(field?.isLoginId),
+        })),
+      );
+    }
+  }, [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,
+      {
+        id: createFieldId(),
+        key: "",
+        label: "",
+        type: "text",
+        required: false,
+        adminOnly: false,
+        validation: "",
+        unsigned: false,
+      },
+    ]);
+  };
+
+  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
+                    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 (
+                        nextType === "text" ||
+                        nextType === "number" ||
+                        nextType === "boolean" ||
+                        nextType === "date" ||
+                        nextType === "float" ||
+                        nextType === "datetime"
+                      ) {
+                        updateField(index, {
+                          type: nextType as SchemaFieldType,
+                        });
+                      }
+                    }}
+                  >
+                    <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
+                      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
+                      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
+                      type="checkbox"
+                      checked={field.isLoginId || false}
+                      onChange={(e) =>
+                        updateField(index, { isLoginId: e.target.checked })
+                      }
+                      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>
+                  {(field.type === "number" || field.type === "float") && (
+                    <label className="flex items-center gap-2 cursor-pointer">
+                      <input
+                        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>
+  );
+}

adminfront/src/features/tenants/routes/TenantSubTenantsPage.tsx

@@ -0,0 +1,132 @@
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRight, Building2, Plus } from "lucide-react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+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 { fetchTenants } 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: () => fetchTenants(50, 0, 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="flex-1 rounded-md border overflow-hidden flex flex-col">
+          <div className="flex-1 overflow-auto relative custom-scrollbar">
+            <Table>
+              <TableHeader className="sticky top-0 z-10 bg-secondary shadow-sm">
+                <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>
+                  <TableHead className="text-right">
+                    {t("ui.admin.tenants.sub.table.action", "ACTION")}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {subTenants.length === 0 && (
+                  <TableRow>
+                    <TableCell
+                      colSpan={4}
+                      className="text-center py-8 text-muted-foreground"
+                    >
+                      {t(
+                        "msg.admin.tenants.sub.empty",
+                        "하위 테넌트가 없습니다.",
+                      )}
+                    </TableCell>
+                  </TableRow>
+                )}
+                {subTenants.map((tenant) => (
+                  <TableRow key={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>
+                    <TableCell className="text-right">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => navigate(`/tenants/${tenant.id}`)}
+                      >
+                        {t("ui.admin.tenants.sub.manage", "관리")}{" "}
+                        <ArrowRight size={12} className="ml-1" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default TenantSubTenantsPage;

adminfront/src/features/tenants/routes/TenantUsersPage.tsx

@@ -0,0 +1,123 @@
+import { useQuery } from "@tanstack/react-query";
+import { Mail, User } from "lucide-react";
+import { useParams } from "react-router-dom";
+import { Badge } from "../../../components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "../../../components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import { fetchTenant, fetchUsers } from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+
+function TenantUsersPage() {
+  const params = useParams<{ tenantId: string }>();
+  const tenantId = params.tenantId ?? "";
+
+  // 테넌트의 슬러그(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 users = usersQuery.data?.items ?? [];
+
+  return (
+    <Card className="mt-6 bg-[var(--color-panel)] flex-1 flex flex-col min-h-0 overflow-hidden">
+      <CardHeader className="flex-shrink-0">
+        <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>
+      </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="sticky top-0 z-10 bg-secondary shadow-sm">
+                <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>
+                {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}>
+                    <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;

adminfront/src/features/user-groups/routes/GlobalUserGroupListPage.tsx

@@ -0,0 +1,149 @@
+import { useQuery } from "@tanstack/react-query";
+import { Building2, Plus, Users } from "lucide-react";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+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 {
+  type TenantSummary,
+  fetchGroups,
+  fetchTenants,
+} from "../../../lib/adminApi";
+
+export default function GlobalUserGroupListPage() {
+  const { data: tenantList, isLoading: isTenantsLoading } = useQuery({
+    queryKey: ["admin-tenants"],
+    queryFn: () => fetchTenants(100, 0),
+  });
+
+  if (isTenantsLoading)
+    return <div className="p-8">Loading tenants and groups...</div>;
+
+  return (
+    <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
+      <header className="flex items-start justify-between flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
+        <div className="space-y-1">
+          <h2 className="text-3xl font-bold tracking-tight">User Groups</h2>
+          <p className="text-muted-foreground">
+            모든 테넌트의 유저 그룹을 관리합니다. 권한 상속의 주체가 되는 그룹을
+            설정하세요.
+          </p>
+        </div>
+      </header>
+
+      <div className="grid gap-6 flex-1 overflow-auto p-1">
+        {tenantList?.items.map((tenant) => (
+          <TenantGroupCard key={tenant.id} tenant={tenant} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TenantGroupCard({ tenant }: { tenant: TenantSummary }) {
+  const { data: groups, isLoading } = useQuery({
+    queryKey: ["tenant-user-groups", tenant.id],
+    queryFn: () => fetchGroups(tenant.id),
+  });
+
+  return (
+    <Card className="flex flex-col min-h-0 bg-[var(--color-panel)] overflow-hidden">
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 flex-shrink-0">
+        <div className="space-y-1">
+          <CardTitle className="text-xl flex items-center gap-2">
+            <Building2 size={20} className="text-muted-foreground" />
+            {tenant.name}
+            <Badge variant="outline" className="ml-2">
+              {tenant.slug}
+            </Badge>
+          </CardTitle>
+          <CardDescription>
+            이 테넌트에 정의된 유저 그룹 목록입니다.
+          </CardDescription>
+        </div>
+        <Button size="sm" variant="outline" asChild>
+          <Link to={`/tenants/${tenant.id}/user-groups`}>
+            <Plus size={16} className="mr-2" />
+            그룹 관리
+          </Link>
+        </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="sticky top-0 z-10 bg-secondary shadow-sm">
+                <TableRow>
+                  <TableHead className="w-[250px]">그룹명</TableHead>
+                  <TableHead>설명</TableHead>
+                  <TableHead className="w-[100px]">멤버 수</TableHead>
+                  <TableHead className="text-right">작업</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {isLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={4} className="text-center">
+                      Loading...
+                    </TableCell>
+                  </TableRow>
+                ) : groups?.length === 0 ? (
+                  <TableRow>
+                    <TableCell
+                      colSpan={4}
+                      className="text-center text-muted-foreground py-4"
+                    >
+                      등록된 유저 그룹이 없습니다.
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  groups?.map((group) => (
+                    <TableRow key={group.id}>
+                      <TableCell className="font-medium">
+                        <div className="flex items-center gap-2">
+                          <Users size={14} className="text-primary" />
+                          <Link
+                            to={`/tenants/${tenant.id}/user-groups/${group.id}`}
+                            className="hover:underline"
+                          >
+                            {group.name}
+                          </Link>
+                        </div>
+                      </TableCell>
+                      <TableCell>{group.description || "-"}</TableCell>
+                      <TableCell>{group.members?.length || 0} 명</TableCell>
+                      <TableCell className="text-right">
+                        <Button variant="ghost" size="sm" asChild>
+                          <Link
+                            to={`/tenants/${tenant.id}/user-groups/${group.id}`}
+                          >
+                            상세보기
+                          </Link>
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

adminfront/src/features/user-groups/routes/TenantUserGroupsTab.tsx

@@ -0,0 +1,805 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import {
+  ArrowRight,
+  Briefcase,
+  Building2,
+  ChevronDown,
+  ChevronRight,
+  CornerDownRight,
+  ExternalLink,
+  FolderOpen,
+  LayoutDashboard,
+  MoreHorizontal,
+  Network,
+  Plus,
+  RefreshCw,
+  Search,
+  Settings,
+  Trash2,
+  UserCircle,
+  UserPlus,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+import { useMemo, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+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,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../../components/ui/dropdown-menu";
+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 {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../../components/ui/tabs";
+import { toast } from "../../../components/ui/use-toast";
+import {
+  type TenantSummary,
+  type UserSummary,
+  createUser,
+  fetchTenants,
+  fetchUsers,
+  updateTenant,
+  updateUser,
+} from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+import { type TenantNode, buildTenantFullTree } from "../../../lib/tenantTree";
+
+// --- Icons & Helpers ---
+const getTenantIcon = (type?: string) => {
+  switch (type?.toUpperCase()) {
+    case "COMPANY_GROUP":
+      return Briefcase;
+    case "PERSONAL":
+      return UserCircle;
+    case "USER_GROUP":
+      return Network;
+    default:
+      return Building2;
+  }
+};
+
+// --- Components ---
+
+const SidebarNode: React.FC<{
+  node: TenantNode;
+  level: number;
+  selectedId: string;
+  onSelect: (id: string) => void;
+  searchTerm: string;
+}> = ({ node, level, selectedId, onSelect, searchTerm }) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const hasChildren = node.children && node.children.length > 0;
+  const isSelected = selectedId === node.id;
+  const TypeIcon = getTenantIcon(node.type);
+
+  // Auto-expand on search
+  React.useEffect(() => {
+    if (searchTerm) {
+      const matchInDescendants = (n: TenantNode): boolean => {
+        return n.children.some(
+          (c) =>
+            c.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            matchInDescendants(c),
+        );
+      };
+      if (matchInDescendants(node)) setIsExpanded(true);
+    }
+  }, [searchTerm, node]);
+
+  const isMatching =
+    searchTerm && node.name.toLowerCase().includes(searchTerm.toLowerCase());
+
+  return (
+    <div className="flex flex-col">
+      <button
+        type="button"
+        className={`w-full text-left flex items-center group px-2 py-1.5 rounded-md cursor-pointer transition-colors ${
+          isSelected
+            ? "bg-primary text-primary-foreground font-semibold"
+            : "hover:bg-muted/60 text-muted-foreground hover:text-foreground"
+        } ${isMatching ? "ring-1 ring-primary/30 bg-primary/5" : ""}`}
+        onClick={() => {
+          onSelect(node.id);
+          if (hasChildren) setIsExpanded(!isExpanded);
+        }}
+      >
+        <div className="flex items-center flex-1 min-w-0">
+          {/* Indent & Expander */}
+          <div style={{ width: `${level * 1.2}rem` }} className="shrink-0" />
+          <div className="w-5 h-5 flex items-center justify-center mr-1">
+            {hasChildren ? (
+              <span className="rounded p-0.5">
+                {isExpanded ? (
+                  <ChevronDown size={14} />
+                ) : (
+                  <ChevronRight size={14} />
+                )}
+              </span>
+            ) : (
+              level > 0 && <div className="w-1 h-1 rounded-full bg-border" />
+            )}
+          </div>
+
+          <TypeIcon
+            size={16}
+            className={`shrink-0 mr-2 ${isSelected ? "text-primary-foreground" : "text-primary/70"}`}
+          />
+          <span className="text-sm truncate">{node.name}</span>
+        </div>
+
+        <Badge
+          variant={isSelected ? "secondary" : "outline"}
+          className={`ml-2 text-[10px] px-1 h-4 min-w-[1.5rem] justify-center ${
+            isSelected ? "" : "opacity-60"
+          }`}
+        >
+          {node.recursiveMemberCount}
+        </Badge>
+      </button>
+
+      {isExpanded && hasChildren && (
+        <div className="flex flex-col">
+          {node.children.map((child) => (
+            <SidebarNode
+              key={child.id}
+              node={child}
+              level={level + 1}
+              selectedId={selectedId}
+              onSelect={onSelect}
+              searchTerm={searchTerm}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const MemberTable: React.FC<{
+  tenantSlug: string;
+  onRefreshTrigger?: number;
+}> = ({ tenantSlug, onRefreshTrigger }) => {
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ["tenant-members-v2", tenantSlug, onRefreshTrigger],
+    queryFn: () => fetchUsers(100, 0, undefined, tenantSlug),
+    enabled: !!tenantSlug,
+  });
+
+  const members = data?.items ?? [];
+
+  if (isLoading)
+    return (
+      <div className="py-20 text-center text-muted-foreground animate-pulse">
+        {t("msg.common.loading", "멤버 정보를 불러오는 중...")}
+      </div>
+    );
+
+  if (members.length === 0)
+    return (
+      <div className="py-20 flex flex-col items-center justify-center text-muted-foreground opacity-50 border-2 border-dashed rounded-lg">
+        <Users size={48} className="mb-4" />
+        <p>
+          {t("msg.admin.users.list.empty", "이 조직에 소속된 멤버가 없습니다.")}
+        </p>
+      </div>
+    );
+
+  return (
+    <div className="border rounded-md overflow-hidden bg-[var(--color-panel)]">
+      <Table>
+        <TableHeader className="bg-muted/30">
+          <TableRow>
+            <TableHead>{t("ui.admin.users.table.name", "이름")}</TableHead>
+            <TableHead>{t("ui.admin.users.table.email", "이메일")}</TableHead>
+            <TableHead className="text-right">
+              {t("ui.admin.users.table.role", "역할")}
+            </TableHead>
+            <TableHead className="w-[50px]" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {members.map((user) => (
+            <TableRow
+              key={user.id}
+              className="hover:bg-muted/30 transition-colors"
+            >
+              <TableCell className="font-medium">{user.name}</TableCell>
+              <TableCell className="text-xs font-mono">{user.email}</TableCell>
+              <TableCell className="text-right">
+                <Badge
+                  variant="secondary"
+                  className="text-[10px] font-bold uppercase"
+                >
+                  {user.role}
+                </Badge>
+              </TableCell>
+              <TableCell>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon" className="h-8 w-8">
+                      <MoreHorizontal size={14} />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem asChild>
+                      <Link to={`/users/${user.id}`}>
+                        <ExternalLink size={14} className="mr-2" />
+                        {t("ui.common.detail", "상세보기")}
+                      </Link>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+// --- Main Component ---
+
+function TenantUserGroupsTab() {
+  const { tenantId } = useParams<{ tenantId: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const [selectedNodeId, setSelectedNodeId] = useState<string>(tenantId || "");
+  const [treeSearch, setTreeSearch] = useState("");
+  const [refreshMembersCount, setRefreshMembersCount] = useState(0);
+
+  const [isUserAddOpen, setIsUserAddOpen] = useState(false);
+  const [isAddExistingOpen, setIsAddExistingOpen] = useState(false);
+  const [existingSearch, setExistingSearch] = useState("");
+
+  // Data Fetching
+  const {
+    data: allTenantsData,
+    isLoading: isTenantsLoading,
+    refetch: refetchTree,
+  } = useQuery({
+    queryKey: ["tenants-full-tree-v2"],
+    queryFn: () => fetchTenants(1000, 0),
+  });
+
+  const { currentBase, subTree } = useMemo(() => {
+    const allItems = allTenantsData?.items ?? [];
+    return buildTenantFullTree(allItems, tenantId);
+  }, [allTenantsData, tenantId]);
+
+  const selectedNode = useMemo(() => {
+    // Find selected node in the built tree
+    const findNode = (nodes: TenantNode[], id: string): TenantNode | null => {
+      if (!currentBase) return null;
+      if (currentBase.id === id) return currentBase;
+
+      for (const node of nodes) {
+        if (node.id === id) return node;
+        if (node.children.length > 0) {
+          const found = findNode(node.children, id);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+
+    if (!currentBase) return null;
+    return findNode(currentBase.children, selectedNodeId) || currentBase;
+  }, [currentBase, selectedNodeId]);
+
+  // Mutations
+  const updateParentMutation = useMutation({
+    mutationFn: ({
+      id,
+      parentId,
+    }: { id: string; parentId: string | undefined }) =>
+      updateTenant(id, { parentId: parentId || "" }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tenants-full-tree-v2"] });
+      toast.success(
+        t("msg.info.saved_success", "조직 구조가 업데이트되었습니다."),
+      );
+      setIsAddExistingOpen(false);
+    },
+  });
+
+  const handleRemoveNode = (id: string, name: string) => {
+    if (
+      window.confirm(
+        t(
+          "msg.admin.tenants.remove_sub_confirm",
+          `${name} 조직을 하위에서 제외할까요?`,
+          { name },
+        ),
+      )
+    ) {
+      updateParentMutation.mutate({ id, parentId: undefined });
+      if (selectedNodeId === id) setSelectedNodeId(tenantId || "");
+    }
+  };
+
+  if (isTenantsLoading)
+    return (
+      <div className="p-12 text-center text-muted-foreground animate-pulse">
+        {t("msg.common.loading", "조직 정보를 불러오는 중...")}
+      </div>
+    );
+  if (!currentBase)
+    return (
+      <div className="p-12 text-center text-muted-foreground">
+        테넌트를 찾을 수 없습니다.
+      </div>
+    );
+
+  const candidates = (allTenantsData?.items ?? []).filter(
+    (t) =>
+      t.id !== tenantId &&
+      t.parentId !== tenantId &&
+      (existingSearch === "" ||
+        t.name.toLowerCase().includes(existingSearch.toLowerCase()) ||
+        t.slug.toLowerCase().includes(existingSearch.toLowerCase())),
+  );
+
+  return (
+    <div className="flex h-[calc(100vh-theme(spacing.32))] gap-6 mt-6 overflow-hidden">
+      {/* --- Left Panel: Sidebar Tree --- */}
+      <Card className="w-80 flex flex-col shrink-0 border-none shadow-sm bg-[var(--color-panel)] overflow-hidden">
+        <CardHeader className="p-4 pb-2 space-y-3">
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-sm font-bold flex items-center gap-2">
+              <Network size={16} className="text-primary" />
+              조직도
+            </CardTitle>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7"
+              onClick={() => refetchTree()}
+            >
+              <RefreshCw size={14} />
+            </Button>
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
+            <Input
+              placeholder={t("ui.common.search", "조직 검색...")}
+              className="pl-8 h-8 text-xs bg-muted/40"
+              value={treeSearch}
+              onChange={(e) => setTreeSearch(e.target.value)}
+            />
+          </div>
+        </CardHeader>
+        <CardContent className="flex-1 overflow-hidden p-2">
+          <ScrollArea className="h-full pr-2">
+            <SidebarNode
+              node={currentBase}
+              level={0}
+              selectedId={selectedNodeId}
+              onSelect={setSelectedNodeId}
+              searchTerm={treeSearch}
+            />
+          </ScrollArea>
+        </CardContent>
+        <div className="p-3 border-t bg-muted/5">
+          <Button
+            variant="outline"
+            size="sm"
+            className="w-full text-xs h-8"
+            onClick={() => setIsAddExistingOpen(true)}
+          >
+            <Plus size={14} className="mr-1" />
+            {t("ui.admin.tenants.sub.add_existing", "기존 테넌트 연결")}
+          </Button>
+        </div>
+      </Card>
+
+      {/* --- Right Panel: Selected Node Content --- */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {selectedNode ? (
+          <Card className="flex-1 flex flex-col border-none shadow-sm bg-[var(--color-panel)] overflow-hidden">
+            <CardHeader className="border-b bg-muted/5 py-4 flex flex-row items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-lg bg-primary/10 text-primary">
+                  {React.createElement(getTenantIcon(selectedNode.type), {
+                    size: 24,
+                  })}
+                </div>
+                <div>
+                  <div className="flex items-center gap-2">
+                    <CardTitle className="text-xl font-bold">
+                      {selectedNode.name}
+                    </CardTitle>
+                    <Badge
+                      variant="outline"
+                      className="text-[10px] font-mono opacity-60"
+                    >
+                      {selectedNode.slug}
+                    </Badge>
+                  </div>
+                  <div className="text-sm text-muted-foreground flex items-center gap-2 mt-0.5">
+                    <span className="flex items-center gap-1">
+                      <Users size={12} /> {selectedNode.recursiveMemberCount}{" "}
+                      {t("ui.admin.tenants.table.members", "명")}
+                    </span>
+                    <span className="opacity-30">|</span>
+                    <Badge variant="secondary" className="text-[10px] h-4">
+                      {t(
+                        `domain.tenant_type.${selectedNode.type.toLowerCase()}`,
+                        selectedNode.type,
+                      )}
+                    </Badge>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setIsUserAddOpen(true)}
+                >
+                  <UserPlus size={16} className="mr-2" />
+                  {t("ui.admin.users.list.add", "멤버 추가")}
+                </Button>
+
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="icon" className="h-9 w-9">
+                      <Settings size={16} />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuLabel>
+                      {t("ui.common.manage", "조직 관리")}
+                    </DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem asChild>
+                      <Link to={`/tenants/${selectedNode.id}`}>
+                        <LayoutDashboard size={14} className="mr-2" />
+                        상세 프로필로 이동
+                      </Link>
+                    </DropdownMenuItem>
+                    {!selectedNode.parentId && (
+                      <DropdownMenuItem asChild>
+                        <Link to={`/tenants/new?parentId=${selectedNode.id}`}>
+                          <Plus size={14} className="mr-2" />
+                          {t("ui.admin.tenants.sub.add", "하위 부서 생성")}
+                        </Link>
+                      </DropdownMenuItem>
+                    )}
+                    {selectedNode.id !== tenantId && (
+                      <DropdownMenuItem
+                        className="text-destructive"
+                        onClick={() =>
+                          handleRemoveNode(selectedNode.id, selectedNode.name)
+                        }
+                      >
+                        <Trash2 size={14} className="mr-2" />
+                        {t("ui.common.remove", "조직 계층에서 제외")}
+                      </DropdownMenuItem>
+                    )}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </CardHeader>
+
+            <CardContent className="flex-1 overflow-hidden p-0 flex flex-col">
+              <ScrollArea className="flex-1">
+                <div className="p-6 space-y-8">
+                  {selectedNode.children.length > 0 && (
+                    <div className="space-y-4">
+                      <h3 className="text-sm font-bold flex items-center gap-2">
+                        <Network size={16} className="text-muted-foreground" />
+                        하위 조직 ({selectedNode.children.length})
+                      </h3>
+                      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+                        {selectedNode.children?.map((child) => (
+                          <Card
+                            key={child.id}
+                            className="cursor-pointer hover:border-primary/50 transition-colors bg-muted/20"
+                            onClick={() => setSelectedNodeId(child.id)}
+                          >
+                            <CardHeader className="p-4 space-y-1">
+                              <div className="flex items-center justify-between">
+                                <div className="p-1.5 rounded bg-background">
+                                  {React.createElement(
+                                    getTenantIcon(child.type),
+                                    {
+                                      size: 14,
+                                      className: "text-primary",
+                                    },
+                                  )}
+                                </div>
+                                <Badge variant="outline" className="text-[9px]">
+                                  {child.recursiveMemberCount}{" "}
+                                  {t("ui.admin.tenants.table.members", "명")}
+                                </Badge>
+                              </div>
+                              <CardTitle className="text-sm">
+                                {child.name}
+                              </CardTitle>
+                              <CardDescription className="text-[10px] truncate">
+                                {child.slug}
+                              </CardDescription>
+                            </CardHeader>
+                          </Card>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="space-y-4">
+                    <h3 className="text-sm font-bold flex items-center gap-2">
+                      <Users size={16} className="text-muted-foreground" />
+                      {t("ui.admin.tenants.members.list_title", "소속 멤버")}
+                    </h3>
+                    <MemberTable
+                      tenantSlug={selectedNode.slug}
+                      onRefreshTrigger={refreshMembersCount}
+                    />
+                  </div>
+                </div>
+              </ScrollArea>
+            </CardContent>
+          </Card>
+        ) : (
+          <div className="flex-1 flex items-center justify-center text-muted-foreground opacity-30 border-2 border-dashed rounded-lg">
+            <div className="text-center">
+              <FolderOpen size={64} className="mx-auto mb-4" />
+              <p>조직을 선택해 주세요.</p>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* --- Dialogs --- */}
+      <UserAddDialog
+        tenantSlug={selectedNode?.slug || ""}
+        tenantName={selectedNode?.name || ""}
+        open={isUserAddOpen}
+        onOpenChange={(open) => {
+          setIsUserAddOpen(open);
+          if (!open) setRefreshMembersCount((prev) => prev + 1);
+        }}
+      />
+
+      <Dialog open={isAddExistingOpen} onOpenChange={setIsAddExistingOpen}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>
+              {t("ui.admin.tenants.sub.add_existing", "기존 테넌트 연결")}
+            </DialogTitle>
+            <DialogDescription>
+              기존에 생성된 테넌트를 [{currentBase.name}] 하위로 가져옵니다.
+            </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="검색..."
+                className="pl-9"
+                value={existingSearch}
+                onChange={(e) => setExistingSearch(e.target.value)}
+              />
+            </div>
+            <ScrollArea className="h-60 border rounded-md">
+              <Table>
+                <TableBody>
+                  {candidates?.map((tenantItem) => (
+                    <TableRow
+                      key={tenantItem.id}
+                      className="hover:bg-muted/50 cursor-pointer"
+                      onClick={() =>
+                        updateParentMutation.mutate({
+                          id: tenantItem.id,
+                          parentId: tenantId,
+                        })
+                      }
+                    >
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          {React.createElement(getTenantIcon(tenantItem.type), {
+                            size: 14,
+                            className: "text-muted-foreground",
+                          })}
+                          <div>
+                            <p className="text-sm font-medium">
+                              {tenantItem.name}
+                            </p>
+                            <p className="text-[10px] font-mono text-muted-foreground">
+                              {tenantItem.slug}
+                            </p>
+                          </div>
+                        </div>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Button variant="ghost" size="sm" className="h-7 px-2">
+                          <Plus size={14} className="mr-1" />{" "}
+                          {t("ui.common.add", "추가")}
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </ScrollArea>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+// --- Internal Support Components ---
+
+const UserAddDialog: React.FC<{
+  tenantSlug: string;
+  tenantName: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}> = ({ tenantSlug, tenantName, open, onOpenChange }) => {
+  const queryClient = useQueryClient();
+  const [userSearch, setUserSearch] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchResults, setSearchResults] = useState<UserSummary[]>([]);
+  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSearch = async () => {
+    if (!userSearch) return;
+    setIsSearching(true);
+    try {
+      const res = await fetchUsers(20, 0, userSearch);
+      setSearchResults(res.items);
+    } catch (err) {
+      toast.error(t("msg.admin.users.list.fetch_error", "사용자 검색 실패"));
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
+  const handleAssign = async () => {
+    if (!selectedUserId) return;
+    setIsSubmitting(true);
+    try {
+      await updateUser(selectedUserId, { tenantSlug });
+      toast.success(t("msg.info.saved_success", "사용자가 배정되었습니다."));
+      onOpenChange(false);
+      resetFields();
+    } catch (err) {
+      const error = err as AxiosError<{ error?: string }>;
+      toast.error(
+        error.response?.data?.error ||
+          t("msg.admin.users.detail.update_error", "배정 실패"),
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const resetFields = () => {
+    setUserSearch("");
+    setSearchResults([]);
+    setSelectedUserId(null);
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(v) => {
+        onOpenChange(v);
+        if (!v) resetFields();
+      }}
+    >
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>
+            {t("ui.admin.users.create.title", "멤버 추가")}
+          </DialogTitle>
+          <DialogDescription>
+            [{tenantName}] 조직에 기존 사용자를 배정합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="flex gap-2">
+            <Input
+              placeholder={t(
+                "ui.admin.users.list.search_placeholder",
+                "이메일 검색...",
+              )}
+              value={userSearch}
+              onChange={(e) => setUserSearch(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+            />
+            <Button
+              variant="secondary"
+              onClick={handleSearch}
+              disabled={isSearching}
+            >
+              <Search size={16} />
+            </Button>
+          </div>
+          <ScrollArea className="h-60 border rounded-md">
+            <Table>
+              <TableBody>
+                {searchResults?.map((user) => (
+                  <TableRow
+                    key={user.id}
+                    className={`cursor-pointer hover:bg-muted/50 ${selectedUserId === user.id ? "bg-primary/5" : ""}`}
+                    onClick={() => setSelectedUserId(user.id)}
+                  >
+                    <TableCell>
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <p className="text-sm font-medium">{user.name}</p>
+                          <p className="text-[10px] text-muted-foreground">
+                            {user.email}
+                          </p>
+                        </div>
+                        {selectedUserId === user.id && (
+                          <ChevronRight size={16} className="text-primary" />
+                        )}
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </ScrollArea>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t("ui.common.cancel", "취소")}
+          </Button>
+          <Button
+            onClick={handleAssign}
+            disabled={isSubmitting || !selectedUserId}
+          >
+            {t("ui.common.add", "배정")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TenantUserGroupsTab;

adminfront/src/features/user-groups/routes/UserGroupDetailPage.tsx

@@ -0,0 +1,620 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { ArrowLeft, Shield, Trash2, UserPlus, Users } from "lucide-react";
+import { useState } from "react";
+import { Link, useParams } from "react-router-dom";
+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,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../../components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import { toast } from "../../../components/ui/use-toast";
+import {
+  addGroupMember,
+  assignGroupRole,
+  fetchGroup,
+  fetchGroupRoles,
+  fetchTenants,
+  fetchUsers,
+  removeGroupMember,
+  removeGroupRole,
+} from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+
+export function UserGroupDetailPage() {
+  const { tenantId, id } = useParams<{ tenantId: string; id: string }>();
+  const queryClient = useQueryClient();
+
+  const [isAddMemberOpen, setIsAddMemberOpen] = useState(false);
+  const [selectedUserId, setSelectedUserId] = useState("");
+  const [searchUser, setSearchUser] = useState("");
+
+  const [isAddRoleOpen, setIsAddRoleOpen] = useState(false);
+  const [selectedTargetTenantId, setSelectedTargetTenantId] = useState("");
+  const [selectedRelation, setSelectedRelation] = useState("view");
+
+  const {
+    data: currentGroup,
+    isLoading: isGroupLoading,
+    error,
+  } = useQuery({
+    queryKey: ["user-group-detail", id],
+    queryFn: () => fetchGroup(tenantId ?? "", id ?? ""),
+    enabled: !!id && !!tenantId,
+    retry: false,
+  });
+
+  // Fetch assigned roles
+  const { data: groupRoles, isLoading: isRolesLoading } = useQuery({
+    queryKey: ["user-group-roles", id],
+    queryFn: () => fetchGroupRoles(tenantId ?? "", id ?? ""),
+    enabled: !!id && !!tenantId,
+  });
+
+  // Fetch all users for selection
+  const { data: userList } = useQuery({
+    queryKey: ["admin-users", searchUser],
+    queryFn: () => fetchUsers(20, 0, searchUser),
+    enabled: isAddMemberOpen,
+  });
+
+  // Fetch all tenants for role assignment
+  const { data: tenantList } = useQuery({
+    queryKey: ["admin-tenants"],
+    queryFn: () => fetchTenants(100, 0),
+    enabled: isAddRoleOpen,
+  });
+
+  const addMemberMutation = useMutation({
+    mutationFn: (userId: string) =>
+      addGroupMember(tenantId ?? "", id ?? "", userId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["user-group-detail", id] });
+      setIsAddMemberOpen(false);
+      setSelectedUserId("");
+      toast.success(
+        t("msg.admin.groups.members.add_success", "구성원이 추가되었습니다."),
+      );
+    },
+    onError: (error: AxiosError<{ error?: string }>) => {
+      toast.error(
+        error.response?.data?.error ||
+          error.message ||
+          t("err.common.unknown", "오류가 발생했습니다."),
+      );
+    },
+  });
+
+  const removeMemberMutation = useMutation({
+    mutationFn: (userId: string) =>
+      removeGroupMember(tenantId ?? "", id ?? "", userId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["user-group-detail", id] });
+      toast.success(
+        t(
+          "msg.admin.groups.members.remove_success",
+          "구성원이 제외되었습니다.",
+        ),
+      );
+    },
+  });
+
+  const assignRoleMutation = useMutation({
+    mutationFn: () =>
+      assignGroupRole(
+        tenantId ?? "",
+        id ?? "",
+        selectedTargetTenantId,
+        selectedRelation,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["user-group-roles", id] });
+      setIsAddRoleOpen(false);
+      toast.success(
+        t("msg.admin.groups.roles.assign_success", "역할이 할당되었습니다."),
+      );
+    },
+    onError: (error: AxiosError<{ error?: string }>) => {
+      toast.error(
+        error.response?.data?.error ||
+          error.message ||
+          t("err.common.unknown", "오류가 발생했습니다."),
+      );
+    },
+  });
+
+  const removeRoleMutation = useMutation({
+    mutationFn: (role: { targetTenantId: string; relation: string }) =>
+      removeGroupRole(
+        tenantId ?? "",
+        id ?? "",
+        role.targetTenantId,
+        role.relation,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["user-group-roles", id] });
+      toast.success(
+        t("msg.admin.groups.roles.remove_success", "역할이 회수되었습니다."),
+      );
+    },
+  });
+
+  if (isGroupLoading)
+    return (
+      <div className="flex items-center justify-center p-12">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+        <span className="ml-3 text-muted-foreground">
+          {t("msg.common.loading", "로딩 중...")}
+        </span>
+      </div>
+    );
+
+  if (error || !currentGroup)
+    return (
+      <div className="p-8 text-center space-y-4">
+        <h3 className="text-xl font-semibold text-destructive">
+          조직 단위를 불러올 수 없습니다
+        </h3>
+        <div className="p-4 bg-destructive/10 text-destructive rounded-md text-left text-sm font-mono overflow-auto max-w-xl mx-auto border border-destructive/20">
+          <p>
+            Error:{" "}
+            {(error as AxiosError<{ error?: string }>)?.response?.data?.error ||
+              (error instanceof Error ? error.message : String(error)) ||
+              "Not found"}
+          </p>
+        </div>
+        <Button variant="outline" onClick={() => window.location.reload()}>
+          {t("ui.common.retry", "다시 시도")}
+        </Button>
+        <div className="pt-4 border-t">
+          <Link
+            to={`/tenants/${tenantId}/organization`}
+            className="text-primary hover:underline text-sm"
+          >
+            {t(
+              "ui.admin.groups.detail.breadcrumb_org",
+              "조직 관리 목록으로 돌아가기",
+            )}
+          </Link>
+        </div>
+      </div>
+    );
+
+  return (
+    <div className="space-y-8 flex flex-col h-[calc(100vh-theme(spacing.32))]">
+      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Link
+              to={`/tenants/${tenantId}`}
+              className="inline-flex items-center gap-2 hover:text-foreground transition-colors"
+            >
+              <ArrowLeft size={14} />
+              {t("ui.admin.groups.detail.breadcrumb_tenant", "테넌트 상세")}
+            </Link>
+            <span>/</span>
+            <Link
+              to={`/tenants/${tenantId}/organization`}
+              className="hover:text-foreground transition-colors"
+            >
+              {t("ui.admin.groups.detail.breadcrumb_org", "조직 관리")}
+            </Link>
+            <span>/</span>
+            <span className="text-foreground">
+              {t("ui.admin.groups.detail.breadcrumb_unit", "조직 단위")}
+            </span>
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-primary/10 rounded-lg">
+              <Users size={24} className="text-primary" />
+            </div>
+            <h2 className="text-3xl font-semibold">{currentGroup.name}</h2>
+            {currentGroup.unitType && (
+              <Badge variant="secondary" className="h-6 font-normal">
+                {currentGroup.unitType}
+              </Badge>
+            )}
+          </div>
+          <p className="text-sm text-muted-foreground">
+            {currentGroup.description ||
+              t("msg.common.no_description", "설명이 없습니다.")}
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Badge variant="secondary" className="font-normal">
+            {t("ui.admin.groups.detail.breadcrumb_unit", "조직 단위")}
+          </Badge>
+        </div>
+      </header>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 flex-1 min-h-0">
+        {/* Members Management */}
+        <Card className="flex flex-col min-h-0 border-none shadow-sm bg-[var(--color-panel)] overflow-hidden">
+          <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
+            <div>
+              <CardTitle>
+                {t("ui.admin.groups.detail.members_title", "구성원 관리")}
+              </CardTitle>
+              <CardDescription>
+                {t(
+                  "ui.admin.groups.detail.members_subtitle",
+                  "이 조직에 소속된 사용자를 관리합니다.",
+                )}
+              </CardDescription>
+            </div>
+            <Dialog open={isAddMemberOpen} onOpenChange={setIsAddMemberOpen}>
+              <DialogTrigger asChild>
+                <Button size="sm" variant="outline">
+                  <UserPlus size={16} className="mr-2" />
+                  {t("ui.common.add", "추가")}
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>
+                    {t("ui.admin.groups.detail.members_title", "구성원 추가")}
+                  </DialogTitle>
+                  <DialogDescription>
+                    {t(
+                      "ui.admin.groups.detail.members_subtitle",
+                      "사용자를 검색하여 조직 구성원으로 추가합니다.",
+                    )}
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                  <div className="space-y-2">
+                    <Label>{t("ui.common.search", "사용자 검색")}</Label>
+                    <Input
+                      placeholder={t(
+                        "ui.admin.users.list.search_placeholder",
+                        "이메일 또는 이름으로 검색...",
+                      )}
+                      value={searchUser}
+                      onChange={(e) => setSearchUser(e.target.value)}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>{t("ui.common.select", "사용자 선택")}</Label>
+                    <Select
+                      value={selectedUserId}
+                      onValueChange={setSelectedUserId}
+                    >
+                      <SelectTrigger>
+                        <SelectValue
+                          placeholder={t(
+                            "ui.common.select_placeholder",
+                            "사용자를 선택하세요",
+                          )}
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {userList?.items.map((user) => (
+                          <SelectItem key={user.id} value={user.id}>
+                            {user.name} ({user.email})
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <DialogFooter>
+                  <Button
+                    variant="outline"
+                    onClick={() => setIsAddMemberOpen(false)}
+                  >
+                    {t("ui.common.cancel", "취소")}
+                  </Button>
+                  <Button
+                    onClick={() => addMemberMutation.mutate(selectedUserId)}
+                    disabled={!selectedUserId || addMemberMutation.isPending}
+                  >
+                    {t("ui.common.add", "추가")}
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </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="sticky top-0 z-10 bg-secondary shadow-sm">
+                    <TableRow>
+                      <TableHead className="font-bold">
+                        {t("ui.admin.users.list.table.name_email", "사용자")}
+                      </TableHead>
+                      <TableHead className="text-right font-bold">
+                        {t("ui.admin.groups.table.actions", "액션")}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {!currentGroup.members ||
+                    currentGroup.members.length === 0 ? (
+                      <TableRow>
+                        <TableCell
+                          colSpan={2}
+                          className="text-center py-8 text-muted-foreground"
+                        >
+                          {t(
+                            "msg.admin.groups.members.empty",
+                            "구성원이 없습니다.",
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      currentGroup.members.map((member) => (
+                        <TableRow
+                          key={member.id}
+                          className="hover:bg-muted/30 transition-colors"
+                        >
+                          <TableCell>
+                            <div className="flex items-center gap-3">
+                              <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xs">
+                                {member.name.charAt(0)}
+                              </div>
+                              <div>
+                                <p className="font-medium text-sm">
+                                  {member.name}
+                                </p>
+                                <p className="text-xs text-muted-foreground">
+                                  {member.email}
+                                </p>
+                              </div>
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-right">
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="text-destructive hover:bg-destructive/10"
+                              onClick={() => {
+                                if (
+                                  confirm(
+                                    t(
+                                      "msg.admin.groups.members.remove_confirm",
+                                      "제거하시겠습니까?",
+                                      { name: member.name },
+                                    ),
+                                  )
+                                ) {
+                                  removeMemberMutation.mutate(member.id);
+                                }
+                              }}
+                            >
+                              <Trash2 size={14} />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Roles/Permissions Management (Keto Based) */}
+        <Card className="flex flex-col min-h-0 border-none shadow-sm bg-[var(--color-panel)] overflow-hidden">
+          <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
+            <div>
+              <CardTitle>
+                {t("ui.admin.groups.detail.permissions_title", "권한 관리")}
+              </CardTitle>
+              <CardDescription>
+                {t(
+                  "ui.admin.groups.detail.permissions_subtitle",
+                  "이 조직이 다른 테넌트에 가지는 역할을 정의합니다.",
+                )}
+              </CardDescription>
+            </div>
+            <Dialog open={isAddRoleOpen} onOpenChange={setIsAddRoleOpen}>
+              <DialogTrigger asChild>
+                <Button size="sm" variant="outline">
+                  <Shield size={16} className="mr-2" />
+                  {t("ui.common.assign", "할당")}
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>
+                    {t(
+                      "ui.admin.groups.detail.permissions_title",
+                      "테넌트 역할 할당",
+                    )}
+                  </DialogTitle>
+                  <DialogDescription>
+                    {t(
+                      "msg.admin.groups.roles.description",
+                      "이 조직의 구성원들이 대상 테넌트에서 상속받을 역할을 선택하세요.",
+                    )}
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                  <div className="space-y-2">
+                    <Label>
+                      {t("ui.admin.users.detail.form.tenant", "대상 테넌트")}
+                    </Label>
+                    <Select
+                      value={selectedTargetTenantId}
+                      onValueChange={setSelectedTargetTenantId}
+                    >
+                      <SelectTrigger>
+                        <SelectValue
+                          placeholder={t(
+                            "ui.admin.tenants.list.select_placeholder",
+                            "테넌트를 선택하세요",
+                          )}
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {tenantList?.items.map((t) => (
+                          <SelectItem key={t.id} value={t.id}>
+                            {t.name} ({t.slug})
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label>
+                      {t("ui.admin.users.detail.form.role", "역할 (Relation)")}
+                    </Label>
+                    <Select
+                      value={selectedRelation}
+                      onValueChange={setSelectedRelation}
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="view">View (조회 권한)</SelectItem>
+                        <SelectItem value="manage">
+                          Manage (운영 권한)
+                        </SelectItem>
+                        <SelectItem value="admins">
+                          Admin (모든 권한)
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <DialogFooter>
+                  <Button
+                    variant="outline"
+                    onClick={() => setIsAddRoleOpen(false)}
+                  >
+                    {t("ui.common.cancel", "취소")}
+                  </Button>
+                  <Button
+                    onClick={() => assignRoleMutation.mutate()}
+                    disabled={
+                      !selectedTargetTenantId || assignRoleMutation.isPending
+                    }
+                  >
+                    {t("ui.common.assign", "할당")}
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </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="sticky top-0 z-10 bg-secondary shadow-sm">
+                    <TableRow>
+                      <TableHead className="font-bold">
+                        {t("ui.admin.users.detail.form.tenant", "대상 테넌트")}
+                      </TableHead>
+                      <TableHead className="font-bold">
+                        {t("ui.admin.users.detail.form.role", "역할")}
+                      </TableHead>
+                      <TableHead className="text-right font-bold">
+                        {t("ui.admin.groups.table.actions", "액션")}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {isRolesLoading ? (
+                      <TableRow>
+                        <TableCell colSpan={3} className="text-center py-8">
+                          <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-primary mx-auto" />
+                        </TableCell>
+                      </TableRow>
+                    ) : !groupRoles || groupRoles.length === 0 ? (
+                      <TableRow>
+                        <TableCell
+                          colSpan={3}
+                          className="text-center py-8 text-muted-foreground"
+                        >
+                          {t(
+                            "msg.admin.groups.roles.empty",
+                            "할당된 역할이 없습니다.",
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      groupRoles.map((role, idx) => (
+                        <TableRow
+                          key={`${role.tenantId}-${role.relation}-${idx}`}
+                          className="hover:bg-muted/30 transition-colors"
+                        >
+                          <TableCell>
+                            <div className="font-medium text-sm">
+                              {role.tenantName || role.tenantId}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <Badge
+                              variant="outline"
+                              className="capitalize font-normal"
+                            >
+                              {role.relation}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-right">
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="text-destructive hover:bg-destructive/10"
+                              onClick={() => {
+                                if (
+                                  confirm(
+                                    t("msg.admin.groups.roles.remove_confirm"),
+                                  )
+                                ) {
+                                  removeRoleMutation.mutate({
+                                    targetTenantId: role.tenantId,
+                                    relation: role.relation,
+                                  });
+                                }
+                              }}
+                            >
+                              <Trash2 size={14} />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

adminfront/src/features/users/UserCreatePage.tsx

@@ -0,0 +1,548 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { ArrowLeft, ClipboardCopy, Loader2, Save } 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,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+import { Input } from "../../components/ui/input";
+import { Label } from "../../components/ui/label";
+import {
+  type UserCreateRequest,
+  type UserCreateResponse,
+  createUser,
+  fetchMe,
+  fetchTenant,
+  fetchTenants,
+} from "../../lib/adminApi";
+import { t } from "../../lib/i18n";
+
+type UserSchemaField = {
+  key: string;
+  label?: string;
+  type?: "text" | "number" | "boolean" | "date";
+  required?: boolean;
+  adminOnly?: boolean;
+  validation?: string;
+  isLoginId?: boolean;
+};
+
+type UserFormValues = UserCreateRequest & { metadata: Record<string, unknown> };
+
+function UserCreatePage() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [error, setError] = React.useState<string | null>(null);
+  const [generatedPassword, setGeneratedPassword] = React.useState<
+    string | null
+  >(null);
+  const [createdEmail, setCreatedEmail] = React.useState<string | null>(null);
+  const [autoPassword, setAutoPassword] = React.useState(true);
+
+  const { data: tenantsData } = useQuery({
+    queryKey: ["tenants", { limit: 100 }],
+    queryFn: () => fetchTenants(100, 0),
+  });
+  const tenants = tenantsData?.items ?? [];
+
+  const { data: profile } = useQuery({
+    queryKey: ["me"],
+    queryFn: fetchMe,
+  });
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<UserFormValues>({
+    defaultValues: {
+      email: "",
+      password: "",
+      name: "",
+      phone: "",
+      role: "user",
+      tenantSlug: "",
+      department: "",
+      position: "",
+      jobTitle: "",
+      metadata: {},
+    },
+  });
+
+  // Lock company for tenant_admin
+  React.useEffect(() => {
+    if (profile?.role === "tenant_admin" && profile.tenantSlug) {
+      setValue("tenantSlug", profile.tenantSlug);
+    }
+  }, [profile, setValue]);
+
+  const selectedTenantSlug = watch("tenantSlug");
+  const selectedTenant = tenants.find((t) => t.slug === selectedTenantSlug);
+
+  const selectedTenantId = selectedTenant?.id ?? "";
+
+  const { data: tenantDetail } = useQuery({
+    queryKey: ["tenant", selectedTenantId],
+    queryFn: () => fetchTenant(selectedTenantId),
+    enabled: selectedTenantId.length > 0,
+  });
+
+  const userSchema: UserSchemaField[] = Array.isArray(
+    tenantDetail?.config?.userSchema,
+  )
+    ? (tenantDetail?.config?.userSchema as UserSchemaField[])
+    : [];
+
+  const registerMetadata = (field: UserSchemaField) =>
+    register(`metadata.${field.key}` as `metadata.${string}`, {
+      required: field.required
+        ? t(
+            "msg.admin.users.create.form.field_required",
+            "{{label}}은(는) 필수입니다.",
+            {
+              label: field.label || field.key,
+            },
+          )
+        : false,
+      pattern: field.validation
+        ? {
+            value: new RegExp(field.validation),
+            message: t(
+              "msg.admin.users.create.form.field_invalid",
+              "{{label}} 형식이 올바르지 않습니다.",
+              { label: field.label || field.key },
+            ),
+          }
+        : undefined,
+    });
+
+  const mutation = useMutation({
+    mutationFn: createUser,
+    onSuccess: (data: UserCreateResponse) => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      if (data.initialPassword) {
+        setGeneratedPassword(data.initialPassword);
+        setCreatedEmail(data.email);
+        return;
+      }
+      navigate("/users");
+    },
+    onError: (err: AxiosError<{ error?: string }>) => {
+      setError(
+        err.response?.data?.error ||
+          t("msg.admin.users.create.error", "사용자 생성에 실패했습니다."),
+      );
+    },
+  });
+
+  const onSubmit = (data: UserFormValues) => {
+    setError(null);
+    setGeneratedPassword(null);
+    setCreatedEmail(null);
+
+    const payload = { ...data };
+
+    if (autoPassword) {
+      payload.password = "";
+    } else if (!data.password) {
+      setError(
+        t(
+          "msg.admin.users.create.password_required",
+          "비밀번호를 입력하거나 자동 생성을 사용해 주세요.",
+        ),
+      );
+      return;
+    }
+
+    mutation.mutate(payload);
+  };
+
+  const onCopyPassword = async () => {
+    if (!generatedPassword) return;
+    try {
+      await navigator.clipboard.writeText(generatedPassword);
+    } catch (_) {
+      // ignore
+    }
+  };
+
+  return (
+    <div className="max-w-3xl space-y-8">
+      <header className="flex flex-wrap items-center justify-between gap-4">
+        <div className="space-y-2">
+          <h2 className="text-3xl font-semibold">
+            {t("ui.admin.users.create.title", "사용자 추가")}
+          </h2>
+        </div>
+        <Button variant="ghost" asChild>
+          <Link to="/users">
+            <ArrowLeft size={16} className="mr-2" />
+            {t("ui.admin.users.create.back", "목록으로 돌아가기")}
+          </Link>
+        </Button>
+      </header>
+
+      {generatedPassword && (
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              {t(
+                "ui.admin.users.create.password_generated.title",
+                "초기 비밀번호 생성 완료",
+              )}
+            </CardTitle>
+            <CardDescription>
+              {createdEmail
+                ? t(
+                    "msg.admin.users.create.password_generated.with_email",
+                    "{{email}} 계정의 초기 비밀번호입니다.",
+                    { email: createdEmail },
+                  )
+                : t(
+                    "msg.admin.users.create.password_generated.default",
+                    "초기 비밀번호가 생성되었습니다.",
+                  )}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex flex-wrap items-center gap-3 rounded-md border border-dashed px-4 py-3">
+              <span className="font-mono text-sm">{generatedPassword}</span>
+              <Button size="sm" variant="outline" onClick={onCopyPassword}>
+                <ClipboardCopy className="mr-2 h-4 w-4" />
+                {t("ui.common.copy", "복사")}
+              </Button>
+            </div>
+            <div className="flex justify-end">
+              <Button onClick={() => navigate("/users")}>
+                {t("ui.admin.users.create.go_list", "목록으로 이동")}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            {t("ui.admin.users.create.account.title", "계정 정보")}
+          </CardTitle>
+          <CardDescription>
+            {t(
+              "msg.admin.users.create.account.subtitle",
+              "새로운 사용자를 시스템에 등록합니다.",
+            )}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            {error && (
+              <div className="rounded-md bg-destructive/15 p-3 text-sm text-destructive">
+                {error}
+              </div>
+            )}
+
+            <div className="space-y-2">
+              <Label htmlFor="email">
+                {t("ui.admin.users.create.form.email", "이메일")}
+              </Label>
+              <Input
+                id="email"
+                placeholder={t(
+                  "ui.admin.users.create.form.email_placeholder",
+                  "user@example.com",
+                )}
+                {...register("email", {
+                  required: t(
+                    "msg.admin.users.create.form.email_required",
+                    "이메일은 필수입니다.",
+                  ),
+                })}
+              />
+              {errors.email && (
+                <p className="text-xs text-destructive">
+                  {errors.email.message}
+                </p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="password">
+                  {t("ui.admin.users.create.form.password", "비밀번호")}
+                </Label>
+                <label className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <input
+                    type="checkbox"
+                    checked={autoPassword}
+                    onChange={(event) => setAutoPassword(event.target.checked)}
+                  />
+                  {t("ui.admin.users.create.form.auto_password", "자동 생성")}
+                </label>
+              </div>
+              <Input
+                id="password"
+                type="password"
+                placeholder={t(
+                  "ui.admin.users.create.form.password_placeholder",
+                  "********",
+                )}
+                disabled={autoPassword}
+                {...register("password")}
+              />
+              <p className="text-xs text-muted-foreground">
+                {autoPassword
+                  ? t(
+                      "msg.admin.users.create.form.password_auto_help",
+                      "비워두면 시스템이 초기 비밀번호를 자동 생성합니다.",
+                    )
+                  : t(
+                      "msg.admin.users.create.form.password_manual_help",
+                      "초기 비밀번호를 직접 설정합니다.",
+                    )}
+              </p>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="name">
+                  {t("ui.admin.users.create.form.name", "이름")}
+                </Label>
+                <Input
+                  id="name"
+                  placeholder={t(
+                    "ui.admin.users.create.form.name_placeholder",
+                    "홍길동",
+                  )}
+                  {...register("name", {
+                    required: t(
+                      "msg.admin.users.create.form.name_required",
+                      "이름은 필수입니다.",
+                    ),
+                  })}
+                />
+                {errors.name && (
+                  <p className="text-xs text-destructive">
+                    {errors.name.message}
+                  </p>
+                )}
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="phone">
+                  {t("ui.admin.users.create.form.phone", "전화번호")}
+                </Label>
+                <Input
+                  id="phone"
+                  placeholder={t(
+                    "ui.admin.users.create.form.phone_placeholder",
+                    "010-1234-5678",
+                  )}
+                  {...register("phone")}
+                />
+              </div>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="tenantSlug">
+                  {t("ui.admin.users.create.form.tenant", "테넌트 (Tenant)")}
+                </Label>
+
+                <div className="relative">
+                  <select
+                    id="tenantSlug"
+                    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"
+                    {...register("tenantSlug")}
+                    disabled={profile?.role === "tenant_admin"}
+                  >
+                    <option value="">
+                      {t(
+                        "ui.admin.users.create.form.tenant_global",
+                        "시스템 전역 (소속 없음)",
+                      )}
+                    </option>
+
+                    {tenants.map((t) => (
+                      <option key={t.id} value={t.slug}>
+                        {t.name} ({t.slug})
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="department">
+                  {t("ui.admin.users.create.form.department", "부서")}
+                </Label>
+
+                <Input
+                  id="department"
+                  placeholder={t(
+                    "ui.admin.users.create.form.department_placeholder",
+                    "개발팀",
+                  )}
+                  {...register("department")}
+                />
+              </div>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="position">
+                  {t("ui.admin.users.create.form.position", "직급")}
+                </Label>
+
+                <Input
+                  id="position"
+                  placeholder={t(
+                    "ui.admin.users.create.form.position_placeholder",
+                    "수석/책임/선임",
+                  )}
+                  {...register("position")}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="jobTitle">
+                  {t("ui.admin.users.create.form.job_title", "직무")}
+                </Label>
+
+                <Input
+                  id="jobTitle"
+                  placeholder={t(
+                    "ui.admin.users.create.form.job_title_placeholder",
+                    "프론트엔드 개발",
+                  )}
+                  {...register("jobTitle")}
+                />
+              </div>
+            </div>
+
+            {userSchema.length > 0 && (
+              <div className="border-t pt-4">
+                <h3 className="mb-4 text-sm font-medium text-muted-foreground">
+                  {t(
+                    "ui.admin.users.create.custom_fields.title",
+                    "테넌트 확장 정보 (Custom Fields)",
+                  )}
+                </h3>
+
+                <div className="grid gap-4 md:grid-cols-2">
+                  {userSchema.map((field) => (
+                    <div key={field.key} className="space-y-2">
+                      <Label htmlFor={`metadata.${field.key}`}>
+                        {field.label}
+                        {field.required && (
+                          <span className="ml-1 text-destructive">*</span>
+                        )}
+                        {field.adminOnly && (
+                          <span className="ml-2 text-[10px] bg-blue-500/10 text-blue-500 px-1.5 py-0.5 rounded uppercase font-bold tracking-tighter">
+                            Admin Only
+                          </span>
+                        )}
+                        {field.isLoginId && (
+                          <span className="ml-2 text-[10px] bg-green-500/10 text-green-600 px-1.5 py-0.5 rounded uppercase font-bold">
+                            {t(
+                              "ui.admin.users.create.form.is_login_id",
+                              "로그인 ID",
+                            )}
+                          </span>
+                        )}
+                      </Label>
+
+                      <Input
+                        id={`metadata.${field.key}`}
+                        type={
+                          field.type === "number"
+                            ? "number"
+                            : field.type === "date"
+                              ? "date"
+                              : field.type === "boolean"
+                                ? "checkbox"
+                                : "text"
+                        }
+                        className={
+                          field.type === "boolean" ? "w-auto h-auto" : ""
+                        }
+                        {...registerMetadata(field)}
+                      />
+                      {errors.metadata?.[field.key] && (
+                        <p className="text-xs text-destructive">
+                          {
+                            (errors.metadata[field.key] as { message?: string })
+                              ?.message
+                          }
+                        </p>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className="space-y-2">
+              <Label htmlFor="role">
+                {t("ui.admin.users.create.form.role", "역할 (Role)")}
+              </Label>
+              <div className="relative">
+                <select
+                  id="role"
+                  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"
+                  {...register("role")}
+                >
+                  <option value="user">
+                    {t("ui.admin.role.user", "TENANT MEMBER")}
+                  </option>
+                  <option value="tenant_admin">
+                    {t("ui.admin.role.tenant_admin", "TENANT ADMIN")}
+                  </option>
+                  <option value="rp_admin">
+                    {t("ui.admin.role.rp_admin", "RP ADMIN")}
+                  </option>
+                  <option value="super_admin">
+                    {t("ui.admin.role.super_admin", "SUPER ADMIN")}
+                  </option>
+                </select>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {t(
+                  "msg.admin.users.create.form.role_help",
+                  "시스템 접근 권한을 결정합니다.",
+                )}
+              </p>
+            </div>
+
+            <div className="flex justify-end gap-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => navigate("/users")}
+              >
+                {t("ui.common.cancel", "취소")}
+              </Button>
+              <Button type="submit" disabled={mutation.isPending}>
+                {mutation.isPending && (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                )}
+                <Save className="mr-2 h-4 w-4" />
+                {t("ui.admin.users.create.submit", "사용자 생성")}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default UserCreatePage;

adminfront/src/features/users/UserListPage.tsx

@@ -0,0 +1,698 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import {
+  ChevronLeft,
+  ChevronRight,
+  FileDown,
+  Pencil,
+  Plus,
+  RefreshCw,
+  Search,
+  Settings2,
+  Trash2,
+  User,
+} from "lucide-react";
+import * as React from "react";
+import { Link, useNavigate } from "react-router-dom";
+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,
+  DialogTrigger,
+} 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 {
+  bulkDeleteUsers,
+  bulkUpdateUsers,
+  deleteUser,
+  exportUsersCSVUrl,
+  fetchMe,
+  fetchTenant,
+  fetchTenants,
+  fetchUsers,
+} from "../../lib/adminApi";
+import { t } from "../../lib/i18n";
+import { UserBulkMoveGroupModal } from "./components/UserBulkMoveGroupModal";
+import { UserBulkUploadModal } from "./components/UserBulkUploadModal";
+
+type UserSchemaField = {
+  key: string;
+  label: string;
+  type: string;
+};
+
+function UserListPage() {
+  const navigate = useNavigate();
+  const [page, setPage] = React.useState(1);
+  const [search, setSearch] = React.useState("");
+  const [searchDraft, setSearchDraft] = React.useState("");
+  const [selectedCompany, setSelectedCompany] = React.useState<string>("");
+  const [visibleColumns, setVisibleColumns] = React.useState<
+    Record<string, boolean>
+  >({});
+  const [selectedUserIds, setSelectedUserIds] = React.useState<string[]>([]);
+  const limit = 1000;
+  const offset = (page - 1) * limit;
+
+  const { data: profile } = useQuery({
+    queryKey: ["me"],
+    queryFn: fetchMe,
+  });
+
+  const { data: tenantsData } = useQuery({
+    queryKey: ["tenants", { limit: 100 }],
+    queryFn: () => fetchTenants(100, 0),
+  });
+  const tenants = tenantsData?.items ?? [];
+
+  // Lock company for tenant_admin
+  React.useEffect(() => {
+    if (profile?.role === "tenant_admin" && profile.tenantSlug) {
+      setSelectedCompany(profile.tenantSlug);
+    }
+  }, [profile]);
+
+  const selectedTenantId = React.useMemo(() => {
+    return tenants.find((t) => t.slug === selectedCompany)?.id ?? "";
+  }, [tenants, selectedCompany]);
+
+  const { data: tenantDetail } = useQuery({
+    queryKey: ["tenant", selectedTenantId],
+    queryFn: () => fetchTenant(selectedTenantId),
+    enabled: selectedTenantId.length > 0,
+  });
+
+  const userSchema: UserSchemaField[] = Array.isArray(
+    tenantDetail?.config?.userSchema,
+  )
+    ? (tenantDetail?.config?.userSchema as UserSchemaField[])
+    : [];
+
+  // Initialize visible columns when schema changes
+  React.useEffect(() => {
+    if (userSchema.length > 0) {
+      const initial: Record<string, boolean> = {};
+      for (const field of userSchema) {
+        initial[field.key] = true;
+      }
+      setVisibleColumns((prev) => {
+        // Only set if not already set for these keys to avoid reset on every render
+        const next = { ...initial, ...prev };
+        return next;
+      });
+    }
+  }, [userSchema]);
+
+  const toggleColumn = (key: string) => {
+    setVisibleColumns((prev) => ({
+      ...prev,
+      [key]: !prev[key],
+    }));
+  };
+
+  const query = useQuery({
+    queryKey: ["users", { limit, offset, search, tenantSlug: selectedCompany }],
+    queryFn: () => fetchUsers(limit, offset, search, selectedCompany),
+    placeholderData: (previousData) => previousData,
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (userId: string) => deleteUser(userId),
+    onSuccess: () => {
+      query.refetch();
+    },
+  });
+
+  const handleSearch = () => {
+    setSearch(searchDraft);
+    setPage(1);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+
+  const handleExport = () => {
+    const url = exportUsersCSVUrl(search, selectedCompany);
+    window.open(url, "_blank");
+  };
+
+  const errorMsg = (query.error as AxiosError<{ error?: string }>)?.response
+    ?.data?.error;
+  const fallbackError =
+    !errorMsg && query.isError
+      ? t(
+          "msg.admin.users.list.fetch_error",
+          "사용자 목록 조회에 실패했습니다.",
+        )
+      : null;
+
+  const items = query.data?.items ?? [];
+  const total = query.data?.total ?? 0;
+  const totalPages = Math.ceil(total / limit);
+
+  const toggleSelectAll = () => {
+    if (selectedUserIds.length === items.length) {
+      setSelectedUserIds([]);
+    } else {
+      setSelectedUserIds(items.map((u) => u.id));
+    }
+  };
+
+  const toggleSelectUser = (id: string) => {
+    setSelectedUserIds((prev) =>
+      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id],
+    );
+  };
+
+  const bulkDeleteMutation = useMutation({
+    mutationFn: bulkDeleteUsers,
+    onSuccess: (_, variables) => {
+      query.refetch();
+      setSelectedUserIds([]);
+      toast.success(
+        t(
+          "msg.admin.users.bulk.delete_success",
+          "{{count}}명의 사용자가 삭제되었습니다.",
+          { count: variables.length },
+        ),
+      );
+    },
+  });
+
+  const bulkUpdateMutation = useMutation({
+    mutationFn: bulkUpdateUsers,
+    onSuccess: () => {
+      query.refetch();
+      setSelectedUserIds([]);
+      toast.success(
+        t(
+          "msg.admin.users.bulk.update_success",
+          "선택한 사용자들의 정보가 수정되었습니다.",
+        ),
+      );
+    },
+  });
+
+  const handleBulkStatusChange = (status: string) => {
+    if (selectedUserIds.length === 0) return;
+    bulkUpdateMutation.mutate({ userIds: selectedUserIds, status });
+  };
+
+  const handleBulkDelete = () => {
+    if (selectedUserIds.length === 0) return;
+    if (
+      window.confirm(
+        t(
+          "msg.admin.users.bulk.delete_confirm",
+          "{{count}}명의 사용자를 정말 삭제하시겠습니까?",
+          { count: selectedUserIds.length },
+        ),
+      )
+    ) {
+      bulkDeleteMutation.mutate(selectedUserIds);
+    }
+  };
+
+  const handleDelete = (userId: string, userName: string) => {
+    if (
+      !window.confirm(
+        t(
+          "msg.admin.users.list.delete_confirm",
+          '사용자 "{{name}}"을(를) 정말 삭제하시겠습니까?',
+          { name: userName },
+        ),
+      )
+    ) {
+      return;
+    }
+    deleteMutation.mutate(userId);
+  };
+
+  return (
+    <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
+      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
+        <div className="space-y-2">
+          <h2 className="text-3xl font-semibold" data-testid="page-title">
+            {t("ui.admin.users.list.title", "사용자 관리")}
+          </h2>
+          <p className="text-sm text-[var(--color-muted)]">
+            {t(
+              "msg.admin.users.list.subtitle",
+              "시스템 사용자를 조회하고 관리합니다.",
+            )}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            onClick={() => query.refetch()}
+            disabled={query.isFetching}
+          >
+            <RefreshCw size={16} />
+            {t("ui.common.refresh", "새로고침")}
+          </Button>
+          <Button variant="outline" onClick={handleExport} className="gap-2">
+            <FileDown size={16} />
+            {t("ui.common.export", "내보내기")}
+          </Button>
+          <UserBulkUploadModal onSuccess={() => query.refetch()} />
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="outline" size="icon">
+                <Settings2 size={16} />
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>
+                  {t("ui.admin.users.list.columns.title", "표시 컬럼 설정")}
+                </DialogTitle>
+                <DialogDescription>
+                  {t(
+                    "msg.admin.users.list.columns.description",
+                    "사용자 목록에 표시할 커스텀 필드를 선택하세요.",
+                  )}
+                </DialogDescription>
+              </DialogHeader>
+              <div className="grid gap-4 py-4">
+                {userSchema.length === 0 && (
+                  <p className="text-sm text-muted-foreground text-center py-4">
+                    {t(
+                      "msg.admin.users.list.columns.no_custom",
+                      "현재 테넌트에 정의된 커스텀 필드가 없습니다.",
+                    )}
+                  </p>
+                )}
+                {userSchema.map((field) => (
+                  <label
+                    key={field.key}
+                    className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted/50 cursor-pointer"
+                  >
+                    <input
+                      type="checkbox"
+                      className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
+                      checked={visibleColumns[field.key] !== false}
+                      onChange={() => toggleColumn(field.key)}
+                    />
+                    <div className="flex flex-col">
+                      <span className="text-sm font-medium">{field.label}</span>
+                      <span className="text-xs text-muted-foreground font-mono">
+                        {field.key}
+                      </span>
+                    </div>
+                  </label>
+                ))}
+              </div>
+              <DialogFooter>
+                <DialogTrigger asChild>
+                  <Button variant="secondary">
+                    {t("ui.common.close", "닫기")}
+                  </Button>
+                </DialogTrigger>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+          <Button asChild>
+            <Link to="/users/new">
+              <Plus size={16} />
+              {t("ui.admin.users.list.add", "사용자 추가")}
+            </Link>
+          </Button>
+        </div>
+      </header>
+
+      <Card className="flex-1 flex flex-col min-h-0 bg-[var(--color-panel)] overflow-hidden">
+        <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
+          <div>
+            <CardTitle>
+              {t("ui.admin.users.list.registry.title", "User Registry")}
+            </CardTitle>
+            <CardDescription>
+              {t(
+                "msg.admin.users.list.registry.count",
+                "총 {{count}}명의 사용자가 등록되어 있습니다.",
+                { count: total },
+              )}
+            </CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
+          <div className="mb-6 flex flex-wrap items-center gap-4 flex-shrink-0">
+            <div className="relative flex-1 min-w-[240px] max-w-sm">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder={t(
+                  "ui.admin.users.list.search_placeholder",
+                  "이름 또는 이메일 검색...",
+                )}
+                className="pl-9"
+                value={searchDraft}
+                onChange={(e) => setSearchDraft(e.target.value)}
+                onKeyDown={handleKeyDown}
+              />
+            </div>
+
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-medium text-muted-foreground whitespace-nowrap">
+                {t("ui.admin.users.list.filter.tenant", "테넌트 필터:")}
+              </span>
+              <select
+                className="flex h-9 w-[200px] 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 disabled:opacity-50"
+                value={selectedCompany}
+                onChange={(e) => {
+                  setSelectedCompany(e.target.value);
+                  setPage(1);
+                }}
+                disabled={profile?.role === "tenant_admin"}
+              >
+                <option value="">{t("ui.common.all", "전체")}</option>
+                {tenants.map((t) => (
+                  <option key={t.id} value={t.slug}>
+                    {t.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <Button variant="secondary" onClick={handleSearch}>
+              {t("ui.common.search", "검색")}
+            </Button>
+          </div>
+
+          {(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="sticky top-0 z-10 bg-secondary shadow-sm">
+                  <TableRow>
+                    <TableHead className="w-12">
+                      <input
+                        type="checkbox"
+                        className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer"
+                        checked={
+                          items.length > 0 &&
+                          selectedUserIds.length === items.length
+                        }
+                        onChange={toggleSelectAll}
+                      />
+                    </TableHead>
+                    <TableHead className="min-w-[200px]">
+                      {t(
+                        "ui.admin.users.list.table.name_email",
+                        "NAME / EMAIL",
+                      )}
+                    </TableHead>
+                    <TableHead>
+                      {t("ui.admin.users.list.table.role", "ROLE")}
+                    </TableHead>
+                    <TableHead>
+                      {t("ui.admin.users.list.table.status", "STATUS")}
+                    </TableHead>
+                    <TableHead>
+                      {t(
+                        "ui.admin.users.list.table.tenant_dept",
+                        "TENANT / DEPT",
+                      )}
+                    </TableHead>
+                    {/* Dynamic Columns from Schema */}
+                    {userSchema.map(
+                      (field) =>
+                        visibleColumns[field.key] !== false && (
+                          <TableHead key={field.key} className="uppercase">
+                            {field.label}
+                          </TableHead>
+                        ),
+                    )}
+                    <TableHead>
+                      {t("ui.admin.users.list.table.created", "CREATED")}
+                    </TableHead>
+                    <TableHead className="text-right">
+                      {t("ui.admin.users.list.table.actions", "ACTIONS")}
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {query.isLoading && (
+                    <TableRow>
+                      <TableCell
+                        colSpan={7 + userSchema.length}
+                        className="h-24 text-center"
+                      >
+                        {t("msg.common.loading", "로딩 중...")}
+                      </TableCell>
+                    </TableRow>
+                  )}
+                  {!query.isLoading && items.length === 0 && (
+                    <TableRow>
+                      <TableCell
+                        colSpan={7 + userSchema.length}
+                        className="h-24 text-center"
+                      >
+                        {t(
+                          "msg.admin.users.list.empty",
+                          "검색 결과가 없습니다.",
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  )}
+                  {items.map((user) => (
+                    <TableRow
+                      key={user.id}
+                      className={
+                        selectedUserIds.includes(user.id) ? "bg-primary/5" : ""
+                      }
+                    >
+                      <TableCell>
+                        <input
+                          type="checkbox"
+                          className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
+                          checked={selectedUserIds.includes(user.id)}
+                          onChange={() => toggleSelectUser(user.id)}
+                          disabled={user.id === profile?.id}
+                          title={
+                            user.id === profile?.id
+                              ? t(
+                                  "msg.admin.users.self_delete_blocked",
+                                  "본인 계정은 삭제할 수 없습니다.",
+                                )
+                              : undefined
+                          }
+                        />
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-3">
+                          <div className="flex h-9 w-9 items-center justify-center rounded-full bg-secondary text-secondary-foreground">
+                            <User size={16} />
+                          </div>
+                          <div className="flex flex-col">
+                            <span className="font-medium">{user.name}</span>
+                            <span className="text-xs text-muted-foreground">
+                              {user.email}
+                            </span>
+                          </div>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">
+                          {t(`ui.admin.role.${user.role}`, user.role)}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={
+                            user.status === "active" ? "default" : "secondary"
+                          }
+                        >
+                          {t(`ui.common.status.${user.status}`, user.status)}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex flex-col text-sm">
+                          <span className="font-medium text-blue-600">
+                            {user.tenant?.name || user.tenantSlug || "-"}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            {user.department || "-"}
+                          </span>
+                        </div>
+                      </TableCell>
+                      {/* Dynamic Metadata Cells */}
+                      {userSchema.map(
+                        (field) =>
+                          visibleColumns[field.key] !== false && (
+                            <TableCell key={field.key} className="text-sm">
+                              {String(user.metadata?.[field.key] ?? "-")}
+                            </TableCell>
+                          ),
+                      )}
+                      <TableCell className="text-sm text-muted-foreground">
+                        {new Date(user.createdAt).toLocaleDateString()}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex justify-end gap-2">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => navigate(`/users/${user.id}`)}
+                          >
+                            <Pencil size={16} />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="text-destructive hover:text-destructive disabled:opacity-30 disabled:cursor-not-allowed"
+                            onClick={() => handleDelete(user.id, user.name)}
+                            disabled={
+                              deleteMutation.isPending ||
+                              user.id === profile?.id
+                            }
+                            title={
+                              user.id === profile?.id
+                                ? t(
+                                    "msg.admin.users.self_delete_blocked",
+                                    "본인 계정은 삭제할 수 없습니다.",
+                                  )
+                                : undefined
+                            }
+                          >
+                            <Trash2 size={16} />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+
+          {/* Bulk Action Bar */}
+          {selectedUserIds.length > 0 && (
+            <div
+              className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 flex items-center gap-4 px-6 py-3 rounded-2xl bg-foreground text-background shadow-2xl animate-in slide-in-from-bottom-4 duration-300"
+              data-testid="bulk-action-bar"
+            >
+              <span className="text-sm font-medium border-r border-background/20 pr-4 mr-2">
+                {t("ui.admin.users.bulk.selected_count", "{{count}}명 선택됨", {
+                  count: selectedUserIds.length,
+                })}
+              </span>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-background hover:bg-background/10 h-8"
+                  onClick={() => handleBulkStatusChange("active")}
+                  data-testid="bulk-active-btn"
+                >
+                  {t("ui.common.status.active", "활성화")}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-background hover:bg-background/10 h-8"
+                  onClick={() => handleBulkStatusChange("inactive")}
+                  data-testid="bulk-inactive-btn"
+                >
+                  {t("ui.common.status.inactive", "비활성화")}
+                </Button>
+                <UserBulkMoveGroupModal
+                  userIds={selectedUserIds}
+                  selectedUsers={items.filter((u) =>
+                    selectedUserIds.includes(u.id),
+                  )}
+                  onSuccess={() => {
+                    query.refetch();
+                    setSelectedUserIds([]);
+                  }}
+                />
+                <div className="w-px h-4 bg-background/20 mx-1" />
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-destructive-foreground hover:bg-destructive/20 h-8 gap-1.5"
+                  onClick={handleBulkDelete}
+                  data-testid="bulk-delete-btn"
+                >
+                  <Trash2 size={14} />
+                  {t("ui.common.delete", "삭제")}
+                </Button>
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="text-background/50 hover:text-background h-8 w-8 ml-2"
+                onClick={() => setSelectedUserIds([])}
+                aria-label={t("ui.common.close", "닫기")}
+                data-testid="bulk-close-btn"
+              >
+                <Plus size={16} className="rotate-45" />
+              </Button>
+            </div>
+          )}
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="mt-4 flex flex-shrink-0 items-center justify-end gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                disabled={page === 1 || query.isFetching}
+              >
+                <ChevronLeft size={16} />
+                {t("ui.common.previous", "Previous")}
+              </Button>
+              <div className="text-sm text-muted-foreground">
+                {t("ui.common.page_of", "Page {{page}} of {{total}}", {
+                  page,
+                  total: totalPages,
+                })}
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                disabled={page === totalPages || query.isFetching}
+              >
+                {t("ui.common.next", "Next")}
+                <ChevronRight size={16} />
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default UserListPage;

adminfront/src/features/users/components/UserBulkMoveGroupModal.tsx

@@ -0,0 +1,332 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { AlertTriangle, FolderTree, Loader2, Search } from "lucide-react";
+import * as React from "react";
+import { Button } from "../../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Input } from "../../../components/ui/input";
+import { ScrollArea } from "../../../components/ui/scroll-area";
+import { toast } from "../../../components/ui/use-toast";
+import {
+  type GroupSummary,
+  type TenantSummary,
+  type UserSummary,
+  bulkUpdateUsers,
+  fetchGroups,
+  fetchTenants,
+} from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+
+type UserSchemaField = {
+  key: string;
+  label: string;
+  required?: boolean;
+};
+
+interface UserBulkMoveGroupModalProps {
+  userIds: string[];
+  selectedUsers?: UserSummary[];
+  onSuccess?: () => void;
+}
+
+export function UserBulkMoveGroupModal({
+  userIds,
+  selectedUsers = [],
+  onSuccess,
+}: UserBulkMoveGroupModalProps) {
+  const [open, setOpen] = React.useState(false);
+  const [selectedTenantSlug, setSelectedTenantSlug] =
+    React.useState<string>("");
+  const [selectedGroupName, setSelectedGroupName] = React.useState<string>("");
+  const [searchTerm, setSearchTerm] = React.useState("");
+  const [acknowledgeWarning, setAcknowledgeWarning] = React.useState(false);
+
+  const queryClient = useQueryClient();
+
+  const { data: tenantsData } = useQuery({
+    queryKey: ["tenants", { limit: 100 }],
+    queryFn: () => fetchTenants(100, 0),
+    enabled: open,
+  });
+  const tenants = tenantsData?.items ?? [];
+
+  const selectedTenant = React.useMemo(
+    () => tenants.find((t) => t.slug === selectedTenantSlug),
+    [tenants, selectedTenantSlug],
+  );
+  const selectedTenantId = selectedTenant?.id ?? "";
+
+  const { data: groups, isLoading: isGroupsLoading } = useQuery({
+    queryKey: ["tenant-groups", selectedTenantId],
+    queryFn: () => fetchGroups(selectedTenantId),
+    enabled: open && !!selectedTenantId,
+  });
+
+  const schemaWarnings = React.useMemo(() => {
+    if (!selectedTenant || selectedUsers.length === 0) return null;
+
+    const targetSchema =
+      (selectedTenant.config?.userSchema as UserSchemaField[]) || [];
+    const targetSchemaKeys = new Set(targetSchema.map((f) => f.key));
+    const requiredKeys = targetSchema
+      .filter((f) => f.required)
+      .map((f) => f.key);
+
+    const missingRequiredFields = new Set<string>();
+    const incompatibleFields = new Set<string>();
+
+    for (const user of selectedUsers) {
+      const userMeta = user.metadata || {};
+
+      // 1. Check for missing required fields
+      for (const key of requiredKeys) {
+        if (
+          userMeta[key] === undefined ||
+          userMeta[key] === null ||
+          userMeta[key] === ""
+        ) {
+          missingRequiredFields.add(key);
+        }
+      }
+
+      // 2. Check for fields that exist in user metadata but not in the target schema (data loss)
+      for (const key of Object.keys(userMeta)) {
+        if (!targetSchemaKeys.has(key)) {
+          incompatibleFields.add(key);
+        }
+      }
+    }
+
+    if (missingRequiredFields.size === 0 && incompatibleFields.size === 0) {
+      return null;
+    }
+
+    return {
+      missing: Array.from(missingRequiredFields),
+      incompatible: Array.from(incompatibleFields),
+    };
+  }, [selectedTenant, selectedUsers]);
+
+  const mutation = useMutation({
+    mutationFn: bulkUpdateUsers,
+    onSuccess: () => {
+      toast.success(
+        t(
+          "msg.admin.users.bulk.move_success",
+          "사용자들의 부서가 이동되었습니다.",
+        ),
+      );
+      setOpen(false);
+      onSuccess?.();
+    },
+    onError: (error: AxiosError<{ error?: string }>) => {
+      toast.error(t("msg.admin.users.bulk.move_error", "부서 이동 실패"), {
+        description: error.response?.data?.error || error.message,
+      });
+    },
+  });
+
+  const handleMove = () => {
+    if (!selectedTenantSlug) return;
+    mutation.mutate({
+      userIds,
+      tenantSlug: selectedTenantSlug,
+      department: selectedGroupName, // can be empty for "No Department"
+    });
+  };
+
+  const filteredGroups = React.useMemo(() => {
+    if (!groups) return [];
+    if (!searchTerm) return groups;
+    return groups.filter((g) =>
+      g.name.toLowerCase().includes(searchTerm.toLowerCase()),
+    );
+  }, [groups, searchTerm]);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(val) => {
+        setOpen(val);
+        if (!val) {
+          setSelectedTenantSlug("");
+          setSelectedGroupName("");
+          setAcknowledgeWarning(false);
+          setSearchTerm("");
+        }
+      }}
+    >
+      <DialogTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-background hover:bg-background/10 h-8"
+        >
+          {t("ui.admin.users.bulk.move_group", "부서 이동")}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            {t("ui.admin.users.bulk.move_title", "사용자 부서 이동")}
+          </DialogTitle>
+          <DialogDescription>
+            {t(
+              "msg.admin.users.bulk.move_description",
+              "선택한 {{count}}명의 사용자를 이동할 테넌트와 부서를 선택하세요.",
+              { count: userIds.length },
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">
+              {t("ui.admin.users.create.form.tenant", "테넌트 선택")}
+            </label>
+            <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={selectedTenantSlug}
+              onChange={(e) => {
+                setSelectedTenantSlug(e.target.value);
+                setSelectedGroupName("");
+                setAcknowledgeWarning(false);
+              }}
+            >
+              <option value="">{t("ui.common.select", "선택하세요...")}</option>
+              {tenants.map((t) => (
+                <option key={t.id} value={t.slug}>
+                  {t.name} ({t.slug})
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {selectedTenantSlug && (
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                {t("ui.admin.users.bulk.select_group", "부서 선택")}
+              </label>
+              <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={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </div>
+              <ScrollArea className="h-[200px] rounded-md border p-2">
+                <div className="space-y-1">
+                  <button
+                    type="button"
+                    onClick={() => setSelectedGroupName("")}
+                    className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition ${
+                      selectedGroupName === ""
+                        ? "bg-primary text-primary-foreground"
+                        : "hover:bg-muted"
+                    }`}
+                  >
+                    <FolderTree size={14} />
+                    {t("ui.admin.users.bulk.no_department", "(부서 없음)")}
+                  </button>
+                  {isGroupsLoading ? (
+                    <div className="flex justify-center py-4">
+                      <Loader2 className="animate-spin text-muted-foreground" />
+                    </div>
+                  ) : (
+                    filteredGroups.map((group) => (
+                      <button
+                        key={group.id}
+                        type="button"
+                        onClick={() => setSelectedGroupName(group.name)}
+                        className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition ${
+                          selectedGroupName === group.name
+                            ? "bg-primary text-primary-foreground"
+                            : "hover:bg-muted"
+                        }`}
+                      >
+                        <FolderTree size={14} />
+                        {group.name}
+                      </button>
+                    ))
+                  )}
+                </div>
+              </ScrollArea>
+            </div>
+          )}
+
+          {schemaWarnings && (
+            <div className="rounded-lg border border-destructive/20 bg-destructive/10 p-3 space-y-2 mt-4 text-sm">
+              <div className="flex items-center gap-2 text-destructive font-semibold">
+                <AlertTriangle size={16} />
+                {t("ui.admin.users.bulk.schema_warning", "스키마 호환성 경고")}
+              </div>
+              <div className="text-destructive/80 text-xs">
+                {schemaWarnings.missing.length > 0 && (
+                  <p>
+                    {t(
+                      "msg.admin.users.bulk.schema_missing",
+                      "대상 테넌트의 필수 필드가 누락되어 있습니다:",
+                    )}{" "}
+                    <strong>{schemaWarnings.missing.join(", ")}</strong>
+                  </p>
+                )}
+                {schemaWarnings.incompatible.length > 0 && (
+                  <p>
+                    {t(
+                      "msg.admin.users.bulk.schema_incompatible",
+                      "대상 테넌트 스키마에 없는 필드는 유실될 수 있습니다:",
+                    )}{" "}
+                    <strong>{schemaWarnings.incompatible.join(", ")}</strong>
+                  </p>
+                )}
+              </div>
+              <label className="flex items-center gap-2 cursor-pointer mt-2 pt-2 border-t border-destructive/10">
+                <input
+                  type="checkbox"
+                  checked={acknowledgeWarning}
+                  onChange={(e) => setAcknowledgeWarning(e.target.checked)}
+                  className="w-4 h-4 rounded border-gray-300 text-destructive focus:ring-destructive"
+                />
+                <span className="font-medium text-destructive/90">
+                  {t(
+                    "ui.admin.users.bulk.acknowledge_warning",
+                    "경고를 확인했으며 계속 진행합니다.",
+                  )}
+                </span>
+              </label>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            {t("ui.common.cancel", "취소")}
+          </Button>
+          <Button
+            onClick={handleMove}
+            disabled={
+              !selectedTenantSlug ||
+              mutation.isPending ||
+              (!!schemaWarnings && !acknowledgeWarning)
+            }
+          >
+            {mutation.isPending && (
+              <Loader2 size={16} className="mr-2 animate-spin" />
+            )}
+            {t("ui.admin.users.bulk.do_move", "이동 실행")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

adminfront/src/features/users/components/UserBulkUploadModal.tsx

@@ -0,0 +1,302 @@
+import { useMutation } from "@tanstack/react-query";
+import {
+  AlertCircle,
+  CheckCircle2,
+  Download,
+  FileText,
+  Loader2,
+  Upload,
+} from "lucide-react";
+import * as React from "react";
+import { Button } from "../../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { ScrollArea } from "../../../components/ui/scroll-area";
+import {
+  type BulkUserItem,
+  type BulkUserResult,
+  bulkCreateUsers,
+} from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+import { parseUserCSV } from "../utils/csvParser";
+
+interface UserBulkUploadModalProps {
+  onSuccess?: () => void;
+}
+
+export function UserBulkUploadModal({ onSuccess }: UserBulkUploadModalProps) {
+  const [open, setOpen] = React.useState(false);
+  const [file, setFile] = React.useState<File | null>(null);
+  const [parsing, setParsing] = React.useState(false);
+  const [previewData, setPreviewData] = React.useState<BulkUserItem[]>([]);
+  const [results, setResults] = React.useState<BulkUserResult[] | null>(null);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const mutation = useMutation({
+    mutationFn: bulkCreateUsers,
+    onSuccess: (data) => {
+      setResults(data.results);
+      onSuccess?.();
+    },
+  });
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0];
+    if (selectedFile) {
+      setFile(selectedFile);
+      parseCSV(selectedFile);
+    }
+  };
+
+  const parseCSV = (file: File) => {
+    setParsing(true);
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const text = e.target?.result as string;
+      const data = parseUserCSV(text);
+      setPreviewData(data);
+      setParsing(false);
+    };
+    reader.readAsText(file);
+  };
+
+  const handleUpload = () => {
+    if (previewData.length > 0) {
+      mutation.mutate(previewData);
+    }
+  };
+
+  const downloadTemplate = () => {
+    const headers =
+      "email,name,phone,role,tenant,department,position,jobTitle,employee_id";
+    const example =
+      "user1@example.com,홍길동,010-1234-5678,user,tenant-slug,개발팀,수석,프론트엔드,EMP001";
+    const blob = new Blob([`${headers}\n${example}`], {
+      type: "text/csv;charset=utf-8;",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "user_bulk_template.csv";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const reset = () => {
+    setFile(null);
+    setPreviewData([]);
+    setResults(null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const successCount = results?.filter((r) => r.success).length ?? 0;
+  const failCount = results ? results.length - successCount : 0;
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(val) => {
+        setOpen(val);
+        if (!val) reset();
+      }}
+    >
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          className="gap-2"
+          data-testid="bulk-import-btn"
+        >
+          <Upload size={16} />
+          {t("ui.admin.users.list.bulk_import", "일괄 등록 (CSV)")}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle data-testid="bulk-upload-title">
+            {t("ui.admin.users.bulk.title", "사용자 일괄 등록")}
+          </DialogTitle>
+          <DialogDescription>
+            {t(
+              "msg.admin.users.bulk.description",
+              "CSV 파일을 업로드하여 여러 사용자를 한 번에 등록합니다.",
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        {!results ? (
+          <div className="space-y-4 py-4">
+            <div className="flex justify-between items-center">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={downloadTemplate}
+                className="gap-2"
+              >
+                <Download size={14} />
+                {t("ui.admin.users.bulk.download_template", "템플릿 다운로드")}
+              </Button>
+              <input
+                type="file"
+                accept=".csv"
+                className="hidden"
+                ref={fileInputRef}
+                onChange={handleFileChange}
+              />
+              <Button
+                onClick={() => fileInputRef.current?.click()}
+                variant="secondary"
+              >
+                {file
+                  ? t("ui.common.change_file", "파일 변경")
+                  : t("ui.common.select_file", "파일 선택")}
+              </Button>
+            </div>
+
+            {file && (
+              <div className="rounded-lg border p-4 bg-muted/20">
+                <div className="flex items-center gap-3 mb-2">
+                  <FileText className="text-primary" />
+                  <span className="font-medium">{file.name}</span>
+                  <span className="text-xs text-muted-foreground">
+                    ({(file.size / 1024).toFixed(1)} KB)
+                  </span>
+                </div>
+                {parsing ? (
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Loader2 size={14} className="animate-spin" />
+                    {t("msg.common.parsing", "파싱 중...")}
+                  </div>
+                ) : (
+                  <div className="text-sm text-muted-foreground">
+                    {t(
+                      "msg.admin.users.bulk.parsed_count",
+                      "{{count}}명의 사용자가 감지되었습니다.",
+                      { count: previewData.length },
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {previewData.length > 0 && (
+              <ScrollArea className="h-[200px] rounded-md border">
+                <table className="w-full text-sm">
+                  <thead className="bg-muted sticky top-0">
+                    <tr>
+                      <th className="p-2 text-left">Email</th>
+                      <th className="p-2 text-left">Name</th>
+                      <th className="p-2 text-left">Tenant</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {previewData.slice(0, 10).map((u) => (
+                      <tr key={u.email} className="border-t">
+                        <td className="p-2">{u.email}</td>
+                        <td className="p-2">{u.name}</td>
+                        <td className="p-2">{u.tenantSlug || "-"}</td>
+                      </tr>
+                    ))}
+                    {previewData.length > 10 && (
+                      <tr>
+                        <td
+                          colSpan={3}
+                          className="p-2 text-center text-muted-foreground italic"
+                        >
+                          ... and {previewData.length - 10} more users
+                        </td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </ScrollArea>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4 py-4">
+            <div className="flex items-center gap-4 p-4 rounded-lg bg-muted/30 border">
+              <div className="flex-1 text-center">
+                <div className="text-2xl font-bold text-green-600">
+                  {successCount}
+                </div>
+                <div className="text-xs text-muted-foreground uppercase">
+                  {t("ui.common.success", "성공")}
+                </div>
+              </div>
+              <div className="w-px h-10 bg-border" />
+              <div className="flex-1 text-center">
+                <div className="text-2xl font-bold text-destructive">
+                  {failCount}
+                </div>
+                <div className="text-xs text-muted-foreground uppercase">
+                  {t("ui.common.fail", "실패")}
+                </div>
+              </div>
+            </div>
+
+            <ScrollArea className="h-[250px] rounded-md border">
+              <div className="p-2 space-y-2">
+                {results.map((r) => (
+                  <div
+                    key={r.email}
+                    className="flex items-start gap-3 p-2 rounded border bg-card text-sm"
+                  >
+                    {r.success ? (
+                      <CheckCircle2
+                        size={16}
+                        className="text-green-500 mt-0.5"
+                      />
+                    ) : (
+                      <AlertCircle
+                        size={16}
+                        className="text-destructive mt-0.5"
+                      />
+                    )}
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">{r.email}</div>
+                      {!r.success && (
+                        <div className="text-xs text-destructive">
+                          {r.message}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          </div>
+        )}
+
+        <DialogFooter>
+          {!results ? (
+            <Button
+              onClick={handleUpload}
+              disabled={previewData.length === 0 || mutation.isPending}
+              className="w-full sm:w-auto"
+              data-testid="bulk-start-btn"
+            >
+              {mutation.isPending && (
+                <Loader2 size={16} className="mr-2 animate-spin" />
+              )}
+              {t("ui.admin.users.bulk.start_upload", "등록 시작")}
+            </Button>
+          ) : (
+            <Button
+              onClick={() => setOpen(false)}
+              className="w-full sm:w-auto"
+              data-testid="bulk-close-dialog-btn"
+            >
+              {t("ui.common.close", "닫기")}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

adminfront/src/features/users/utils/csvParser.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest";
+import { parseUserCSV } from "./csvParser";
+
+describe("parseUserCSV", () => {
+  it("should parse valid CSV correctly", () => {
+    const csv = `email,name,phone,role,tenant,department,emp_id
+user1@test.com,Hong Gil Dong,010-1111-2222,user,baron,HR,E001
+user2@test.com,Kim Cheol Su,,admin,baron,IT,E002`;
+
+    const result = parseUserCSV(csv);
+
+    expect(result).toHaveLength(2);
+    expect(result[0]).toEqual({
+      email: "user1@test.com",
+      name: "Hong Gil Dong",
+      phone: "010-1111-2222",
+      role: "user",
+      tenantSlug: "baron",
+      department: "HR",
+      metadata: {
+        emp_id: "E001",
+      },
+    });
+    expect(result[1].email).toBe("user2@test.com");
+    expect(result[1].metadata.emp_id).toBe("E002");
+  });
+
+  it("should return empty array for empty input", () => {
+    expect(parseUserCSV("")).toEqual([]);
+  });
+
+  it("should skip rows without email or name", () => {
+    const csv = `email,name
+,Only Name
+no-name@test.com,`;
+    expect(parseUserCSV(csv)).toHaveLength(0);
+  });
+
+  it("should handle mixed case headers", () => {
+    const csv = `EMAIL,Name,Tenant
+test@test.com,Test,baron`;
+    const result = parseUserCSV(csv);
+    expect(result[0].email).toBe("test@test.com");
+    expect(result[0].tenantSlug).toBe("baron");
+  });
+});

adminfront/src/features/users/utils/csvParser.ts

@@ -0,0 +1,52 @@
+import type { BulkUserItem } from "../../../lib/adminApi";
+
+export function parseUserCSV(text: string): BulkUserItem[] {
+  const lines = text.split(/\r?\n/);
+  if (lines.length < 2) {
+    return [];
+  }
+
+  const headers = lines[0].split(",").map((h) => h.trim().toLowerCase());
+  const data: BulkUserItem[] = [];
+
+  for (let i = 1; i < lines.length; i++) {
+    if (!lines[i].trim()) continue;
+
+    const values = lines[i].split(",").map((v) => v.trim());
+    const item: Partial<BulkUserItem> & { metadata: Record<string, string> } = {
+      metadata: {},
+    };
+
+    for (let index = 0; index < headers.length; index++) {
+      const header = headers[index];
+      const value = values[index];
+      if (value === undefined || value === "") continue;
+
+      if (header === "email") {
+        item.email = value;
+      } else if (header === "name") {
+        item.name = value;
+      } else if (header === "phone") {
+        item.phone = value;
+      } else if (header === "role") {
+        item.role = value;
+      } else if (header === "tenant") {
+        item.tenantSlug = value;
+      } else if (header === "department") {
+        item.department = value;
+      } else if (header === "position") {
+        item.position = value;
+      } else if (header === "jobtitle") {
+        item.jobTitle = value;
+      } else {
+        item.metadata[header] = value;
+      }
+    }
+
+    if (item.email && item.name) {
+      data.push(item as BulkUserItem);
+    }
+  }
+
+  return data;
+}

adminfront/src/index.css

@@ -0,0 +1,83 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 210 25% 6%;
+    --foreground: 210 35% 96%;
+    --card: 215 32% 9%;
+    --card-foreground: 210 35% 96%;
+    --popover: 215 32% 9%;
+    --popover-foreground: 210 35% 96%;
+    --primary: 209 79% 52%;
+    --primary-foreground: 210 35% 96%;
+    --secondary: 215 25% 16%;
+    --secondary-foreground: 210 35% 96%;
+    --muted: 215 15% 65%;
+    --muted-foreground: 215 15% 65%;
+    --accent: 42 95% 57%;
+    --accent-foreground: 215 25% 10%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 210 35% 96%;
+    --border: 215 25% 24%;
+    --input: 215 25% 24%;
+    --ring: 209 79% 52%;
+    --radius: 0.75rem;
+  }
+
+  .light {
+    --background: 0 0% 98%;
+    --foreground: 223 25% 12%;
+    --card: 0 0% 100%;
+    --card-foreground: 223 25% 12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 223 25% 12%;
+    --primary: 209 79% 52%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 220 17% 94%;
+    --secondary-foreground: 223 25% 20%;
+    --muted: 223 15% 45%;
+    --muted-foreground: 223 15% 45%;
+    --accent: 40 96% 62%;
+    --accent-foreground: 223 25% 12%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 220 17% 90%;
+    --input: 220 17% 90%;
+    --ring: 209 79% 52%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply min-h-screen bg-background font-sans text-foreground antialiased;
+    background-image: radial-gradient(
+        circle at 10% 18%,
+        rgba(54, 211, 153, 0.16),
+        transparent 28%
+      ),
+      radial-gradient(
+        circle at 78% 4%,
+        rgba(249, 168, 38, 0.14),
+        transparent 24%
+      ),
+      radial-gradient(
+        circle at 50% 90%,
+        rgba(54, 211, 153, 0.08),
+        transparent 30%
+      );
+  }
+
+  a {
+    @apply text-inherit no-underline;
+  }
+}
+
+@layer components {
+  .glass-panel {
+    @apply rounded-2xl border border-border bg-card/85 shadow-card backdrop-blur;
+  }
+}

adminfront/src/lib/adminApi.ts

@@ -0,0 +1,713 @@
+import apiClient from "./apiClient";
+
+export type AuditLog = {
+  event_id: string;
+  timestamp: string;
+  user_id: string;
+  event_type: string;
+  status: string;
+  ip_address: string;
+  user_agent: string;
+  device_id?: string;
+  details?: string;
+};
+
+export type AuditLogListResponse = {
+  items: AuditLog[];
+  limit: number;
+  cursor?: string;
+  next_cursor?: string;
+};
+
+export type TenantSummary = {
+  id: string;
+  type: string; // PERSONAL, COMPANY, COMPANY_GROUP, USER_GROUP
+  name: string;
+  slug: string;
+  description: string;
+  status: string;
+  domains?: string[];
+  parentId?: string;
+  config?: Record<string, unknown>;
+  memberCount: number; // Added member count
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type TenantCreateRequest = {
+  name: string;
+  type?: string;
+  slug?: string;
+  parentId?: string;
+  description?: string;
+  status?: string;
+  domains?: string[];
+  config?: Record<string, unknown>;
+};
+
+export type TenantListResponse = {
+  items: TenantSummary[];
+  limit: number;
+  offset: number;
+  total: number;
+};
+
+export type TenantUpdateRequest = {
+  name?: string;
+  type?: string;
+  slug?: string;
+  parentId?: string;
+  description?: string;
+  status?: string;
+  domains?: string[];
+  config?: Record<string, unknown>;
+};
+
+export type ApiKeySummary = {
+  id: string;
+  name: string;
+  client_id: string;
+  scopes: string[];
+  status: string;
+  lastUsedAt?: string;
+  createdAt: string;
+};
+
+export type ApiKeyListResponse = {
+  items: ApiKeySummary[];
+  total: number;
+};
+
+export type RoleSummary = {
+  id: string;
+  name: string;
+  description: string;
+  permissions: string[];
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type RoleListResponse = {
+  items: RoleSummary[];
+  total: number;
+};
+
+export async function fetchAuditLogs(limit = 50, cursor?: string) {
+  const { data } = await apiClient.get<AuditLogListResponse>("/v1/audit", {
+    params: { limit, cursor },
+  });
+  return data;
+}
+
+export async function fetchTenants(limit = 50, offset = 0, parentId?: string) {
+  const { data } = await apiClient.get<TenantListResponse>(
+    "/v1/admin/tenants",
+    {
+      params: { limit, offset, parentId },
+    },
+  );
+  return data;
+}
+
+export async function fetchTenant(tenantId: string) {
+  const { data } = await apiClient.get<TenantSummary>(
+    `/v1/admin/tenants/${tenantId}`,
+  );
+  return data;
+}
+
+export async function createTenant(payload: TenantCreateRequest) {
+  const { data } = await apiClient.post<TenantSummary>(
+    "/v1/admin/tenants",
+    payload,
+  );
+  return data;
+}
+
+export async function updateTenant(
+  tenantId: string,
+  payload: TenantUpdateRequest,
+) {
+  const { data } = await apiClient.put<TenantSummary>(
+    `/v1/admin/tenants/${tenantId}`,
+    payload,
+  );
+  return data;
+}
+
+export async function deleteTenant(tenantId: string) {
+  await apiClient.delete(`/v1/admin/tenants/${tenantId}`);
+}
+
+export async function deleteTenantsBulk(ids: string[]) {
+  await apiClient.delete("/v1/admin/tenants/bulk", {
+    data: { ids },
+  });
+}
+
+export async function approveTenant(tenantId: string) {
+  const { data } = await apiClient.post<TenantSummary>(
+    `/v1/admin/tenants/${tenantId}/approve`,
+  );
+  return data;
+}
+
+export type TenantAdmin = {
+  id: string;
+  name: string;
+  email: string;
+};
+
+export async function fetchTenantAdmins(tenantId: string) {
+  const { data } = await apiClient.get<TenantAdmin[]>(
+    `/v1/admin/tenants/${tenantId}/admins`,
+  );
+  return data;
+}
+
+export async function addTenantAdmin(tenantId: string, userId: string) {
+  await apiClient.post(`/v1/admin/tenants/${tenantId}/admins/${userId}`);
+}
+
+export async function removeTenantAdmin(tenantId: string, userId: string) {
+  await apiClient.delete(`/v1/admin/tenants/${tenantId}/admins/${userId}`);
+}
+
+export async function fetchTenantOwners(tenantId: string) {
+  const { data } = await apiClient.get<TenantAdmin[]>(
+    `/v1/admin/tenants/${tenantId}/owners`,
+  );
+  return data;
+}
+
+export async function addTenantOwner(tenantId: string, userId: string) {
+  await apiClient.post(`/v1/admin/tenants/${tenantId}/owners/${userId}`);
+}
+
+export async function removeTenantOwner(tenantId: string, userId: string) {
+  await apiClient.delete(`/v1/admin/tenants/${tenantId}/owners/${userId}`);
+}
+
+// Group Management
+export type GroupMember = {
+  id: string;
+  name: string;
+  email: string;
+};
+
+export type GroupSummary = {
+  id: string;
+  tenantId: string;
+  parentId?: string;
+  name: string;
+  description?: string;
+  unitType?: string;
+  members?: GroupMember[];
+  createdAt?: string;
+  updatedAt?: string;
+};
+
+export type GroupCreateRequest = {
+  name: string;
+  parentId?: string;
+  description?: string;
+  unitType?: string;
+};
+
+export async function fetchGroups(tenantId: string) {
+  const { data } = await apiClient.get<GroupSummary[]>(
+    `/v1/admin/tenants/${tenantId}/organization`,
+  );
+  return data;
+}
+
+export async function fetchGroup(tenantId: string, groupId: string) {
+  const { data } = await apiClient.get<GroupSummary>(
+    `/v1/admin/tenants/${tenantId}/organization/${groupId}`,
+  );
+  return data;
+}
+
+export async function createGroup(
+  tenantId: string,
+  payload: GroupCreateRequest,
+) {
+  const { data } = await apiClient.post<GroupSummary>(
+    `/v1/admin/tenants/${tenantId}/organization`,
+    payload,
+  );
+  return data;
+}
+
+export async function deleteGroup(tenantId: string, groupId: string) {
+  await apiClient.delete(
+    `/v1/admin/tenants/${tenantId}/organization/${groupId}`,
+  );
+}
+
+export async function addGroupMember(
+  tenantId: string,
+  groupId: string,
+  userId: string,
+) {
+  await apiClient.post(
+    `/v1/admin/tenants/${tenantId}/organization/${groupId}/members`,
+    { userId },
+  );
+}
+
+export async function removeGroupMember(
+  tenantId: string,
+  groupId: string,
+  userId: string,
+) {
+  await apiClient.delete(
+    `/v1/admin/tenants/${tenantId}/organization/${groupId}/members/${userId}`,
+  );
+}
+
+export interface ImportResult {
+  totalRows: number;
+  processed: number;
+  userCreated: number;
+  userUpdated: number;
+  tenantCreated: number;
+  errors: string[];
+}
+
+export async function fetchImportProgress(
+  tenantId: string,
+  progressId: string,
+) {
+  const { data } = await apiClient.get<{ current: number; total: number }>(
+    `/v1/admin/tenants/${tenantId}/organization/import/progress/${progressId}`,
+  );
+  return data;
+}
+
+export async function importOrgChart(
+  tenantId: string,
+  file: File,
+  progressId?: string,
+) {
+  const formData = new FormData();
+  formData.append("file", file);
+  const url = progressId
+    ? `/v1/admin/tenants/${tenantId}/organization/import?progressId=${progressId}`
+    : `/v1/admin/tenants/${tenantId}/organization/import`;
+
+  const { data } = await apiClient.post<{ data: ImportResult }>(url, formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+  return data.data;
+}
+
+export type GroupRole = {
+  tenantId: string;
+  tenantName: string;
+  relation: string;
+};
+
+export async function fetchGroupRoles(tenantId: string, groupId: string) {
+  const { data } = await apiClient.get<GroupRole[]>(
+    `/v1/admin/tenants/${tenantId}/organization/${groupId}/roles`,
+  );
+  return data;
+}
+
+export async function assignGroupRole(
+  tenantId: string,
+  groupId: string,
+  targetTenantId: string,
+  relation: string,
+) {
+  await apiClient.post(
+    `/v1/admin/tenants/${tenantId}/organization/${groupId}/roles`,
+    { tenantId: targetTenantId, relation },
+  );
+}
+
+export async function removeGroupRole(
+  tenantId: string,
+  groupId: string,
+  targetTenantId: string,
+  relation: string,
+) {
+  await apiClient.delete(
+    `/v1/admin/tenants/${tenantId}/organization/${groupId}/roles/${targetTenantId}/${relation}`,
+  );
+}
+
+// API Key Management (M2M)
+export type ApiKeyCreateRequest = {
+  name: string;
+  scopes: string[];
+};
+
+export type ApiKeyCreateResponse = {
+  apiKey: ApiKeySummary;
+  clientSecret: string;
+};
+
+export async function fetchApiKeys(limit = 50, offset = 0) {
+  const { data } = await apiClient.get<ApiKeyListResponse>(
+    "/v1/admin/api-keys",
+    {
+      params: { limit, offset },
+    },
+  );
+  return data;
+}
+
+export async function createApiKey(payload: ApiKeyCreateRequest) {
+  const { data } = await apiClient.post<ApiKeyCreateResponse>(
+    "/v1/admin/api-keys",
+    payload,
+  );
+  return data;
+}
+
+export async function deleteApiKey(apiKeyId: string) {
+  await apiClient.delete(`/v1/admin/api-keys/${apiKeyId}`);
+}
+
+// User Management
+export type UserSummary = {
+  id: string;
+  email: string;
+  loginId?: string;
+  name: string;
+  phone?: string;
+  role: string;
+  status: string;
+  tenantSlug?: string;
+  companyCode?: string;
+  tenant?: TenantSummary;
+  joinedTenants?: TenantSummary[]; // [New] 다중 소속 테넌트 목록
+  metadata?: Record<string, unknown>;
+  department?: string;
+  position?: string;
+  jobTitle?: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type UserListResponse = {
+  items: UserSummary[];
+  limit: number;
+  offset: number;
+  total: number;
+};
+
+export type UserCreateRequest = {
+  email: string;
+  loginId?: string;
+  password?: string;
+  name: string;
+  phone?: string;
+  role?: string;
+  tenantSlug?: string;
+  department?: string;
+  position?: string;
+  jobTitle?: string;
+  metadata?: Record<string, unknown>;
+};
+
+export type UserCreateResponse = UserSummary & {
+  initialPassword?: string;
+};
+
+export type UserUpdateRequest = {
+  loginId?: string;
+  password?: string;
+  name?: string;
+  phone?: string;
+  role?: string;
+  status?: string;
+  tenantSlug?: string;
+  department?: string;
+  position?: string;
+  jobTitle?: string;
+  metadata?: Record<string, unknown>;
+};
+
+export type BulkUserItem = {
+  email: string;
+  loginId?: string;
+  name: string;
+  phone?: string;
+  role?: string;
+  tenantSlug?: string;
+  department?: string;
+  position?: string;
+  jobTitle?: string;
+  metadata: Record<string, string>;
+};
+
+export type BulkUserResult = {
+  email: string;
+  success: boolean;
+  message?: string;
+  userId?: string;
+};
+
+export type BulkUserResponse = {
+  results: BulkUserResult[];
+};
+
+export async function fetchUsers(
+  limit = 50,
+  offset = 0,
+  search?: string,
+  tenantSlug?: string,
+) {
+  const { data } = await apiClient.get<UserListResponse>("/v1/admin/users", {
+    params: { limit, offset, search, tenantSlug },
+  });
+  return data;
+}
+
+export async function fetchUser(userId: string) {
+  const { data } = await apiClient.get<UserSummary>(
+    `/v1/admin/users/${userId}`,
+  );
+  return data;
+}
+
+export async function createUser(payload: UserCreateRequest) {
+  // Map tenantSlug to companyCode for backend compatibility
+  const requestPayload: UserCreateRequest & { companyCode?: string } = {
+    ...payload,
+  };
+  if (payload.tenantSlug !== undefined) {
+    requestPayload.companyCode = payload.tenantSlug;
+  }
+
+  const { data } = await apiClient.post<UserCreateResponse>(
+    "/v1/admin/users",
+    requestPayload,
+  );
+  return data;
+}
+
+export function exportUsersCSVUrl(search?: string, tenantSlug?: string) {
+  const params = new URLSearchParams();
+  if (search) params.append("search", search);
+  if (tenantSlug) params.append("tenantSlug", tenantSlug);
+
+  // Get mock role from storage if exists for dev environment
+  const isMockRoleEnabled =
+    window.localStorage.getItem("X-Mock-Role-Enabled") === "true";
+  const mockRole = window.localStorage.getItem("X-Mock-Role");
+  if (isMockRoleEnabled && mockRole) params.append("x-test-role", mockRole);
+
+  const baseUrl = import.meta.env.VITE_ADMIN_API_BASE ?? "/api/v1";
+  return `${baseUrl}/admin/users/export?${params.toString()}`;
+}
+
+export async function bulkCreateUsers(users: BulkUserItem[]) {
+  const mappedUsers = users.map((u) => {
+    const mapped: BulkUserItem & { companyCode?: string } = { ...u };
+    if (u.tenantSlug !== undefined) {
+      mapped.companyCode = u.tenantSlug;
+    }
+    return mapped;
+  });
+  const { data } = await apiClient.post<BulkUserResponse>(
+    "/v1/admin/users/bulk",
+    { users: mappedUsers },
+  );
+  return data;
+}
+
+export async function bulkUpdateUsers(payload: {
+  userIds: string[];
+  status?: string;
+  role?: string;
+  tenantSlug?: string;
+  department?: string;
+}) {
+  const requestPayload: typeof payload & { companyCode?: string } = {
+    ...payload,
+  };
+  if (payload.tenantSlug !== undefined) {
+    requestPayload.companyCode = payload.tenantSlug;
+  }
+  const { data } = await apiClient.put("/v1/admin/users/bulk", requestPayload);
+  return data;
+}
+
+export async function bulkDeleteUsers(userIds: string[]) {
+  const { data } = await apiClient.delete("/v1/admin/users/bulk", {
+    data: { userIds },
+  });
+  return data;
+}
+
+export async function updateUser(userId: string, payload: UserUpdateRequest) {
+  const requestPayload: UserUpdateRequest & { companyCode?: string } = {
+    ...payload,
+  };
+  if (payload.tenantSlug !== undefined) {
+    requestPayload.companyCode = payload.tenantSlug;
+  }
+
+  const { data } = await apiClient.put<UserSummary>(
+    `/v1/admin/users/${userId}`,
+    requestPayload,
+  );
+  return data;
+}
+
+export type PasswordPolicyResponse = {
+  minLength?: number;
+  lowercase?: boolean;
+  uppercase?: boolean;
+  number?: boolean;
+  nonAlphanumeric?: boolean;
+  minCharacterTypes?: number;
+};
+
+export async function fetchPasswordPolicy() {
+  const { data } = await apiClient.get<PasswordPolicyResponse>(
+    "/v1/auth/password/policy",
+  );
+  return data;
+}
+
+export async function deleteUser(userId: string) {
+  await apiClient.delete(`/v1/admin/users/${userId}`);
+}
+
+export type UserRpHistoryItem = {
+  client_id: string;
+  client_name: string;
+  lastLoginAt: string;
+  status: string;
+};
+
+export async function fetchUserRpHistory(userId: string) {
+  const { data } = await apiClient.get<UserRpHistoryItem[]>(
+    `/v1/admin/users/${userId}/rp-history`,
+  );
+  return data;
+}
+
+export type UserProfileResponse = {
+  id: string;
+  email: string;
+  name: string;
+  phone: string;
+  role: string;
+  department: string;
+  affiliationType: string;
+  tenantSlug?: string;
+  tenantId?: string;
+  metadata?: Record<string, unknown>;
+  tenant?: TenantSummary;
+  manageableTenants?: TenantSummary[];
+};
+
+export async function fetchMe() {
+  const { data } = await apiClient.get<UserProfileResponse>("/v1/user/me");
+  return data;
+}
+
+// Relying Party Management
+export type RelyingParty = {
+  clientId: string;
+  tenantId: string;
+  name: string;
+  description: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type HydraClientReq = {
+  client_id?: string;
+  client_name: string;
+  client_secret?: string;
+  redirect_uris: string[];
+  scope?: string;
+  token_endpoint_auth_method?: string;
+  grant_types?: string[];
+  response_types?: string[];
+  metadata?: Record<string, unknown>;
+};
+
+export async function fetchRelyingParties(tenantId: string) {
+  const { data } = await apiClient.get<RelyingParty[]>(
+    `/v1/admin/tenants/${tenantId}/relying-parties`,
+  );
+  return data;
+}
+
+export async function fetchAllRelyingParties() {
+  const { data } = await apiClient.get<RelyingParty[]>(
+    "/v1/admin/relying-parties",
+  );
+  return data;
+}
+
+export async function createRelyingParty(
+  tenantId: string,
+  payload: HydraClientReq,
+) {
+  const { data } = await apiClient.post<RelyingParty>(
+    `/v1/admin/tenants/${tenantId}/relying-parties`,
+    payload,
+  );
+  return data;
+}
+
+export async function fetchRelyingParty(id: string) {
+  const { data } = await apiClient.get<{
+    relyingParty: RelyingParty;
+    oauth2Config: HydraClientReq;
+  }>(`/v1/admin/relying-parties/${id}`);
+  return data;
+}
+
+export async function updateRelyingParty(id: string, payload: HydraClientReq) {
+  const { data } = await apiClient.put<RelyingParty>(
+    `/v1/admin/relying-parties/${id}`,
+    payload,
+  );
+  return data;
+}
+
+export async function deleteRelyingParty(id: string) {
+  await apiClient.delete(`/v1/admin/relying-parties/${id}`);
+}
+
+export type RPOwner = {
+  subject: string;
+
+  name?: string;
+
+  email?: string;
+
+  type: string;
+};
+
+export async function fetchRPOwners(clientId: string) {
+  const { data } = await apiClient.get<RPOwner[]>(
+    `/v1/admin/relying-parties/${clientId}/owners`,
+  );
+
+  return data;
+}
+
+export async function addRPOwner(clientId: string, subject: string) {
+  await apiClient.post(
+    `/v1/admin/relying-parties/${clientId}/owners/${subject}`,
+  );
+}
+
+export async function removeRPOwner(clientId: string, subject: string) {
+  await apiClient.delete(
+    `/v1/admin/relying-parties/${clientId}/owners/${subject}`,
+  );
+}

adminfront/src/lib/apiClient.ts

@@ -0,0 +1,68 @@
+import axios from "axios";
+import { userManager } from "./auth";
+
+const apiClient = axios.create({
+  baseURL: (window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
+    ._IS_TEST_MODE
+    ? "http://playwright-mock/api"
+    : (import.meta.env.VITE_ADMIN_API_BASE ?? "/api"),
+});
+
+apiClient.interceptors.request.use(async (config) => {
+  // IdP 중립 Auth 레이어 연동: oidc-client의 userManager에서 최신 토큰을 가져옵니다.
+  const user = await userManager.getUser();
+  const sessionToken =
+    user?.access_token || window.localStorage.getItem("admin_session");
+
+  if (sessionToken) {
+    config.headers.Authorization = `Bearer ${sessionToken}`;
+  }
+
+  // 테넌트 선택 값을 보관하고 헤더로 전달한다.
+  const tenantId = window.localStorage.getItem("admin_tenant");
+  if (tenantId) {
+    config.headers["X-Tenant-ID"] = tenantId;
+  }
+
+  // [Development Only] Inject Mock Role from RoleSwitcher
+  const isMockRoleEnabled =
+    window.localStorage.getItem("X-Mock-Role-Enabled") === "true";
+  const mockRole = window.localStorage.getItem("X-Mock-Role");
+  if (isMockRoleEnabled && mockRole) {
+    config.headers["X-Test-Role"] = mockRole;
+  }
+
+  return config;
+});
+
+apiClient.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    if (error.response?.status === 401) {
+      console.warn(
+        "[apiClient] 401 Unauthorized detected. Clearing session state.",
+      );
+
+      // 로컬 스토리지의 세션 키 제거
+      window.localStorage.removeItem("admin_session");
+
+      // oidc-client의 유저 상태도 제거하여 isAuthenticated를 false로 만듭니다.
+      // 이를 통해 LoginPage에서의 무한 리다이렉션 루프를 방지합니다.
+      await userManager.removeUser();
+
+      const isAuthPath = window.location.pathname.startsWith("/auth/callback");
+      const isLoginPath = window.location.pathname === "/login";
+
+      if (!isAuthPath && !isLoginPath) {
+        console.info(
+          "[apiClient] Redirecting to /login from",
+          window.location.pathname,
+        );
+        window.location.href = "/login";
+      }
+    }
+    return Promise.reject(error);
+  },
+);
+
+export default apiClient;

adminfront/src/lib/auth.ts

@@ -0,0 +1,22 @@
+import { UserManager, WebStorageStateStore } from "oidc-client-ts";
+import type { AuthProviderProps } from "react-oidc-context";
+
+export const oidcConfig: AuthProviderProps = {
+  authority:
+    import.meta.env.VITE_OIDC_AUTHORITY || `${window.location.protocol}//${window.location.hostname}:{{USERFRONT_PORT}}/oidc`,
+  client_id: import.meta.env.VITE_OIDC_CLIENT_ID || "adminfront",
+  redirect_uri: `${window.location.origin}/auth/callback`,
+  response_type: "code",
+  scope: "openid offline_access profile email", // offline_access for refresh token
+  post_logout_redirect_uri: window.location.origin,
+  popup_redirect_uri: `${window.location.origin}/auth/callback`,
+  userStore: new WebStorageStateStore({ store: window.localStorage }),
+  automaticSilentRenew: false,
+};
+
+export const userManager = new UserManager({
+  ...oidcConfig,
+  authority: oidcConfig.authority || "",
+  client_id: oidcConfig.client_id || "",
+  redirect_uri: oidcConfig.redirect_uri || "",
+});

adminfront/src/lib/i18n.test.ts

@@ -0,0 +1,37 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { t } from "./i18n";
+
+describe("i18n utility", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    vi.clearAllMocks();
+  });
+
+  it("returns fallback if key not found", () => {
+    expect(t("this.key.truly.does.not.exist", "Fallback")).toBe("Fallback");
+  });
+
+  it("returns key if fallback not provided and key not found", () => {
+    expect(t("this.key.truly.does.not.exist")).toBe(
+      "this.key.truly.does.not.exist",
+    );
+  });
+
+  it("replaces variables in template", () => {
+    expect(t("this.test.key", "Hello {{ name }}", { name: "World" })).toBe(
+      "Hello World",
+    );
+  });
+
+  it("respects locale in localStorage", () => {
+    window.localStorage.setItem("locale", "en");
+    // We expect some key that exists in en.toml
+    // Let's use a common one or a fallback if we don't know the content
+    expect(t("ui.common.save", "Save")).toBe("Save");
+  });
+
+  it("defaults to ko if no locale set and browser language is ko", () => {
+    vi.spyOn(window.navigator, "language", "get").mockReturnValue("ko-KR");
+    expect(t("ui.common.save", "저장")).toBe("저장");
+  });
+});

adminfront/src/lib/i18n.ts

@@ -0,0 +1,148 @@
+const LOCALE_STORAGE_KEY = "locale";
+const DEFAULT_LOCALE = "ko";
+const SUPPORTED_LOCALES = ["ko", "en"] as const;
+
+type Locale = (typeof SUPPORTED_LOCALES)[number];
+
+type TomlValue = string | TomlObject;
+
+interface TomlObject {
+  [key: string]: TomlValue;
+}
+
+function isSupportedLocale(value: string): value is Locale {
+  return (SUPPORTED_LOCALES as readonly string[]).includes(value);
+}
+
+function parseToml(raw: string): TomlObject {
+  const lines = raw.split(/\r?\n/);
+  const root: TomlObject = {};
+  let currentPath: string[] = [];
+
+  for (const rawLine of lines) {
+    const line = rawLine.trim();
+    if (!line || line.startsWith("#")) {
+      continue;
+    }
+
+    if (line.startsWith("[") && line.endsWith("]")) {
+      const sectionName = line.slice(1, -1).trim();
+      currentPath = sectionName
+        ? sectionName
+            .split(".")
+            .map((part) => part.trim())
+            .filter(Boolean)
+        : [];
+      continue;
+    }
+
+    const eqIndex = line.indexOf("=");
+    if (eqIndex === -1) {
+      continue;
+    }
+
+    const key = line.slice(0, eqIndex).trim();
+    const valueRaw = line.slice(eqIndex + 1).trim();
+    if (!key) {
+      continue;
+    }
+
+    let value = valueRaw;
+    if (
+      (value.startsWith('"') && value.endsWith('"')) ||
+      (value.startsWith("'") && value.endsWith("'"))
+    ) {
+      value = value.slice(1, -1);
+    }
+
+    let cursor: TomlObject = root;
+    for (const section of currentPath) {
+      if (!cursor[section] || typeof cursor[section] === "string") {
+        cursor[section] = {};
+      }
+      cursor = cursor[section] as TomlObject;
+    }
+
+    cursor[key] = value;
+  }
+
+  return root;
+}
+
+function getValue(target: TomlObject, key: string): string | undefined {
+  const parts = key.split(".");
+  let cursor: TomlValue = target;
+  for (const part of parts) {
+    if (typeof cursor !== "object" || cursor === null) {
+      return undefined;
+    }
+    cursor = (cursor as TomlObject)[part];
+    if (cursor === undefined) {
+      return undefined;
+    }
+  }
+  return typeof cursor === "string" ? cursor : undefined;
+}
+
+function detectLocale(): Locale {
+  if (typeof window === "undefined") {
+    return DEFAULT_LOCALE;
+  }
+
+  const stored = window.localStorage.getItem(LOCALE_STORAGE_KEY);
+  if (stored && isSupportedLocale(stored)) {
+    return stored;
+  }
+
+  const pathLocale = window.location.pathname.split("/")[1];
+  if (pathLocale && isSupportedLocale(pathLocale)) {
+    return pathLocale;
+  }
+
+  const browserLang = window.navigator.language.toLowerCase();
+  if (browserLang.startsWith("ko")) {
+    return "ko";
+  }
+
+  return DEFAULT_LOCALE;
+}
+
+// eslint-disable-next-line import/no-unresolved
+import enRaw from "../locales/en.toml?raw";
+// Vite ?raw import는 런타임 상수로 번들됩니다.
+// eslint-disable-next-line import/no-unresolved
+import koRaw from "../locales/ko.toml?raw";
+
+const translations: Record<Locale, TomlObject> = {
+  ko: parseToml(koRaw),
+  en: parseToml(enRaw),
+};
+
+function formatTemplate(
+  template: string,
+  vars?: Record<string, string | number>,
+): string {
+  if (!vars) {
+    return template;
+  }
+  return template.replace(/\{\{\s*(\w+)\s*\}\}/g, (match, key) => {
+    const value = vars[key];
+    if (value === undefined || value === null) {
+      return match;
+    }
+    return String(value);
+  });
+}
+
+export function t(
+  key: string,
+  fallback?: string,
+  vars?: Record<string, string | number>,
+): string {
+  const locale = detectLocale();
+  const value = getValue(translations[locale], key);
+  if (value && value.length > 0) {
+    return formatTemplate(value, vars);
+  }
+  return formatTemplate(fallback ?? key, vars);
+}

adminfront/src/lib/sessionSliding.test.ts

@@ -0,0 +1,126 @@
+import { describe, expect, it } from "vitest";
+import {
+  SESSION_RENEW_THRESHOLD_MS,
+  shouldAttemptSlidingSessionRenew,
+  shouldAttemptUnlimitedSessionRenew,
+} from "./sessionSliding";
+
+describe("shouldAttemptSlidingSessionRenew", () => {
+  const nowMs = 1_700_000_000_000;
+
+  it("returns false when remaining time is above the 5 minute threshold", () => {
+    expect(
+      shouldAttemptSlidingSessionRenew({
+        expiresAtSec: Math.floor(
+          (nowMs + SESSION_RENEW_THRESHOLD_MS + 1_000) / 1000,
+        ),
+        nowMs,
+        isEnabled: true,
+        isAuthenticated: true,
+        isLoading: false,
+        isRenewInFlight: false,
+        lastAttemptAtMs: 0,
+      }),
+    ).toBe(false);
+  });
+
+  it("returns true when remaining time is within the 5 minute threshold", () => {
+    expect(
+      shouldAttemptSlidingSessionRenew({
+        expiresAtSec: Math.floor(
+          (nowMs + SESSION_RENEW_THRESHOLD_MS - 1_000) / 1000,
+        ),
+        nowMs,
+        isEnabled: true,
+        isAuthenticated: true,
+        isLoading: false,
+        isRenewInFlight: false,
+        lastAttemptAtMs: 0,
+      }),
+    ).toBe(true);
+  });
+
+  it("returns false when automatic renewal is disabled", () => {
+    expect(
+      shouldAttemptSlidingSessionRenew({
+        expiresAtSec: Math.floor(
+          (nowMs + SESSION_RENEW_THRESHOLD_MS - 1_000) / 1000,
+        ),
+        nowMs,
+        isEnabled: false,
+        isAuthenticated: true,
+        isLoading: false,
+        isRenewInFlight: false,
+        lastAttemptAtMs: 0,
+      }),
+    ).toBe(false);
+  });
+
+  it("returns false when the last renew attempt is still within the throttle window", () => {
+    expect(
+      shouldAttemptSlidingSessionRenew({
+        expiresAtSec: Math.floor(
+          (nowMs + SESSION_RENEW_THRESHOLD_MS - 1_000) / 1000,
+        ),
+        nowMs,
+        isEnabled: true,
+        isAuthenticated: true,
+        isLoading: false,
+        isRenewInFlight: false,
+        lastAttemptAtMs: nowMs - 10_000,
+      }),
+    ).toBe(false);
+  });
+});
+
+describe("shouldAttemptUnlimitedSessionRenew", () => {
+  const nowMs = 1_700_000_000_000;
+
+  it("returns false when unlimited mode is not active", () => {
+    expect(
+      shouldAttemptUnlimitedSessionRenew({
+        expiresAtSec: Math.floor(
+          (nowMs + SESSION_RENEW_THRESHOLD_MS - 1_000) / 1000,
+        ),
+        nowMs,
+        isEnabled: true,
+        isAuthenticated: true,
+        isLoading: false,
+        isRenewInFlight: false,
+        lastAttemptAtMs: 0,
+      }),
+    ).toBe(false);
+  });
+
+  it("returns true near expiry when session expiry management is disabled", () => {
+    expect(
+      shouldAttemptUnlimitedSessionRenew({
+        expiresAtSec: Math.floor(
+          (nowMs + SESSION_RENEW_THRESHOLD_MS - 1_000) / 1000,
+        ),
+        nowMs,
+        isEnabled: false,
+        isAuthenticated: true,
+        isLoading: false,
+        isRenewInFlight: false,
+        lastAttemptAtMs: 0,
+      }),
+    ).toBe(true);
+  });
+
+  it("returns false when the token still has enough remaining lifetime", () => {
+    expect(
+      shouldAttemptUnlimitedSessionRenew({
+        expiresAtSec: Math.floor(
+          (nowMs + SESSION_RENEW_THRESHOLD_MS + 1_000) / 1000,
+        ),
+        nowMs,
+        isEnabled: false,
+        isAuthenticated: true,
+        isLoading: false,
+        isRenewInFlight: false,
+        lastAttemptAtMs: 0,
+      }),
+    ).toBe(false);
+  });
+});

adminfront/src/lib/sessionSliding.ts

@@ -0,0 +1,106 @@
+export const SESSION_RENEW_THRESHOLD_MS = 5 * 60 * 1000;
+export const SESSION_RENEW_THROTTLE_MS = 30 * 1000;
+
+type SlidingSessionRenewDecisionParams = {
+  expiresAtSec?: number | null;
+  nowMs: number;
+  isEnabled: boolean;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  isRenewInFlight: boolean;
+  lastAttemptAtMs: number;
+  thresholdMs?: number;
+  throttleMs?: number;
+};
+
+export function shouldAttemptSlidingSessionRenew({
+  expiresAtSec,
+  nowMs,
+  isEnabled,
+  isAuthenticated,
+  isLoading,
+  isRenewInFlight,
+  lastAttemptAtMs,
+  thresholdMs = SESSION_RENEW_THRESHOLD_MS,
+  throttleMs = SESSION_RENEW_THROTTLE_MS,
+}: SlidingSessionRenewDecisionParams) {
+  if (!isEnabled || !isAuthenticated || isLoading || isRenewInFlight) {
+    return false;
+  }
+
+  if (typeof expiresAtSec !== "number") {
+    console.debug(
+      "[sessionSliding] expiresAtSec is not a number, skipping renew",
+    );
+    return false;
+  }
+
+  const remainingMs = expiresAtSec * 1000 - nowMs;
+  const remainingMin = Math.floor(remainingMs / 1000 / 60);
+
+  if (remainingMs <= 0) {
+    console.debug("[sessionSliding] Session already expired, skipping renew");
+    return false;
+  }
+
+  if (remainingMs > thresholdMs) {
+    return false;
+  }
+
+  if (nowMs - lastAttemptAtMs < throttleMs) {
+    console.debug("[sessionSliding] Throttling renewal attempt");
+    return false;
+  }
+
+  console.info(
+    `[sessionSliding] Attempting sliding session renewal. Remaining: ${remainingMin}m`,
+  );
+  return true;
+}
+
+export function shouldAttemptUnlimitedSessionRenew({
+  expiresAtSec,
+  nowMs,
+  isEnabled,
+  isAuthenticated,
+  isLoading,
+  isRenewInFlight,
+  lastAttemptAtMs,
+  thresholdMs = SESSION_RENEW_THRESHOLD_MS,
+  throttleMs = SESSION_RENEW_THROTTLE_MS,
+}: SlidingSessionRenewDecisionParams) {
+  if (isEnabled || !isAuthenticated || isLoading || isRenewInFlight) {
+    return false;
+  }
+
+  if (typeof expiresAtSec !== "number") {
+    console.debug(
+      "[sessionSliding] expiresAtSec is not a number, skipping unlimited renew",
+    );
+    return false;
+  }
+
+  const remainingMs = expiresAtSec * 1000 - nowMs;
+  const remainingMin = Math.floor(remainingMs / 1000 / 60);
+
+  if (remainingMs <= 0) {
+    console.debug(
+      "[sessionSliding] Session already expired, skipping unlimited renew",
+    );
+    return false;
+  }
+
+  if (remainingMs > thresholdMs) {
+    return false;
+  }
+
+  if (nowMs - lastAttemptAtMs < throttleMs) {
+    console.debug("[sessionSliding] Throttling unlimited renewal attempt");
+    return false;
+  }
+
+  console.info(
+    `[sessionSliding] Attempting unlimited session renewal. Remaining: ${remainingMin}m`,
+  );
+  return true;
+}

adminfront/src/lib/tenantTree.test.ts

@@ -0,0 +1,93 @@
+import { describe, expect, it } from "vitest";
+import type { TenantSummary } from "./adminApi";
+import { buildTenantFullTree } from "./tenantTree";
+
+describe("tenantTree utility", () => {
+  const mockTenants: TenantSummary[] = [
+    {
+      id: "root-1",
+      name: "Root",
+      slug: "root",
+      type: "COMPANY",
+      memberCount: 10,
+      parentId: undefined,
+      description: "",
+      status: "active",
+      createdAt: "",
+      updatedAt: "",
+    },
+    {
+      id: "child-1",
+      name: "Child 1",
+      slug: "child-1",
+      type: "USER_GROUP",
+      memberCount: 5,
+      parentId: "root-1",
+      description: "",
+      status: "active",
+      createdAt: "",
+      updatedAt: "",
+    },
+    {
+      id: "grandchild-1",
+      name: "Grandchild 1",
+      slug: "grandchild-1",
+      type: "USER_GROUP",
+      memberCount: 2,
+      parentId: "child-1",
+      description: "",
+      status: "active",
+      createdAt: "",
+      updatedAt: "",
+    },
+  ];
+
+  it("calculates recursive member counts correctly", () => {
+    const { currentBase } = buildTenantFullTree(mockTenants, "root-1");
+
+    expect(currentBase).not.toBeNull();
+    if (currentBase) {
+      // Direct: 10, Child: 5, Grandchild: 2 -> Total: 17
+      expect(currentBase.recursiveMemberCount).toBe(17);
+      expect(currentBase.children).toHaveLength(1);
+
+      const child = currentBase.children[0];
+      // Direct: 5, Grandchild: 2 -> Total: 7
+      expect(child.recursiveMemberCount).toBe(7);
+      expect(child.children).toHaveLength(1);
+
+      const grandchild = child.children[0];
+      // Direct: 2 -> Total: 2
+      expect(grandchild.recursiveMemberCount).toBe(2);
+      expect(grandchild.children).toHaveLength(0);
+    }
+  });
+
+  it("returns null currentBase if rootId is not found", () => {
+    const { currentBase } = buildTenantFullTree(mockTenants, "non-existent");
+    expect(currentBase).toBeNull();
+  });
+
+  it("builds correct structure with multiple roots", () => {
+    const multiRootTenants: TenantSummary[] = [
+      ...mockTenants,
+      {
+        id: "root-2",
+        name: "Root 2",
+        slug: "root-2",
+        type: "COMPANY",
+        memberCount: 3,
+        parentId: undefined,
+        description: "",
+        status: "active",
+        createdAt: "",
+        updatedAt: "",
+      },
+    ];
+
+    const { subTree } = buildTenantFullTree(multiRootTenants);
+    expect(subTree).toHaveLength(2);
+    expect(subTree.map((n) => n.id)).toContain("root-1");
+    expect(subTree.map((n) => n.id)).toContain("root-2");
+  });
+});

adminfront/src/lib/tenantTree.ts

@@ -0,0 +1,87 @@
+import type { TenantSummary } from "./adminApi";
+
+export type TenantNode = TenantSummary & {
+  children: TenantNode[];
+  recursiveMemberCount: number;
+};
+
+/**
+ * Builds a hierarchical tree from a flat list of tenants and calculates
+ * direct and recursive member counts for each node.
+ */
+export function buildTenantFullTree(
+  allTenants: TenantSummary[],
+  rootId?: string,
+): { currentBase: TenantNode | null; subTree: TenantNode[] } {
+  if (allTenants.length === 0) return { currentBase: null, subTree: [] };
+
+  const tenantMap = new Map<string, TenantNode>();
+  for (const t of allTenants) {
+    tenantMap.set(t.id, {
+      ...t,
+      children: [],
+      recursiveMemberCount: t.memberCount || 0,
+    });
+  }
+
+  const visitedDuringBuild = new Set<string>();
+  // Build initial children relations and prevent simple cycles
+  for (const t of allTenants) {
+    if (t.parentId && t.parentId !== t.id) {
+      const parent = tenantMap.get(t.parentId);
+      const child = tenantMap.get(t.id);
+      if (parent && child) {
+        // Simple cycle prevention during build: don't add if it creates an immediate loop
+        parent.children.push(child);
+      }
+    }
+  }
+
+  const visitedForCalc = new Set<string>();
+  // Function to calculate recursive counts with cycle protection
+  const calculateRecursive = (node: TenantNode): number => {
+    if (visitedForCalc.has(node.id)) {
+      console.warn(
+        `Circular dependency detected in tenant tree for ID: ${node.id}`,
+      );
+      return 0; // Prevent infinite loop
+    }
+    visitedForCalc.add(node.id);
+
+    let total = node.memberCount || 0;
+    for (const child of node.children) {
+      total += calculateRecursive(child);
+    }
+    node.recursiveMemberCount = total;
+
+    // We don't remove from visitedForCalc here because a tree shouldn't have
+    // multiple paths to the same node anyway (it's a tree, not a graph).
+    // If it were a DAG, we'd need different logic, but for a tree with parentIds,
+    // a node should only be visited once.
+    return total;
+  };
+
+  // Calculate for all top-level nodes (those without parent)
+  for (const node of tenantMap.values()) {
+    if (!node.parentId) {
+      visitedForCalc.clear();
+      calculateRecursive(node);
+    }
+  }
+
+  // If a specific rootId is provided, find and return its subtree
+  if (rootId) {
+    const base = tenantMap.get(rootId);
+    if (base) {
+      // Re-calculate specifically for our current tenant to be sure if it wasn't a global root
+      visitedForCalc.clear();
+      calculateRecursive(base);
+      return { currentBase: base, subTree: base.children };
+    }
+    return { currentBase: null, subTree: [] };
+  }
+
+  // If no rootId, return all top-level roots as subTree
+  const roots = Array.from(tenantMap.values()).filter((n) => !n.parentId);
+  return { currentBase: null, subTree: roots };
+}

adminfront/src/lib/utils.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+import { cn } from "./utils";
+
+describe("cn utility", () => {
+  it("merges class names correctly", () => {
+    expect(cn("a", "b")).toBe("a b");
+    expect(cn("a", { b: true, c: false })).toBe("a b");
+  });
+
+  it("handles tailwind class conflicts", () => {
+    expect(cn("px-2 py-2", "px-4")).toBe("py-2 px-4");
+  });
+});

adminfront/src/lib/utils.ts

@@ -0,0 +1,25 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function generateSecurePassword(length = 16): string {
+  const charset =
+    "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]:;?><,./-=";
+  let password = "";
+  if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+    const values = new Uint32Array(length);
+    crypto.getRandomValues(values);
+    for (let i = 0; i < length; i++) {
+      password += charset[values[i] % charset.length];
+    }
+  } else {
+    // Fallback for older environments
+    for (let i = 0; i < length; i++) {
+      password += charset[Math.floor(Math.random() * charset.length)];
+    }
+  }
+  return password;
+}

adminfront/src/main.tsx

@@ -0,0 +1,32 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { AuthProvider } from "react-oidc-context";
+import { RouterProvider } from "react-router-dom";
+import { queryClient } from "./app/queryClient";
+import { router } from "./app/routes";
+import { Toaster } from "./components/ui/toaster";
+import { oidcConfig } from "./lib/auth";
+import "./index.css";
+
+const rootElement = document.getElementById("root");
+
+if (!rootElement) {
+  throw new Error("Root element not found");
+}
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <AuthProvider {...oidcConfig}>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider
+          router={router}
+          future={{
+            v7_startTransition: true,
+          }}
+        />
+        <Toaster />
+      </QueryClientProvider>
+    </AuthProvider>
+  </StrictMode>,
+);