chore: document local WSL setup fixes

# Conflicts:
#	adminfront/src/features/tenants/routes/TenantFineGrainedPermissionsPage.tsx
#	adminfront/tests/worksmobile.spec.ts

.env.sample

@@ -36,6 +36,34 @@ CORS_ALLOWED_ORIGINS=http://localhost:5000 # 쿠키 인증 사용 시 정확한
 WORKS_ADMIN_API_BASE_URL=https://www.worksapis.com
 WORKS_ADMIN_OAUTH_TOKEN_URL=https://auth.worksmobile.com/oauth2/v2.0/token
 
+# --- NAVER WORKS Drive backup upload ---
+# Drive API 업로드에는 `file` scope가 필요합니다.
+# 운영에서는 Drive 권한이 위임된 사용자/OAuth access token을 우선 사용하세요.
+# 서비스 계정 JWT 방식은 WORKS 앱 정책에서 Drive API scope 위임이 허용된 경우에만 사용할 수 있습니다.
+WORKS_DRIVE_TARGET=sharedrive
+WORKS_DRIVE_SHARED_DRIVE_ID=
+WORKS_DRIVE_PARENT_FILE_ID=
+WORKS_DRIVE_USER_ID=me
+WORKS_DRIVE_GROUP_ID=
+WORKS_DRIVE_SHARED_FOLDER_ID=
+WORKS_DRIVE_ACCESS_TOKEN=
+WORKS_DRIVE_ACCESS_TOKEN_FILE=
+WORKS_DRIVE_ACCESS_TOKEN_CMD=
+WORKS_DRIVE_OAUTH_SCOPE=file
+WORKS_DRIVE_OAUTH_CLIENT_ID=
+WORKS_DRIVE_OAUTH_CLIENT_SECRET=
+WORKS_DRIVE_OAUTH_CLIENT_SERVICE_ACCOUNT=
+WORKS_DRIVE_OAUTH_CLIENT_PRIVATE_KEY_FILE=./config/worksmobile-driveapp-private-key.pem
+WORKS_DRIVE_OAUTH_REFRESH_TOKEN=
+WORKS_DRIVE_OAUTH_REDIRECT_URI=
+WORKS_DRIVE_SPLIT_SIZE=9000M
+WORKS_DRIVE_MAX_SINGLE_FILE_BYTES=0
+WORKS_DRIVE_FORCE_SPLIT=false
+WORKS_DRIVE_OVERWRITE=false
+WORKS_DRIVE_DRY_RUN=false
+WORKS_DRIVE_UPLOAD_REPORTS=true
+WORKS_DRIVE_REPORT_FOLDER_NAME=reports
+
 
 # Audit System Configuration
 AUDIT_WORKER_COUNT=5      # 비동기 감사 로그 처리를 위한 고루틴 워커 수
@@ -118,6 +146,8 @@ HYDRA_PUBLIC_URL=${OATHKEEPER_PUBLIC_URL}/oidc
 # HYDRA_LOGIN_URL=https://sso.hmac.kr/login
 # HYDRA_CONSENT_URL=https://sso.hmac.kr/consent
 # HYDRA_ERROR_URL=https://sso.hmac.kr/error
+# Refresh Token 만료시각 source of truth (Hydra + backend ID Token rt_expires_at claim)
+HYDRA_REFRESH_TOKEN_TTL=720h
 
 # Kratos allowed_return_urls 확장 목록 (콤마 구분, 선택)
 # 기본값은 KRATOS_UI_URL, USERFRONT_URL, 각 callback URL을 자동 포함합니다.
@@ -150,5 +180,9 @@ 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_URL=http://localhost:5175
 ORGFRONT_CALLBACK_URLS=http://localhost:5175/auth/callback,https://sso.hmac.kr/orgfront/auth/callback
 VITE_ORGCHART_URL=
+
+# promtail에서 로그를 전송받을 Loki 서버 엔드포인트 URL
+LOKI_URL=http://loki:3100/loki/api/v1/push

.gitea/workflows/build_RC.yml

@@ -18,6 +18,30 @@ jobs:
       - name: Install dependencies
         run: sudo apt-get update && sudo apt-get install -y jq curl
 
+      - name: Validate RC build configuration
+        env:
+          HARBOR_ENDPOINT: ${{ vars.HARBOR_ENDPOINT }}
+          HARBOR_HOSTNAME: ${{ vars.HARBOR_HOSTNAME }}
+          HARBOR_ROBOT_ACCOUNT: ${{ vars.HARBOR_ROBOT_ACCOUNT }}
+          HARBOR_ROBOT_KEY: ${{ secrets.HARBOR_ROBOT_KEY }}
+          ADMINFRONT_URL: ${{ vars.ADMINFRONT_URL }}
+          DEVFRONT_URL: ${{ vars.DEVFRONT_URL }}
+          ORGFRONT_URL: ${{ vars.ORGFRONT_URL }}
+          VITE_OIDC_AUTHORITY: ${{ vars.VITE_OIDC_AUTHORITY }}
+        run: |
+          set -euo pipefail
+
+          required_action_env="
+          HARBOR_ENDPOINT HARBOR_HOSTNAME HARBOR_ROBOT_ACCOUNT HARBOR_ROBOT_KEY
+          ADMINFRONT_URL DEVFRONT_URL ORGFRONT_URL VITE_OIDC_AUTHORITY
+          "
+          for key in ${required_action_env}; do
+            if [ -z "${!key:-}" ]; then
+              echo "::error::Missing required RC build value: ${key}. Check Gitea repo variables/secrets."
+              exit 1
+            fi
+          done
+
       - name: Login to Docker Registry
         uses: docker/login-action@v3
         with:
@@ -93,6 +117,11 @@ jobs:
           file: ./adminfront/Dockerfile
           push: true
           tags: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/adminfront:${{ steps.rc_calculator.outputs.new_rc_tag }}
+          build-args: |
+            VITE_ADMIN_PUBLIC_URL=${{ vars.ADMINFRONT_URL }}
+            VITE_OIDC_AUTHORITY=${{ vars.VITE_OIDC_AUTHORITY }}
+            VITE_OIDC_CLIENT_ID=adminfront
+            ORGFRONT_URL=${{ vars.ORGFRONT_URL }}
           provenance: false
           sbom: false
 
@@ -103,6 +132,10 @@ jobs:
           file: ./devfront/Dockerfile
           push: true
           tags: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/devfront:${{ steps.rc_calculator.outputs.new_rc_tag }}
+          build-args: |
+            VITE_DEVFRONT_PUBLIC_URL=${{ vars.DEVFRONT_URL }}
+            VITE_OIDC_AUTHORITY=${{ vars.VITE_OIDC_AUTHORITY }}
+            VITE_OIDC_CLIENT_ID=devfront
           provenance: false
           sbom: false
 
@@ -113,14 +146,19 @@ jobs:
           file: ./orgfront/Dockerfile
           push: true
           tags: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/orgfront:${{ steps.rc_calculator.outputs.new_rc_tag }}
+          build-args: |
+            VITE_ORGFRONT_PUBLIC_URL=${{ vars.ORGFRONT_URL }}
+            VITE_OIDC_AUTHORITY=${{ vars.VITE_OIDC_AUTHORITY }}
+            VITE_OIDC_CLIENT_ID=orgfront
           provenance: false
           sbom: false
 
       - name: Build and push userfront RC image
         uses: docker/build-push-action@v5
         with:
-          context: ./userfront
+          context: .
           file: ./userfront/Dockerfile
+          target: production
           push: true
           tags: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/userfront:${{ steps.rc_calculator.outputs.new_rc_tag }}
           provenance: false

.gitea/workflows/production_image_deploy.yml

@@ -0,0 +1,96 @@
+name: Deploy Baron SSO Production Images
+
+on:
+  workflow_dispatch:
+    inputs:
+      image_tag:
+        description: "배포할 공용 저장소 이미지 태그 (예: v1.2606.ab12)"
+        required: true
+        type: string
+
+jobs:
+  deploy-production-images:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout deployment scripts and templates
+        uses: actions/checkout@v4
+
+      - name: Setup SSH
+        uses: webfactory/ssh-agent@v0.9.0
+        with:
+          ssh-private-key: ${{ secrets.PROD_SSH_PRIVATE_KEY }}
+
+      - name: Build production deployment bundle
+        env:
+          IMAGE_TAG: ${{ github.event.inputs.image_tag }}
+          IMAGE_DEPLOY_ENV: production
+          IMAGE_DEPLOY_INSTANCE_NAME: ${{ vars.PROD_INSTANCE_NAME }}
+          IMAGE_DEPLOY_PORT_PREFIX: ${{ vars.PROD_PORT_PREFIX }}
+          IMAGE_DEPLOY_PUBLIC_URL: ${{ vars.PROD_FRONTEND_URL }}
+          IMAGE_DEPLOY_COMPOSE_TEMPLATE: deploy/templates/docker-compose.images.yaml
+          IMAGE_DEPLOY_BUNDLE_FILE: prod-image-deploy-bundle.tgz
+          ADMINFRONT_URL: ${{ vars.ADMINFRONT_URL }}
+          DEVFRONT_URL: ${{ vars.DEVFRONT_URL }}
+          ORGFRONT_URL: ${{ vars.ORGFRONT_URL }}
+          VITE_OIDC_AUTHORITY: ${{ vars.VITE_OIDC_AUTHORITY }}
+          IMAGE_DEPLOY_DB_PORT: ${{ vars.PROD_DB_PORT }}
+          IMAGE_DEPLOY_REDIS_PORT: ${{ vars.PROD_REDIS_PORT }}
+          IMAGE_DEPLOY_CLICKHOUSE_PORT_HTTP: ${{ vars.PROD_CLICKHOUSE_PORT_HTTP }}
+          IMAGE_DEPLOY_CLICKHOUSE_PORT_NATIVE: ${{ vars.PROD_CLICKHOUSE_PORT_NATIVE }}
+          IMAGE_DEPLOY_BACKEND_PORT: ${{ vars.PROD_BACKEND_PORT }}
+          IMAGE_DEPLOY_FRONTEND_PORT: ${{ vars.PROD_FRONTEND_PORT }}
+          ADMINFRONT_PORT: ${{ vars.ADMINFRONT_PORT }}
+          DEVFRONT_PORT: ${{ vars.DEVFRONT_PORT }}
+          ORGFRONT_PORT: ${{ vars.ORGFRONT_PORT }}
+          IMAGE_DEPLOY_OATHKEEPER_PROXY_PORT: ${{ vars.PROD_OATHKEEPER_PROXY_PORT }}
+          IMAGE_DEPLOY_DOMAIN_SUFFIX: ${{ vars.PROD_DOMAIN_SUFFIX }}
+          ADMINFRONT_CALLBACK_URLS: ${{ vars.ADMINFRONT_CALLBACK_URLS }}
+          DEVFRONT_CALLBACK_URLS: ${{ vars.DEVFRONT_CALLBACK_URLS }}
+          ORGFRONT_CALLBACK_URLS: ${{ vars.ORGFRONT_CALLBACK_URLS }}
+          HYDRA_REFRESH_TOKEN_TTL: ${{ vars.HYDRA_REFRESH_TOKEN_TTL }}
+          ORY_POSTGRES_USER: ${{ vars.ORY_POSTGRES_USER }}
+          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 }}
+          HYDRA_VERSION: ${{ vars.HYDRA_VERSION }}
+          KETO_VERSION: ${{ vars.KETO_VERSION }}
+          OATHKEEPER_VERSION: ${{ vars.OATHKEEPER_VERSION }}
+          ORY_POSTGRES_TAG: ${{ vars.ORY_POSTGRES_TAG }}
+          OATHKEEPER_UID: ${{ vars.OATHKEEPER_UID }}
+          OATHKEEPER_GID: ${{ vars.OATHKEEPER_GID }}
+          OATHKEEPER_INTROSPECT_CLIENT_ID: ${{ vars.OATHKEEPER_INTROSPECT_CLIENT_ID }}
+          ADMIN_EMAIL: ${{ vars.ADMIN_EMAIL }}
+          HARBOR_HOSTNAME: ${{ vars.HARBOR_HOSTNAME }}
+          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
+          ORGFRONT_IMAGE_NAME: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/orgfront
+          IMAGE_DEPLOY_DB_PASSWORD: ${{ secrets.PROD_DB_PASSWORD }}
+          IMAGE_DEPLOY_ORY_POSTGRES_PASSWORD: ${{ secrets.PROD_ORY_POSTGRES_PASSWORD }}
+          IMAGE_DEPLOY_OATHKEEPER_INTROSPECT_CLIENT_SECRET: ${{ secrets.PROD_OATHKEEPER_INTROSPECT_CLIENT_SECRET }}
+          IMAGE_DEPLOY_CLICKHOUSE_PASSWORD: ${{ secrets.PROD_CLICKHOUSE_PASSWORD }}
+          IMAGE_DEPLOY_COOKIE_SECRET: ${{ secrets.PROD_COOKIE_SECRET }}
+          IMAGE_DEPLOY_JWT_SECRET: ${{ secrets.PROD_JWT_SECRET }}
+          IMAGE_DEPLOY_CSRF_COOKIE_SECRET: ${{ secrets.PROD_CSRF_COOKIE_SECRET }}
+          IMAGE_DEPLOY_ADMIN_PASSWORD: ${{ secrets.PROD_ADMIN_PASSWORD }}
+        run: |
+          set -euo pipefail
+          # Same image tag contract as staging: production must consume the
+          # immutable image tag that already passed staging verification.
+          scripts/deploy/build_image_deploy_bundle.sh
+
+      - name: Upload bundle and run requested production image tag
+        env:
+          IMAGE_DEPLOY_BUNDLE_FILE: prod-image-deploy-bundle.tgz
+          DEPLOY_HOST: ${{ vars.PROD_HOST }}
+          DEPLOY_USER: ${{ vars.PROD_USER }}
+          DEPLOY_PATH: ${{ vars.PROD_DEPLOY_PATH }}
+          HARBOR_ENDPOINT: ${{ vars.HARBOR_ENDPOINT }}
+          HARBOR_ROBOT_ACCOUNT: ${{ vars.HARBOR_ROBOT_ACCOUNT }}
+          HARBOR_ROBOT_KEY: ${{ secrets.HARBOR_ROBOT_KEY }}
+        run: |
+          set -euo pipefail
+          scripts/deploy/upload_and_run_image_deploy.sh

.gitea/workflows/production_image_publish.yml

@@ -0,0 +1,182 @@
+name: Publish Baron SSO Production Images
+
+on:
+  workflow_dispatch:
+    inputs:
+      version_prefix:
+        description: "공용 저장소 이미지 태그 prefix (예: v1.2606, 최종 태그는 v1.2606.<커밋해시4자리>)"
+        required: true
+        type: string
+
+jobs:
+  publish-images:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout dev branch
+        uses: actions/checkout@v4
+        with:
+          ref: dev
+
+      - name: Validate publish inputs
+        env:
+          VERSION_PREFIX: ${{ github.event.inputs.version_prefix }}
+          HARBOR_ENDPOINT: ${{ vars.HARBOR_ENDPOINT }}
+          HARBOR_HOSTNAME: ${{ vars.HARBOR_HOSTNAME }}
+          HARBOR_ROBOT_ACCOUNT: ${{ vars.HARBOR_ROBOT_ACCOUNT }}
+          HARBOR_ROBOT_KEY: ${{ secrets.HARBOR_ROBOT_KEY }}
+          ADMINFRONT_URL: ${{ vars.ADMINFRONT_URL }}
+          DEVFRONT_URL: ${{ vars.DEVFRONT_URL }}
+          ORGFRONT_URL: ${{ vars.ORGFRONT_URL }}
+          VITE_OIDC_AUTHORITY: ${{ vars.VITE_OIDC_AUTHORITY }}
+        run: |
+          set -euo pipefail
+
+          if ! printf '%s' "${VERSION_PREFIX}" | grep -Eq '^v[0-9]+\.[0-9]{4}$'; then
+            echo "::error::version_prefix must look like vX.YYMM (got: ${VERSION_PREFIX})"
+            exit 1
+          fi
+
+          required_values="
+          HARBOR_ENDPOINT HARBOR_HOSTNAME HARBOR_ROBOT_ACCOUNT HARBOR_ROBOT_KEY
+          ADMINFRONT_URL DEVFRONT_URL ORGFRONT_URL VITE_OIDC_AUTHORITY
+          "
+          for key in ${required_values}; do
+            if [ -z "${!key:-}" ]; then
+              echo "::error::Missing required publish value: ${key}. Check Gitea repo variables/secrets."
+              exit 1
+            fi
+          done
+
+      - name: Compute commit-hash image tag
+        id: version
+        env:
+          VERSION_PREFIX: ${{ github.event.inputs.version_prefix }}
+        run: |
+          set -euo pipefail
+
+          short_sha="$(git rev-parse --short=4 HEAD)"
+          if ! printf '%s' "${short_sha}" | grep -Eq '^[0-9a-f]{4}$'; then
+            echo "::error::commit hash suffix must be 4 lowercase hexadecimal characters (got: ${short_sha})"
+            exit 1
+          fi
+
+          image_tag="${VERSION_PREFIX}.${short_sha}"
+          echo "image_tag=${image_tag}" >> "${GITHUB_OUTPUT}"
+          echo "Computed production image tag: ${image_tag}"
+
+      - name: Login to shared registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ vars.HARBOR_ENDPOINT }}
+          username: ${{ vars.HARBOR_ROBOT_ACCOUNT }}
+          password: ${{ secrets.HARBOR_ROBOT_KEY }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push backend production image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./backend
+          file: ./backend/Dockerfile
+          push: true
+          tags: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/backend:${{ steps.version.outputs.image_tag }}
+          provenance: false
+          sbom: false
+
+      - name: Build and push userfront production image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./userfront/Dockerfile
+          target: production
+          push: true
+          tags: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/userfront:${{ steps.version.outputs.image_tag }}
+          provenance: false
+          sbom: false
+
+      - name: Build and push adminfront production image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./adminfront/Dockerfile
+          target: production
+          push: true
+          tags: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/adminfront:${{ steps.version.outputs.image_tag }}
+          build-args: |
+            VITE_ADMIN_PUBLIC_URL=${{ vars.ADMINFRONT_URL }}
+            VITE_OIDC_AUTHORITY=${{ vars.VITE_OIDC_AUTHORITY }}
+            VITE_OIDC_CLIENT_ID=adminfront
+            ORGFRONT_URL=${{ vars.ORGFRONT_URL }}
+          provenance: false
+          sbom: false
+
+      - name: Build and push devfront production image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./devfront/Dockerfile
+          target: production
+          push: true
+          tags: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/devfront:${{ steps.version.outputs.image_tag }}
+          build-args: |
+            VITE_DEVFRONT_PUBLIC_URL=${{ vars.DEVFRONT_URL }}
+            VITE_OIDC_AUTHORITY=${{ vars.VITE_OIDC_AUTHORITY }}
+            VITE_OIDC_CLIENT_ID=devfront
+            ORGFRONT_URL=${{ vars.ORGFRONT_URL }}
+          provenance: false
+          sbom: false
+
+      - name: Build and push orgfront production image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./orgfront/Dockerfile
+          target: production
+          push: true
+          tags: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/orgfront:${{ steps.version.outputs.image_tag }}
+          build-args: |
+            VITE_ORGFRONT_PUBLIC_URL=${{ vars.ORGFRONT_URL }}
+            VITE_OIDC_AUTHORITY=${{ vars.VITE_OIDC_AUTHORITY }}
+            VITE_OIDC_CLIENT_ID=orgfront
+          provenance: false
+          sbom: false
+
+      - name: Upload pushed images to WORKS Drive archive
+        if: ${{ vars.WORKS_DRIVE_DOCKER_IMAGE_ARCHIVE_ENABLED == 'true' }}
+        env:
+          IMAGE_TAG: ${{ steps.version.outputs.image_tag }}
+          HARBOR_HOSTNAME: ${{ vars.HARBOR_HOSTNAME }}
+          WORKS_SHAREDRIVE_DOCKER_IMAGE_DIR: ${{ vars.WORKS_SHAREDRIVE_DOCKER_IMAGE_DIR }}
+          WORKS_DRIVE_TARGET: sharedrive
+          WORKS_DRIVE_SHARED_DRIVE_ID: ${{ vars.WORKS_DRIVE_SHARED_DRIVE_ID }}
+          WORKS_DRIVE_PARENT_FILE_ID: ${{ vars.WORKS_DRIVE_PARENT_FILE_ID }}
+          WORKS_DRIVE_OAUTH_CLIENT_ID: ${{ secrets.WORKS_DRIVE_OAUTH_CLIENT_ID }}
+          WORKS_DRIVE_OAUTH_CLIENT_SECRET: ${{ secrets.WORKS_DRIVE_OAUTH_CLIENT_SECRET }}
+          WORKS_DRIVE_OAUTH_CLIENT_SERVICE_ACCOUNT: ${{ secrets.WORKS_DRIVE_OAUTH_CLIENT_SERVICE_ACCOUNT }}
+          WORKS_DRIVE_OAUTH_CLIENT_PRIVATE_KEY: ${{ secrets.WORKS_DRIVE_OAUTH_CLIENT_PRIVATE_KEY }}
+          WORKS_DRIVE_OAUTH_REFRESH_TOKEN: ${{ secrets.WORKS_DRIVE_OAUTH_REFRESH_TOKEN }}
+          WORKS_ADMIN_API_BASE_URL: ${{ vars.WORKS_ADMIN_API_BASE_URL }}
+          WORKS_ADMIN_OAUTH_TOKEN_URL: ${{ vars.WORKS_ADMIN_OAUTH_TOKEN_URL }}
+        run: |
+          set -euo pipefail
+
+          : "${WORKS_SHAREDRIVE_DOCKER_IMAGE_DIR:=docker-build-image}"
+
+          required_values="
+          IMAGE_TAG HARBOR_HOSTNAME WORKS_DRIVE_SHARED_DRIVE_ID
+          "
+          for key in ${required_values}; do
+            if [ -z "${!key:-}" ]; then
+              echo "::error::Missing required WORKS image archive value: ${key}."
+              exit 1
+            fi
+          done
+
+          for image in backend userfront adminfront devfront orgfront; do
+            image_ref="${HARBOR_HOSTNAME}/baron_sso/${image}:${IMAGE_TAG}"
+            docker pull "${image_ref}"
+            DOCKER_IMAGE_REF="${image_ref}" \
+            WORKS_DOCKER_IMAGE_ARCHIVE_DIR="${RUNNER_TEMP}/baron-sso-docker-image-upload" \
+              scripts/docker-image/upload_works_drive.sh
+          done

.gitea/workflows/production_release.yml

@@ -42,19 +42,13 @@ jobs:
             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}"
+          for image in backend userfront adminfront devfront orgfront; do
+            echo "Re-tagging ${image} 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/${image}:${BASE_TAG}" "docker://${HARBOR_HOSTNAME}/baron_sso/${image}:${RE_TAG}"
+          done
 
           echo "final_image_tag=${RE_TAG}" >> "$GITHUB_OUTPUT"
 
@@ -68,6 +62,9 @@ jobs:
           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
+          ADMINFRONT_IMAGE_NAME: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/adminfront
+          DEVFRONT_IMAGE_NAME: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/devfront
+          ORGFRONT_IMAGE_NAME: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/orgfront
           DEPLOY_PATH: ${{ vars.PROD_DEPLOY_PATH }}
           PROD_HOST: ${{ vars.PROD_HOST }}
           PROD_USER: ${{ vars.PROD_USER }}
@@ -101,8 +98,12 @@ jobs:
             "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 }}" \
+            "PROD_BACKEND_PORT=${{ vars.PROD_BACKEND_PORT }}" \
+            "BACKEND_PORT=3000" \
+            "USERFRONT_PORT=${{ vars.PROD_FRONTEND_PORT }}" \
+            "ADMINFRONT_PORT=${{ vars.ADMINFRONT_PORT }}" \
+            "DEVFRONT_PORT=${{ vars.DEVFRONT_PORT }}" \
+            "ORGFRONT_PORT=${{ vars.ORGFRONT_PORT }}" \
             "DB_USER=${{ vars.PROD_DB_USER }}" \
             "DB_PASSWORD=${{ secrets.PROD_DB_PASSWORD }}" \
             "DB_NAME=${{ vars.PROD_DB_NAME }}" \
@@ -117,10 +118,34 @@ jobs:
             "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 }}" \
+            "USERFRONT_URL=${{ vars.PROD_FRONTEND_URL }}" \
+            "ADMINFRONT_URL=${{ vars.ADMINFRONT_URL }}" \
+            "DEVFRONT_URL=${{ vars.DEVFRONT_URL }}" \
+            "ORGFRONT_URL=${{ vars.ORGFRONT_URL }}" \
             "BACKEND_URL=${{ vars.PROD_BACKEND_URL }}" \
+            "VITE_OIDC_AUTHORITY=${{ vars.VITE_OIDC_AUTHORITY }}" \
+            "HYDRA_REFRESH_TOKEN_TTL=${{ vars.HYDRA_REFRESH_TOKEN_TTL }}" \
+            "ADMINFRONT_CALLBACK_URLS=${{ vars.ADMINFRONT_CALLBACK_URLS }}" \
+            "DEVFRONT_CALLBACK_URLS=${{ vars.DEVFRONT_CALLBACK_URLS }}" \
+            "ORGFRONT_CALLBACK_URLS=${{ vars.ORGFRONT_CALLBACK_URLS }}" \
             > .env
 
+          required_dotenv_keys="
+          APP_ENV TZ DB_PORT CLICKHOUSE_PORT_HTTP CLICKHOUSE_PORT_NATIVE CLICKHOUSE_USER CLICKHOUSE_PASSWORD
+          PROD_BACKEND_PORT BACKEND_PORT USERFRONT_PORT ADMINFRONT_PORT DEVFRONT_PORT ORGFRONT_PORT
+          DB_USER DB_PASSWORD DB_NAME COOKIE_SECRET JWT_SECRET REDIS_ADDR
+          NAVER_CLOUD_ACCESS_KEY NAVER_CLOUD_SECRET_KEY NAVER_CLOUD_SERVICE_ID NAVER_SENDER_PHONE_NUMBER
+          AWS_REGION AWS_ACCESS_KEY_ID AWS_SECRET_ACCESS_KEY AWS_SES_SENDER
+          USERFRONT_URL ADMINFRONT_URL DEVFRONT_URL ORGFRONT_URL BACKEND_URL VITE_OIDC_AUTHORITY HYDRA_REFRESH_TOKEN_TTL
+          ADMINFRONT_CALLBACK_URLS DEVFRONT_CALLBACK_URLS ORGFRONT_CALLBACK_URLS
+          "
+          for key in ${required_dotenv_keys}; do
+            if ! grep -Eq "^${key}=.+" .env; then
+              echo "::error::Missing required production .env value: ${key}. Check Gitea repo variables/secrets."
+              exit 1
+            fi
+          done
+
           # Copy compose template and .env file to the remote server
           scp adminfront/seed-tenant.csv "${PROD_USER}@${PROD_HOST}:${DEPLOY_PATH}/adminfront/"
           scp docker/docker-compose.template.yaml .env "${PROD_USER}@${PROD_HOST}:${DEPLOY_PATH}/"
@@ -131,6 +156,9 @@ jobs:
             "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 ORGFRONT_IMAGE_NAME='${ORGFRONT_IMAGE_NAME}'; \
              export IMAGE_TAG='${IMAGE_TAG}'; \
              export HARBOR_ENDPOINT='${HARBOR_ENDPOINT}'; \
              export HARBOR_ROBOT_ACCOUNT='${HARBOR_ROBOT_ACCOUNT}'; \

.gitea/workflows/staging_build_check.yml

@@ -0,0 +1,83 @@
+name: Staging Build Check
+
+on:
+    pull_request:
+        paths:
+            - ".gitea/workflows/staging_build_check.yml"
+            - "docker/staging_pull_compose.template.yaml"
+            - "adminfront/**"
+            - "devfront/**"
+            - "userfront/**"
+            - "backend/**"
+            - "common/**"
+            - "scripts/**"
+            - "locales/**"
+            - "package.json"
+            - "pnpm-lock.yaml"
+            - "pnpm-workspace.yaml"
+    workflow_dispatch:
+
+jobs:
+    build-check:
+        runs-on: ubuntu-latest
+        strategy:
+            fail-fast: false
+            matrix:
+                include:
+                    - service: adminfront
+                    - service: devfront
+                    - service: userfront
+                    - service: backend
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Prepare staging build inputs
+              run: |
+                  set -euo pipefail
+
+                  cat <<'EOF' > .env
+                  APP_ENV=stage
+                  TZ=Asia/Seoul
+                  IDP_PROVIDER=ory
+                  ADMINFRONT_URL=https://adminfront.staging.example.com
+                  DEVFRONT_URL=https://devfront.staging.example.com
+                  USERFRONT_URL=https://userfront.staging.example.com
+                  ORGFRONT_URL=https://orgfront.staging.example.com
+                  BACKEND_URL=https://backend.staging.example.com
+                  BACKEND_PUBLIC_URL=https://backend.staging.example.com
+                  VITE_OIDC_AUTHORITY=https://sso.staging.example.com/oidc
+                  WORKS_ADMIN_API_BASE_URL=https://works-admin.staging.example.com/api
+                  WORKS_ADMIN_OAUTH_TOKEN_URL=https://works-admin.staging.example.com/oauth/token
+                  ORY_POSTGRES_USER=ory
+                  ORY_POSTGRES_PASSWORD=ory-password
+                  COOKIE_SECRET=staging-build-cookie-secret
+                  JWT_SECRET=staging-build-jwt-secret
+                  NAVER_CLOUD_ACCESS_KEY=dummy
+                  NAVER_CLOUD_SECRET_KEY=dummy
+                  NAVER_CLOUD_SERVICE_ID=dummy
+                  NAVER_SENDER_PHONE_NUMBER=00000000000
+                  AWS_REGION=ap-northeast-2
+                  AWS_ACCESS_KEY_ID=dummy
+                  AWS_SECRET_ACCESS_KEY=dummy
+                  AWS_SES_SENDER=dummy@example.com
+                  REDIS_ADDR=redis:6389
+                  CLICKHOUSE_PORT_NATIVE=9000
+                  CLICKHOUSE_USER=baron
+                  CLICKHOUSE_PASSWORD=password
+                  HYDRA_PUBLIC_URL=https://hydra.staging.example.com
+                  KRATOS_BROWSER_URL=https://sso.staging.example.com
+                  KRATOS_ADMIN_URL=http://kratos:4434
+                  KRATOS_UI_URL=https://sso.staging.example.com
+                  EOF
+
+                  cp docker/staging_pull_compose.template.yaml staging_pull_compose.yaml
+
+            - name: Build ${{ matrix.service }} with staging compose
+              env:
+                  DOCKER_BUILDKIT: "1"
+                  COMPOSE_DOCKER_CLI_BUILD: "1"
+              run: |
+                  set -euo pipefail
+                  docker compose -f staging_pull_compose.yaml build --pull --progress=plain "${{ matrix.service }}"

.gitea/workflows/staging_code_pull.yml

@@ -115,6 +115,7 @@ jobs:
                   KRATOS_UI_URL=${{ vars.KRATOS_UI_URL }}
                   HYDRA_ADMIN_URL=${{ vars.HYDRA_ADMIN_URL }}
                   HYDRA_PUBLIC_URL=${{ vars.HYDRA_PUBLIC_URL }}
+                  HYDRA_REFRESH_TOKEN_TTL=${{ vars.HYDRA_REFRESH_TOKEN_TTL }}
                   JWKS_URL=${{ vars.JWKS_URL }}
                   OATHKEEPER_VERSION=${{ vars.OATHKEEPER_VERSION }}
                   OATHKEEPER_UID=${{ vars.OATHKEEPER_UID }}
@@ -135,6 +136,11 @@ jobs:
                   KRATOS_ALLOWED_RETURN_URLS_EXTRA=${{ vars.KRATOS_ALLOWED_RETURN_URLS_EXTRA }}
                   # OATHKEEPER_INTROSPECT_CLIENT_ID=${{ vars.OATHKEEPER_INTROSPECT_CLIENT_ID }}
                   # OATHKEEPER_INTROSPECT_CLIENT_SECRET=${{ secrets.STG_OATHKEEPER_INTROSPECT_CLIENT_SECRET }}
+
+                  # Monitoring & Alerts
+                  SMS_WEBHOOK_PORT=${{ vars.SMS_WEBHOOK_PORT || '8080' }}
+                  MONITOR_RECIPIENT_PHONES=${{ vars.MONITOR_RECIPIENT_PHONES || '01012345678,01098765432' }}
+                  LOKI_URL=${{ vars.LOKI_URL || 'http://loki:3100/loki/api/v1/push' }}
                   EOF
 
                   # 코드 업데이트 (Git)
@@ -190,7 +196,7 @@ jobs:
                     max="${FRONTEND_HEALTH_MAX_ATTEMPTS:-60}"
                     i=1
                     while [ "${i}" -le "${max}" ]; do
-                      if docker exec "${name}" node -e "fetch('http://127.0.0.1:${port}/').then(r=>process.exit(r.ok?0:1)).catch(()=>process.exit(1))" >/dev/null 2>&1; then
+                      if docker exec "${name}" sh -c "if command -v wget >/dev/null 2>&1; then wget -qO- 'http://127.0.0.1:${port}/' >/dev/null; elif command -v node >/dev/null 2>&1; then node -e \"fetch('http://127.0.0.1:${port}/').then(r=>process.exit(r.ok?0:1)).catch(()=>process.exit(1))\"; else exit 127; fi" >/dev/null 2>&1; then
                         echo "Frontend ready: ${name}:${port}"
                         return 0
                       fi
@@ -203,6 +209,28 @@ jobs:
                     return 1
                   }
 
+                  check_container_url() {
+                    name="$1"
+                    url="$2"
+                    max="${FRONTEND_HEALTH_MAX_ATTEMPTS:-60}"
+                    i=1
+                    while [ "${i}" -le "${max}" ]; do
+                      if docker exec "${name}" sh -c "if command -v wget >/dev/null 2>&1; then wget -qO- '${url}' >/dev/null; elif command -v node >/dev/null 2>&1; then node -e \"fetch('${url}').then(r=>process.exit(r.ok?0:1)).catch(()=>process.exit(1))\"; else exit 127; fi" >/dev/null 2>&1; then
+                        echo "Container URL ready: ${name} ${url}"
+                        return 0
+                      fi
+                      echo "Waiting for container URL: ${name} ${url} (${i}/${max})"
+                      i=$((i + 1))
+                      sleep 2
+                    done
+                    echo "ERROR: container URL not ready: ${name} ${url}" >&2
+                    docker logs "${name}" --tail 200 >&2 || true
+                    return 1
+                  }
+
+                  check_container_url baron_backend http://127.0.0.1:3000/health
+                  check_container_http baron_userfront 5000
+                  check_container_http baron_gateway 5000
                   check_container_http baron_adminfront 5173
                   check_container_http baron_devfront 5173
                   check_container_http baron_orgfront 5175

.gitea/workflows/staging_image_deploy.yml

@@ -0,0 +1,94 @@
+name: Deploy Baron SSO Staging Images
+
+on:
+  workflow_dispatch:
+    inputs:
+      image_tag:
+        description: "스테이징에 배포할 공용 저장소 이미지 태그 (예: v1.2606.ab12)"
+        required: true
+        type: string
+
+jobs:
+  deploy-staging-images:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout deployment scripts and templates
+        uses: actions/checkout@v4
+
+      - name: Setup SSH
+        uses: webfactory/ssh-agent@v0.9.0
+        with:
+          ssh-private-key: ${{ secrets.STAGE_SSH_PRIVATE_KEY }}
+
+      - name: Build staging deployment bundle
+        env:
+          IMAGE_TAG: ${{ github.event.inputs.image_tag }}
+          IMAGE_DEPLOY_ENV: stage
+          IMAGE_DEPLOY_INSTANCE_NAME: ${{ vars.STAGE_INSTANCE_NAME }}
+          IMAGE_DEPLOY_PORT_PREFIX: ${{ vars.STAGE_PORT_PREFIX }}
+          IMAGE_DEPLOY_PUBLIC_URL: ${{ vars.USERFRONT_URL }}
+          IMAGE_DEPLOY_COMPOSE_TEMPLATE: deploy/templates/docker-compose.images.yaml
+          IMAGE_DEPLOY_BUNDLE_FILE: stage-image-deploy-bundle.tgz
+          ADMINFRONT_URL: ${{ vars.ADMINFRONT_URL }}
+          DEVFRONT_URL: ${{ vars.DEVFRONT_URL }}
+          ORGFRONT_URL: ${{ vars.ORGFRONT_URL }}
+          VITE_OIDC_AUTHORITY: ${{ vars.VITE_OIDC_AUTHORITY }}
+          IMAGE_DEPLOY_DB_PORT: ${{ vars.DB_PORT }}
+          IMAGE_DEPLOY_REDIS_PORT: ${{ vars.REDIS_PORT }}
+          IMAGE_DEPLOY_CLICKHOUSE_PORT_HTTP: ${{ vars.CLICKHOUSE_PORT_HTTP }}
+          IMAGE_DEPLOY_CLICKHOUSE_PORT_NATIVE: ${{ vars.CLICKHOUSE_PORT_NATIVE }}
+          IMAGE_DEPLOY_BACKEND_PORT: ${{ vars.BACKEND_PORT }}
+          IMAGE_DEPLOY_FRONTEND_PORT: ${{ vars.USERFRONT_PORT }}
+          ADMINFRONT_PORT: ${{ vars.ADMINFRONT_PORT }}
+          DEVFRONT_PORT: ${{ vars.DEVFRONT_PORT }}
+          ORGFRONT_PORT: ${{ vars.ORGFRONT_PORT }}
+          IMAGE_DEPLOY_OATHKEEPER_PROXY_PORT: ${{ vars.OATHKEEPER_PROXY_PORT }}
+          IMAGE_DEPLOY_DOMAIN_SUFFIX: ${{ vars.DOMAIN_SUFFIX }}
+          ADMINFRONT_CALLBACK_URLS: ${{ vars.ADMINFRONT_CALLBACK_URLS }}
+          DEVFRONT_CALLBACK_URLS: ${{ vars.DEVFRONT_CALLBACK_URLS }}
+          ORGFRONT_CALLBACK_URLS: ${{ vars.ORGFRONT_CALLBACK_URLS }}
+          HYDRA_REFRESH_TOKEN_TTL: ${{ vars.HYDRA_REFRESH_TOKEN_TTL }}
+          ORY_POSTGRES_USER: ${{ vars.ORY_POSTGRES_USER }}
+          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 }}
+          HYDRA_VERSION: ${{ vars.HYDRA_VERSION }}
+          KETO_VERSION: ${{ vars.KETO_VERSION }}
+          OATHKEEPER_VERSION: ${{ vars.OATHKEEPER_VERSION }}
+          ORY_POSTGRES_TAG: ${{ vars.ORY_POSTGRES_TAG }}
+          OATHKEEPER_UID: ${{ vars.OATHKEEPER_UID }}
+          OATHKEEPER_GID: ${{ vars.OATHKEEPER_GID }}
+          OATHKEEPER_INTROSPECT_CLIENT_ID: ${{ vars.OATHKEEPER_INTROSPECT_CLIENT_ID }}
+          ADMIN_EMAIL: ${{ vars.ADMIN_EMAIL }}
+          HARBOR_HOSTNAME: ${{ vars.HARBOR_HOSTNAME }}
+          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
+          ORGFRONT_IMAGE_NAME: ${{ vars.HARBOR_HOSTNAME }}/baron_sso/orgfront
+          IMAGE_DEPLOY_DB_PASSWORD: ${{ secrets.STG_DB_PASSWORD }}
+          IMAGE_DEPLOY_ORY_POSTGRES_PASSWORD: ${{ secrets.STG_ORY_POSTGRES_PASSWORD }}
+          IMAGE_DEPLOY_OATHKEEPER_INTROSPECT_CLIENT_SECRET: ${{ secrets.STG_OATHKEEPER_INTROSPECT_CLIENT_SECRET }}
+          IMAGE_DEPLOY_CLICKHOUSE_PASSWORD: ${{ secrets.CLICKHOUSE_PASSWORD }}
+          IMAGE_DEPLOY_COOKIE_SECRET: ${{ secrets.STG_COOKIE_SECRET }}
+          IMAGE_DEPLOY_JWT_SECRET: ${{ secrets.STG_JWT_SECRET }}
+          IMAGE_DEPLOY_CSRF_COOKIE_SECRET: ${{ secrets.STG_CSRF_COOKIE_SECRET }}
+          IMAGE_DEPLOY_ADMIN_PASSWORD: ${{ secrets.STG_ADMIN_PASSWORD }}
+        run: |
+          set -euo pipefail
+          scripts/deploy/build_image_deploy_bundle.sh
+
+      - name: Upload bundle and run requested staging image tag
+        env:
+          IMAGE_DEPLOY_BUNDLE_FILE: stage-image-deploy-bundle.tgz
+          DEPLOY_HOST: ${{ vars.STAGE_HOST }}
+          DEPLOY_USER: ${{ vars.STAGE_USER }}
+          DEPLOY_PATH: ${{ vars.STAGE_DEPLOY_PATH }}
+          HARBOR_ENDPOINT: ${{ vars.HARBOR_ENDPOINT }}
+          HARBOR_ROBOT_ACCOUNT: ${{ vars.HARBOR_ROBOT_ACCOUNT }}
+          HARBOR_ROBOT_KEY: ${{ secrets.HARBOR_ROBOT_KEY }}
+        run: |
+          set -euo pipefail
+          scripts/deploy/upload_and_run_image_deploy.sh

.gitea/workflows/staging_release.yml

@@ -69,7 +69,7 @@ jobs:
           CLICKHOUSE_PORT_NATIVE=${{ vars.CLICKHOUSE_PORT_NATIVE }}
           CLICKHOUSE_HOST=${{ vars.CLICKHOUSE_HOST }}
           CLICKHOUSE_USER=${{ vars.CLICKHOUSE_USER }}
-          CLICKHOUSE_PASSWORD=${{ vars.CLICKHOUSE_PASSWORD }}
+          CLICKHOUSE_PASSWORD=${{ secrets.CLICKHOUSE_PASSWORD }}
 
 
           BACKEND_PORT=${{ vars.BACKEND_PORT }}
@@ -123,6 +123,7 @@ jobs:
           KRATOS_UI_URL=${{ vars.KRATOS_UI_URL }}
           HYDRA_ADMIN_URL=${{ vars.HYDRA_ADMIN_URL }}
           HYDRA_PUBLIC_URL=${{ vars.HYDRA_PUBLIC_URL }}
+          HYDRA_REFRESH_TOKEN_TTL=${{ vars.HYDRA_REFRESH_TOKEN_TTL }}
           JWKS_URL=${{ vars.JWKS_URL }}
           OATHKEEPER_VERSION=${{ vars.OATHKEEPER_VERSION }}
           OATHKEEPER_UID=${{ vars.OATHKEEPER_UID }}
@@ -142,9 +143,32 @@ jobs:
           # OATHKEEPER_INTROSPECT_CLIENT_SECRET=${{ secrets.STG_OATHKEEPER_INTROSPECT_CLIENT_SECRET }}
           EOF
 
+          required_dotenv_keys="
+          APP_ENV BACKEND_LOG_LEVEL CLIENT_LOG_DEBUG WORKS_ADMIN_API_BASE_URL WORKS_ADMIN_OAUTH_TOKEN_URL TZ IDP_PROVIDER
+          DB_PORT CLICKHOUSE_PORT_HTTP CLICKHOUSE_PORT_NATIVE CLICKHOUSE_HOST CLICKHOUSE_USER CLICKHOUSE_PASSWORD
+          BACKEND_PORT ADMINFRONT_PORT DEVFRONT_PORT ORGFRONT_PORT USERFRONT_PORT OATHKEEPER_API_URL
+          DB_USER DB_PASSWORD DB_NAME COOKIE_SECRET JWT_SECRET REDIS_ADDR CORS_ALLOWED_ORIGINS PROFILE_CACHE_TTL
+          NAVER_CLOUD_ACCESS_KEY NAVER_CLOUD_SECRET_KEY NAVER_CLOUD_SERVICE_ID NAVER_SENDER_PHONE_NUMBER
+          AWS_REGION AWS_ACCESS_KEY_ID AWS_SECRET_ACCESS_KEY AWS_SES_SENDER ADMIN_EMAIL ADMIN_PASSWORD
+          USERFRONT_URL ORGFRONT_URL BACKEND_PUBLIC_URL BACKEND_URL OATHKEEPER_PUBLIC_URL
+          ORY_POSTGRES_TAG ORY_POSTGRES_USER ORY_POSTGRES_PASSWORD ORY_POSTGRES_DB KRATOS_DB HYDRA_DB KETO_DB
+          KRATOS_VERSION KRATOS_UI_NODE_VERSION HYDRA_VERSION KETO_VERSION ORY_SDK_URL KRATOS_PUBLIC_URL
+          KRATOS_ADMIN_URL KRATOS_BROWSER_URL KRATOS_UI_URL HYDRA_ADMIN_URL HYDRA_PUBLIC_URL HYDRA_REFRESH_TOKEN_TTL JWKS_URL
+          OATHKEEPER_VERSION OATHKEEPER_UID OATHKEEPER_GID OATHKEEPER_HEALTH_URL OATHKEEPER_HEALTH_INTERVAL_SECONDS
+          OATHKEEPER_HEALTH_TIMEOUT_SECONDS OATHKEEPER_HEALTH_ENABLED CSRF_COOKIE_NAME CSRF_COOKIE_SECRET
+          VITE_OIDC_AUTHORITY ADMINFRONT_CALLBACK_URLS DEVFRONT_CALLBACK_URLS ORGFRONT_CALLBACK_URLS
+          "
+          for key in ${required_dotenv_keys}; do
+            if ! grep -Eq "^${key}=.+" .env; then
+              echo "::error::Missing required staging .env value: ${key}. Check Gitea repo variables/secrets."
+              exit 1
+            fi
+          done
+
           # 파일 복사
           ssh "${STAGE_USER}@${STAGE_HOST}" "mkdir -p ${DEPLOY_PATH}/docker"
           ssh "${STAGE_USER}@${STAGE_HOST}" "mkdir -p ${DEPLOY_PATH}/adminfront"
+          ssh "${STAGE_USER}@${STAGE_HOST}" "mkdir -p ${DEPLOY_PATH}/scripts"
           
           # [중요] docker/ory 폴더 복사 (여기에 init-db/1-createdb.sql이 있어야 함)
           scp -r docker/ory "${STAGE_USER}@${STAGE_HOST}:${DEPLOY_PATH}/docker/"
@@ -158,9 +182,10 @@ jobs:
           fi
 
           scp adminfront/seed-tenant.csv "${STAGE_USER}@${STAGE_HOST}:${DEPLOY_PATH}/adminfront/"
+          scp scripts/render_ory_config.sh "${STAGE_USER}@${STAGE_HOST}:${DEPLOY_PATH}/scripts/"
           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"
+          scp compose.ory.yaml "${STAGE_USER}@${STAGE_HOST}:${DEPLOY_PATH}/compose.ory.yml"
 
           # 배포 실행
           echo "${HARBOR_ROBOT_KEY}" | ssh "${STAGE_USER}@${STAGE_HOST}" \
@@ -181,6 +206,9 @@ jobs:
              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
+
+             bash scripts/render_ory_config.sh; \
+             chmod -R 777 config/.generated/ory || true; \
              
              envsubst < docker-compose.staging.template.yaml > docker-compose.yml; \
 

.gitea/workflows/userfront_e2e_full_nightly.yml

@@ -0,0 +1,273 @@
+name: Userfront E2E Full Nightly
+
+on:
+    schedule:
+        - cron: "0 18 * * *"
+    workflow_dispatch:
+
+permissions:
+    contents: write
+
+jobs:
+    lint:
+        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"
+
+            - 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: Run common lint checks
+              run: |
+                  make code-check-lint
+
+    full-test-policy:
+        runs-on: ubuntu-latest
+        outputs:
+            should_run: ${{ steps.policy.outputs.should_run }}
+            reason: ${{ steps.policy.outputs.reason }}
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
+
+            - name: Decide whether full E2E is needed
+              id: policy
+              run: |
+                  set -euo pipefail
+
+                  target_sha="${GITHUB_SHA}"
+                  should_run="true"
+                  reason="manual-dispatch"
+
+                  if [ "${GITHUB_EVENT_NAME}" = "schedule" ]; then
+                    reason="missing-full-result"
+                    git fetch origin "+refs/heads/badges:refs/remotes/origin/badges" || true
+                    if git show-ref --verify --quiet refs/remotes/origin/badges && \
+                       git cat-file -e "refs/remotes/origin/badges:dev/${target_sha}/badges.json" 2>/dev/null; then
+                      full_message="$(
+                        git show "refs/remotes/origin/badges:dev/${target_sha}/badges.json" |
+                          node -e "let input=''; process.stdin.on('data', c => input += c); process.stdin.on('end', () => { const data = JSON.parse(input); const keys = ['userfront-chrome', 'userfront-firefox', 'userfront-safari']; const messages = keys.map((key) => data.badges?.[key]?.message || 'unknown'); process.stdout.write(messages.join(',')); });"
+                      )"
+                      if [ -n "${full_message}" ] && ! printf '%s' "${full_message}" | grep -q "unknown"; then
+                        should_run="false"
+                        reason="full-result-exists:${full_message}"
+                      fi
+                    fi
+                  fi
+
+                  echo "should_run=${should_run}" >> "$GITHUB_OUTPUT"
+                  echo "reason=${reason}" >> "$GITHUB_OUTPUT"
+                  echo "target_sha=${target_sha}"
+                  echo "should_run=${should_run}"
+                  echo "reason=${reason}"
+
+    userfront-e2e-full:
+        needs:
+            - lint
+            - full-test-policy
+        if: ${{ needs.lint.result == 'success' && needs.full-test-policy.outputs.should_run == 'true' }}
+        runs-on: ubuntu-latest
+        timeout-minutes: 80
+        outputs:
+            chromium_desktop: ${{ steps.full-results.outputs.chromium_desktop }}
+            chromium_mobile: ${{ steps.full-results.outputs.chromium_mobile }}
+            firefox_desktop: ${{ steps.full-results.outputs.firefox_desktop }}
+            firefox_mobile: ${{ steps.full-results.outputs.firefox_mobile }}
+            webkit_desktop: ${{ steps.full-results.outputs.webkit_desktop }}
+            webkit_mobile: ${{ steps.full-results.outputs.webkit_mobile }}
+        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: 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: |
+                  cd userfront-e2e
+                  npm ci
+
+            - name: Build userfront WASM
+              run: |
+                  cd userfront
+                  rm -rf build/web
+                  flutter build web --wasm --release
+                  cd ..
+                  node userfront/scripts/optimize-web-build.mjs userfront/build/web
+
+            - name: Provision full browser matrix
+              run: |
+                  cd userfront-e2e
+                  npx playwright install --with-deps
+
+            - name: Run full userfront-e2e tests
+              id: full-results
+              run: |
+                  mkdir -p reports
+                  cd userfront-e2e
+                  workers="${PLAYWRIGHT_WORKERS:-4}"
+                  case "$workers" in
+                    ''|*[!0-9]*|0) workers=4 ;;
+                  esac
+                  any_failure=0
+
+                  run_project() {
+                    output_name="$1"
+                    project_name="$2"
+                    log_path="../reports/userfront-e2e-full-${project_name}.log"
+
+                    set +e
+                    echo "[userfront-e2e-full] PLAYWRIGHT_WORKERS=${workers} npx playwright test --project=${project_name}" | tee "$log_path"
+                    PLAYWRIGHT_WORKERS="$workers" npx playwright test --project="$project_name" --reporter=list 2>&1 | tee -a "$log_path"
+                    exit_code=${PIPESTATUS[0]}
+                    set -e
+
+                    if [ "$exit_code" -eq 0 ]; then
+                      result="success"
+                    else
+                      result="failure"
+                      any_failure=1
+                    fi
+                    echo "${output_name}=${result}" >> "$GITHUB_OUTPUT"
+                  }
+
+                  run_project chromium_desktop chromium-desktop
+                  run_project chromium_mobile chromium-mobile-webapp
+                  run_project firefox_desktop firefox-desktop
+                  echo "firefox_mobile=skipped" >> "$GITHUB_OUTPUT"
+                  run_project webkit_desktop webkit-desktop
+                  run_project webkit_mobile webkit-mobile-webapp
+
+                  exit "$any_failure"
+
+            - name: Upload userfront-e2e full artifacts
+              if: ${{ always() }}
+              uses: actions/upload-artifact@v3
+              continue-on-error: true
+              with:
+                  name: userfront-e2e-full-report
+                  path: |
+                      reports/userfront-e2e-full-*.log
+                      userfront-e2e/playwright-report
+                      userfront-e2e/test-results
+                  if-no-files-found: ignore
+
+    badge-updater:
+        needs:
+            - lint
+            - full-test-policy
+            - userfront-e2e-full
+        if: ${{ always() && needs.lint.result == 'success' && needs.full-test-policy.outputs.should_run == 'true' && github.ref == 'refs/heads/dev' }}
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "24"
+
+            - name: Restore published badge state
+              run: |
+                  git fetch origin "+refs/heads/badges:refs/remotes/origin/badges" || true
+                  if git show-ref --verify --quiet refs/remotes/origin/badges && \
+                     git cat-file -e refs/remotes/origin/badges:latest/badges.json 2>/dev/null; then
+                    mkdir -p docs/badges
+                    git archive --format=tar refs/remotes/origin/badges latest | tar -x
+                    cp latest/* docs/badges/
+                    rm -rf latest
+                  else
+                    echo "No published badge state found."
+                  fi
+
+            - name: Update full E2E badge files
+              env:
+                  USERFRONT_E2E_RESULT: ${{ needs.userfront-e2e-full.result }}
+                  USERFRONT_E2E_FULL: "true"
+                  USERFRONT_E2E_CHROMIUM_DESKTOP_RESULT: ${{ needs.userfront-e2e-full.outputs.chromium_desktop }}
+                  USERFRONT_E2E_CHROMIUM_MOBILE_RESULT: ${{ needs.userfront-e2e-full.outputs.chromium_mobile }}
+                  USERFRONT_E2E_FIREFOX_DESKTOP_RESULT: ${{ needs.userfront-e2e-full.outputs.firefox_desktop }}
+                  USERFRONT_E2E_FIREFOX_MOBILE_RESULT: ${{ needs.userfront-e2e-full.outputs.firefox_mobile }}
+                  USERFRONT_E2E_WEBKIT_DESKTOP_RESULT: ${{ needs.userfront-e2e-full.outputs.webkit_desktop }}
+                  USERFRONT_E2E_WEBKIT_MOBILE_RESULT: ${{ needs.userfront-e2e-full.outputs.webkit_mobile }}
+                  BADGE_UPDATE_CODE_CHECK: "false"
+                  BADGE_SOURCE_BRANCH: dev
+                  BADGE_SOURCE_SHA: ${{ github.sha }}
+              run: |
+                  node scripts/update_code_check_badges.mjs
+                  cat docs/badges/badges.json
+
+            - name: Publish full E2E badge assets
+              run: |
+                  if [ -z "$(git status --porcelain docs/badges)" ]; then
+                    echo "No badge changes."
+                    exit 0
+                  fi
+
+                  BADGE_BRANCH=badges
+                  BADGE_WORKTREE="$(mktemp -d)"
+                  BADGE_LATEST_DIR="${BADGE_WORKTREE}/latest"
+                  BADGE_SHA_DIR="${BADGE_WORKTREE}/dev/${GITHUB_SHA}"
+                  trap 'rm -rf "${BADGE_WORKTREE}"' EXIT
+
+                  git config user.name "gitea-actions"
+                  git config user.email "gitea-actions@hmac.kr"
+
+                  git fetch origin "+refs/heads/${BADGE_BRANCH}:refs/remotes/origin/${BADGE_BRANCH}" || true
+                  if git show-ref --verify --quiet "refs/remotes/origin/${BADGE_BRANCH}"; then
+                    git worktree add --detach "${BADGE_WORKTREE}" "origin/${BADGE_BRANCH}"
+                  else
+                    git worktree add --detach "${BADGE_WORKTREE}"
+                    git -C "${BADGE_WORKTREE}" checkout --orphan "${BADGE_BRANCH}"
+                    git -C "${BADGE_WORKTREE}" rm -rf . || true
+                  fi
+
+                  find "${BADGE_WORKTREE}" -mindepth 1 -maxdepth 1 ! -name .git -exec rm -rf {} +
+                  mkdir -p "${BADGE_LATEST_DIR}" "${BADGE_SHA_DIR}"
+                  cp docs/badges/*.svg "${BADGE_LATEST_DIR}/"
+                  cp docs/badges/badges.json "${BADGE_LATEST_DIR}/badges.json"
+                  cp docs/badges/*.svg "${BADGE_SHA_DIR}/"
+                  cp docs/badges/badges.json "${BADGE_SHA_DIR}/badges.json"
+
+                  git -C "${BADGE_WORKTREE}" add .
+                  if [ -z "$(git -C "${BADGE_WORKTREE}" status --porcelain)" ]; then
+                    echo "No published badge changes."
+                    exit 0
+                  fi
+
+                  git -C "${BADGE_WORKTREE}" commit -m "chore: publish userfront e2e full badge [skip ci]"
+                  git -C "${BADGE_WORKTREE}" push origin HEAD:${BADGE_BRANCH}

.gitignore

@@ -17,6 +17,8 @@ config/.generated/
 .npm-cache/
 reports
 reports/*
+/backups/
+/tmp/rp-restore-*/
 config/*.pem
 common/node_modules
 common/.baron-deps-install.lock
@@ -50,7 +52,12 @@ orgfront/test-results/
 adminfront/playwright-report/
 devfront/playwright-report/
 orgfront/playwright-report/
+adminfront/coverage/
+devfront/coverage/
+orgfront/coverage/
 orgfront/node_modules/
 orgfront/dist/
 orgfront/.vite/
 .pnpm-store
+.playwright-mcp
+node_modules

.playwright-mcp/page-2026-05-11T09-39-57-342Z.yml

@@ -1,23 +0,0 @@
-- generic [ref=e4]:
-  - generic [ref=e5]:
-    - img [ref=e7]
-    - generic [ref=e9]:
-      - heading "Baron SSO" [level=1] [ref=e10]
-      - paragraph [ref=e11]: Developer Control Plane
-  - generic [ref=e12]:
-    - generic [ref=e13]:
-      - heading "개발자 포털 로그인" [level=3] [ref=e14]:
-        - img [ref=e15]
-        - text: 개발자 포털 로그인
-      - paragraph [ref=e18]: Baron 통합 인증(SSO)을 통해 개발자 포털에 접속합니다.
-    - generic [ref=e19]:
-      - button "SSO 계정으로 로그인" [ref=e20] [cursor=pointer]:
-        - img [ref=e21]
-        - text: SSO 계정으로 로그인
-        - img [ref=e23]
-      - paragraph [ref=e27]:
-        - text: 개발자 포털 세션은 브라우저 정책에 따라 유지됩니다.
-        - text: 민감한 작업 시 재인증을 요구할 수 있습니다.
-  - paragraph [ref=e32]:
-    - text: 인증 정보가 없거나 로그인이 되지 않는 경우
-    - text: 시스템 관리자에게 문의하세요.

.playwright-mcp/page-2026-05-20T02-00-01-354Z.yml

@@ -1,23 +0,0 @@
-- generic [ref=e4]:
-  - generic [ref=e5]:
-    - img [ref=e7]
-    - generic [ref=e9]:
-      - heading "Baron SSO" [level=1] [ref=e10]
-      - paragraph [ref=e11]: Admin Control Plane
-  - generic [ref=e12]:
-    - generic [ref=e13]:
-      - heading "관리자 로그인" [level=3] [ref=e14]:
-        - img [ref=e15]
-        - text: 관리자 로그인
-      - paragraph [ref=e18]: Baron 통합 인증(SSO)을 통해 관리자 페이지에 접속합니다.
-    - generic [ref=e19]:
-      - button "SSO 계정으로 로그인" [ref=e20] [cursor=pointer]:
-        - img [ref=e21]
-        - text: SSO 계정으로 로그인
-        - img [ref=e23]
-      - paragraph [ref=e27]:
-        - text: 관리자 전역 세션은 보안을 위해 15분간 유지됩니다.
-        - text: 민감한 작업 시 재인증을 요구할 수 있습니다.
-  - paragraph [ref=e32]:
-    - text: 인증 정보가 없거나 로그인이 되지 않는 경우
-    - text: 시스템 관리자에게 문의하세요.

Makefile

@@ -29,54 +29,126 @@ ifneq (,$(wildcard ./.env))
 COMPOSE_DROP_ENV_ARGS += --env-file .env
 endif
 
-.PHONY: build-auth-config validate-auth-config verify-auth-config render-ory-config up up-all up-infra up-ory up-app up-backend ensure-networks ensure-infra ensure-ory up-dev up-front-dev dev dev-debug down drop down-app down-backend down-infra down-ory check-infra ps logs-infra logs-ory logs-app
+DUMP_SERVICES ?= all
+RESTORE_SERVICES ?= all
+FILE_PATH ?=
+RESTORE_INPUT ?= $(or $(FILE_PATH),$(word 2,$(MAKECMDGOALS)))
+CONFIRM_RESTORE ?=
+ALLOW_NON_EMPTY_RESTORE ?= false
+DUMP_MODE ?= maintenance
+BACKUP_USE_DOCKER ?= true
+BACKUP_TOOLS_IMAGE ?= baron-sso-backup-tools:local
+BACKUP_TOOLS_DOCKERFILE ?= docker/backup-tools/Dockerfile
+BACKUP_DOCKER_ENV_ARGS :=
+ifneq (,$(wildcard ./.env))
+BACKUP_DOCKER_ENV_ARGS += --env-file .env
+endif
+ifneq (,$(wildcard ./$(AUTH_CONFIG_ENV)))
+BACKUP_DOCKER_ENV_ARGS += --env-file $(AUTH_CONFIG_ENV)
+endif
+BACKUP_DOCKER_RUN = docker run --rm $(BACKUP_DOCKER_ENV_ARGS) -e BACKUP_REPO_ROOT=/workspace -v /var/run/docker.sock:/var/run/docker.sock -v "$(CURDIR)":/workspace -v /tmp:/tmp -w /workspace $(BACKUP_TOOLS_IMAGE)
+DOCKER_IMAGE_REF ?=
+WORKS_DOCKER_COMMIT_CONTAINER ?=
+WORKS_DOCKER_IMAGE_ARCHIVE_DIR ?= /tmp/baron-sso-docker-image-upload
+
+.PHONY: help build-auth-config validate-auth-config verify-auth-config render-ory-config up up-all up-infra up-ory up-app up-backend ensure-networks ensure-infra ensure-ory ensure-restore-containers up-dev up-front-dev dev dev-debug down drop down-app down-backend down-infra down-ory check-infra ps logs-infra logs-ory logs-app backup-tools-build dump restore dump-verify restore-verify dump-list restore-plan upload-cloud works-drive-refresh-token dump-upload-cloud docker-image-upload-works
+
+help: ## 생성된 타깃과 옵션 목록 표시
+	@printf "Usage:\n  make <target> [OPTION=value ...]\n\n"
+	@printf "Targets:\n"
+	@awk ' \
+		BEGIN { current = ""; printed_section = 0 } \
+		/^# --- .+ ---/ { \
+			current = $$0; \
+			gsub(/^# ---[[:space:]]*/, "", current); \
+			gsub(/[[:space:]]*---$$/, "", current); \
+			next; \
+		} \
+		/^[[:alnum:]_.-]+:([^=]|$$)/ { \
+			line = $$0; \
+			target = line; \
+			sub(/:.*/, "", target); \
+			if (target ~ /^\.|%/) { next } \
+			if (seen[target]++) { next } \
+			desc = ""; \
+			if (line ~ /##/) { \
+				desc = line; \
+				sub(/^.*##[[:space:]]*/, "", desc); \
+			} \
+			if (current != "" && current != printed_section) { \
+				printf "\n  %s\n", current; \
+				printed_section = current; \
+			} \
+			if (desc != "") { \
+				printf "    %-36s %s\n", target, desc; \
+			} else { \
+				printf "    %-36s\n", target; \
+			} \
+		} \
+	' Makefile
+	@printf "\nOptions:\n"
+	@awk ' \
+		/^[A-Z][A-Z0-9_]+[[:space:]]*\?=/ { \
+			name = $$1; \
+			value = $$0; \
+			sub(/[[:space:]]*\?=.*/, "", name); \
+			sub(/^[^?]+\?=[[:space:]]*/, "", value); \
+			printf "  %-32s default: %s\n", name, value; \
+		} \
+	' Makefile
+	@printf "\nRestore Safety:\n"
+	@printf "  CONFIRM_RESTORE=baron-sso          복구 실행 의도를 명시하는 필수 확인값\n"
+	@printf "  ALLOW_NON_EMPTY_RESTORE=true       비어 있지 않은 복구 대상에 덮어쓰는 승인된 복구에서만 사용\n"
+	@printf "\nRestore Examples:\n"
+	@printf "  make restore-plan FILE_PATH=stg.today.tar.gz CONFIRM_RESTORE=baron-sso\n"
+	@printf "  make restore FILE_PATH=stg.today.tar.gz CONFIRM_RESTORE=baron-sso ALLOW_NON_EMPTY_RESTORE=true\n"
 
 # --- 인증 설정 빌드/검증 ---
-build-auth-config:
+build-auth-config: ## 인증 설정 파일 생성
 	@echo "Building auth config..."
 	@mkdir -p config/.generated
 	@bash scripts/auth_config.sh build
 
-validate-auth-config: build-auth-config
+validate-auth-config: build-auth-config ## 인증 설정 값 검증
 	@echo "Validating auth config..."
 	@bash scripts/auth_config.sh validate
 
-verify-auth-config: validate-auth-config
+verify-auth-config: validate-auth-config ## 인증 설정 연결 상태 확인
 	@echo "Verifying auth config wiring..."
 	@bash scripts/auth_config.sh verify
 
-render-ory-config: validate-auth-config
+render-ory-config: validate-auth-config ## Ory 설정 파일 렌더링
 	@echo "Rendering Ory config..."
 	@bash scripts/render_ory_config.sh
 
 # --- 기본 실행 ---
 # 주의: --remove-orphan 사용 금지 (다른 스택이 orphan으로 판단되어 종료될 수 있음)
-up: up-all
+up: up-all ## 전체 로컬 스택 실행
 
-up-all: ensure-networks render-ory-config
+up-all: ensure-networks render-ory-config ## 인프라, Ory, 앱 스택 모두 실행
 	@echo "Starting ALL stacks (infra + ory + app)..."
 	docker compose $(COMPOSE_CLI_ENV_ARGS) -f $(COMPOSE_INFRA) -f $(COMPOSE_ORY) -f $(COMPOSE_APP) up --build -d
 	docker compose $(COMPOSE_CLI_ENV_ARGS) -f $(COMPOSE_INFRA) -f $(COMPOSE_ORY) -f $(COMPOSE_APP) restart kratos
 
 # --- 개별 스택 실행 ---
-up-infra: ensure-networks
+up-infra: ensure-networks ## 인프라 스택 실행
 	@echo "Starting Infra stack (postgres/clickhouse/redis)..."
 	docker compose -f $(COMPOSE_INFRA) up -d
 
-up-ory: ensure-networks render-ory-config
+up-ory: ensure-networks render-ory-config ## Ory 스택 실행
 	@echo "Starting Ory stack (kratos/hydra/keto/oathkeeper)..."
 	docker compose $(COMPOSE_CLI_ENV_ARGS) -f $(COMPOSE_ORY) up -d
 	docker compose $(COMPOSE_CLI_ENV_ARGS) -f $(COMPOSE_ORY) restart kratos
 
-up-app: ensure-networks render-ory-config
+up-app: ensure-networks render-ory-config ## 앱 스택 실행
 	@echo "Starting App stack (backend/userfront/adminfront/devfront/orgfront)..."
 	docker compose $(COMPOSE_CLI_ENV_ARGS) -f $(COMPOSE_APP) up --build -d
 
-up-backend: ensure-networks render-ory-config
+up-backend: ensure-networks render-ory-config ## 백엔드 컨테이너만 실행
 	@echo "Starting Backend only..."
 	docker compose $(COMPOSE_CLI_ENV_ARGS) -f $(COMPOSE_APP) up --build -d backend
 
-ensure-networks:
+ensure-networks: ## 개발용 Docker 네트워크 보장
 	@echo "Ensuring Docker networks..."
 	@for network in $(DEV_NETWORKS); do \
 		if ! docker network inspect "$$network" >/dev/null 2>&1; then \
@@ -87,7 +159,7 @@ ensure-networks:
 		fi; \
 	done
 
-ensure-infra: ensure-networks
+ensure-infra: ensure-networks ## 인프라 스택 실행 상태 보장
 	@echo "Ensuring Infra stack..."
 	@missing=0; \
 	for container in $(INFRA_CONTAINERS); do \
@@ -103,7 +175,7 @@ ensure-infra: ensure-networks
 		echo "Infra stack is already running."; \
 	fi
 
-ensure-ory: ensure-networks render-ory-config
+ensure-ory: ensure-networks render-ory-config ## Ory 스택 실행 상태 보장
 	@echo "Ensuring Ory stack..."
 	@missing=0; \
 	for container in $(ORY_CONTAINERS); do \
@@ -120,26 +192,74 @@ ensure-ory: ensure-networks render-ory-config
 		docker compose $(COMPOSE_CLI_ENV_ARGS) -f $(COMPOSE_ORY) restart kratos; \
 	fi
 
-up-dev: ensure-infra ensure-ory
+ensure-restore-containers: ## 복구 대상 저장소 컨테이너 실행 상태 보장
+	@echo "Ensuring restore target containers..."
+	@if [ "$(CONFIRM_RESTORE)" != "baron-sso" ]; then \
+		echo "Skipping restore target container startup until CONFIRM_RESTORE=baron-sso is provided."; \
+		exit 0; \
+	fi
+	@$(MAKE) --no-print-directory ensure-networks
+	@ensure_restore_container() { \
+		container="$$1"; \
+		compose_file="$$2"; \
+		compose_service="$$3"; \
+		if docker inspect -f '{{.State.Running}}' "$$container" 2>/dev/null | grep -qx 'true'; then \
+			echo "Restore target container $$container is already running."; \
+			return 0; \
+		fi; \
+		if docker inspect "$$container" >/dev/null 2>&1; then \
+			echo "Starting stopped restore target container $$container..."; \
+			docker start "$$container"; \
+		else \
+			echo "Creating restore target container $$container via $$compose_file service $$compose_service..."; \
+			docker compose -f "$$compose_file" up -d "$$compose_service"; \
+		fi; \
+		for attempt in 1 2 3 4 5 6 7 8 9 10; do \
+			if docker inspect -f '{{.State.Running}}' "$$container" 2>/dev/null | grep -qx 'true'; then \
+				return 0; \
+			fi; \
+			sleep 1; \
+		done; \
+		echo "ERROR: restore target container $$container did not reach running state." >&2; \
+		return 1; \
+	}; \
+	services="$(RESTORE_SERVICES)"; \
+	if [ -z "$$services" ] || [ "$$services" = "all" ]; then \
+		services="postgres ory-postgres clickhouse ory-clickhouse config"; \
+	else \
+		services="$$(printf '%s' "$$services" | tr ',' ' ')"; \
+	fi; \
+	for service in $$services; do \
+		case "$$service" in \
+			postgres) ensure_restore_container baron_postgres compose.infra.yaml postgres ;; \
+			ory-postgres) ensure_restore_container ory_postgres compose.ory.yaml postgres ;; \
+			clickhouse) ensure_restore_container baron_clickhouse compose.infra.yaml clickhouse ;; \
+			ory-clickhouse) ensure_restore_container ory_clickhouse compose.ory.yaml ory_clickhouse ;; \
+			config) ;; \
+			*) echo "ERROR: unknown restore service: $$service" >&2; exit 1 ;; \
+		esac; \
+	done
+
+up-dev: ensure-infra ensure-ory ## 개발 기본 스택 준비
 	@echo "Dev stack is up (infra + ory)."
 
-up-front-dev: up-infra up-ory up-backend
+up-front-dev: up-infra up-ory up-backend ## 프론트 개발용 의존 스택 준비
 	@echo "Dev stack is up (infra + ory + backend)."
 
-dev: up-dev
+dev: up-dev ## 개발 앱 컨테이너를 포그라운드로 실행
 	@echo "Starting development app containers in foreground attach mode..."
 	BACKEND_LOG_LEVEL=info CLIENT_LOG_DEBUG=false VITE_CLIENT_LOG_DEBUG=false docker compose $(COMPOSE_CLI_ENV_ARGS) -f $(COMPOSE_APP) up --build $(DEV_SERVICES)
 
-dev-debug: up-dev
+dev-debug: up-dev ## 디버그 로그로 개발 앱 컨테이너 실행
 	@echo "Starting development app containers in foreground attach debug mode..."
 	BACKEND_LOG_LEVEL=debug CLIENT_LOG_DEBUG=true VITE_CLIENT_LOG_DEBUG=true USERFRONT_FLUTTER_RUN_FLAGS=--debug docker compose $(COMPOSE_CLI_ENV_ARGS) -f $(COMPOSE_APP) up --build $(DEV_SERVICES)
 
 # --- 종료 (Down) ---
-down:
+down: ## 전체 로컬 스택 중지
 	@echo "Stopping ALL stacks (infra + ory + app)..."
 	docker compose -f $(COMPOSE_INFRA) -f $(COMPOSE_ORY) -f $(COMPOSE_APP) down
 
-drop:
+drop: ## 로컬 스택 컨테이너, 볼륨, 로컬 이미지 제거
 	@echo "Dropping Baron SSO local Docker stack containers, volumes, and local images..."
 	-docker compose $(COMPOSE_DROP_ENV_ARGS) -f $(COMPOSE_INFRA) -f $(COMPOSE_ORY) -f $(COMPOSE_APP) down -v --rmi local
 	@echo "Removing any remaining fixed-name Baron SSO containers..."
@@ -148,25 +268,25 @@ drop:
 	done
 	@echo "Drop complete. External Docker networks are preserved."
 
-down-app:
+down-app: ## 앱 스택 중지
 	@echo "Stopping App stack..."
 	docker compose -f $(COMPOSE_APP) down
 
-down-backend:
+down-backend: ## 백엔드 컨테이너 중지
 	@echo "Stopping Backend only..."
 	docker compose -f $(COMPOSE_APP) stop backend
 
-down-infra:
+down-infra: ## 인프라 스택 중지
 	@echo "Stopping Infra stack..."
 	docker compose -f $(COMPOSE_INFRA) down
 
-down-ory:
+down-ory: ## Ory 스택 중지
 	@echo "Stopping Ory stack..."
 	docker compose -f $(COMPOSE_ORY) down
 
 # --- 유틸리티 ---
 # 인프라 상태 확인
-check-infra:
+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."; \
@@ -176,18 +296,77 @@ check-infra:
 			echo "PostgreSQL is healthy."; \
 	fi
 
-ps:
+ps: ## 전체 Compose 컨테이너 상태 조회
 	docker compose -f $(COMPOSE_INFRA) -f $(COMPOSE_ORY) -f $(COMPOSE_APP) ps
 
-logs-infra:
+logs-infra: ## 인프라 스택 로그 팔로우
 	docker compose -f $(COMPOSE_INFRA) logs -f
 
-logs-ory:
+logs-ory: ## Ory 스택 로그 팔로우
 	docker compose -f $(COMPOSE_ORY) logs -f
 
-logs-app:
+logs-app: ## 앱 스택 로그 팔로우
 	docker compose -f $(COMPOSE_APP) logs -f
 
+# --- 백업/복구 ---
+backup-tools-build: ## 백업 도구 Docker 이미지 빌드
+	docker build -f $(BACKUP_TOOLS_DOCKERFILE) -t $(BACKUP_TOOLS_IMAGE) .
+
+ifeq ($(BACKUP_USE_DOCKER),true)
+dump: backup-tools-build ## 백업 덤프 생성
+	$(BACKUP_DOCKER_RUN) bash -lc 'DUMP_SERVICES="$(DUMP_SERVICES)" DUMP_MODE="$(DUMP_MODE)" BACKUP="$(BACKUP)" BACKUP_ROOT="$(BACKUP_ROOT)" scripts/backup/dump.sh'
+
+restore: backup-tools-build ensure-restore-containers ## 백업 덤프 복구
+	$(BACKUP_DOCKER_RUN) bash -lc 'RESTORE_INPUT="$(RESTORE_INPUT)" BACKUP="$(BACKUP)" DUMP_FILE="$(DUMP_FILE)" RESTORE_SERVICES="$(RESTORE_SERVICES)" CONFIRM_RESTORE="$(CONFIRM_RESTORE)" ALLOW_NON_EMPTY_RESTORE="$(ALLOW_NON_EMPTY_RESTORE)" RESTORE_REPORT="$(RESTORE_REPORT)" scripts/backup/restore.sh'
+
+dump-verify: backup-tools-build ## 백업 덤프 검증
+	$(BACKUP_DOCKER_RUN) bash -lc 'BACKUP="$(BACKUP)" scripts/backup/verify-dump.sh'
+
+restore-verify: backup-tools-build ## 복구 결과 검증
+	$(BACKUP_DOCKER_RUN) bash -lc 'BACKUP="$(BACKUP)" scripts/backup/verify-restore.sh'
+
+dump-list: backup-tools-build ## 사용 가능한 백업 덤프 목록 조회
+	$(BACKUP_DOCKER_RUN) bash -lc 'BACKUP_ROOT="$(BACKUP_ROOT)" scripts/backup/dump-list.sh'
+
+restore-plan: backup-tools-build ## 복구 실행 계획 출력
+	$(BACKUP_DOCKER_RUN) bash -lc 'RESTORE_INPUT="$(RESTORE_INPUT)" BACKUP="$(BACKUP)" DUMP_FILE="$(DUMP_FILE)" RESTORE_SERVICES="$(RESTORE_SERVICES)" CONFIRM_RESTORE="$(CONFIRM_RESTORE)" RESTORE_REPORT="$(RESTORE_REPORT)" scripts/backup/restore-plan.sh'
+
+upload-cloud: backup-tools-build ## 백업 덤프 클라우드 업로드
+	$(BACKUP_DOCKER_RUN) bash -lc '$(if $(WORKS_DRIVE_DRY_RUN),WORKS_DRIVE_DRY_RUN="$(WORKS_DRIVE_DRY_RUN)" )$(if $(WORKS_DRIVE_AUTH_MODE),WORKS_DRIVE_AUTH_MODE="$(WORKS_DRIVE_AUTH_MODE)" )BACKUP="$(BACKUP)" scripts/backup/upload_cloud.sh'
+
+works-drive-refresh-token: ## WORKS Drive OAuth refresh token 갱신
+	WORKS_DRIVE_TOKEN_GRANT="$(WORKS_DRIVE_TOKEN_GRANT)" WORKS_DRIVE_AUTH_CODE="$(WORKS_DRIVE_AUTH_CODE)" WORKS_DRIVE_AUTH_CALLBACK_URL="$(WORKS_DRIVE_AUTH_CALLBACK_URL)" scripts/backup/refresh_works_drive_token.sh
+else
+dump: ## 백업 덤프 생성
+	DUMP_SERVICES="$(DUMP_SERVICES)" DUMP_MODE="$(DUMP_MODE)" BACKUP="$(BACKUP)" BACKUP_ROOT="$(BACKUP_ROOT)" scripts/backup/dump.sh
+
+restore: ensure-restore-containers ## 백업 덤프 복구
+	RESTORE_INPUT="$(RESTORE_INPUT)" BACKUP="$(BACKUP)" DUMP_FILE="$(DUMP_FILE)" RESTORE_SERVICES="$(RESTORE_SERVICES)" CONFIRM_RESTORE="$(CONFIRM_RESTORE)" ALLOW_NON_EMPTY_RESTORE="$(ALLOW_NON_EMPTY_RESTORE)" RESTORE_REPORT="$(RESTORE_REPORT)" scripts/backup/restore.sh
+
+dump-verify: ## 백업 덤프 검증
+	BACKUP="$(BACKUP)" scripts/backup/verify-dump.sh
+
+restore-verify: ## 복구 결과 검증
+	BACKUP="$(BACKUP)" scripts/backup/verify-restore.sh
+
+dump-list: ## 사용 가능한 백업 덤프 목록 조회
+	BACKUP_ROOT="$(BACKUP_ROOT)" scripts/backup/dump-list.sh
+
+restore-plan: ## 복구 실행 계획 출력
+	RESTORE_INPUT="$(RESTORE_INPUT)" BACKUP="$(BACKUP)" DUMP_FILE="$(DUMP_FILE)" RESTORE_SERVICES="$(RESTORE_SERVICES)" CONFIRM_RESTORE="$(CONFIRM_RESTORE)" RESTORE_REPORT="$(RESTORE_REPORT)" scripts/backup/restore-plan.sh
+
+upload-cloud: ## 백업 덤프 클라우드 업로드
+	$(if $(WORKS_DRIVE_DRY_RUN),WORKS_DRIVE_DRY_RUN="$(WORKS_DRIVE_DRY_RUN)" )$(if $(WORKS_DRIVE_AUTH_MODE),WORKS_DRIVE_AUTH_MODE="$(WORKS_DRIVE_AUTH_MODE)" )BACKUP="$(BACKUP)" scripts/backup/upload_cloud.sh
+
+works-drive-refresh-token: ## WORKS Drive OAuth refresh token 갱신
+	WORKS_DRIVE_TOKEN_GRANT="$(WORKS_DRIVE_TOKEN_GRANT)" WORKS_DRIVE_AUTH_CODE="$(WORKS_DRIVE_AUTH_CODE)" WORKS_DRIVE_AUTH_CALLBACK_URL="$(WORKS_DRIVE_AUTH_CALLBACK_URL)" scripts/backup/refresh_works_drive_token.sh
+endif
+
+dump-upload-cloud: dump upload-cloud ## 백업 덤프 생성 후 클라우드 업로드
+
+docker-image-upload-works: ## Docker 이미지를 WORKS Shared Drive archive로 업로드
+	WORKS_DOCKER_COMMIT_CONTAINER="$(WORKS_DOCKER_COMMIT_CONTAINER)" DOCKER_IMAGE_REF="$(DOCKER_IMAGE_REF)" WORKS_DOCKER_IMAGE_ARCHIVE_DIR="$(WORKS_DOCKER_IMAGE_ARCHIVE_DIR)" scripts/docker-image/upload_works_drive.sh
+
 # --- 로컬 통합 코드 체크 ---
 PLAYWRIGHT_BROWSERS_PATH := $(HOME)/.cache/ms-playwright
 PLAYWRIGHT_CHROMIUM_COMPLETE := $(PLAYWRIGHT_BROWSERS_PATH)/chromium-1208/INSTALLATION_COMPLETE
@@ -203,12 +382,12 @@ CODE_CHECK_TEST_JOBS ?= 1
 PLAYWRIGHT_WORKERS ?= 1
 FLUTTER_TEST_CONCURRENCY ?= 1
 
-code-check: code-check-lint code-check-test-jobs
+code-check: code-check-lint code-check-test-jobs ## 로컬 CI 상당 코드 검사 실행
 	@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-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:
+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 \
@@ -218,20 +397,20 @@ code-check-test-jobs:
 		code-check-devfront-tests \
 		code-check-orgfront-tests
 
-code-check-i18n:
+code-check-i18n: ## 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:
+code-check-i18n-values: ## i18n 번역 값 품질 검사
 	@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:
+code-check-go-lint: ## Go 포맷과 린트 검사
 	@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; \
@@ -247,43 +426,71 @@ code-check-go-lint:
 		exit 1; \
 	fi
 
-code-check-sync-userfront-locales:
+code-check-sync-userfront-locales: ## UserFront 로케일 동기화 검사
 	@echo "==> sync userfront locales"
 	/bin/sh ./scripts/sync_userfront_locales.sh
 
-code-check-userfront-install:
+code-check-userfront-install: ## UserFront 의존성 설치
 	@echo "==> install userfront dependencies"
-	cd userfront && flutter pub get
+	@if command -v flutter >/dev/null 2>&1; then \
+		cd userfront && flutter pub get; \
+	else \
+		echo "WARNING: flutter not found, skipping userfront dependencies install."; \
+	fi
 
-code-check-userfront-lint:
+code-check-userfront-lint: ## UserFront 포맷과 analyze 검사
 	@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
+	@if command -v dart >/dev/null 2>&1; then \
+		cd userfront && dart format --output=none --set-exit-if-changed lib test; \
+	else \
+		echo "WARNING: dart not found, skipping userfront format check."; \
+	fi
+	@if command -v flutter >/dev/null 2>&1; then \
+		cd userfront && flutter analyze --no-fatal-warnings --no-fatal-infos; \
+	else \
+		echo "WARNING: flutter not found, skipping userfront analyze."; \
+	fi
 
-code-check-front-lint:
+code-check-front-lint: ## 프론트엔드 Biome 린트와 포맷 검사
 	@echo "==> adminfront biome lint/format check"
 	rm -rf adminfront/playwright-report adminfront/test-results
-	cd adminfront && pnpm install --frozen-lockfile --ignore-scripts
-	cd adminfront && npx biome check . --formatter-enabled=false --organize-imports-enabled=false
-	cd adminfront && npx biome check . --linter-enabled=false --organize-imports-enabled=false
+	@if [ -d adminfront/node_modules ]; then \
+		echo "adminfront/node_modules already present; skipping pnpm install."; \
+	else \
+		cd adminfront && CI=true npx pnpm install --frozen-lockfile --ignore-scripts; \
+	fi
+	cd adminfront && npx biome lint .
+	cd adminfront && npx biome format .
 	@echo "==> devfront biome lint/format check"
 	rm -rf devfront/playwright-report devfront/test-results
-	cd devfront && npm ci --ignore-scripts
-	cd devfront && npx biome check . --formatter-enabled=false --organize-imports-enabled=false
-	cd devfront && npx biome check . --linter-enabled=false --organize-imports-enabled=false
+	@if [ -d devfront/node_modules ]; then \
+		echo "devfront/node_modules already present; skipping npm install."; \
+	else \
+		cd devfront && npm ci --ignore-scripts; \
+	fi
+	cd devfront && npx biome lint .
+	cd devfront && npx biome format .
 	@echo "==> orgfront biome lint/format check"
 	rm -rf orgfront/playwright-report orgfront/test-results
-	cd orgfront && npm ci --ignore-scripts
-	cd orgfront && npx biome check . --formatter-enabled=false --organize-imports-enabled=false
-	cd orgfront && npx biome check . --linter-enabled=false --organize-imports-enabled=false
+	@if [ -d orgfront/node_modules ]; then \
+		echo "orgfront/node_modules already present; skipping npm install."; \
+	else \
+		cd orgfront && npm ci --ignore-scripts; \
+	fi
+	cd orgfront && ./node_modules/@biomejs/biome/bin/biome lint .
+	cd orgfront && ./node_modules/@biomejs/biome/bin/biome format .
 
-code-check-backend-tests:
+code-check-backend-tests: ## 백엔드 Go 테스트 실행
 	@echo "==> backend tests"
 	cd backend && GOCACHE=/tmp/baron-sso-go-cache go test -v ./...
 
-code-check-userfront-tests:
+code-check-userfront-tests: ## UserFront Flutter 테스트 실행
 	@echo "==> userfront tests (isolated workspace)"
-	@tmp_dir="$$(mktemp -d /tmp/baron-sso-userfront-tests.XXXXXX)"; \
+	@if ! command -v flutter >/dev/null 2>&1; then \
+		echo "WARNING: flutter not found, skipping userfront tests."; \
+		exit 0; \
+	fi; \
+	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/"; \
@@ -303,16 +510,23 @@ code-check-userfront-tests:
 	cd "$$tmp_dir" && /bin/sh ./scripts/sync_userfront_locales.sh; \
 	cd "$$tmp_dir/userfront" && flutter test --concurrency=$(FLUTTER_TEST_CONCURRENCY)
 
-code-check-adminfront-tests:
+code-check-adminfront-tests: ## AdminFront 테스트 실행
 	@echo "==> adminfront tests"
 	PLAYWRIGHT_WORKERS=$(PLAYWRIGHT_WORKERS) ./scripts/run_adminfront_ci_tests.sh adminfront-tests
 
-code-check-devfront-tests:
+code-check-devfront-tests: ## DevFront 테스트 실행
 	@echo "==> devfront tests"
 	@mkdir -p reports/devfront
 	@rm -rf reports/devfront/playwright-report reports/devfront/test-results
 	@status=0; \
-	(cd devfront && npm ci --ignore-scripts) || status=$$?; \
+	preview_pattern='[v]ite preview --host 127.0.0.1 --strictPort --port 4174'; \
+	pkill -f "$$preview_pattern" >/dev/null 2>&1 || true; \
+	trap 'pkill -f "$$preview_pattern" >/dev/null 2>&1 || true' EXIT INT TERM; \
+	if [ -d devfront/node_modules ]; then \
+		echo "devfront/node_modules already present; skipping npm install."; \
+	else \
+		(cd devfront && npm ci --ignore-scripts) || status=$$?; \
+	fi; \
 	if [ $$status -eq 0 ]; then \
 		(cd devfront && $(PLAYWRIGHT_INSTALL_ALL)) || status=$$?; \
 	fi; \
@@ -323,7 +537,7 @@ code-check-devfront-tests:
 	[ -d devfront/test-results ] && cp -R devfront/test-results reports/devfront/ || true; \
 	exit $$status
 
-code-check-orgfront-tests:
+code-check-orgfront-tests: ## OrgFront 테스트 실행
 	@echo "==> orgfront tests"
 	@mkdir -p reports/orgfront
 	@rm -rf reports/orgfront/playwright-report reports/orgfront/test-results
@@ -339,11 +553,15 @@ code-check-orgfront-tests:
 	[ -d orgfront/test-results ] && cp -R orgfront/test-results reports/orgfront/ || true; \
 	exit $$status
 
-code-check-userfront-e2e-tests:
+code-check-userfront-e2e-tests: ## UserFront WASM E2E 테스트 실행
 	@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)"; \
+	@if ! command -v flutter >/dev/null 2>&1; then \
+		echo "WARNING: flutter not found, skipping userfront e2e tests."; \
+		exit 0; \
+	fi; \
+	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/"; \
@@ -376,7 +594,7 @@ code-check-userfront-e2e-tests:
 		(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=$$?; \
+		(cd "$$tmp_dir/userfront-e2e" && $(PLAYWRIGHT_INSTALL_ALL)) || 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();});")"; \

README.md

@@ -1,5 +1,11 @@
 # Baron SSO
 
+[![dev](https://gitea.hmac.kr/baron/baron-sso/raw/branch/badges/latest/dev-sha.svg)](https://gitea.hmac.kr/baron/baron-sso/src/branch/dev) [![Code Check](https://gitea.hmac.kr/baron/baron-sso/raw/branch/badges/latest/code-check.svg)](https://gitea.hmac.kr/baron/baron-sso/actions/workflows/code_check.yml?branch=dev) [![Biome](https://gitea.hmac.kr/baron/baron-sso/raw/branch/badges/latest/biome.svg)](https://gitea.hmac.kr/baron/baron-sso/actions/workflows/code_check.yml?branch=dev) [![backend](https://gitea.hmac.kr/baron/baron-sso/raw/branch/badges/latest/backend-tests.svg)](https://gitea.hmac.kr/baron/baron-sso/actions/workflows/code_check.yml?branch=dev)
+[![userfront](https://gitea.hmac.kr/baron/baron-sso/raw/branch/badges/latest/userfront.svg)](https://gitea.hmac.kr/baron/baron-sso/actions/workflows/code_check.yml?branch=dev) [![adminfront](https://gitea.hmac.kr/baron/baron-sso/raw/branch/badges/latest/adminfront.svg)](https://gitea.hmac.kr/baron/baron-sso/actions/workflows/code_check.yml?branch=dev) [![devfront](https://gitea.hmac.kr/baron/baron-sso/raw/branch/badges/latest/devfront.svg)](https://gitea.hmac.kr/baron/baron-sso/actions/workflows/code_check.yml?branch=dev) [![orgfront](https://gitea.hmac.kr/baron/baron-sso/raw/branch/badges/latest/orgfront.svg)](https://gitea.hmac.kr/baron/baron-sso/actions/workflows/code_check.yml?branch=dev)
+[![chrome](https://gitea.hmac.kr/baron/baron-sso/raw/branch/badges/latest/userfront-chrome.svg)](https://gitea.hmac.kr/baron/baron-sso/actions/workflows/userfront_e2e_full_nightly.yml?branch=dev) [![firefox](https://gitea.hmac.kr/baron/baron-sso/raw/branch/badges/latest/userfront-firefox.svg)](https://gitea.hmac.kr/baron/baron-sso/actions/workflows/userfront_e2e_full_nightly.yml?branch=dev) [![safari](https://gitea.hmac.kr/baron/baron-sso/raw/branch/badges/latest/userfront-safari.svg)](https://gitea.hmac.kr/baron/baron-sso/actions/workflows/userfront_e2e_full_nightly.yml?branch=dev)
+
+badge는 `Code Check`가 `badges` 브랜치의 `latest/`와 `dev/<commit-sha>/`에 발행합니다. 최신 HTML/LCOV/JSON summary는 Gitea `Code Check`의 패키지별 `*-vitest-coverage-report` artifact에서 확인할 수 있습니다.
+
 **Baron 로그인**은 화이트 라벨링된 가족사의 모든 소프트웨어 Auth를 총괄하는 사용자 인증/인가 허브입니다.
 
 ## 📂 프로젝트 구조 (Project Structure)
@@ -34,6 +40,20 @@ baron_sso/
   * AdminFront: 사용자 관리 등 Admin 기능
   * DevFront: RP 관리 등 개발자 기능
 
+## 개발 실행 정책
+
+`make dev`는 로컬 개발용 실행 모드이며, React 기반 `adminfront`, `devfront`, `orgfront`는 모두 Vite HMR 모드로 동작해야 합니다. 이 세 서비스는 Docker Compose에서 Dockerfile `dev` target을 사용하고 `/workspace/<app>` bind mount 위에서 `npm run dev -- --host 0.0.0.0`로 실행합니다. `make dev` 경로에서 production `dist`를 `serve_frontend_prod.mjs`로 정적 서빙하면 안 됩니다.
+
+현재 개발 포트는 다음과 같습니다.
+
+- AdminFront: `http://localhost:5173`
+- DevFront: `http://localhost:5174`
+- OrgFront: `http://localhost:5175`
+
+자세한 정책과 회귀 테스트는 [make dev Vite HMR Policy](docs/make-dev-vite-hmr-policy.md)를 확인하세요. 정책 회귀는 `test/frontend_dev_bind_mount_policy_test.sh`에서 검사합니다.
+
+로컬 Playwright E2E도 기본적으로 Vite dev server를 봅니다. Gitea Actions 같은 CI에서는 `CI=true`로 production bundle을 `vite preview`로 검증합니다. 로컬에서 production bundle을 명시적으로 검증하려면 `PLAYWRIGHT_USE_PREVIEW=true`를 사용하세요. 이 정책은 `test/playwright_frontend_runtime_policy_test.sh`에서 검사합니다.
+
 
 ## 🏗 아키텍처 (Architecture)
 
@@ -372,6 +392,61 @@ flowchart TD
 
 Kratos가 사용자 SoT이며 Hydra는 순수 OIDC 토큰 엔진입니다. 비지니스로직은 Backend를 통해서, 기본 인증 로직은 Ory Stack을 통해 진행됩니다.
 
+### SSOT 및 Redis Cache 전략
+
+Baron SSO의 인증, 권한, OAuth/OIDC 원장은 Ory Stack입니다. Backend는 원장 쓰기 경로와 감사 로그를 중앙화하는 Control Plane입니다. 사용자 identity/profile/소속/조직도 노출 데이터에 대해 Backend DB `users`를 원장 또는 read model로 사용하지 않습니다. Redis는 Ory 원장 데이터의 성능 cache/mirror로만 사용합니다.
+
+Ory에서 Redis cache로 웜업된 identity/조직 데이터는 frontend가 직접 소비하지 않습니다. Backend가 Redis mirror 또는 Ory Admin API fallback을 기준으로 cursor 기반 API를 adminfront, orgfront, userfront, 외부 API에 제공합니다.
+
+#### 데이터별 원본 위치
+
+| 데이터 | SSOT | 보조 저장소/캐시 | 비고 |
+| --- | --- | --- | --- |
+| Identity subject, credentials, recovery/verification address | Ory Kratos `identities` | Redis identity mirror | Kratos identity ID가 사용자 subject이며 WORKS `externalKey` 기준입니다. |
+| 로그인 식별자 | Ory Kratos traits | Redis identity mirror/index | Kratos가 인증 식별자의 원장입니다. |
+| 사용자 이름, 이메일, 전화번호, role 기본값 | Ory Kratos traits | Redis identity mirror | 인증/profile 계산에 필요한 identity 값은 Kratos 기준으로 유지합니다. |
+| Baron 사용자 운영 상태, soft delete, 운영 메타데이터 | Ory Kratos traits/state 또는 별도 명시 원장 | Redis mirror/cache | Backend DB `users`를 사용자 read model로 사용하지 않습니다. |
+| 테넌트 tree, slug, 조직/부서/직무/직책 | Ory Keto relation tuple, Backend read model | Redis/API response cache 가능 | 권한/관계 판단은 Keto가 원장입니다. Ory가 보관하거나 조회할 수 없는 조직 표시/검색 데이터만 Backend read model에 둡니다. |
+| 권한/관계 | Ory Keto relation tuple | PostgreSQL outbox/status | Backend를 통해 relation command를 보내고 처리 상태를 추적합니다. |
+| OAuth2/OIDC client, consent, token state | Ory Hydra | PostgreSQL `client_consents`, audit/read model | Hydra가 프로토콜 원장이며 로컬 테이블은 운영 조회/감사용입니다. |
+| RP별 사용자 custom claim 값 | Backend read model `rp_user_metadata` | ID token/userinfo claim assembly | Ory에 저장되지 않는 RP 범위 데이터입니다. Kratos traits나 claim output을 SSOT로 취급하지 않습니다. |
+| 전역 사용자 custom claim 값 | Backend read model `users.metadata.global_custom_claims` | ID token claim assembly | Ory에 저장되지 않는 운영 범위 custom 값입니다. |
+| WORKS Mobile mapping/outbox/job 상태 | PostgreSQL `worksmobile_*` | WORKS API 비교 응답 cache 가능 | 외부 SaaS 연동 상태이며 identity 원장이 아닙니다. |
+| 감사 로그/사용량 | ClickHouse, Oathkeeper/Ory 로그 | 화면별 summary cache 가능 | command와 보안 이벤트의 감사 원장입니다. |
+| Headless JWKS 검증 상태 | Redis `headless:jwks:*` cache | DevFront 상태 카드 | RP public key 문서 자체는 외부 `jwksUri`가 원본입니다. |
+| 로그인 코드, pending login, verification token | Redis short-lived key | 없음 | 만료 가능한 휘발성 상태입니다. 백업/복구 대상이 아닙니다. |
+
+#### SSOT 보장 원칙
+
+1. Kratos/Hydra/Keto/WORKS로 향하는 쓰기 command는 Backend를 통과합니다.
+2. Backend는 Ory write 성공 후 원장 ID를 기준으로 Ory를 재조회하고, Redis mirror를 갱신하거나 stale로 표시합니다. 사용자 identity/profile/소속 데이터는 Backend DB `users`에 read model로 갱신하지 않습니다.
+3. write-through 갱신 실패 시 원장 write를 되돌린 것으로 간주하지 않습니다. 대신 mirror/cache 상태를 `stale` 또는 `failed`로 표시하고 drift report와 refresh 대상으로 둡니다.
+4. Kratos Admin API 또는 Kratos DB를 Backend 밖에서 직접 수정하는 경로는 운영 정책상 금지합니다. 정비/DR처럼 예외가 필요한 경우에는 Redis mirror를 stale로 표시하고, full refresh와 drift report를 완료하기 전까지 cache 결과를 신뢰하지 않습니다.
+5. Backend DB `users`나 Redis cache는 Kratos partial list를 full snapshot처럼 취급하지 않습니다. Kratos 목록 조회가 partial이면 로컬 사용자 데이터를 근거로 정상 목록을 만들지 않습니다.
+6. frontend/API 대량 조회는 Backend가 제공하는 cursor 기반을 원칙으로 합니다. `limit=5000&offset=0` 같은 단일 대량 offset 조회는 사용자 수가 늘면 partial data를 전체처럼 보이게 만들 수 있으므로 신규 구현에서 금지합니다.
+7. Redis cache miss가 발생한 단건 조회는 가능한 경우 SSOT로 fallback하고, fallback 성공 시 Redis를 갱신합니다. 목록 조회는 mirror 상태가 `ready`가 아니면 화면/API에 경고 상태를 함께 전달해야 합니다.
+
+#### Redis 사용 원칙
+
+Redis는 원장이 아니라 cache/mirror 계층입니다. Redis 데이터 유실은 장애지만 데이터 유실 사고로 보지 않고, 원장 재조회와 refresh로 재수렴해야 합니다.
+
+| Redis 데이터 | 역할 | TTL/보존 정책 | 장애 시 처리 |
+| --- | --- | --- | --- |
+| `identity:mirror:{identityID}` | Kratos identity summary 단건 cache | 장기 mirror. refresh 상태와 함께 운영 | Kratos `GetIdentity` fallback 후 write-through |
+| `identity:index:*` | Backend cursor API용 identity 목록/검색 index | mirror refresh 주기로 재작성 | `stale` 표시 후 full refresh |
+| `identity:mirror:state` | mirror 상태, count, last error | 영구 상태 key | adminfront에서 경고 표시 |
+| `headless:jwks:*` | RP headless login JWKS cache | JWKS TTL과 prefetch 정책 | kid miss/검증 실패/TTL 만료 시 재조회 |
+| login/verification/pending 계열 key | 인증 흐름의 단기 상태 | 짧은 TTL 필수 | 만료 또는 유실 시 사용자가 흐름 재시작 |
+| 일반 API response cache | 선택적 성능 cache | 짧은 TTL, invalidation 우선 | miss 시 Backend DB 또는 Ory 원장 조회 |
+
+운영 Redis 설정은 `maxmemory`와 `maxmemory_policy`가 명시되어야 합니다. identity mirror처럼 재수렴 가능한 데이터와 pending login처럼 사용자 흐름에 영향을 주는 단기 key가 같은 Redis를 공유하므로, eviction 발생 여부와 TTL 없는 key 증가를 운영 화면에서 볼 수 있어야 합니다.
+
+#### Redis 모니터링 계획
+
+Redis 적정 설정 판단에 필요한 운영 지표를 adminfront에 노출하는 후속 작업은 이슈 [#1046](https://gitea.hmac.kr/baron/baron-sso/issues/1046)으로 분리했습니다.
+
+표시 대상은 Redis 연결/버전/uptime, `used_memory`, `maxmemory`, `maxmemory_policy`, keyspace hit/miss, expired/evicted keys, prefix별 key count, TTL 분포, `identity:mirror:state`, headless JWKS cache failure 요약입니다. 이 화면은 `super_admin` 전용으로 두고, Redis key value 자체는 노출하지 않습니다.
+
 ---
 
 ## 🚀 시작하기 (Getting Started)
@@ -521,6 +596,155 @@ docker compose --env-file .env --env-file config/.generated/auth-config.env -f d
 - **Hydra Public**: http://localhost:4444
 - **Kratos UI (UserFront)**: http://localhost:5000
 
+### 전체 백업/복구
+
+전체 백업/복구는 CSV export/import가 아니라 Baron SSO와 Ory Stack 저장소를 같은 시점의 재해 복구 단위로 보존하는 절차입니다. 사용자 UUID, Kratos identity ID, Hydra/Keto 원장, WORKS 연동 mapping이 어긋나면 안 되므로 운영 복구는 DB dump와 설정 snapshot을 함께 다룹니다.
+
+#### 백업 실행
+```bash
+# 전체 백업
+make dump
+
+# 출력 위치를 직접 지정
+make dump BACKUP=backups/baron-sso-backup-YYYYMMDD-HHMMSSZ
+
+# 일부 서비스만 백업
+make dump DUMP_SERVICES=postgres,ory-postgres,clickhouse,ory-clickhouse,config
+make dump DUMP_SERVICES=ory-postgres,ory-clickhouse
+
+# 생성된 백업 검증
+make dump-verify BACKUP=backups/baron-sso-backup-YYYYMMDD-HHMMSSZ
+
+# WORKS Drive로 외부 분산 저장
+make upload-cloud BACKUP=backups/baron-sso-backup-YYYYMMDD-HHMMSSZ
+
+# 지정 경로로 dump 후 바로 WORKS Drive 업로드
+make dump-upload-cloud BACKUP=backups/baron-sso-backup-YYYYMMDD-HHMMSSZ
+
+# 로컬 백업 목록
+make dump-list
+```
+
+기본값은 `DUMP_SERVICES=all`, `DUMP_MODE=maintenance`입니다. `DUMP_SERVICES`는 다음 값을 콤마로 조합할 수 있습니다.
+
+| 값 | 대상 |
+| --- | --- |
+| `postgres` | Baron Postgres (`baron_postgres`, `${DB_NAME:-baron_sso}`) |
+| `ory-postgres` | Ory Postgres의 `${KRATOS_DB:-ory_kratos}`, `${HYDRA_DB:-ory_hydra}`, `${KETO_DB:-ory_keto}` |
+| `clickhouse` | Baron ClickHouse (`baron_clickhouse`) |
+| `ory-clickhouse` | Ory ClickHouse (`ory_clickhouse`) |
+| `config` | `.env` redacted copy, generated Ory config, gateway, 주요 compose 파일 |
+
+백업 산출물은 기본적으로 `backups/baron-sso-backup-YYYYMMDD-HHMMSSZ/` 아래에 생성됩니다.
+
+```text
+manifest.json
+checksums.sha256
+postgres/
+clickhouse/
+config/
+reports/
+```
+
+#### WORKS Drive 외부 업로드
+
+`make dump`, `make restore`, `make upload-cloud`는 기본적으로 `docker/backup-tools/Dockerfile`에서 빌드한 `baron-sso-backup-tools:local` 컨테이너 안에서 실행됩니다. 호스트에는 Docker와 Docker socket 접근 권한만 필요하고, `zstd`, `jq`, `curl`, `openssl`, `postgresql-client` 같은 백업/복구 도구는 backup-tools image에 포함됩니다.
+
+`make upload-cloud`는 기존 백업 디렉터리를 `baron-sso-backup-*.tar.zst`로 묶은 뒤 WORKS Drive에 업로드합니다. 압축 포맷은 `.tar.zst`로 고정되어 있고, 압축/해제는 backup-tools 컨테이너 내부의 `zstd`로 수행합니다.
+
+백업이 완료되면 `reports/backup-report.md`도 생성됩니다. 이 report에는 사용자 수, 테넌트 수, RP 수, Hydra client 수, WORKS 관련 row count, 서비스별 수행 시간이 Markdown 표로 기록됩니다. `make upload-cloud`는 `reports/*.md`만 WORKS Drive 대상 폴더 아래의 `reports` 하위 폴더로 업로드하며, 업로드 파일명은 `backup-report-YYYYMMDD-HHMMSSZ.md`처럼 업로드 시각을 붙입니다. `reports/cloud-upload.json`은 로컬 업로드 실행 기록으로만 남기고 Drive에는 업로드하지 않습니다.
+
+```bash
+# 권장: 백업 경로를 명시해서 dump와 upload를 분리
+make dump BACKUP=backups/baron-sso-backup-YYYYMMDD-HHMMSSZ
+make upload-cloud BACKUP=backups/baron-sso-backup-YYYYMMDD-HHMMSSZ
+
+# 또는 같은 BACKUP 경로로 연속 실행
+make dump-upload-cloud BACKUP=backups/baron-sso-backup-YYYYMMDD-HHMMSSZ
+
+# 실제 업로드 전 endpoint와 target만 확인
+make upload-cloud BACKUP=backups/baron-sso-backup-YYYYMMDD-HHMMSSZ WORKS_DRIVE_DRY_RUN=true
+
+# 예외적으로 호스트 도구로 직접 실행
+make restore BACKUP_USE_DOCKER=false BACKUP=backups/baron-sso-backup-YYYYMMDD-HHMMSSZ CONFIRM_RESTORE=baron-sso
+```
+
+주요 변수:
+
+| 변수 | 설명 |
+| --- | --- |
+| `WORKS_DRIVE_TARGET` | `sharedrive`, `mydrive`, `group`, `sharedfolder` 중 하나. 기본값은 `sharedrive`입니다. |
+| `WORKS_DRIVE_SHARED_DRIVE_ID` | `WORKS_DRIVE_TARGET=sharedrive`일 때 공용 드라이브 ID입니다. |
+| `WORKS_DRIVE_PARENT_FILE_ID` | 업로드할 대상 폴더의 WORKS Drive `fileId`입니다. 폴더 이름이나 경로가 아니며, 비우면 대상 drive/folder root에 업로드합니다. |
+| `WORKS_DRIVE_USER_ID` | `mydrive` 또는 `sharedfolder` 대상 사용자 ID입니다. 기본값은 `me`입니다. |
+| `WORKS_DRIVE_GROUP_ID` | `WORKS_DRIVE_TARGET=group`일 때 조직/그룹 ID입니다. |
+| `WORKS_DRIVE_SHARED_FOLDER_ID` | `WORKS_DRIVE_TARGET=sharedfolder`일 때 공유받은 폴더 ID입니다. |
+| `WORKS_DRIVE_ACCESS_TOKEN` | Drive API 호출용 Bearer token입니다. Drive API는 `file` scope가 필요합니다. |
+| `WORKS_DRIVE_ACCESS_TOKEN_FILE` | access token을 파일에서 읽을 때 사용합니다. |
+| `WORKS_DRIVE_ACCESS_TOKEN_CMD` | access token을 명령 출력으로 주입할 때 사용합니다. |
+| `WORKS_DRIVE_OAUTH_SCOPE` | Drive 업로드 앱 OAuth token에 사용할 scope입니다. 기본값은 `file`입니다. |
+| `WORKS_DRIVE_OAUTH_CLIENT_ID` | Drive 업로드 앱의 OAuth client ID입니다. 계정 동기화용 `WORKS_ADMIN_OAUTH_CLIENT_ID`와 분리합니다. |
+| `WORKS_DRIVE_OAUTH_CLIENT_SECRET` | Drive 업로드 앱의 OAuth client secret입니다. |
+| `WORKS_DRIVE_OAUTH_REFRESH_TOKEN` | Drive 업로드 앱의 refresh token입니다. 명시 access token이 없으면 이 값으로 access token을 갱신합니다. |
+| `WORKS_DRIVE_OAUTH_CLIENT_SERVICE_ACCOUNT` | Drive 업로드 앱의 service account입니다. JWT `sub`에 들어갑니다. |
+| `WORKS_DRIVE_OAUTH_CLIENT_PRIVATE_KEY_FILE` | Drive 업로드 앱 private key 파일입니다. 예: `./config/worksmobile-driveapp-private-key.pem` |
+| `WORKS_DRIVE_SPLIT_SIZE` | 분할 업로드 시 part 크기입니다. 기본값은 `9000M`입니다. |
+| `WORKS_DRIVE_MAX_SINGLE_FILE_BYTES` | 이 값보다 archive가 크면 split part로 나눕니다. 기본값 `0`은 자동 분할 비활성입니다. |
+| `WORKS_DRIVE_FORCE_SPLIT` | `true`이면 크기와 무관하게 split part로 업로드합니다. |
+| `WORKS_DRIVE_OVERWRITE` | WORKS Drive upload URL 생성 요청의 overwrite 플래그입니다. 기본값은 `false`입니다. |
+| `WORKS_DRIVE_UPLOAD_REPORTS` | `true`이면 `reports/*.md`를 Drive의 report 폴더로 함께 업로드합니다. 기본값은 `true`입니다. |
+| `WORKS_DRIVE_REPORT_FOLDER_NAME` | Markdown report를 업로드할 하위 폴더 이름입니다. 기본값은 `reports`입니다. |
+
+Drive API는 업로드 URL 생성 후 해당 URL에 multipart `Filedata`로 실제 파일을 전송하는 2단계 방식입니다. 계정 동기화용 `WORKS_ADMIN_OAUTH_*`와 Drive 업로드용 `WORKS_DRIVE_OAUTH_*`는 서로 다른 앱/키로 관리합니다. token 우선순위는 `WORKS_DRIVE_ACCESS_TOKEN`, `WORKS_DRIVE_ACCESS_TOKEN_FILE`, `WORKS_DRIVE_ACCESS_TOKEN_CMD`, `WORKS_DRIVE_OAUTH_REFRESH_TOKEN`, 서비스 계정 JWT fallback 순서입니다. 운영에서는 Drive API 권한과 `file` scope 위임 정책을 먼저 확인해야 합니다.
+
+#### 복구 계획과 복구 실행
+```bash
+# 복구 전 계획 확인
+make restore-plan BACKUP=backups/baron-sso-backup-YYYYMMDD-HHMMSSZ \
+  RESTORE_SERVICES=postgres,ory-postgres,clickhouse,ory-clickhouse,config \
+  CONFIRM_RESTORE=baron-sso
+
+# 복구 실행
+make restore BACKUP=backups/baron-sso-backup-YYYYMMDD-HHMMSSZ \
+  RESTORE_SERVICES=postgres,ory-postgres,clickhouse,ory-clickhouse,config \
+  CONFIRM_RESTORE=baron-sso
+
+# .tar.zst archive를 직접 복구 입력으로 사용
+make restore DUMP_FILE=backups/baron-sso-backup-YYYYMMDD-HHMMSSZ.tar.zst \
+  RESTORE_SERVICES=all \
+  CONFIRM_RESTORE=baron-sso
+
+# report 경로를 명시
+make restore BACKUP=backups/baron-sso-backup-YYYYMMDD-HHMMSSZ \
+  CONFIRM_RESTORE=baron-sso \
+  RESTORE_REPORT=reports/restore/baron-sso-restore-report.json
+
+# 복구 후 기본 검증
+make restore-verify BACKUP=backups/baron-sso-backup-YYYYMMDD-HHMMSSZ
+```
+
+복구는 반드시 빈 volume 또는 restore 전용 stack에서 수행하는 것을 기본 정책으로 합니다. `make restore`는 `BACKUP` 또는 `DUMP_FILE` 중 하나와 `CONFIRM_RESTORE=baron-sso`가 없으면 실패하고, 기본적으로 non-empty Postgres 대상에는 복구하지 않습니다. 승인된 restore rehearsal에서만 `ALLOW_NON_EMPTY_RESTORE=true`를 사용하세요. `DUMP_FILE=.tar.zst` 해제도 backup-tools 컨테이너에서 수행하므로 호스트 `zstd` 설치에 의존하지 않습니다.
+
+`make restore`는 복구 report를 JSON과 Markdown으로 남깁니다. `BACKUP` 디렉터리 입력의 기본 JSON report는 `<BACKUP>/reports/restore-report.json`이고, `DUMP_FILE` archive 입력의 기본 JSON report는 `reports/restore/<archive-name>-restore-report.json`입니다. 같은 경로에 `.md` 확장자의 Markdown 요약도 함께 생성됩니다. `RESTORE_REPORT`로 직접 지정할 수 있습니다. report에는 입력 archive, 복구 서비스, checksum 검증 상태, 복구 후 대상 row count 비교 결과가 기록됩니다.
+
+`config` 복구는 운영 파일을 직접 덮어쓰지 않고 `config-restored/`에 풀어 수동 검토하도록 합니다. migration은 자동 실행하지 않으며, Ory Stack과 backend 기동 후 super admin login, 대표 OIDC login, WORKS comparison dry-run을 통과하기 전까지 WORKS relay를 자동 재개하지 않습니다.
+
+#### 백업/복구 범위
+
+필수 백업 대상:
+- Baron Postgres: users, tenants, user_login_ids, user_groups, RP metadata, WORKS mapping/outbox 등
+- Ory Postgres: Kratos identity/credentials/session, Hydra client/consent/token state, Keto relation tuple
+- Baron ClickHouse: 감사 로그와 RP usage event
+- Ory ClickHouse: Oathkeeper/Ory 계열 접근 로그
+- 설정 snapshot: `.env` redacted copy, generated Ory config, gateway, compose 파일
+
+기본 제외 대상:
+- Redis: pending login, short code, cache 등 휘발성 데이터이므로 복구 후 재수렴 대상으로 봅니다.
+- 프론트 빌드 산출물: 소스와 이미지 태그로 재생성합니다.
+- coverage, reports, test-results 같은 로컬 개발 산출물
+
+상세 설계와 운영 정책은 `docs/backup-restore-design.md`를 기준으로 유지합니다.
+
 ### MCP 서버 (Hydra/Kratos/Keto)
 MCP 서버는 기존 Hydra/Kratos에 연결하며 별도 Ory 스택이나 포트를 추가로 띄우지 않습니다.  
 프로덕션에서는 실행하지 않도록 `mcp` 프로파일을 로컬에서만 켜세요.

adminfront/Dockerfile

@@ -1,25 +1,51 @@
-FROM node:lts
+FROM node:lts AS deps
 
 WORKDIR /workspace
 
-# Install pnpm
-RUN npm install -g pnpm
+ENV CI=true
+ENV ADMINFRONT_BUILD_OUT_DIR=/workspace/adminfront/dist
 
-# Copy workspace configs and common package
+RUN corepack enable && corepack prepare pnpm@10.5.2 --activate
+
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
 COPY common ./common
 COPY adminfront ./adminfront
 
-# Install dependencies for the workspace
-RUN cd common && pnpm install --no-frozen-lockfile --ignore-scripts
+ARG VITE_ADMIN_PUBLIC_URL
+ARG VITE_OIDC_AUTHORITY
+ARG VITE_OIDC_CLIENT_ID
+ARG ORGFRONT_URL
+ENV VITE_ADMIN_PUBLIC_URL=$VITE_ADMIN_PUBLIC_URL
+ENV VITE_OIDC_AUTHORITY=$VITE_OIDC_AUTHORITY
+ENV VITE_OIDC_CLIENT_ID=$VITE_OIDC_CLIENT_ID
+ENV ORGFRONT_URL=$ORGFRONT_URL
 
-# 프로덕션 서빙을 위한 serve 패키지 글로벌 설치
-RUN npm install -g serve
+RUN pnpm install --frozen-lockfile --ignore-scripts
+
+FROM deps AS dev
 
 WORKDIR /workspace/adminfront
+ENV NODE_ENV=development
 
-# Vite 기본 포트
 EXPOSE 5173
 
-# 실행 스크립트: APP_ENV에 따라 개발 서버 또는 빌드 후 서빙
-RUN chmod +x ./scripts/runtime-mode.sh
-CMD ["sh", "./scripts/runtime-mode.sh"]
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "5173"]
+
+FROM deps AS build
+
+WORKDIR /workspace/adminfront
+RUN npm run build
+
+FROM node:24-alpine AS production
+
+WORKDIR /app
+ENV NODE_ENV=production
+ENV FRONTEND_DIST_DIR=/app/dist
+ENV PORT=5173
+
+COPY scripts/serve_frontend_prod.mjs ./serve_frontend_prod.mjs
+COPY --from=build /workspace/adminfront/dist ./dist
+
+EXPOSE 5173
+
+CMD ["node", "./serve_frontend_prod.mjs"]

adminfront/biome.json

@@ -1,6 +1,7 @@
 {
+  "root": true,
   "extends": ["../common/config/biome.base.json"],
   "files": {
-    "ignore": [".vite"]
+    "includes": [".vite"]
   }
 }

adminfront/e2e-evidence/tenant-profile-performance-local.json

@@ -0,0 +1,134 @@
+{
+  "metric": "tenant-profile-local-performance",
+  "tenantId": "56cd0fd7-b62a-43c0-8db9-74a30468d7cb",
+  "actualApiBaseUrl": "http://localhost:5173/api",
+  "measuredAt": "2026-06-16T23:45:00.441Z",
+  "browser": "chromium",
+  "samples": [
+    {
+      "sample": 1,
+      "configFieldsVisibleMs": 424,
+      "networkIdleMs": 862,
+      "orgUnitType": "센터",
+      "visibility": "public",
+      "worksmobileSync": "enabled",
+      "apiTimings": [
+        {
+          "method": "GET",
+          "url": "http://playwright-mock/api/v1/user/me",
+          "status": 200,
+          "durationMs": 134
+        },
+        {
+          "method": "GET",
+          "url": "http://playwright-mock/api/v1/admin/tenants/56cd0fd7-b62a-43c0-8db9-74a30468d7cb",
+          "status": 200,
+          "durationMs": 184
+        }
+      ]
+    },
+    {
+      "sample": 2,
+      "configFieldsVisibleMs": 376,
+      "networkIdleMs": 751,
+      "orgUnitType": "센터",
+      "visibility": "public",
+      "worksmobileSync": "enabled",
+      "apiTimings": [
+        {
+          "method": "GET",
+          "url": "http://playwright-mock/api/v1/user/me",
+          "status": 200,
+          "durationMs": 20
+        },
+        {
+          "method": "GET",
+          "url": "http://playwright-mock/api/v1/admin/tenants/56cd0fd7-b62a-43c0-8db9-74a30468d7cb",
+          "status": 200,
+          "durationMs": 133
+        }
+      ]
+    },
+    {
+      "sample": 3,
+      "configFieldsVisibleMs": 400,
+      "networkIdleMs": 797,
+      "orgUnitType": "센터",
+      "visibility": "public",
+      "worksmobileSync": "enabled",
+      "apiTimings": [
+        {
+          "method": "GET",
+          "url": "http://playwright-mock/api/v1/user/me",
+          "status": 200,
+          "durationMs": 21
+        },
+        {
+          "method": "GET",
+          "url": "http://playwright-mock/api/v1/admin/tenants/56cd0fd7-b62a-43c0-8db9-74a30468d7cb",
+          "status": 200,
+          "durationMs": 156
+        }
+      ]
+    },
+    {
+      "sample": 4,
+      "configFieldsVisibleMs": 431,
+      "networkIdleMs": 843,
+      "orgUnitType": "센터",
+      "visibility": "public",
+      "worksmobileSync": "enabled",
+      "apiTimings": [
+        {
+          "method": "GET",
+          "url": "http://playwright-mock/api/v1/user/me",
+          "status": 200,
+          "durationMs": 25
+        },
+        {
+          "method": "GET",
+          "url": "http://playwright-mock/api/v1/admin/tenants/56cd0fd7-b62a-43c0-8db9-74a30468d7cb",
+          "status": 200,
+          "durationMs": 178
+        }
+      ]
+    },
+    {
+      "sample": 5,
+      "configFieldsVisibleMs": 380,
+      "networkIdleMs": 758,
+      "orgUnitType": "센터",
+      "visibility": "public",
+      "worksmobileSync": "enabled",
+      "apiTimings": [
+        {
+          "method": "GET",
+          "url": "http://playwright-mock/api/v1/user/me",
+          "status": 200,
+          "durationMs": 24
+        },
+        {
+          "method": "GET",
+          "url": "http://playwright-mock/api/v1/admin/tenants/56cd0fd7-b62a-43c0-8db9-74a30468d7cb",
+          "status": 200,
+          "durationMs": 129
+        }
+      ]
+    }
+  ],
+  "summary": {
+    "configFieldsVisibleMs": {
+      "min": 376,
+      "max": 431,
+      "p50": 400,
+      "p95": 431
+    },
+    "networkIdleMs": {
+      "min": 751,
+      "max": 862,
+      "p50": 797,
+      "p95": 862
+    }
+  },
+  "screenshotPath": "/home/lectom/repos/baron-sso/adminfront/e2e-evidence/tenant-profile-performance-local.png"
+}

adminfront/package-lock.json

@@ -32,6 +32,7 @@
         "zod": "^4.4.3"
       },
       "devDependencies": {
+        "@biomejs/biome": "2.4.16",
         "@playwright/test": "^1.60.0",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
@@ -41,13 +42,15 @@
         "@types/react-dom": "^19.2.3",
         "@types/react-router-dom": "^5.3.3",
         "@vitejs/plugin-react": "^6.0.1",
+        "@vitest/coverage-v8": "4.1.6",
         "autoprefixer": "^10.5.0",
         "jsdom": "^28.1.0",
+        "playwright": "1.60.0",
         "postcss": "^8.5.14",
         "tailwindcss": "^3.4.19",
         "tailwindcss-animate": "^1.0.7",
         "typescript": "^6.0.3",
-        "vite": "^8.0.12",
+        "vite": "^8.0.14",
         "vitest": "^4.1.6"
       },
       "engines": {
@@ -130,14 +133,14 @@
       "license": "MIT"
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
-      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/helper-validator-identifier": "^7.29.7",
         "js-tokens": "^4.0.0",
         "picocolors": "^1.1.1"
       },
@@ -145,17 +148,42 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
-      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.29.2",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
@@ -166,6 +194,205 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/types": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz",
+      "integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@biomejs/biome": {
+      "version": "2.4.16",
+      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.4.16.tgz",
+      "integrity": "sha512-x9ajFh1zChVybCiM3TN6OD4phAqLgtPZjFrZF+aTMYCPjwBO+k529TX7PPsAqtGNLeV4UgzwQnowEgS7bGmzcA==",
+      "dev": true,
+      "license": "MIT OR Apache-2.0",
+      "bin": {
+        "biome": "bin/biome"
+      },
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/biome"
+      },
+      "optionalDependencies": {
+        "@biomejs/cli-darwin-arm64": "2.4.16",
+        "@biomejs/cli-darwin-x64": "2.4.16",
+        "@biomejs/cli-linux-arm64": "2.4.16",
+        "@biomejs/cli-linux-arm64-musl": "2.4.16",
+        "@biomejs/cli-linux-x64": "2.4.16",
+        "@biomejs/cli-linux-x64-musl": "2.4.16",
+        "@biomejs/cli-win32-arm64": "2.4.16",
+        "@biomejs/cli-win32-x64": "2.4.16"
+      }
+    },
+    "node_modules/@biomejs/cli-darwin-arm64": {
+      "version": "2.4.16",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.4.16.tgz",
+      "integrity": "sha512-wxPvu4XOA85YJk9ixSWUmq/QBHbid85BISbOAqqBM/5xQpPk9ayjk5375tOlSC0BeCwNSbPFafQBm+vBumXq0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-darwin-x64": {
+      "version": "2.4.16",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.4.16.tgz",
+      "integrity": "sha512-xFCqGPwYusQJp4N4NJLi1XJiZqjwFdjhT+KqtNy+Ug3qgfczqnTa6MSDvxJF6TkuDLoYJItMapz6tAf7kCekFw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-linux-arm64": {
+      "version": "2.4.16",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.4.16.tgz",
+      "integrity": "sha512-2kFb4//jxfZaP6D+Rj5VkHkxgyD9EoRAVBEQb8PKRv+s4NO2zYNJKXFaJmK1CmhufJOWEfpHKaRbOja7qjmdhQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-linux-arm64-musl": {
+      "version": "2.4.16",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.4.16.tgz",
+      "integrity": "sha512-oYxnW0ARfJkr72ezzF2OR8N/rtkgLUQeYtF8cFhVswbknHxtTcmzSsanVJP8yQKnGpGpc2ck6c5zLvHahL6Cbg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-linux-x64": {
+      "version": "2.4.16",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.4.16.tgz",
+      "integrity": "sha512-NbcBbi/nJqn5baae6wqRXdS7Gadf2uRpehSh6vMSYpG8OhkXl/Xg8aorWrJ+9VWqAT5ml90alLvorkpMW0nBwQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-linux-x64-musl": {
+      "version": "2.4.16",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.4.16.tgz",
+      "integrity": "sha512-iHDS+MCM65DPqWGu+ECC3uoALyj2H7F4nVUPxIPjz/PIl94EUu+EDfGZDzFP+NY1EOPVt9NQvwFqq7HdMmowdg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-win32-arm64": {
+      "version": "2.4.16",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.4.16.tgz",
+      "integrity": "sha512-0rgImMsNb5v/chhkIFe3wu7PEFClS6RBAYUijGL9UsYN3PanSaoK24HSSuSJb1pYbYYVjzAyZTl3gtjJ84BM8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-win32-x64": {
+      "version": "2.4.16",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.4.16.tgz",
+      "integrity": "sha512-Kp85jgoBHa05gix6UIRjfCDiUV3w/8VIdZ247VyyO2gEjaw12WEVhdIjlxp/AMzXxqxQwbxNTDVZ3Mwd2RG5rw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT OR Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
     "node_modules/@bramus/specificity": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
@@ -506,9 +733,9 @@
       }
     },
     "node_modules/@oxc-project/types": {
-      "version": "0.130.0",
-      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.130.0.tgz",
-      "integrity": "sha512-ibD2usx9JRu7f5pu2tMKMI4cpA4NgXJQoYRP4pQ7Pxmn1l6k/53qWtQWZayhYy3X4QZkt90Ot+mJEaeXouio6Q==",
+      "version": "0.132.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.132.0.tgz",
+      "integrity": "sha512-FESMOxil5Se014ui/Eq8fT5uHJo6nIRwH0PfJrZJXs6Gek3ZVFOrpUv3YIZT20m+extU98Hg1Ym72U58rlsxUQ==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -2002,9 +2229,9 @@
       "license": "MIT"
     },
     "node_modules/@rolldown/binding-android-arm64": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.1.tgz",
-      "integrity": "sha512-fJI3I0r3C3Oj/zdBCpaCmBRZYf07xpaq4yCfDDoSFm+beWNzbIl26puW8RraUdugoJw/95zerNOn6jasAhzSmg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.2.tgz",
+      "integrity": "sha512-ZS4D1JPGn/MYQN/SYDWftIE/nVsM8j/AFOYEzAoOE2O3NktQOZru+/vYXGbR/qtdLdIfGCP0lcoJiYVzsEz+iQ==",
       "cpu": [
         "arm64"
       ],
@@ -2019,9 +2246,9 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-arm64": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.1.tgz",
-      "integrity": "sha512-cKnAhWEsV7TPcA/5EAteDp6KcJZBQ2G+BqE7zayMMi7kMvwRsbv7WT9aOnn0WNl4SKEIf43vjS31iUPu80nzXg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.2.tgz",
+      "integrity": "sha512-vdFA9+C/rekyGce7WqHs/xoT0ioZEWaOFyZLIV1mEeNFaFDUQrPIo8Vs2GvJ6eetb3rzDUtUBgzto3ExpXJB3w==",
       "cpu": [
         "arm64"
       ],
@@ -2036,9 +2263,9 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-x64": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.1.tgz",
-      "integrity": "sha512-YKrVwQjIRBPo+5G/u03wGjbdy4q7pyzCe93DK9VJ7zkVmeg8LJ7GbgsiHWdR4xSoe4CAXRD7Bcjgbtr64bkXNg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.2.tgz",
+      "integrity": "sha512-BewSOwTHazv77DTYiAZXSqqKZ4KP/KonFisDMVU7PImxoWfB2aepnPhd2E4SWz3zDzYgDNbs6jBmTdgNnF02GA==",
       "cpu": [
         "x64"
       ],
@@ -2053,9 +2280,9 @@
       }
     },
     "node_modules/@rolldown/binding-freebsd-x64": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.1.tgz",
-      "integrity": "sha512-z/oBsREo46SsFqBwYtFe0kpJeBijAT48O/WXLI4suiCLBkr03RTtTJMCzSdDd2znlh8VJizL09XVkQgk8IZonw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.2.tgz",
+      "integrity": "sha512-m41o7M0YWtUdqk61Tb+jnKb2rN++iRdIASlExkUoKfIAH30DOHCB8fVLzSUpbWHHU8esmEioY62PxzexE8MBuA==",
       "cpu": [
         "x64"
       ],
@@ -2070,9 +2297,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.1.tgz",
-      "integrity": "sha512-ik8q7GM11zxvYxFc2PeDcT6TBvhCQMaUxfph/M5l9sKuTs/Sjg3L+Byw0F7w0ZVLBZmx30P+gG0ECzzN+MFcmQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.2.tgz",
+      "integrity": "sha512-jcojB9H7W/jS29pMKWAK1N+fU99vXodHDTatS3b3y/XSOCiHo0kkA74pL3jJmkoQtYpOCxDvaKs1fo2Ij/1X5w==",
       "cpu": [
         "arm"
       ],
@@ -2087,13 +2314,16 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-gnu": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.1.tgz",
-      "integrity": "sha512-QoSx2EkyrrdZ6kcyE8stqZ62t0Yra8Fs5ia9lOxJrh6TMQJK7gQKmscdTHf7pOXKREKrVwOtJcQG3qVSfc866A==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.2.tgz",
+      "integrity": "sha512-1jn6qDU5iiOgFgygDzKUuKP0maTi0/f1+sBLgvij/76C77Nm3ts6ufz9Bjg5q5dduxiUIxtq86JIoBvo1xQ4Ig==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2104,13 +2334,16 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-musl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.1.tgz",
-      "integrity": "sha512-uwNwFpwKeNiZawfAWBgg0VIztPTV3ihhh1vV334h9ivnNLorxnQMU6Fz8wG1Zb4Qh9LC1/MkcyT3YlDXG3Rsgg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.2.tgz",
+      "integrity": "sha512-QVLO/czFMdoMFSqlX3bcswcJNm/23r+qoa/jgtmFc/qEp6/jXmIkDjF/XIo8dPfGaiwy1xfQn8o77L79GeXFgw==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2121,13 +2354,16 @@
       }
     },
     "node_modules/@rolldown/binding-linux-ppc64-gnu": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.1.tgz",
-      "integrity": "sha512-zY1bul7OWr7DFBiJ++wofXvnr8B45ce3QsQUhKrIhXsygAh7bTkwyeM1bi1a2g5C/yC/N8TZyGDEoMfm/l9mpg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.2.tgz",
+      "integrity": "sha512-hgO5Abm0w5UL6FEa2iFnZqo2KlK7TQ5QhV5x09hujBf7t5KzHQ1VmfPuTpqRy/rNlSxua3eWH374xxiVrP+lcA==",
       "cpu": [
         "ppc64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2138,13 +2374,16 @@
       }
     },
     "node_modules/@rolldown/binding-linux-s390x-gnu": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.1.tgz",
-      "integrity": "sha512-0frlsT/f4Ft6I7SMESTKnF3cZsdicQn1dCMkF/jT9wDLE+gGoiQfv1nmT9e+s7s/fekvvy6tZM2jHvI2tkbJDQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.2.tgz",
+      "integrity": "sha512-fy8rXxuYEu602abC8MUNaPjYLIFzReOaEIEMKMUa0rFEUxNpVXhs15KSSQ4qlqSaM7B6rcj9rDZgADh/IGDzLQ==",
       "cpu": [
         "s390x"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2155,13 +2394,16 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-gnu": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.1.tgz",
-      "integrity": "sha512-XABVmGp9Tg0WspTVvwduTc4fpqy6JnAUrSQe6OuyqD/03nI7r0O9OWUkMIwFrjKAIqolvqoA4ZrJppgwE0Gxmw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.2.tgz",
+      "integrity": "sha512-0+bOkiQ779+r1WpoHOWHqncvyySci0vKph+myNDYb+im6meJAzHQXay6oEgnkHuUGouM1LKTZwqKpBow6Kj7CQ==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2172,13 +2414,16 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-musl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.1.tgz",
-      "integrity": "sha512-bV4fzswuzVcKD90o/VM6QqKxnxlDq0g2BISDLNVmxrnhpv1DDbyPhCIjYfvzYLV+MvkKKnQt2Q6AO86SEBULUQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.2.tgz",
+      "integrity": "sha512-mjSkrzZK5Qsl0a9d1JgILOiuZOSDTVdKENcSXBoqbzSrspLR/4/IRVDo5wd2GgZjNss/viBFJdeq+j7qH2nypw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2189,9 +2434,9 @@
       }
     },
     "node_modules/@rolldown/binding-openharmony-arm64": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.1.tgz",
-      "integrity": "sha512-/Mh0Zhq3OP7fVs0kcQHZP6lZEthMGTaSf8UBQYSFEZDWGXXlEC+nJ6EqenaK2t4LBXMe3A+K/G2BVXXdtOr4PQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.2.tgz",
+      "integrity": "sha512-1v5vHasdfQAZoEHakBV72LIFAC9JjnymsiKxp+GEr/ma3+NJCPSaYK+qavInOovJkgwFrs7GccX2d6IgDA3Z5w==",
       "cpu": [
         "arm64"
       ],
@@ -2206,9 +2451,9 @@
       }
     },
     "node_modules/@rolldown/binding-wasm32-wasi": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.1.tgz",
-      "integrity": "sha512-+1xc9X45l8ufsBAm6Gjvx2qDRIY9lTVt0cgWNcJ+1gdhXvkbxePA60yRTwSTuXL09CMhyJmjpV7E3NoyxbqFQQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.2.tgz",
+      "integrity": "sha512-mb1VobWn6NheziTk5/WEaR6AKVbrwT5sOi6C7zk3gy/pD1qtJfU1j4PgTo2NJnOtbL9Dl3Aeei8w9jJ7qC2jZQ==",
       "cpu": [
         "wasm32"
       ],
@@ -2225,9 +2470,9 @@
       }
     },
     "node_modules/@rolldown/binding-win32-arm64-msvc": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.1.tgz",
-      "integrity": "sha512-1D+UqZdfnuR+Jy1GgMJwi85bD40H21uNmOPRWQhw4oRSuolZ/B5rixZ45DK2KXOTCvmVCecauWgEhbw8bI7tOw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.2.tgz",
+      "integrity": "sha512-SqKonF56vA/L2yHwHYcEp2P34URpOZ7d1fS635cTkpDnUtEGdUbhI6NzsPdqeSWvAAeGDrxjWjNmibDIdFf9/A==",
       "cpu": [
         "arm64"
       ],
@@ -2242,9 +2487,9 @@
       }
     },
     "node_modules/@rolldown/binding-win32-x64-msvc": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.1.tgz",
-      "integrity": "sha512-INAycaWuhlOK3wk4mRHGsdgwYWmd9cChdPdE9bwWmy6rn9VqVNYNFGhOdXrofXUxwHIncSiPNb8tNm8knDVIeQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.2.tgz",
+      "integrity": "sha512-v7qRI7gXLRINcOGXt+7YmAZ6iFuyZVMIoXAxhd8oP+DR9dLfL9GfNIx7PLMxmhZdvq8waUJBQiWN9EKNy+TRBQ==",
       "cpu": [
         "x64"
       ],
@@ -2572,6 +2817,37 @@
         }
       }
     },
+    "node_modules/@vitest/coverage-v8": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.1.6.tgz",
+      "integrity": "sha512-36l628fQ/9a/8ihy97eOtEnvWQEdqULQOJtcaxtoNq0G1w3Mxd4szSahOaMM9/NGyZ+hyKcMtIW/WIxq0XQViQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@bcoe/v8-coverage": "^1.0.2",
+        "@vitest/utils": "4.1.6",
+        "ast-v8-to-istanbul": "^1.0.0",
+        "istanbul-lib-coverage": "^3.2.2",
+        "istanbul-lib-report": "^3.0.1",
+        "istanbul-reports": "^3.2.0",
+        "magicast": "^0.5.2",
+        "obug": "^2.1.1",
+        "std-env": "^4.0.0-rc.1",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@vitest/browser": "4.1.6",
+        "vitest": "4.1.6"
+      },
+      "peerDependenciesMeta": {
+        "@vitest/browser": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vitest/expect": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.6.tgz",
@@ -2782,6 +3058,25 @@
         "node": ">=12"
       }
     },
+    "node_modules/ast-v8-to-istanbul": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-1.0.2.tgz",
+      "integrity": "sha512-dKmJxJsGItLmc5CYZKuEjuG6GnBs6PG4gohMhyFOWKaNQoYCuRZJDECaBlHmcG0lv2wc2E0uU8lESmBEumC3DQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.31",
+        "estree-walker": "^3.0.3",
+        "js-tokens": "^10.0.0"
+      }
+    },
+    "node_modules/ast-v8-to-istanbul/node_modules/js-tokens": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-10.0.0.tgz",
+      "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -3541,6 +3836,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -3593,6 +3898,13 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -3709,6 +4021,45 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
+      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
+      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^4.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-reports": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
+      "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/jiti": {
       "version": "1.21.7",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
@@ -4122,6 +4473,34 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/magicast": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.3.tgz",
+      "integrity": "sha512-pVKE4UdSQ7DvHzivsCIFx2BJn1mHG6KsyrFcaxFx6tONdneEuThrDx0Cj3AMg58KyN4pzYT+LHOotxDQDjNvkw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.3",
+        "@babel/types": "^7.29.0",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -4390,9 +4769,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.14.tgz",
-      "integrity": "sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==",
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
       "dev": true,
       "funding": [
         {
@@ -4410,7 +4789,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.11",
+        "nanoid": "^3.3.12",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -4854,13 +5233,13 @@
       }
     },
     "node_modules/rolldown": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.1.tgz",
-      "integrity": "sha512-X0KQHljNnEkWNqqiz9zJrGunh1B0HgOxLXvnFpCOcadzcy5qohZ3tqMEUg00vncoRovXuK3ZqCT9KnnKzoInFQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.2.tgz",
+      "integrity": "sha512-oZx5zVDtVB44AW3eaifgDml1gWRDZGvjcfdxonE4swNPG98PrrXjaO/KrnUjzlMnztCCRVlUueA1kCXhARGk6g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@oxc-project/types": "=0.130.0",
+        "@oxc-project/types": "=0.132.0",
         "@rolldown/pluginutils": "^1.0.0"
       },
       "bin": {
@@ -4870,21 +5249,21 @@
         "node": "^20.19.0 || >=22.12.0"
       },
       "optionalDependencies": {
-        "@rolldown/binding-android-arm64": "1.0.1",
-        "@rolldown/binding-darwin-arm64": "1.0.1",
-        "@rolldown/binding-darwin-x64": "1.0.1",
-        "@rolldown/binding-freebsd-x64": "1.0.1",
-        "@rolldown/binding-linux-arm-gnueabihf": "1.0.1",
-        "@rolldown/binding-linux-arm64-gnu": "1.0.1",
-        "@rolldown/binding-linux-arm64-musl": "1.0.1",
-        "@rolldown/binding-linux-ppc64-gnu": "1.0.1",
-        "@rolldown/binding-linux-s390x-gnu": "1.0.1",
-        "@rolldown/binding-linux-x64-gnu": "1.0.1",
-        "@rolldown/binding-linux-x64-musl": "1.0.1",
-        "@rolldown/binding-openharmony-arm64": "1.0.1",
-        "@rolldown/binding-wasm32-wasi": "1.0.1",
-        "@rolldown/binding-win32-arm64-msvc": "1.0.1",
-        "@rolldown/binding-win32-x64-msvc": "1.0.1"
+        "@rolldown/binding-android-arm64": "1.0.2",
+        "@rolldown/binding-darwin-arm64": "1.0.2",
+        "@rolldown/binding-darwin-x64": "1.0.2",
+        "@rolldown/binding-freebsd-x64": "1.0.2",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.2",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.2",
+        "@rolldown/binding-linux-arm64-musl": "1.0.2",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.2",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.2",
+        "@rolldown/binding-linux-x64-gnu": "1.0.2",
+        "@rolldown/binding-linux-x64-musl": "1.0.2",
+        "@rolldown/binding-openharmony-arm64": "1.0.2",
+        "@rolldown/binding-wasm32-wasi": "1.0.2",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.2",
+        "@rolldown/binding-win32-x64-msvc": "1.0.2"
       }
     },
     "node_modules/run-parallel": {
@@ -4930,6 +5309,19 @@
       "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
       "license": "MIT"
     },
+    "node_modules/semver": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.1.tgz",
+      "integrity": "sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/set-cookie-parser": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
@@ -5003,6 +5395,19 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -5373,16 +5778,16 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "8.0.13",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.13.tgz",
-      "integrity": "sha512-MFtjBYgzmSxmgA4RAfjIyXWpGe1oALnjgUTzzV7QLx/TKxCzjtMH6Fd9/eVK+5Fg1qNoz5VAwsmMs/NofrmJvw==",
+      "version": "8.0.14",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.14.tgz",
+      "integrity": "sha512-s4BJJ+5y1pYL6Otw51FHhVJQhPnuRinKig64g/1+EUNaJsd3gCKdD31IPFvswUgW9/60QT9oFHbZHbQK5imcxw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
-        "postcss": "^8.5.14",
-        "rolldown": "1.0.1",
+        "postcss": "^8.5.15",
+        "rolldown": "1.0.2",
         "tinyglobby": "^0.2.16"
       },
       "bin": {

adminfront/package.json

@@ -14,7 +14,8 @@
     "format": "biome format . --write",
     "preview": "vite preview",
     "test": "playwright test",
-    "test:unit": "vitest run",
+    "test:coverage": "vitest run --coverage --bail 1",
+    "test:unit": "vitest run --bail 1",
     "test:ui": "playwright test --ui",
     "i18n-scan": "cd .. && node tools/i18n-scanner/index.js && node tools/i18n-scanner/report.js"
   },
@@ -43,6 +44,7 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@biomejs/biome": "2.4.16",
     "@playwright/test": "^1.60.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -52,13 +54,15 @@
     "@types/react-dom": "^19.2.3",
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "4.1.6",
     "autoprefixer": "^10.5.0",
     "jsdom": "^28.1.0",
+    "playwright": "1.60.0",
     "postcss": "^8.5.14",
     "tailwindcss": "^3.4.19",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^6.0.3",
-    "vite": "^8.0.12",
+    "vite": "^8.0.14",
     "vitest": "^4.1.6"
   }
 }

adminfront/playwright.config.ts

@@ -14,6 +14,8 @@ const port = Number.parseInt(process.env.PORT ?? "5173", 10);
 const defaultBaseUrl = `http://127.0.0.1:${port}`;
 const baseURL = process.env.BASE_URL ?? defaultBaseUrl;
 const reuseExistingServer = !process.env.CI && !process.env.PORT;
+const usePreviewServer =
+  process.env.CI === "true" || process.env.PLAYWRIGHT_USE_PREVIEW === "true";
 const chromiumExecutablePath = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH;
 
 /**
@@ -84,11 +86,11 @@ export default defineConfig({
   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,
+        command: usePreviewServer
+          ? `pnpm exec vite preview --host 127.0.0.1 --port ${port} --strictPort`
+          : `pnpm exec vite --host 127.0.0.1 --port ${port} --strictPort`,
+        url: `http://127.0.0.1:${port}`,
         reuseExistingServer,
-        timeout: 120 * 1000,
+        timeout: 180 * 1000,
       },
 });

adminfront/pnpm-lock.yaml

@@ -75,6 +75,9 @@ importers:
         specifier: ^4.4.3
         version: 4.4.3
     devDependencies:
+      '@biomejs/biome':
+        specifier: 2.4.16
+        version: 2.4.16
       '@playwright/test':
         specifier: ^1.60.0
         version: 1.60.0
@@ -101,13 +104,19 @@ importers:
         version: 5.3.3
       '@vitejs/plugin-react':
         specifier: ^6.0.1
-        version: 6.0.2(vite@8.0.13(@types/node@25.8.0)(jiti@1.21.7))
+        version: 6.0.2(vite@8.0.14(@types/node@25.8.0)(jiti@1.21.7))
+      '@vitest/coverage-v8':
+        specifier: 4.1.6
+        version: 4.1.6(vitest@4.1.6)
       autoprefixer:
         specifier: ^10.5.0
         version: 10.5.0(postcss@8.5.14)
       jsdom:
         specifier: ^28.1.0
         version: 28.1.0
+      playwright:
+        specifier: 1.60.0
+        version: 1.60.0
       postcss:
         specifier: ^8.5.14
         version: 8.5.14
@@ -121,11 +130,11 @@ importers:
         specifier: ^6.0.3
         version: 6.0.3
       vite:
-        specifier: ^8.0.12
-        version: 8.0.13(@types/node@25.8.0)(jiti@1.21.7)
+        specifier: ^8.0.14
+        version: 8.0.14(@types/node@25.8.0)(jiti@1.21.7)
       vitest:
         specifier: ^4.1.6
-        version: 4.1.6(@types/node@25.8.0)(jsdom@28.1.0)(vite@8.0.13(@types/node@25.8.0)(jiti@1.21.7))
+        version: 4.1.6(@types/node@25.8.0)(@vitest/coverage-v8@4.1.6)(jsdom@28.1.0)(vite@8.0.14(@types/node@25.8.0)(jiti@1.21.7))
 
 packages:
 
@@ -157,14 +166,92 @@ packages:
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-identifier@7.28.5':
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.7':
+    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/runtime@7.29.2':
     resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.29.7':
+    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
+    engines: {node: '>=6.9.0'}
+
+  '@bcoe/v8-coverage@1.0.2':
+    resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
+    engines: {node: '>=18'}
+
+  '@biomejs/biome@2.4.16':
+    resolution: {integrity: sha512-x9ajFh1zChVybCiM3TN6OD4phAqLgtPZjFrZF+aTMYCPjwBO+k529TX7PPsAqtGNLeV4UgzwQnowEgS7bGmzcA==}
+    engines: {node: '>=14.21.3'}
+    hasBin: true
+
+  '@biomejs/cli-darwin-arm64@2.4.16':
+    resolution: {integrity: sha512-wxPvu4XOA85YJk9ixSWUmq/QBHbid85BISbOAqqBM/5xQpPk9ayjk5375tOlSC0BeCwNSbPFafQBm+vBumXq0A==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@biomejs/cli-darwin-x64@2.4.16':
+    resolution: {integrity: sha512-xFCqGPwYusQJp4N4NJLi1XJiZqjwFdjhT+KqtNy+Ug3qgfczqnTa6MSDvxJF6TkuDLoYJItMapz6tAf7kCekFw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@biomejs/cli-linux-arm64-musl@2.4.16':
+    resolution: {integrity: sha512-oYxnW0ARfJkr72ezzF2OR8N/rtkgLUQeYtF8cFhVswbknHxtTcmzSsanVJP8yQKnGpGpc2ck6c5zLvHahL6Cbg==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@biomejs/cli-linux-arm64@2.4.16':
+    resolution: {integrity: sha512-2kFb4//jxfZaP6D+Rj5VkHkxgyD9EoRAVBEQb8PKRv+s4NO2zYNJKXFaJmK1CmhufJOWEfpHKaRbOja7qjmdhQ==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@biomejs/cli-linux-x64-musl@2.4.16':
+    resolution: {integrity: sha512-iHDS+MCM65DPqWGu+ECC3uoALyj2H7F4nVUPxIPjz/PIl94EUu+EDfGZDzFP+NY1EOPVt9NQvwFqq7HdMmowdg==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@biomejs/cli-linux-x64@2.4.16':
+    resolution: {integrity: sha512-NbcBbi/nJqn5baae6wqRXdS7Gadf2uRpehSh6vMSYpG8OhkXl/Xg8aorWrJ+9VWqAT5ml90alLvorkpMW0nBwQ==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@biomejs/cli-win32-arm64@2.4.16':
+    resolution: {integrity: sha512-0rgImMsNb5v/chhkIFe3wu7PEFClS6RBAYUijGL9UsYN3PanSaoK24HSSuSJb1pYbYYVjzAyZTl3gtjJ84BM8A==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@biomejs/cli-win32-x64@2.4.16':
+    resolution: {integrity: sha512-Kp85jgoBHa05gix6UIRjfCDiUV3w/8VIdZ247VyyO2gEjaw12WEVhdIjlxp/AMzXxqxQwbxNTDVZ3Mwd2RG5rw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [win32]
+
   '@bramus/specificity@2.4.2':
     resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
     hasBin: true
@@ -269,8 +356,8 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@oxc-project/types@0.130.0':
-    resolution: {integrity: sha512-ibD2usx9JRu7f5pu2tMKMI4cpA4NgXJQoYRP4pQ7Pxmn1l6k/53qWtQWZayhYy3X4QZkt90Ot+mJEaeXouio6Q==}
+  '@oxc-project/types@0.132.0':
+    resolution: {integrity: sha512-FESMOxil5Se014ui/Eq8fT5uHJo6nIRwH0PfJrZJXs6Gek3ZVFOrpUv3YIZT20m+extU98Hg1Ym72U58rlsxUQ==}
 
   '@playwright/test@1.60.0':
     resolution: {integrity: sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==}
@@ -673,97 +760,97 @@ packages:
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
-  '@rolldown/binding-android-arm64@1.0.1':
-    resolution: {integrity: sha512-fJI3I0r3C3Oj/zdBCpaCmBRZYf07xpaq4yCfDDoSFm+beWNzbIl26puW8RraUdugoJw/95zerNOn6jasAhzSmg==}
+  '@rolldown/binding-android-arm64@1.0.2':
+    resolution: {integrity: sha512-ZS4D1JPGn/MYQN/SYDWftIE/nVsM8j/AFOYEzAoOE2O3NktQOZru+/vYXGbR/qtdLdIfGCP0lcoJiYVzsEz+iQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-darwin-arm64@1.0.1':
-    resolution: {integrity: sha512-cKnAhWEsV7TPcA/5EAteDp6KcJZBQ2G+BqE7zayMMi7kMvwRsbv7WT9aOnn0WNl4SKEIf43vjS31iUPu80nzXg==}
+  '@rolldown/binding-darwin-arm64@1.0.2':
+    resolution: {integrity: sha512-vdFA9+C/rekyGce7WqHs/xoT0ioZEWaOFyZLIV1mEeNFaFDUQrPIo8Vs2GvJ6eetb3rzDUtUBgzto3ExpXJB3w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.0.1':
-    resolution: {integrity: sha512-YKrVwQjIRBPo+5G/u03wGjbdy4q7pyzCe93DK9VJ7zkVmeg8LJ7GbgsiHWdR4xSoe4CAXRD7Bcjgbtr64bkXNg==}
+  '@rolldown/binding-darwin-x64@1.0.2':
+    resolution: {integrity: sha512-BewSOwTHazv77DTYiAZXSqqKZ4KP/KonFisDMVU7PImxoWfB2aepnPhd2E4SWz3zDzYgDNbs6jBmTdgNnF02GA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-freebsd-x64@1.0.1':
-    resolution: {integrity: sha512-z/oBsREo46SsFqBwYtFe0kpJeBijAT48O/WXLI4suiCLBkr03RTtTJMCzSdDd2znlh8VJizL09XVkQgk8IZonw==}
+  '@rolldown/binding-freebsd-x64@1.0.2':
+    resolution: {integrity: sha512-m41o7M0YWtUdqk61Tb+jnKb2rN++iRdIASlExkUoKfIAH30DOHCB8fVLzSUpbWHHU8esmEioY62PxzexE8MBuA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.1':
-    resolution: {integrity: sha512-ik8q7GM11zxvYxFc2PeDcT6TBvhCQMaUxfph/M5l9sKuTs/Sjg3L+Byw0F7w0ZVLBZmx30P+gG0ECzzN+MFcmQ==}
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.2':
+    resolution: {integrity: sha512-jcojB9H7W/jS29pMKWAK1N+fU99vXodHDTatS3b3y/XSOCiHo0kkA74pL3jJmkoQtYpOCxDvaKs1fo2Ij/1X5w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.1':
-    resolution: {integrity: sha512-QoSx2EkyrrdZ6kcyE8stqZ62t0Yra8Fs5ia9lOxJrh6TMQJK7gQKmscdTHf7pOXKREKrVwOtJcQG3qVSfc866A==}
+  '@rolldown/binding-linux-arm64-gnu@1.0.2':
+    resolution: {integrity: sha512-1jn6qDU5iiOgFgygDzKUuKP0maTi0/f1+sBLgvij/76C77Nm3ts6ufz9Bjg5q5dduxiUIxtq86JIoBvo1xQ4Ig==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-arm64-musl@1.0.1':
-    resolution: {integrity: sha512-uwNwFpwKeNiZawfAWBgg0VIztPTV3ihhh1vV334h9ivnNLorxnQMU6Fz8wG1Zb4Qh9LC1/MkcyT3YlDXG3Rsgg==}
+  '@rolldown/binding-linux-arm64-musl@1.0.2':
+    resolution: {integrity: sha512-QVLO/czFMdoMFSqlX3bcswcJNm/23r+qoa/jgtmFc/qEp6/jXmIkDjF/XIo8dPfGaiwy1xfQn8o77L79GeXFgw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-ppc64-gnu@1.0.1':
-    resolution: {integrity: sha512-zY1bul7OWr7DFBiJ++wofXvnr8B45ce3QsQUhKrIhXsygAh7bTkwyeM1bi1a2g5C/yC/N8TZyGDEoMfm/l9mpg==}
+  '@rolldown/binding-linux-ppc64-gnu@1.0.2':
+    resolution: {integrity: sha512-hgO5Abm0w5UL6FEa2iFnZqo2KlK7TQ5QhV5x09hujBf7t5KzHQ1VmfPuTpqRy/rNlSxua3eWH374xxiVrP+lcA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-s390x-gnu@1.0.1':
-    resolution: {integrity: sha512-0frlsT/f4Ft6I7SMESTKnF3cZsdicQn1dCMkF/jT9wDLE+gGoiQfv1nmT9e+s7s/fekvvy6tZM2jHvI2tkbJDQ==}
+  '@rolldown/binding-linux-s390x-gnu@1.0.2':
+    resolution: {integrity: sha512-fy8rXxuYEu602abC8MUNaPjYLIFzReOaEIEMKMUa0rFEUxNpVXhs15KSSQ4qlqSaM7B6rcj9rDZgADh/IGDzLQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-gnu@1.0.1':
-    resolution: {integrity: sha512-XABVmGp9Tg0WspTVvwduTc4fpqy6JnAUrSQe6OuyqD/03nI7r0O9OWUkMIwFrjKAIqolvqoA4ZrJppgwE0Gxmw==}
+  '@rolldown/binding-linux-x64-gnu@1.0.2':
+    resolution: {integrity: sha512-0+bOkiQ779+r1WpoHOWHqncvyySci0vKph+myNDYb+im6meJAzHQXay6oEgnkHuUGouM1LKTZwqKpBow6Kj7CQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-musl@1.0.1':
-    resolution: {integrity: sha512-bV4fzswuzVcKD90o/VM6QqKxnxlDq0g2BISDLNVmxrnhpv1DDbyPhCIjYfvzYLV+MvkKKnQt2Q6AO86SEBULUQ==}
+  '@rolldown/binding-linux-x64-musl@1.0.2':
+    resolution: {integrity: sha512-mjSkrzZK5Qsl0a9d1JgILOiuZOSDTVdKENcSXBoqbzSrspLR/4/IRVDo5wd2GgZjNss/viBFJdeq+j7qH2nypw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-openharmony-arm64@1.0.1':
-    resolution: {integrity: sha512-/Mh0Zhq3OP7fVs0kcQHZP6lZEthMGTaSf8UBQYSFEZDWGXXlEC+nJ6EqenaK2t4LBXMe3A+K/G2BVXXdtOr4PQ==}
+  '@rolldown/binding-openharmony-arm64@1.0.2':
+    resolution: {integrity: sha512-1v5vHasdfQAZoEHakBV72LIFAC9JjnymsiKxp+GEr/ma3+NJCPSaYK+qavInOovJkgwFrs7GccX2d6IgDA3Z5w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-wasm32-wasi@1.0.1':
-    resolution: {integrity: sha512-+1xc9X45l8ufsBAm6Gjvx2qDRIY9lTVt0cgWNcJ+1gdhXvkbxePA60yRTwSTuXL09CMhyJmjpV7E3NoyxbqFQQ==}
+  '@rolldown/binding-wasm32-wasi@1.0.2':
+    resolution: {integrity: sha512-mb1VobWn6NheziTk5/WEaR6AKVbrwT5sOi6C7zk3gy/pD1qtJfU1j4PgTo2NJnOtbL9Dl3Aeei8w9jJ7qC2jZQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [wasm32]
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.1':
-    resolution: {integrity: sha512-1D+UqZdfnuR+Jy1GgMJwi85bD40H21uNmOPRWQhw4oRSuolZ/B5rixZ45DK2KXOTCvmVCecauWgEhbw8bI7tOw==}
+  '@rolldown/binding-win32-arm64-msvc@1.0.2':
+    resolution: {integrity: sha512-SqKonF56vA/L2yHwHYcEp2P34URpOZ7d1fS635cTkpDnUtEGdUbhI6NzsPdqeSWvAAeGDrxjWjNmibDIdFf9/A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.0.1':
-    resolution: {integrity: sha512-INAycaWuhlOK3wk4mRHGsdgwYWmd9cChdPdE9bwWmy6rn9VqVNYNFGhOdXrofXUxwHIncSiPNb8tNm8knDVIeQ==}
+  '@rolldown/binding-win32-x64-msvc@1.0.2':
+    resolution: {integrity: sha512-v7qRI7gXLRINcOGXt+7YmAZ6iFuyZVMIoXAxhd8oP+DR9dLfL9GfNIx7PLMxmhZdvq8waUJBQiWN9EKNy+TRBQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
@@ -877,6 +964,15 @@ packages:
       babel-plugin-react-compiler:
         optional: true
 
+  '@vitest/coverage-v8@4.1.6':
+    resolution: {integrity: sha512-36l628fQ/9a/8ihy97eOtEnvWQEdqULQOJtcaxtoNq0G1w3Mxd4szSahOaMM9/NGyZ+hyKcMtIW/WIxq0XQViQ==}
+    peerDependencies:
+      '@vitest/browser': 4.1.6
+      vitest: 4.1.6
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
+
   '@vitest/expect@4.1.6':
     resolution: {integrity: sha512-7EHDquPthALSV0jhhjgEW8FXaviMx7rSqu8W6oqCoAuOhKov814P99QDV1pxMA3QPv21YudvJngIhjrNI4opLg==}
 
@@ -947,6 +1043,9 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
+  ast-v8-to-istanbul@1.0.2:
+    resolution: {integrity: sha512-dKmJxJsGItLmc5CYZKuEjuG6GnBs6PG4gohMhyFOWKaNQoYCuRZJDECaBlHmcG0lv2wc2E0uU8lESmBEumC3DQ==}
+
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
@@ -1198,6 +1297,10 @@ packages:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
 
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
   has-symbols@1.1.0:
     resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
     engines: {node: '>= 0.4'}
@@ -1214,6 +1317,9 @@ packages:
     resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
 
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -1253,10 +1359,25 @@ packages:
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+
+  istanbul-reports@3.2.0:
+    resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==}
+    engines: {node: '>=8'}
+
   jiti@1.21.7:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
 
+  js-tokens@10.0.0:
+    resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -1370,6 +1491,13 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
+  magicast@0.5.3:
+    resolution: {integrity: sha512-pVKE4UdSQ7DvHzivsCIFx2BJn1mHG6KsyrFcaxFx6tONdneEuThrDx0Cj3AMg58KyN4pzYT+LHOotxDQDjNvkw==}
+
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -1515,6 +1643,10 @@ packages:
     resolution: {integrity: sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.15:
+    resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
+    engines: {node: ^10 || ^12 || >=14}
+
   pretty-format@27.5.1:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -1626,8 +1758,8 @@ packages:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
-  rolldown@1.0.1:
-    resolution: {integrity: sha512-X0KQHljNnEkWNqqiz9zJrGunh1B0HgOxLXvnFpCOcadzcy5qohZ3tqMEUg00vncoRovXuK3ZqCT9KnnKzoInFQ==}
+  rolldown@1.0.2:
+    resolution: {integrity: sha512-oZx5zVDtVB44AW3eaifgDml1gWRDZGvjcfdxonE4swNPG98PrrXjaO/KrnUjzlMnztCCRVlUueA1kCXhARGk6g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -1641,6 +1773,11 @@ packages:
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
+  semver@7.8.1:
+    resolution: {integrity: sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   set-cookie-parser@2.7.2:
     resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
 
@@ -1666,6 +1803,10 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
   supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
@@ -1779,8 +1920,8 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  vite@8.0.13:
-    resolution: {integrity: sha512-MFtjBYgzmSxmgA4RAfjIyXWpGe1oALnjgUTzzV7QLx/TKxCzjtMH6Fd9/eVK+5Fg1qNoz5VAwsmMs/NofrmJvw==}
+  vite@8.0.14:
+    resolution: {integrity: sha512-s4BJJ+5y1pYL6Otw51FHhVJQhPnuRinKig64g/1+EUNaJsd3gCKdD31IPFvswUgW9/60QT9oFHbZHbQK5imcxw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -1928,10 +2069,60 @@ snapshots:
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
+  '@babel/helper-string-parser@7.29.7': {}
+
   '@babel/helper-validator-identifier@7.28.5': {}
 
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@babel/parser@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
   '@babel/runtime@7.29.2': {}
 
+  '@babel/types@7.29.7':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@bcoe/v8-coverage@1.0.2': {}
+
+  '@biomejs/biome@2.4.16':
+    optionalDependencies:
+      '@biomejs/cli-darwin-arm64': 2.4.16
+      '@biomejs/cli-darwin-x64': 2.4.16
+      '@biomejs/cli-linux-arm64': 2.4.16
+      '@biomejs/cli-linux-arm64-musl': 2.4.16
+      '@biomejs/cli-linux-x64': 2.4.16
+      '@biomejs/cli-linux-x64-musl': 2.4.16
+      '@biomejs/cli-win32-arm64': 2.4.16
+      '@biomejs/cli-win32-x64': 2.4.16
+
+  '@biomejs/cli-darwin-arm64@2.4.16':
+    optional: true
+
+  '@biomejs/cli-darwin-x64@2.4.16':
+    optional: true
+
+  '@biomejs/cli-linux-arm64-musl@2.4.16':
+    optional: true
+
+  '@biomejs/cli-linux-arm64@2.4.16':
+    optional: true
+
+  '@biomejs/cli-linux-x64-musl@2.4.16':
+    optional: true
+
+  '@biomejs/cli-linux-x64@2.4.16':
+    optional: true
+
+  '@biomejs/cli-win32-arm64@2.4.16':
+    optional: true
+
+  '@biomejs/cli-win32-x64@2.4.16':
+    optional: true
+
   '@bramus/specificity@2.4.2':
     dependencies:
       css-tree: 3.2.1
@@ -2028,7 +2219,7 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.20.1
 
-  '@oxc-project/types@0.130.0': {}
+  '@oxc-project/types@0.132.0': {}
 
   '@playwright/test@1.60.0':
     dependencies:
@@ -2416,53 +2607,53 @@ snapshots:
 
   '@radix-ui/rect@1.1.1': {}
 
-  '@rolldown/binding-android-arm64@1.0.1':
+  '@rolldown/binding-android-arm64@1.0.2':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.0.1':
+  '@rolldown/binding-darwin-arm64@1.0.2':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.0.1':
+  '@rolldown/binding-darwin-x64@1.0.2':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.0.1':
+  '@rolldown/binding-freebsd-x64@1.0.2':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.1':
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.2':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.1':
+  '@rolldown/binding-linux-arm64-gnu@1.0.2':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.0.1':
+  '@rolldown/binding-linux-arm64-musl@1.0.2':
     optional: true
 
-  '@rolldown/binding-linux-ppc64-gnu@1.0.1':
+  '@rolldown/binding-linux-ppc64-gnu@1.0.2':
     optional: true
 
-  '@rolldown/binding-linux-s390x-gnu@1.0.1':
+  '@rolldown/binding-linux-s390x-gnu@1.0.2':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.0.1':
+  '@rolldown/binding-linux-x64-gnu@1.0.2':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.0.1':
+  '@rolldown/binding-linux-x64-musl@1.0.2':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.0.1':
+  '@rolldown/binding-openharmony-arm64@1.0.2':
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.0.1':
+  '@rolldown/binding-wasm32-wasi@1.0.2':
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
       '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.1':
+  '@rolldown/binding-win32-arm64-msvc@1.0.2':
     optional: true
 
-  '@rolldown/binding-win32-x64-msvc@1.0.1':
+  '@rolldown/binding-win32-x64-msvc@1.0.2':
     optional: true
 
   '@rolldown/pluginutils@1.0.1': {}
@@ -2567,10 +2758,24 @@ snapshots:
     dependencies:
       csstype: 3.2.3
 
-  '@vitejs/plugin-react@6.0.2(vite@8.0.13(@types/node@25.8.0)(jiti@1.21.7))':
+  '@vitejs/plugin-react@6.0.2(vite@8.0.14(@types/node@25.8.0)(jiti@1.21.7))':
     dependencies:
       '@rolldown/pluginutils': 1.0.1
-      vite: 8.0.13(@types/node@25.8.0)(jiti@1.21.7)
+      vite: 8.0.14(@types/node@25.8.0)(jiti@1.21.7)
+
+  '@vitest/coverage-v8@4.1.6(vitest@4.1.6)':
+    dependencies:
+      '@bcoe/v8-coverage': 1.0.2
+      '@vitest/utils': 4.1.6
+      ast-v8-to-istanbul: 1.0.2
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-reports: 3.2.0
+      magicast: 0.5.3
+      obug: 2.1.1
+      std-env: 4.1.0
+      tinyrainbow: 3.1.0
+      vitest: 4.1.6(@types/node@25.8.0)(@vitest/coverage-v8@4.1.6)(jsdom@28.1.0)(vite@8.0.14(@types/node@25.8.0)(jiti@1.21.7))
 
   '@vitest/expect@4.1.6':
     dependencies:
@@ -2581,13 +2786,13 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.1.6(vite@8.0.13(@types/node@25.8.0)(jiti@1.21.7))':
+  '@vitest/mocker@4.1.6(vite@8.0.14(@types/node@25.8.0)(jiti@1.21.7))':
     dependencies:
       '@vitest/spy': 4.1.6
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 8.0.13(@types/node@25.8.0)(jiti@1.21.7)
+      vite: 8.0.14(@types/node@25.8.0)(jiti@1.21.7)
 
   '@vitest/pretty-format@4.1.6':
     dependencies:
@@ -2646,6 +2851,12 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
+  ast-v8-to-istanbul@1.0.2:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      estree-walker: 3.0.3
+      js-tokens: 10.0.0
+
   asynckit@0.4.0: {}
 
   autoprefixer@10.5.0(postcss@8.5.14):
@@ -2878,6 +3089,8 @@ snapshots:
 
   gopd@1.2.0: {}
 
+  has-flag@4.0.0: {}
+
   has-symbols@1.1.0: {}
 
   has-tostringtag@1.0.2:
@@ -2894,6 +3107,8 @@ snapshots:
     transitivePeerDependencies:
       - '@noble/hashes'
 
+  html-escaper@2.0.2: {}
+
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.4
@@ -2935,8 +3150,23 @@ snapshots:
 
   is-potential-custom-element-name@1.0.1: {}
 
+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-report@3.0.1:
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+
+  istanbul-reports@3.2.0:
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+
   jiti@1.21.7: {}
 
+  js-tokens@10.0.0: {}
+
   js-tokens@4.0.0: {}
 
   jsdom@28.1.0:
@@ -3033,6 +3263,16 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  magicast@0.5.3:
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      source-map-js: 1.2.1
+
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.8.1
+
   math-intrinsics@1.1.0: {}
 
   mdn-data@2.27.1: {}
@@ -3139,6 +3379,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.15:
+    dependencies:
+      nanoid: 3.3.12
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   pretty-format@27.5.1:
     dependencies:
       ansi-regex: 5.0.1
@@ -3234,26 +3480,26 @@ snapshots:
 
   reusify@1.1.0: {}
 
-  rolldown@1.0.1:
+  rolldown@1.0.2:
     dependencies:
-      '@oxc-project/types': 0.130.0
+      '@oxc-project/types': 0.132.0
       '@rolldown/pluginutils': 1.0.1
     optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.0.1
-      '@rolldown/binding-darwin-arm64': 1.0.1
-      '@rolldown/binding-darwin-x64': 1.0.1
-      '@rolldown/binding-freebsd-x64': 1.0.1
-      '@rolldown/binding-linux-arm-gnueabihf': 1.0.1
-      '@rolldown/binding-linux-arm64-gnu': 1.0.1
-      '@rolldown/binding-linux-arm64-musl': 1.0.1
-      '@rolldown/binding-linux-ppc64-gnu': 1.0.1
-      '@rolldown/binding-linux-s390x-gnu': 1.0.1
-      '@rolldown/binding-linux-x64-gnu': 1.0.1
-      '@rolldown/binding-linux-x64-musl': 1.0.1
-      '@rolldown/binding-openharmony-arm64': 1.0.1
-      '@rolldown/binding-wasm32-wasi': 1.0.1
-      '@rolldown/binding-win32-arm64-msvc': 1.0.1
-      '@rolldown/binding-win32-x64-msvc': 1.0.1
+      '@rolldown/binding-android-arm64': 1.0.2
+      '@rolldown/binding-darwin-arm64': 1.0.2
+      '@rolldown/binding-darwin-x64': 1.0.2
+      '@rolldown/binding-freebsd-x64': 1.0.2
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.2
+      '@rolldown/binding-linux-arm64-gnu': 1.0.2
+      '@rolldown/binding-linux-arm64-musl': 1.0.2
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.2
+      '@rolldown/binding-linux-s390x-gnu': 1.0.2
+      '@rolldown/binding-linux-x64-gnu': 1.0.2
+      '@rolldown/binding-linux-x64-musl': 1.0.2
+      '@rolldown/binding-openharmony-arm64': 1.0.2
+      '@rolldown/binding-wasm32-wasi': 1.0.2
+      '@rolldown/binding-win32-arm64-msvc': 1.0.2
+      '@rolldown/binding-win32-x64-msvc': 1.0.2
 
   run-parallel@1.2.0:
     dependencies:
@@ -3265,6 +3511,8 @@ snapshots:
 
   scheduler@0.27.0: {}
 
+  semver@7.8.1: {}
+
   set-cookie-parser@2.7.2: {}
 
   siginfo@2.0.0: {}
@@ -3289,6 +3537,10 @@ snapshots:
       tinyglobby: 0.2.16
       ts-interface-checker: 0.1.13
 
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
   supports-preserve-symlinks-flag@1.0.0: {}
 
   symbol-tree@3.2.4: {}
@@ -3401,22 +3653,22 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  vite@8.0.13(@types/node@25.8.0)(jiti@1.21.7):
+  vite@8.0.14(@types/node@25.8.0)(jiti@1.21.7):
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.4
-      postcss: 8.5.14
-      rolldown: 1.0.1
+      postcss: 8.5.15
+      rolldown: 1.0.2
       tinyglobby: 0.2.16
     optionalDependencies:
       '@types/node': 25.8.0
       fsevents: 2.3.3
       jiti: 1.21.7
 
-  vitest@4.1.6(@types/node@25.8.0)(jsdom@28.1.0)(vite@8.0.13(@types/node@25.8.0)(jiti@1.21.7)):
+  vitest@4.1.6(@types/node@25.8.0)(@vitest/coverage-v8@4.1.6)(jsdom@28.1.0)(vite@8.0.14(@types/node@25.8.0)(jiti@1.21.7)):
     dependencies:
       '@vitest/expect': 4.1.6
-      '@vitest/mocker': 4.1.6(vite@8.0.13(@types/node@25.8.0)(jiti@1.21.7))
+      '@vitest/mocker': 4.1.6(vite@8.0.14(@types/node@25.8.0)(jiti@1.21.7))
       '@vitest/pretty-format': 4.1.6
       '@vitest/runner': 4.1.6
       '@vitest/snapshot': 4.1.6
@@ -3433,10 +3685,11 @@ snapshots:
       tinyexec: 1.1.2
       tinyglobby: 0.2.16
       tinyrainbow: 3.1.0
-      vite: 8.0.13(@types/node@25.8.0)(jiti@1.21.7)
+      vite: 8.0.14(@types/node@25.8.0)(jiti@1.21.7)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 25.8.0
+      '@vitest/coverage-v8': 4.1.6(vitest@4.1.6)
       jsdom: 28.1.0
     transitivePeerDependencies:
       - msw

adminfront/public/LINE_WORKS_Appicon.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.5556 0H6.44444C2.88528 0 0 2.88528 0 6.44444V23.5556C0 27.1147 2.88528 30 6.44444 30H23.5556C27.1147 30 30 27.1147 30 23.5556V6.44444C30 2.88528 27.1147 0 23.5556 0Z" fill="white"/>
+<path d="M9.01667 23.2633H12.3633C12.4481 23.2637 12.5307 23.2363 12.5985 23.1853C12.6663 23.1344 12.7156 23.0627 12.7389 22.9811L17.0489 8.12111C17.0658 8.06285 17.0689 8.00146 17.058 7.9418C17.047 7.88214 17.0224 7.82583 16.986 7.77733C16.9495 7.72883 16.9023 7.68947 16.8481 7.66236C16.7938 7.63525 16.734 7.62112 16.6733 7.62111H13.3267C13.2419 7.62113 13.1595 7.64866 13.0918 7.69955C13.0241 7.75045 12.9747 7.82196 12.9511 7.90333L8.64222 22.7633C8.62512 22.8215 8.62182 22.8829 8.63258 22.9425C8.64334 23.0022 8.66787 23.0586 8.70422 23.1071C8.74057 23.1556 8.78773 23.195 8.84197 23.2222C8.89621 23.2493 8.95603 23.2634 9.01667 23.2633Z" fill="#028B3A"/>
+<path d="M18.0122 23.2633H21.3589C21.4436 23.2633 21.526 23.2358 21.5938 23.1849C21.6615 23.134 21.7109 23.0625 21.7344 22.9811L26.0433 8.12111C26.0602 8.06285 26.0633 8.00146 26.0524 7.9418C26.0415 7.88214 26.0168 7.82583 25.9804 7.77733C25.944 7.72883 25.8968 7.68947 25.8425 7.66236C25.7883 7.63525 25.7284 7.62112 25.6678 7.62111H22.3211C22.2364 7.62131 22.1541 7.64891 22.0864 7.69977C22.0187 7.75064 21.9693 7.82205 21.9456 7.90333L17.6367 22.7633C17.6195 22.8216 17.6163 22.8831 17.6271 22.9428C17.6379 23.0026 17.6625 23.059 17.699 23.1076C17.7355 23.1561 17.7828 23.1955 17.8372 23.2225C17.8915 23.2496 17.9515 23.2635 18.0122 23.2633Z" fill="#88E518"/>
+<path d="M12.3633 23.2633H8.64222C8.55741 23.2637 8.47481 23.2363 8.40701 23.1853C8.33921 23.1344 8.28993 23.0627 8.26666 22.9811L3.95666 8.12111C3.93977 8.06285 3.93667 8.00146 3.94759 7.9418C3.95851 7.88214 3.98316 7.82583 4.01959 7.77733C4.05602 7.72883 4.10322 7.68947 4.15748 7.66236C4.21174 7.63525 4.27156 7.62112 4.33222 7.62111H8.05444C8.13911 7.62131 8.22145 7.64891 8.28915 7.69977C8.35684 7.75064 8.40625 7.82205 8.43 7.90333L12.7389 22.7633C12.756 22.8216 12.7593 22.8831 12.7485 22.9428C12.7377 23.0026 12.713 23.059 12.6765 23.1076C12.6401 23.1561 12.5928 23.1955 12.5384 23.2225C12.484 23.2496 12.4241 23.2635 12.3633 23.2633Z" fill="#7EE3A1"/>
+<path d="M21.3589 23.2633H17.6367C17.5519 23.2637 17.4693 23.2363 17.4015 23.1853C17.3337 23.1344 17.2844 23.0627 17.2611 22.9811L12.9511 8.12111C12.9342 8.06285 12.9311 8.00146 12.942 7.9418C12.953 7.88214 12.9776 7.82583 13.014 7.77733C13.0505 7.72883 13.0977 7.68947 13.1519 7.66236C13.2062 7.63525 13.266 7.62112 13.3267 7.62111H17.0489C17.1336 7.62113 17.216 7.64866 17.2838 7.69955C17.3515 7.75045 17.4009 7.82196 17.4244 7.90333L21.7344 22.7633C21.7513 22.8216 21.7544 22.883 21.7435 22.9426C21.7326 23.0023 21.7079 23.0586 21.6715 23.1071C21.6351 23.1556 21.5879 23.195 21.5336 23.2221C21.4794 23.2492 21.4195 23.2633 21.3589 23.2633Z" fill="#03C75A"/>
+</svg>

adminfront/scripts/runtime-mode.sh

@@ -36,15 +36,33 @@ if [ "${1:-}" = "--print-mode" ]; then
 fi
 
 ensure_frontend_dependencies() {
-  APP_WORKSPACE_FILTER="../adminfront"
+  APP_PACKAGE_NAME="adminfront"
 
-  # If common workspace exists, manage dependencies from the real workspace tree.
-  if [ -d /workspace/common ] && [ -f /workspace/common/package.json ]; then
-    WORKSPACE_DIR="/workspace/common"
-    LOCK_FILE="/workspace/common/pnpm-lock.yaml"
+  # Detect workspace root
+  if [ -f "/workspace/pnpm-workspace.yaml" ]; then
+    WORKSPACE_ROOT="/workspace"
+  elif [ -f "../../pnpm-workspace.yaml" ]; then
+    WORKSPACE_ROOT="../.."
+  else
+    WORKSPACE_ROOT=""
+  fi
+
+  # Manage dependencies from the real workspace tree if possible, otherwise use current dir.
+  if [ -n "$WORKSPACE_ROOT" ]; then
+    WORKSPACE_DIR="$WORKSPACE_ROOT"
+    LOCK_FILE="$WORKSPACE_ROOT/pnpm-lock.yaml"
+    COMMON_PACKAGE_FILE="$WORKSPACE_ROOT/common/package.json"
+    INSTALL_CMD="cd $WORKSPACE_ROOT && CI=true pnpm install --filter ${APP_PACKAGE_NAME}... --frozen-lockfile --ignore-scripts"
+  elif [ -f "pnpm-lock.yaml" ]; then
+    WORKSPACE_DIR="."
+    LOCK_FILE="pnpm-lock.yaml"
+    COMMON_PACKAGE_FILE="/workspace/common/package.json"
+    INSTALL_CMD="CI=true pnpm install --frozen-lockfile --ignore-scripts"
   else
     WORKSPACE_DIR="."
     LOCK_FILE="package-lock.json"
+    COMMON_PACKAGE_FILE="/workspace/common/package.json"
+    INSTALL_CMD="npm ci"
   fi
 
   if [ ! -f "$WORKSPACE_DIR/package.json" ]; then
@@ -85,9 +103,9 @@ ensure_frontend_dependencies() {
   }
 
   if command -v sha256sum >/dev/null 2>&1; then
-    deps_hash="$(sha256sum "$WORKSPACE_DIR/package.json" "$LOCK_FILE" 2>/dev/null | sha256sum | awk '{print $1}')"
+    deps_hash="$(sha256sum "$WORKSPACE_DIR/package.json" "$LOCK_FILE" "$COMMON_PACKAGE_FILE" package.json 2>/dev/null | sha256sum | awk '{print $1}')"
   else
-    deps_hash="$(cksum "$WORKSPACE_DIR/package.json" "$LOCK_FILE" 2>/dev/null | cksum | awk '{print $1}')"
+    deps_hash="$(cksum "$WORKSPACE_DIR/package.json" "$LOCK_FILE" "$COMMON_PACKAGE_FILE" package.json 2>/dev/null | cksum | awk '{print $1}')"
   fi
   deps_stamp="node_modules/.baron-deps-hash"
   installed_hash="$(cat "$deps_stamp" 2>/dev/null || true)"
@@ -96,20 +114,18 @@ ensure_frontend_dependencies() {
     echo "Installing frontend dependencies..."
     acquire_install_lock
     if command -v sha256sum >/dev/null 2>&1; then
-      deps_hash="$(sha256sum "$WORKSPACE_DIR/package.json" "$LOCK_FILE" 2>/dev/null | sha256sum | awk '{print $1}')"
+      deps_hash="$(sha256sum "$WORKSPACE_DIR/package.json" "$LOCK_FILE" "$COMMON_PACKAGE_FILE" package.json 2>/dev/null | sha256sum | awk '{print $1}')"
     else
-      deps_hash="$(cksum "$WORKSPACE_DIR/package.json" "$LOCK_FILE" 2>/dev/null | cksum | awk '{print $1}')"
+      deps_hash="$(cksum "$WORKSPACE_DIR/package.json" "$LOCK_FILE" "$COMMON_PACKAGE_FILE" package.json 2>/dev/null | cksum | awk '{print $1}')"
     fi
     installed_hash="$(cat "$deps_stamp" 2>/dev/null || true)"
     if [ "$installed_hash" = "$deps_hash" ]; then
       release_install_lock
       return 0
     fi
-    if [ "$WORKSPACE_DIR" = "/workspace/common" ]; then
-      (cd /workspace/common && pnpm install --filter "${APP_WORKSPACE_FILTER}..." --frozen-lockfile --ignore-scripts)
-    else
-      npm ci
-    fi
+    
+    eval "$INSTALL_CMD"
+    
     mkdir -p node_modules
     printf '%s\n' "$deps_hash" > "$deps_stamp"
     release_install_lock
@@ -120,6 +136,7 @@ ensure_frontend_dependencies
 
 if [ "$mode" = "production" ]; then
   echo "Running in production mode with custom static server..."
+  export ADMINFRONT_BUILD_OUT_DIR="${ADMINFRONT_BUILD_OUT_DIR:-/tmp/baron-sso-adminfront-dist}"
   exec sh -c "npm run build && node ./scripts/serve-prod.mjs"
 fi
 

adminfront/scripts/serve-prod.mjs

@@ -1,9 +1,9 @@
-import { createServer } from "node:http";
 import { readFile, stat } from "node:fs/promises";
+import { createServer } from "node:http";
 import { extname, join, normalize, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
-const rootDir = fileURLToPath(new URL("..", import.meta.url));
+const _rootDir = fileURLToPath(new URL("..", import.meta.url));
 const distDir = resolve(
   process.env.ADMINFRONT_BUILD_OUT_DIR ?? "/tmp/baron-sso-adminfront-dist",
 );
@@ -24,7 +24,9 @@ const contentTypes = {
 };
 
 function getContentType(filePath) {
-  return contentTypes[extname(filePath).toLowerCase()] ?? "application/octet-stream";
+  return (
+    contentTypes[extname(filePath).toLowerCase()] ?? "application/octet-stream"
+  );
 }
 
 function sendJson(res, statusCode, body) {
@@ -132,7 +134,10 @@ async function serveStatic(req, res, pathname) {
 
 createServer(async (req, res) => {
   try {
-    const url = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+    const url = new URL(
+      req.url ?? "/",
+      `http://${req.headers.host ?? "localhost"}`,
+    );
     const { pathname, search } = url;
 
     if (pathname === "/api" || pathname.startsWith("/api/")) {
@@ -149,5 +154,7 @@ createServer(async (req, res) => {
     });
   }
 }).listen(port, host, () => {
-  console.log(`Adminfront production server listening on http://${host}:${port}`);
+  console.log(
+    `Adminfront production server listening on http://${host}:${port}`,
+  );
 });

adminfront/seed-tenant.csv

@@ -1,11 +1,16 @@
-id,name,type,parent_tenant_slug,slug,memo,email_domain
-038326b6-954a-48a7-a85f-efd83f62b82a,한맥가족,COMPANY_GROUP,,hanmac-family,한맥가족 기본 루트 테넌트,
-9caf62e1-297d-4e8f-870b-61780998bbeb,삼안,COMPANY,hanmac-family,saman,네이버웍스 삼안 SAMAN_DOMAIN_ID, samaneng.com
-369c1843-56af-4344-9c21-0e01197ab861,한맥기술,COMPANY,hanmac-family,hanmac,네이버웍스 한맥 HANMAC_DOMAIN_ID, hanmaceng.co.kr
-5530ca6e-c5e6-4bf0-84d6-76c6a8fb70ee,총괄기획&기술개발센터,COMPANY,hanmac-family,gpdtdc,네이버웍스 총괄기획&기술개발센터 GPDTDC_DOMAIN_ID, baroncs.co.kr
-96369f12-6b66-4b2a-a916-d1c99d326f02,바론그룹,COMPANY_GROUP,hanmac-family,baron-group,네이버웍스 바론그룹 BARONGROUP_DOMAIN_ID,
-c18a8284-0008-48aa-9cdf-9f47ab79a2a9,(주)장헌,COMPANY,baron-group,jangheon,,jangheon.com
-b2fcf17f-7085-4bfe-9663-d8a2f2f4b2d6,장헌산업,COMPANY,baron-group,jangheon-sanup,,jangheon.co.kr
-5a03efd2-e62f-4243-800d-58334bf48b2f,한라산업개발,COMPANY,baron-group,hanlla,,hanllasanup.co.kr
-e57cb22c-383e-4489-8c2f-0c5431917e86,(주)피티씨,COMPANY,baron-group,ptc,,pre-cast.co.kr
-9607eb7b-04d2-42ab-80fe-780fe21c7e8f,Personal,PERSONAL,,personal,개인 사용자 기본 루트 테넌트,
+id,name,type,parent_tenant_slug,slug,memo,email_domain,visibility,org_unit_type,worksmobile_sync
+038326b6-954a-48a7-a85f-efd83f62b82a,한맥가족,COMPANY_GROUP,,hanmac-family,한맥가족 기본 루트 테넌트,,,,
+5530ca6e-c5e6-4bf0-84d6-76c6a8fb70ee,총괄기획&기술개발센터,COMPANY,hanmac-family,gpdtdc,네이버웍스 총괄기획&기술개발센터 GPDTDC_DOMAIN_ID, baroncs.co.kr,,,
+9caf62e1-297d-4e8f-870b-61780998bbeb,삼안,COMPANY,hanmac-family,saman,네이버웍스 삼안 SAMAN_DOMAIN_ID, samaneng.com,,,
+369c1843-56af-4344-9c21-0e01197ab861,한맥기술,COMPANY,hanmac-family,hanmac,네이버웍스 한맥 HANMAC_DOMAIN_ID, hanmaceng.co.kr,,,
+96369f12-6b66-4b2a-a916-d1c99d326f02,바론그룹,COMPANY_GROUP,hanmac-family,baron-group,네이버웍스 바론그룹 BARONGROUP_DOMAIN_ID,brsw.kr,,,
+5a03efd2-e62f-4243-800d-58334bf48b2f,한라산업개발,COMPANY,hanmac-family,halla,네이버웍스 한라 HALLA_DOMAIN_ID,hallasanup.com,,,
+c18a8284-0008-48aa-9cdf-9f47ab79a2a9,(주)장헌,COMPANY,baron-group,jangheon,,jangheon.com,,,
+b2fcf17f-7085-4bfe-9663-d8a2f2f4b2d6,장헌산업,COMPANY,baron-group,jangheon-sanup,,jangheon.co.kr,,,
+e57cb22c-383e-4489-8c2f-0c5431917e86,(주)피티씨,COMPANY,baron-group,ptc,,pre-cast.co.kr,,,
+4d0f26b9-702c-4bc6-8996-46e9eedfdeb7,MH_manager,USER_GROUP,hanmac-family,mhd,맨아워 대시보드 권한 보유자그룹,,private,,no
+e41adf79-3d15-4807-8303-afbdb0f2bab7,SW_uploader,USER_GROUP,hanmac-family,sw-uploader,소프트웨어 배포 권한 그룹,,private,,no
+ee2f39ac-fe52-4cfb-b4e3-4ae1d114c916,일반회사,COMPANY_GROUP,,commercial,외부 기업회원 루트 테넌트,,,,
+d19c10f0-0224-4bbb-bf3e-ce579c5338ea,공공기관,COMPANY_GROUP,,public-org,공공기관 기본 루트 테넌트,,,,
+78accec5-8eba-4324-b8f1-10ab360011fe,교육/학생,COMPANY_GROUP,,edu,교육기관 및 학생 기본 루트 테넌트,,,,
+9607eb7b-04d2-42ab-80fe-780fe21c7e8f,개인사용자,PERSONAL,,personal,개인 사용자 기본 루트 테넌트,,,,

adminfront/src/app/routes.test.tsx

@@ -16,10 +16,10 @@ describe("admin routes", () => {
     expect(matches?.at(-1)?.route.path).toBe("/auth/callback");
   });
 
-  it("registers the super-admin user projection management route", () => {
-    const matches = matchRoutes(adminRoutes, "/system/projections/users");
+  it("registers the super-admin Ory SSOT system route", () => {
+    const matches = matchRoutes(adminRoutes, "/system/ory-ssot");
 
-    expect(matches?.at(-1)?.route.path).toBe("system/projections/users");
+    expect(matches?.at(-1)?.route.path).toBe("system/ory-ssot");
   });
 
   it("registers the super-admin data integrity management route", () => {
@@ -28,6 +28,33 @@ describe("admin routes", () => {
     expect(matches?.at(-1)?.route.path).toBe("system/data-integrity");
   });
 
+  it("routes global custom claim settings before user detail id matching", async () => {
+    const matches = matchRoutes(adminRoutes, "/users/custom-claims");
+    const leafRoute = matches?.at(-1)?.route;
+
+    expect(leafRoute?.path).toBe("users/custom-claims");
+    expect(await getRouteComponentName(leafRoute)).toBe(
+      "GlobalCustomClaimsPage",
+    );
+  });
+
+  it("code-splits tenant detail profile routes away from the initial admin shell", () => {
+    const matches = matchRoutes(
+      adminRoutes,
+      "/tenants/56cd0fd7-b62a-43c0-8db9-74a30468d7cb",
+    );
+    const detailRoute = matches?.find(
+      (match) => match.route.path === "tenants/:tenantId",
+    )?.route;
+    const profileRoute = matches?.at(-1)?.route;
+
+    expect(detailRoute?.element).toBeUndefined();
+    expect(typeof detailRoute?.lazy).toBe("function");
+    expect(profileRoute?.index).toBe(true);
+    expect(profileRoute?.element).toBeUndefined();
+    expect(typeof profileRoute?.lazy).toBe("function");
+  });
+
   it("keeps protected admin pages behind an auth guard before mounting the layout", () => {
     const rootRoute = adminRoutes.find((route) => route.path === "/");
     const protectedShellRoute = rootRoute?.children?.[0];
@@ -38,6 +65,29 @@ describe("admin routes", () => {
   });
 });
 
+async function getRouteComponentName(route: unknown) {
+  if (
+    typeof route === "object" &&
+    route !== null &&
+    "lazy" in route &&
+    typeof route.lazy === "function"
+  ) {
+    const lazyRoute = await route.lazy();
+    if ("Component" in lazyRoute && typeof lazyRoute.Component === "function") {
+      return lazyRoute.Component.name;
+    }
+    if ("element" in lazyRoute) {
+      return getRouteElementName(lazyRoute.element);
+    }
+  }
+
+  if (typeof route === "object" && route !== null && "element" in route) {
+    return getRouteElementName(route.element);
+  }
+
+  return undefined;
+}
+
 function getRouteElementName(element: unknown) {
   if (
     typeof element === "object" &&

adminfront/src/app/routes.tsx

@@ -1,30 +1,33 @@
-import { createBrowserRouter } from "react-router-dom";
+import type { ComponentType } from "react";
 import type { RouteObject } from "react-router-dom";
+import { createBrowserRouter } from "react-router-dom";
 import AppLayout from "../components/layout/AppLayout";
-import ApiKeyCreatePage from "../features/api-keys/ApiKeyCreatePage";
-import ApiKeyListPage from "../features/api-keys/ApiKeyListPage";
-import AuditLogsPage from "../features/audit/AuditLogsPage";
 import AuthCallbackPage from "../features/auth/AuthCallbackPage";
 import AuthGuard from "../features/auth/AuthGuard";
-import AuthPage from "../features/auth/AuthPage";
 import LoginPage from "../features/auth/LoginPage";
-import DataIntegrityPage from "../features/integrity/DataIntegrityPage";
-import GlobalOverviewPage from "../features/overview/GlobalOverviewPage";
-import UserProjectionPage from "../features/projections/UserProjectionPage";
-import { TenantAdminsAndOwnersTab } from "../features/tenants/routes/TenantAdminsAndOwnersTab";
-import TenantCreatePage from "../features/tenants/routes/TenantCreatePage";
-import TenantDetailPage from "../features/tenants/routes/TenantDetailPage";
-import TenantListPage from "../features/tenants/routes/TenantListPage";
-import { TenantProfilePage } from "../features/tenants/routes/TenantProfilePage";
-import { TenantSchemaPage } from "../features/tenants/routes/TenantSchemaPage";
-import { TenantWorksmobilePage } from "../features/tenants/routes/TenantWorksmobilePage";
-import TenantUserGroupsTab from "../features/user-groups/routes/TenantUserGroupsTab";
-import { 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";
 import { ADMIN_AUTH_CALLBACK_PATH } from "../lib/authConfig";
 
+type RouteModule = {
+  default: ComponentType;
+};
+
+function lazyDefault(loader: () => Promise<RouteModule>) {
+  return async () => {
+    const module = await loader();
+    return { Component: module.default };
+  };
+}
+
+function lazyNamed<TModule, TKey extends keyof TModule>(
+  loader: () => Promise<TModule>,
+  key: TKey,
+) {
+  return async () => {
+    const module = await loader();
+    return { Component: module[key] as ComponentType };
+  };
+}
+
 export const adminRoutes: RouteObject[] = [
   {
     path: "/login",
@@ -41,33 +44,147 @@ export const adminRoutes: RouteObject[] = [
       {
         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 /> },
+          {
+            index: true,
+            lazy: lazyDefault(
+              () => import("../features/overview/GlobalOverviewPage"),
+            ),
+          },
+          {
+            path: "audit-logs",
+            lazy: lazyDefault(() => import("../features/audit/AuditLogsPage")),
+          },
+          {
+            path: "auth",
+            lazy: lazyDefault(() => import("../features/auth/AuthPage")),
+          },
+          {
+            path: "users",
+            lazy: lazyDefault(() => import("../features/users/UserListPage")),
+          },
+          {
+            path: "users/custom-claims",
+            lazy: lazyDefault(
+              () => import("../features/users/GlobalCustomClaimsPage"),
+            ),
+          },
+          {
+            path: "users/new",
+            lazy: lazyDefault(() => import("../features/users/UserCreatePage")),
+          },
+          {
+            path: "users/:id",
+            lazy: lazyDefault(() => import("../features/users/UserDetailPage")),
+          },
+          {
+            path: "tenants",
+            lazy: lazyDefault(
+              () => import("../features/tenants/routes/TenantListPage"),
+            ),
+          },
+          {
+            path: "tenants/new",
+            lazy: lazyDefault(
+              () => import("../features/tenants/routes/TenantCreatePage"),
+            ),
+          },
+          {
+            path: "worksmobile",
+            lazy: lazyNamed(
+              () => import("../features/tenants/routes/TenantWorksmobilePage"),
+              "TenantWorksmobilePage",
+            ),
+          },
+          {
+            path: "permissions-direct",
+            lazy: lazyNamed(
+              () =>
+                import(
+                  "../features/tenants/routes/TenantFineGrainedPermissionsPage"
+                ),
+              "TenantFineGrainedPermissionsPage",
+            ),
+          },
           {
             path: "tenants/:tenantId",
-            element: <TenantDetailPage />,
+            lazy: lazyDefault(
+              () => import("../features/tenants/routes/TenantDetailPage"),
+            ),
             children: [
-              { index: true, element: <TenantProfilePage /> },
-              { path: "permissions", element: <TenantAdminsAndOwnersTab /> },
-              { path: "organization", element: <TenantUserGroupsTab /> },
-              { path: "schema", element: <TenantSchemaPage /> },
-              { path: "worksmobile", element: <TenantWorksmobilePage /> },
+              {
+                index: true,
+                lazy: lazyNamed(
+                  () => import("../features/tenants/routes/TenantProfilePage"),
+                  "TenantProfilePage",
+                ),
+              },
+              {
+                path: "permissions",
+                lazy: lazyNamed(
+                  () =>
+                    import(
+                      "../features/tenants/routes/TenantAdminsAndOwnersTab"
+                    ),
+                  "TenantAdminsAndOwnersTab",
+                ),
+              },
+              {
+                path: "organization",
+                lazy: lazyDefault(
+                  () =>
+                    import(
+                      "../features/user-groups/routes/TenantUserGroupsTab"
+                    ),
+                ),
+              },
+              {
+                path: "schema",
+                lazy: lazyNamed(
+                  () => import("../features/tenants/routes/TenantSchemaPage"),
+                  "TenantSchemaPage",
+                ),
+              },
+              {
+                path: "relations",
+                lazy: lazyNamed(
+                  () =>
+                    import(
+                      "../features/tenants/routes/TenantFineGrainedPermissionsTab"
+                    ),
+                  "TenantFineGrainedPermissionsTab",
+                ),
+              },
             ],
           },
           {
             path: "tenants/:tenantId/organization/:id",
-            element: <TenantUserGroupsTab />,
+            lazy: lazyDefault(
+              () =>
+                import("../features/user-groups/routes/TenantUserGroupsTab"),
+            ),
+          },
+          {
+            path: "api-keys",
+            lazy: lazyDefault(
+              () => import("../features/api-keys/ApiKeyListPage"),
+            ),
+          },
+          {
+            path: "api-keys/new",
+            lazy: lazyDefault(
+              () => import("../features/api-keys/ApiKeyCreatePage"),
+            ),
+          },
+          {
+            path: "system/ory-ssot",
+            lazy: lazyDefault(() => import("../features/ory-ssot/OrySSOTPage")),
+          },
+          {
+            path: "system/data-integrity",
+            lazy: lazyDefault(
+              () => import("../features/integrity/DataIntegrityPage"),
+            ),
           },
-          { path: "api-keys", element: <ApiKeyListPage /> },
-          { path: "api-keys/new", element: <ApiKeyCreatePage /> },
-          { path: "system/projections/users", element: <UserProjectionPage /> },
-          { path: "system/data-integrity", element: <DataIntegrityPage /> },
         ],
       },
     ],

adminfront/src/components/common/LanguageSelector.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import LanguageSelector from "./LanguageSelector";
 

adminfront/src/components/common/LanguageSelector.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { LOCALE_STORAGE_KEY } from "../../../../common/core/i18n";
 import { t } from "../../lib/i18n";
+
 const SUPPORTED_LOCALES = ["ko", "en"] as const;
 
 type Locale = (typeof SUPPORTED_LOCALES)[number];
@@ -52,6 +53,8 @@ function LanguageSelector() {
 
   return (
     <select
+      id="admin-language-selector"
+      name="admin-language-selector"
       value={locale}
       onChange={(event) => handleChange(event.target.value as Locale)}
       className="rounded-full border border-border bg-transparent px-3 py-2 text-sm text-muted-foreground transition hover:bg-muted/20"

adminfront/src/components/common/LocaleRefreshBoundary.test.tsx

@@ -31,4 +31,27 @@ describe("LocaleRefreshBoundary", () => {
 
     expect(screen.getByText("2")).toBeInTheDocument();
   });
+
+  it("ignores storage events unrelated to locale changes", async () => {
+    render(
+      <LocaleRefreshBoundary>
+        <RenderCounter />
+      </LocaleRefreshBoundary>,
+    );
+
+    expect(screen.getByText("1")).toBeInTheDocument();
+
+    await act(async () => {
+      window.dispatchEvent(
+        new StorageEvent("storage", {
+          key: "admin_session",
+          newValue: "token",
+          oldValue: null,
+          storageArea: window.localStorage,
+        }),
+      );
+    });
+
+    expect(screen.getByText("1")).toBeInTheDocument();
+  });
 });

adminfront/src/components/common/LocaleRefreshBoundary.tsx

@@ -1,4 +1,5 @@
 import { Fragment, type ReactNode, useEffect, useState } from "react";
+import { LOCALE_STORAGE_KEY } from "../../../../common/core/i18n";
 
 type LocaleRefreshBoundaryProps = {
   children: ReactNode;
@@ -12,12 +13,19 @@ function LocaleRefreshBoundary({ children }: LocaleRefreshBoundaryProps) {
       setLocaleVersion((current) => current + 1);
     };
 
+    const syncLocaleFromStorage = (event: StorageEvent) => {
+      if (event.key !== LOCALE_STORAGE_KEY && event.key !== null) {
+        return;
+      }
+      syncLocale();
+    };
+
     window.addEventListener("localechange", syncLocale);
-    window.addEventListener("storage", syncLocale);
+    window.addEventListener("storage", syncLocaleFromStorage);
 
     return () => {
       window.removeEventListener("localechange", syncLocale);
-      window.removeEventListener("storage", syncLocale);
+      window.removeEventListener("storage", syncLocaleFromStorage);
     };
   }, []);
 

adminfront/src/components/layout/AppLayout.test.tsx

@@ -0,0 +1,187 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18nMock } from "../../test/i18nMock";
+import AppLayout from "./AppLayout";
+
+const authState = {
+  isAuthenticated: true,
+  isLoading: false,
+  user: {
+    access_token: "access-token",
+    expires_at: Math.floor(Date.now() / 1000) + 120,
+    profile: {
+      sub: "admin-1",
+      name: "Admin User",
+      email: "admin@example.com",
+    },
+  },
+  signinSilent: vi.fn(async () => undefined),
+  removeUser: vi.fn(),
+};
+
+vi.mock("react-oidc-context", () => ({
+  useAuth: () => authState,
+}));
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchMe: vi.fn(async () => ({
+    id: "admin-1",
+    name: "Fetched Admin",
+    email: "fetched@example.com",
+    role: "super_admin",
+    tenantId: "tenant-1",
+    manageableTenants: [
+      {
+        id: "tenant-1",
+        name: "GPDTDC",
+        slug: "gpdtdc",
+        type: "COMPANY",
+      },
+      {
+        id: "tenant-2",
+        name: "기술연구팀",
+        slug: "gpdtdc-rnd",
+        type: "ORGANIZATION",
+      },
+    ],
+  })),
+}));
+
+function renderLayout(entry = "/users") {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[entry]}>
+        <Routes>
+          <Route path="/" element={<AppLayout />}>
+            <Route path="users" element={<div>Users outlet</div>} />
+            <Route path="users/:id" element={<div>User detail outlet</div>} />
+            <Route
+              path="tenants/:tenantId"
+              element={<div>Tenant outlet</div>}
+            />
+            <Route path="worksmobile" element={<div>Worksmobile outlet</div>} />
+            <Route path="login" element={<div>Login outlet</div>} />
+          </Route>
+        </Routes>
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("admin AppLayout", () => {
+  beforeEach(() => {
+    (
+      window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean }
+    )._IS_TEST_MODE = true;
+    authState.isAuthenticated = true;
+    authState.isLoading = false;
+    authState.user.expires_at = Math.floor(Date.now() / 1000) + 120;
+    authState.signinSilent.mockClear();
+    authState.removeUser.mockClear();
+    window.localStorage.clear();
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+  });
+
+  it("renders admin navigation, fetched profile, and outlet content", async () => {
+    renderLayout();
+
+    expect(await screen.findByText("Fetched Admin")).toBeInTheDocument();
+    expect(screen.getByText("Admin Control")).toBeInTheDocument();
+    expect(screen.getByText("Users outlet")).toBeInTheDocument();
+    expect(screen.getByText("Tenants")).toBeInTheDocument();
+    expect(screen.getByText("Org Chart")).toBeInTheDocument();
+    expect(screen.getByText("Worksmobile")).toBeInTheDocument();
+    expect(screen.getByText("Ory SSOT System")).toBeInTheDocument();
+    expect(screen.getByText("Data Integrity")).toBeInTheDocument();
+    const navigation = screen.getByRole("navigation");
+    const navLabels = Array.from(navigation.querySelectorAll("a")).map((link) =>
+      link.textContent?.trim(),
+    );
+    expect(navLabels).toEqual([
+      "Overview",
+      "Tenants",
+      "Org Chart",
+      "Worksmobile",
+      "Ory SSOT System",
+      "Data Integrity",
+      "Users",
+      "권한 부여",
+      "Auth Guard",
+      "API Keys",
+      "Audit Logs",
+    ]);
+    const worksmobileIcon = screen.getByTestId("worksmobile-nav-icon");
+    expect(worksmobileIcon.tagName.toLowerCase()).toBe("svg");
+    expect(worksmobileIcon).toHaveAttribute("fill", "none");
+    expect(worksmobileIcon.querySelectorAll("path")).toHaveLength(4);
+    expect(worksmobileIcon.querySelector('path[fill="white"]')).toBeNull();
+  });
+
+  it("toggles the sidebar and persists the collapsed state", async () => {
+    renderLayout();
+
+    const collapseButton = await screen.findByRole("button", {
+      name: "사이드바 접기",
+    });
+    fireEvent.click(collapseButton);
+
+    expect(window.localStorage.getItem("baron_shell_sidebar_collapsed")).toBe(
+      "true",
+    );
+    expect(
+      screen.getByRole("button", { name: "사이드바 펼치기" }),
+    ).toBeInTheDocument();
+  });
+
+  it("opens profile menu, navigates, toggles theme/session, and logs out", async () => {
+    renderLayout();
+
+    const themeButton = await screen.findByRole("button", {
+      name: "테마 전환",
+    });
+    fireEvent.click(themeButton);
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+
+    fireEvent.click(screen.getByRole("button", { name: "계정 메뉴 열기" }));
+    expect(screen.getByText("Manageable Tenants")).toBeInTheDocument();
+
+    const sessionSwitch = screen.getByRole("switch");
+    fireEvent.click(sessionSwitch);
+    expect(window.localStorage.getItem("baron_session_expiry_enabled")).toBe(
+      "false",
+    );
+
+    fireEvent.click(screen.getByText("기술연구팀"));
+    expect(await screen.findByText("Tenant outlet")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "계정 메뉴 열기" }));
+    fireEvent.click(screen.getAllByText("내 정보")[0]);
+    expect(await screen.findByText("User detail outlet")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "계정 메뉴 열기" }));
+    fireEvent.click(screen.getAllByText("Logout")[1]);
+    expect(window.confirm).toHaveBeenCalled();
+    expect(authState.removeUser).toHaveBeenCalled();
+  }, 10_000);
+
+  it("attempts silent renewal on user activity when session is near expiry", async () => {
+    authState.user.expires_at = Math.floor(Date.now() / 1000) + 60;
+
+    renderLayout();
+    await screen.findByText("Fetched Admin");
+    fireEvent.keyDown(window, { key: "Tab" });
+
+    expect(authState.signinSilent).toHaveBeenCalled();
+  });
+});

adminfront/src/components/layout/AppLayout.tsx

@@ -22,16 +22,19 @@ import { useAuth } from "react-oidc-context";
 import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom";
 import {
   AppSidebar,
-  type ShellSidebarNavItem,
-  type ShellTranslator,
   applyShellTheme,
   buildShellProfileSummary,
   buildShellSessionStatus,
   readShellSessionExpiryEnabled,
+  readShellSidebarCollapsed,
   readShellTheme,
+  type ShellSidebarNavItem,
+  type ShellTranslator,
   shellLayoutClasses,
   writeShellSessionExpiryEnabled,
+  writeShellSidebarCollapsed,
 } from "../../../../common/shell";
+import { canAccessWorksmobile } from "../../features/tenants/routes/worksmobileAccess";
 import { buildAuthenticatedOrgChartUrl } from "../../features/users/orgChartPicker";
 import { fetchMe } from "../../lib/adminApi";
 import { debugLog } from "../../lib/debugLog";
@@ -42,10 +45,8 @@ import {
   shouldAttemptUnlimitedSessionRenew,
 } from "../../lib/sessionSliding";
 import LanguageSelector from "../common/LanguageSelector";
-import RoleSwitcher from "./RoleSwitcher";
 
 const LOCALE_CHANGED_EVENT = "baron_locale_changed";
-const DEV_ROLE_CHANGED_EVENT = "baron_dev_role_changed";
 
 const staticNavItems: ShellSidebarNavItem[] = [
   {
@@ -61,6 +62,18 @@ const staticNavItems: ShellSidebarNavItem[] = [
     to: "/users",
     icon: Users,
   },
+  {
+    labelKey: "ui.admin.nav.permissions_direct",
+    labelFallback: "권한 부여",
+    to: "/permissions-direct",
+    icon: ShieldCheck,
+  },
+  {
+    labelKey: "ui.admin.nav.auth_guard",
+    labelFallback: "Auth Guard",
+    to: "/auth",
+    icon: KeyRound,
+  },
   {
     labelKey: "ui.admin.nav.api_keys",
     labelFallback: "API Keys",
@@ -73,12 +86,6 @@ const staticNavItems: ShellSidebarNavItem[] = [
     to: "/audit-logs",
     icon: NotebookTabs,
   },
-  {
-    labelKey: "ui.admin.nav.auth_guard",
-    labelFallback: "Auth Guard",
-    to: "/auth",
-    icon: KeyRound,
-  },
 ];
 
 type SessionStatusProps = {
@@ -123,6 +130,38 @@ function SessionStatusText(props: SessionStatusProps) {
   return <>{sessionStatus.text}</>;
 }
 
+function LineWorksNavIcon({ size = 18 }: { size?: number | string }) {
+  const iconSize = typeof size === "number" ? size : Number.parseFloat(size);
+  return (
+    <svg
+      aria-hidden="true"
+      data-testid="worksmobile-nav-icon"
+      width={Number.isFinite(iconSize) ? iconSize : size}
+      height={Number.isFinite(iconSize) ? iconSize : size}
+      viewBox="0 0 30 30"
+      fill="none"
+      className="shrink-0 text-current"
+    >
+      <path
+        d="M9.01667 23.2633H12.3633C12.4481 23.2637 12.5307 23.2363 12.5985 23.1853C12.6663 23.1344 12.7156 23.0627 12.7389 22.9811L17.0489 8.12111C17.0658 8.06285 17.0689 8.00146 17.058 7.9418C17.047 7.88214 17.0224 7.82583 16.986 7.77733C16.9495 7.72883 16.9023 7.68947 16.8481 7.66236C16.7938 7.63525 16.734 7.62112 16.6733 7.62111H13.3267C13.2419 7.62113 13.1595 7.64866 13.0918 7.69955C13.0241 7.75045 12.9747 7.82196 12.9511 7.90333L8.64222 22.7633C8.62512 22.8215 8.62182 22.8829 8.63258 22.9425C8.64334 23.0022 8.66787 23.0586 8.70422 23.1071C8.74057 23.1556 8.78773 23.195 8.84197 23.2222C8.89621 23.2493 8.95603 23.2634 9.01667 23.2633Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.0122 23.2633H21.3589C21.4436 23.2633 21.526 23.2358 21.5938 23.1849C21.6615 23.134 21.7109 23.0625 21.7344 22.9811L26.0433 8.12111C26.0602 8.06285 26.0633 8.00146 26.0524 7.9418C26.0415 7.88214 26.0168 7.82583 25.9804 7.77733C25.944 7.72883 25.8968 7.68947 25.8425 7.66236C25.7883 7.63525 25.7284 7.62112 25.6678 7.62111H22.3211C22.2364 7.62131 22.1541 7.64891 22.0864 7.69977C22.0187 7.75064 21.9693 7.82205 21.9456 7.90333L17.6367 22.7633C17.6195 22.8216 17.6163 22.8831 17.6271 22.9428C17.6379 23.0026 17.6625 23.059 17.699 23.1076C17.7355 23.1561 17.7828 23.1955 17.8372 23.2225C17.8915 23.2496 17.9515 23.2635 18.0122 23.2633Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.3633 23.2633H8.64222C8.55741 23.2637 8.47481 23.2363 8.40701 23.1853C8.33921 23.1344 8.28993 23.0627 8.26666 22.9811L3.95666 8.12111C3.93977 8.06285 3.93667 8.00146 3.94759 7.9418C3.95851 7.88214 3.98316 7.82583 4.01959 7.77733C4.05602 7.72883 4.10322 7.68947 4.15748 7.66236C4.21174 7.63525 4.27156 7.62112 4.33222 7.62111H8.05444C8.13911 7.62131 8.22145 7.64891 8.28915 7.69977C8.35684 7.75064 8.40625 7.82205 8.43 7.90333L12.7389 22.7633C12.756 22.8216 12.7593 22.8831 12.7485 22.9428C12.7377 23.0026 12.713 23.059 12.6765 23.1076C12.6401 23.1561 12.5928 23.1955 12.5384 23.2225C12.484 23.2496 12.4241 23.2635 12.3633 23.2633Z"
+        fill="currentColor"
+      />
+      <path
+        d="M21.3589 23.2633H17.6367C17.5519 23.2637 17.4693 23.2363 17.4015 23.1853C17.3337 23.1344 17.2844 23.0627 17.2611 22.9811L12.9511 8.12111C12.9342 8.06285 12.9311 8.00146 12.942 7.9418C12.953 7.88214 12.9776 7.82583 13.014 7.77733C13.0505 7.72883 13.0977 7.68947 13.1519 7.66236C13.2062 7.63525 13.266 7.62112 13.3267 7.62111H17.0489C17.1336 7.62113 17.216 7.64866 17.2838 7.69955C17.3515 7.75045 17.4009 7.82196 17.4244 7.90333L21.7344 22.7633C21.7513 22.8216 21.7544 22.883 21.7435 22.9426C21.7326 23.0023 21.7079 23.0586 21.6715 23.1071C21.6351 23.1556 21.5879 23.195 21.5336 23.2221C21.4794 23.2492 21.4195 23.2633 21.3589 23.2633Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
 function AppLayout() {
   const auth = useAuth();
   const location = useLocation();
@@ -132,27 +171,15 @@ function AppLayout() {
   const lastRenewAttemptAtRef = useRef(0);
   const lastVisitedRouteRef = useRef<string | null>(null);
   const isDevelopmentRuntime = import.meta.env.MODE === "development";
-  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">(readShellTheme);
   const [isProfileOpen, setIsProfileOpen] = useState(false);
-  const [, setDevelopmentRenderRevision] = useState(0);
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() =>
+    readShellSidebarCollapsed(false),
+  );
   const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(() =>
     readShellSessionExpiryEnabled(!isDevelopmentRuntime),
   );
-  const {
-    data: profile,
-    isLoading: isProfileLoading,
-    error: profileError,
-  } = useQuery({
+  const { data: profile } = useQuery({
     queryKey: ["me"],
     queryFn: async () => {
       debugLog("[AppLayout] Fetching profile...");
@@ -174,91 +201,83 @@ function AppLayout() {
 
   const navItems = React.useMemo<ShellSidebarNavItem[]>(() => {
     const items = [...staticNavItems];
-    const isTest =
+    const _isTest =
       (window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
         ._IS_TEST_MODE === true;
-    const effectiveRole = mockRoleOverride || profile?.role;
+    const effectiveRole = profile?.role;
 
-    const isSuperAdmin = isTest || isSuperAdminRole(effectiveRole);
-    const isTenantAdmin = effectiveRole === "tenant_admin";
-    const manageableCount = profile?.manageableTenants?.length ?? 0;
+    const isSuperAdmin = isSuperAdminRole(effectiveRole);
+    const _manageableCount = profile?.manageableTenants?.length ?? 0;
+    const showWorksmobile = canAccessWorksmobile({
+      ...profile,
+      role: effectiveRole ?? profile?.role,
+    });
     const orgfrontUrl = buildAuthenticatedOrgChartUrl(
       import.meta.env.ORGFRONT_URL || "http://localhost:5175",
-      { includeInternal: true },
+      { includeInternal: false },
     );
 
-    const filteredItems = items.filter((item) => {
-      if (isTest) return true;
-      if (item.to === "/api-keys") return isSuperAdmin;
-      return true;
+    // Splice optional menus in a standard order
+    items.splice(1, 0, {
+      labelKey: "ui.admin.nav.tenants",
+      labelFallback: "Tenants",
+      to: "/tenants",
+      icon: Building2,
+    });
+    items.splice(2, 0, {
+      labelKey: "ui.admin.nav.org_chart",
+      labelFallback: "Org Chart",
+      to: orgfrontUrl,
+      icon: Network,
+      isExternal: true,
+    });
+    items.splice(3, 0, {
+      labelKey: "ui.admin.nav.worksmobile",
+      labelFallback: "Worksmobile",
+      to: "/worksmobile",
+      icon: LineWorksNavIcon,
+    });
+    items.splice(4, 0, {
+      labelKey: "ui.admin.nav.ory_ssot",
+      labelFallback: "Ory SSOT System",
+      to: "/system/ory-ssot",
+      icon: Database,
+    });
+    items.splice(5, 0, {
+      labelKey: "ui.admin.nav.data_integrity",
+      labelFallback: "Data Integrity",
+      to: "/system/data-integrity",
+      icon: ShieldCheck,
     });
 
-    if (isSuperAdmin) {
-      filteredItems.splice(1, 0, {
-        labelKey: "ui.admin.nav.tenants",
-        labelFallback: "Tenants",
-        to: "/tenants",
-        icon: Building2,
-      });
-      filteredItems.splice(2, 0, {
-        labelKey: "ui.admin.nav.org_chart",
-        labelFallback: "Org Chart",
-        to: orgfrontUrl,
-        icon: Network,
-        isExternal: true,
-      });
-      filteredItems.splice(4, 0, {
-        labelKey: "ui.admin.nav.user_projection",
-        labelFallback: "User Projection",
-        to: "/system/projections/users",
-        icon: Database,
-      });
-      filteredItems.splice(5, 0, {
-        labelKey: "ui.admin.nav.data_integrity",
-        labelFallback: "Data Integrity",
-        to: "/system/data-integrity",
-        icon: ShieldCheck,
-      });
-    } else if (isTenantAdmin || manageableCount > 0) {
-      if (manageableCount <= 1 && profile?.tenantId) {
-        filteredItems.splice(1, 0, {
-          labelKey: "ui.admin.nav.my_tenant",
-          labelFallback: "My Tenant",
-          to: `/tenants/${profile.tenantId}`,
-          icon: Building2,
-        });
-      } else if (manageableCount > 1) {
-        filteredItems.splice(1, 0, {
-          labelKey: "ui.admin.nav.tenants",
-          labelFallback: "Tenants",
-          to: "/tenants",
-          icon: Building2,
-        });
-      }
-      filteredItems.splice(
-        manageableCount <= 1 && profile?.tenantId ? 2 : 2,
-        0,
-        {
-          labelKey: "ui.admin.nav.org_chart",
-          labelFallback: "Org Chart",
-          to: orgfrontUrl,
-          icon: Network,
-          isExternal: true,
-        },
-      );
-    } else {
-      // 일반 사용자(Tenant Member)도 조직도 메뉴를 볼 수 있도록 추가합니다.
-      filteredItems.splice(1, 0, {
-        labelKey: "ui.admin.nav.org_chart",
-        labelFallback: "Org Chart",
-        to: orgfrontUrl,
-        icon: Network,
-        isExternal: true,
-      });
-    }
+    const permissions = profile?.systemPermissions;
 
-    return filteredItems;
-  }, [mockRoleOverride, profile]);
+    return items.filter((item) => {
+      // Super Admin ALWAYS bypasses and gets full access to everything
+      if (isSuperAdmin) {
+        if (item.to === "/worksmobile") return showWorksmobile;
+        return true;
+      }
+
+      // For others, check their fine-grained systemPermissions
+      if (!permissions) return false;
+
+      if (item.to === "/") return permissions.overview;
+      if (item.to === "/users") return permissions.users;
+      if (item.to === "/auth") return permissions.auth_guard;
+      if (item.to === "/api-keys") return permissions.api_keys;
+      if (item.to === "/audit-logs") return permissions.audit_logs;
+      if (item.to === "/permissions-direct") return false;
+      if (item.to === "/tenants") return permissions.tenants;
+      if (item.to === orgfrontUrl) return permissions.org_chart;
+      if (item.to === "/worksmobile") return permissions.worksmobile;
+      if (item.to === "/system/ory-ssot") return permissions.ory_ssot;
+      if (item.to === "/system/data-integrity")
+        return permissions.data_integrity;
+
+      return true;
+    });
+  }, [profile]);
 
   const handleLogout = () => {
     if (
@@ -303,20 +322,18 @@ function AppLayout() {
     }
 
     const rerenderDevelopmentShell = () => {
-      setDevelopmentRenderRevision((value) => value + 1);
+      // Re-render when locale changes
     };
 
     window.addEventListener(LOCALE_CHANGED_EVENT, rerenderDevelopmentShell);
-    window.addEventListener(DEV_ROLE_CHANGED_EVENT, rerenderDevelopmentShell);
 
     return () => {
-      window.removeEventListener(LOCALE_CHANGED_EVENT, rerenderDevelopmentShell);
       window.removeEventListener(
-        DEV_ROLE_CHANGED_EVENT,
+        LOCALE_CHANGED_EVENT,
         rerenderDevelopmentShell,
       );
     };
-  }, [isDevelopmentRuntime]);
+  }, []);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -429,7 +446,6 @@ function AppLayout() {
     auth.isAuthenticated,
     auth.isLoading,
     auth.user?.expires_at,
-    isDevelopmentRuntime,
     isSessionExpiryEnabled,
   ]);
 
@@ -496,7 +512,7 @@ function AppLayout() {
     fallbackName: t("ui.shell.profile.unknown_name", "Unknown User"),
     fallbackEmail: t("ui.shell.profile.unknown_email", "unknown@example.com"),
   });
-  const profileRoleKey = mockRoleOverride || profile?.role || "user";
+  const profileRoleKey = profile?.role || "user";
   const handleSessionExpiryToggle = () => {
     setIsSessionExpiryEnabled((prev) => {
       const next = !prev;
@@ -504,10 +520,18 @@ function AppLayout() {
       return next;
     });
   };
+  const handleSidebarToggle = () => {
+    setIsSidebarCollapsed((prev) => {
+      const next = !prev;
+      writeShellSidebarCollapsed(next);
+      return next;
+    });
+  };
   const sidebarNavContent = (
     <div className={shellLayoutClasses.navList}>
       {navItems.map((item) => {
         const { labelKey, labelFallback, to, icon: Icon, isExternal } = item;
+        const label = t(labelKey, labelFallback);
 
         if (isExternal) {
           return (
@@ -518,11 +542,18 @@ function AppLayout() {
               rel="noopener noreferrer"
               className={[
                 shellLayoutClasses.navItemBase,
+                isSidebarCollapsed
+                  ? shellLayoutClasses.navItemBaseCollapsed
+                  : "",
                 shellLayoutClasses.navItemIdle,
               ].join(" ")}
+              title={label}
+              aria-label={label}
             >
               <Icon size={18} />
-              <span>{t(labelKey, labelFallback)}</span>
+              <span className={isSidebarCollapsed ? "sr-only" : ""}>
+                {label}
+              </span>
             </a>
           );
         }
@@ -535,6 +566,9 @@ function AppLayout() {
             className={({ isActive }) =>
               [
                 shellLayoutClasses.navItemBase,
+                isSidebarCollapsed
+                  ? shellLayoutClasses.navItemBaseCollapsed
+                  : "",
                 item.isActive !== undefined
                   ? item.isActive
                     ? shellLayoutClasses.navItemActive
@@ -544,9 +578,11 @@ function AppLayout() {
                     : shellLayoutClasses.navItemIdle,
               ].join(" ")
             }
+            title={label}
+            aria-label={label}
           >
             <Icon size={18} />
-            <span>{t(labelKey, labelFallback)}</span>
+            <span className={isSidebarCollapsed ? "sr-only" : ""}>{label}</span>
           </NavLink>
         );
       })}
@@ -557,10 +593,17 @@ function AppLayout() {
       <button
         type="button"
         onClick={handleLogout}
-        className={shellLayoutClasses.logoutButton}
+        className={
+          isSidebarCollapsed
+            ? shellLayoutClasses.logoutButtonCollapsed
+            : shellLayoutClasses.logoutButton
+        }
+        title={t("ui.shell.nav.logout", "Logout")}
       >
         <LogOut size={18} />
-        <span>{t("ui.shell.nav.logout", "Logout")}</span>
+        <span className={isSidebarCollapsed ? "sr-only" : ""}>
+          {t("ui.shell.nav.logout", "Logout")}
+        </span>
       </button>
     </div>
   );
@@ -574,13 +617,23 @@ function AppLayout() {
   }
 
   return (
-    <div className={shellLayoutClasses.root}>
+    <div
+      className={
+        isSidebarCollapsed
+          ? shellLayoutClasses.rootCollapsed
+          : shellLayoutClasses.root
+      }
+    >
       <AppSidebar
         brandLabel={t("ui.admin.brand", "Baron 로그인")}
         brandTitle={t("ui.admin.title", "Admin Control")}
         brandIcon={<ShieldHalf size={20} />}
         navContent={sidebarNavContent}
         footerContent={sidebarFooterContent}
+        collapsed={isSidebarCollapsed}
+        onToggleCollapsed={handleSidebarToggle}
+        collapseLabel={t("ui.shell.sidebar.collapse", "사이드바 접기")}
+        expandLabel={t("ui.shell.sidebar.expand", "사이드바 펼치기")}
       />
 
       <div className={shellLayoutClasses.contentWide}>
@@ -668,7 +721,10 @@ function AppLayout() {
                       <div className="flex items-center justify-between gap-3">
                         <div>
                           <p className="text-sm font-medium text-foreground">
-                            {t("ui.shell.session.auto_extend", "세션 만료 관리")}
+                            {t(
+                              "ui.shell.session.auto_extend",
+                              "세션 만료 관리",
+                            )}
                           </p>
                           <p className="text-xs text-muted-foreground">
                             {isSessionExpiryEnabled ? (
@@ -677,7 +733,10 @@ function AppLayout() {
                                 t={t}
                               />
                             ) : (
-                              t("ui.shell.session.disabled", "세션 만료 비활성화")
+                              t(
+                                "ui.shell.session.disabled",
+                                "세션 만료 비활성화",
+                              )
                             )}
                           </p>
                         </div>
@@ -775,9 +834,8 @@ function AppLayout() {
           </div>
         </header>
         <main className={shellLayoutClasses.mainMinWidth}>
-          <Outlet />
+          <Outlet context={isSidebarCollapsed} />
         </main>
-        <RoleSwitcher />
       </div>
     </div>
   );

adminfront/src/components/layout/RoleSwitcher.tsx

@@ -1,177 +0,0 @@
-import { ChevronDown, ChevronUp, Wrench } from "lucide-react";
-import type { FC } from "react";
-import { useEffect, useState } from "react";
-import { t } from "../../lib/i18n";
-
-const DEV_ROLE_CHANGED_EVENT = "baron_dev_role_changed";
-
-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.dispatchEvent(new Event(DEV_ROLE_CHANGED_EVENT));
-  };
-
-  const clearRoleOverride = () => {
-    window.localStorage.removeItem("X-Mock-Role-Enabled");
-    setIsOverrideEnabled(false);
-    window.dispatchEvent(new Event(DEV_ROLE_CHANGED_EVENT));
-  };
-
-  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.test.tsx

@@ -0,0 +1,49 @@
+import type React from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+
+let container: HTMLDivElement | null = null;
+
+const render = async (element: React.ReactElement) => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  await act(async () => {
+    root.render(element);
+  });
+  return root;
+};
+
+afterEach(() => {
+  if (container) {
+    container.remove();
+    container = null;
+  }
+});
+
+describe("Avatar", () => {
+  it("renders image and fallback with merged classes", async () => {
+    const root = await render(
+      <Avatar className="custom-root" data-testid="avatar">
+        <AvatarImage
+          alt="Admin user"
+          className="custom-image"
+          src="/avatar.png"
+        />
+        <AvatarFallback className="custom-fallback">AU</AvatarFallback>
+      </Avatar>,
+    );
+
+    const avatar = container?.querySelector("[data-testid='avatar']");
+    const fallback = container?.textContent;
+
+    expect(avatar?.className).toContain("custom-root");
+    expect(fallback).toContain("AU");
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+});

adminfront/src/components/ui/avatar.tsx

@@ -44,4 +44,4 @@ const AvatarFallback = React.forwardRef<
 ));
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback };
+export { Avatar, AvatarFallback, AvatarImage };

adminfront/src/components/ui/card.tsx

@@ -50,9 +50,9 @@ function CardFooter({
 
 export {
   Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
   CardHeader,
   CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
 };

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

@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Checkbox } from "./checkbox";
+
+describe("Checkbox Component", () => {
+  it("adds a fallback id for browser autofill diagnostics", () => {
+    render(<Checkbox aria-label="Select row" />);
+
+    expect(screen.getByRole("checkbox")).toHaveAttribute("id");
+  });
+
+  it("keeps explicit id and name values", () => {
+    render(<Checkbox id="explicit-checkbox" name="explicit-name" />);
+    const checkbox = screen.getByRole("checkbox");
+
+    expect(checkbox).toHaveAttribute("id", "explicit-checkbox");
+    expect(checkbox).toHaveAttribute("name", "explicit-name");
+  });
+});

adminfront/src/components/ui/checkbox.tsx

@@ -7,13 +7,18 @@ export interface CheckboxProps
 }
 
 const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ className, onCheckedChange, ...props }, ref) => {
+  ({ className, onCheckedChange, id, name, ...props }, ref) => {
+    const fallbackId = React.useId();
+    const fieldId = id ?? (name ? undefined : fallbackId);
+
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       onCheckedChange?.(e.target.checked);
     };
 
     return (
       <input
+        id={fieldId}
+        name={name}
         type="checkbox"
         className={cn(
           "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 accent-primary",

adminfront/src/components/ui/dialog.tsx

@@ -144,18 +144,20 @@ const DialogClose = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(
 DialogClose.displayName = "DialogClose";
 
 const DialogOverlay = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
 >(({ className, onMouseDown, ...props }, ref) => {
   const { setOpen } = useDialogContext("DialogOverlay");
   return (
-    <div
+    <button
+      type="button"
       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",
+        "fixed inset-0 z-50 border-0 bg-black/80 p-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className,
       )}
       data-state="open"
+      aria-label="Close dialog"
       onMouseDown={composeEventHandlers(onMouseDown, (event) => {
         if (event.target === event.currentTarget) {
           setOpen(false);
@@ -273,13 +275,13 @@ DialogDescription.displayName = "DialogDescription";
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
   DialogClose,
-  DialogTrigger,
   DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
   DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
 };

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

@@ -183,18 +183,18 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
   DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
+  DropdownMenuTrigger,
 };

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

@@ -9,6 +9,20 @@ describe("Input Component", () => {
     expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument();
   });
 
+  it("adds a fallback id for browser autofill diagnostics", () => {
+    render(<Input placeholder="Enter text" />);
+
+    expect(screen.getByPlaceholderText("Enter text")).toHaveAttribute("id");
+  });
+
+  it("keeps explicit id and name values", () => {
+    render(<Input id="explicit-id" name="explicit-name" />);
+    const input = screen.getByRole("textbox");
+
+    expect(input).toHaveAttribute("id", "explicit-id");
+    expect(input).toHaveAttribute("name", "explicit-name");
+  });
+
   it("handles value changes", async () => {
     const onChange = vi.fn();
     const user = userEvent.setup();

adminfront/src/components/ui/input.tsx

@@ -6,9 +6,14 @@ export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, type, id, name, ...props }, ref) => {
+    const fallbackId = React.useId();
+    const fieldId = id ?? (name ? undefined : fallbackId);
+
     return (
       <input
+        id={fieldId}
+        name={name}
         type={type}
         className={cn(commonInputClass, className)}
         ref={ref}

adminfront/src/components/ui/select.tsx

@@ -146,13 +146,13 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
   SelectContent,
-  SelectLabel,
+  SelectGroup,
   SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
+  SelectLabel,
   SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
 };

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

@@ -0,0 +1,41 @@
+import type React from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { Separator } from "./separator";
+
+let container: HTMLDivElement | null = null;
+
+const render = async (element: React.ReactElement) => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  await act(async () => {
+    root.render(element);
+  });
+  return root;
+};
+
+afterEach(() => {
+  if (container) {
+    container.remove();
+    container = null;
+  }
+});
+
+describe("Separator", () => {
+  it("renders a horizontal separator with custom classes", async () => {
+    const root = await render(
+      <Separator className="custom-separator" data-testid="separator" />,
+    );
+
+    const separator = container?.querySelector("[data-testid='separator']");
+
+    expect(separator?.className).toContain("h-px");
+    expect(separator?.className).toContain("custom-separator");
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+});

adminfront/src/components/ui/table.tsx

@@ -92,11 +92,11 @@ TableCaption.displayName = "TableCaption";
 
 export {
   Table,
-  TableHeader,
   TableBody,
+  TableCaption,
+  TableCell,
   TableFooter,
   TableHead,
+  TableHeader,
   TableRow,
-  TableCell,
-  TableCaption,
 };

adminfront/src/components/ui/tabs.tsx

@@ -84,4 +84,4 @@ const TabsContent = React.forwardRef<
 });
 TabsContent.displayName = "TabsContent";
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsContent, TabsList, TabsTrigger };

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

@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Textarea } from "./textarea";
+
+describe("Textarea Component", () => {
+  it("adds a fallback id for browser autofill diagnostics", () => {
+    render(<Textarea aria-label="Description" />);
+
+    expect(screen.getByRole("textbox")).toHaveAttribute("id");
+  });
+
+  it("keeps explicit id and name values", () => {
+    render(<Textarea id="explicit-textarea" name="explicit-name" />);
+    const textarea = screen.getByRole("textbox");
+
+    expect(textarea).toHaveAttribute("id", "explicit-textarea");
+    expect(textarea).toHaveAttribute("name", "explicit-name");
+  });
+});

adminfront/src/components/ui/textarea.tsx

@@ -5,9 +5,14 @@ export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, id, name, ...props }, ref) => {
+    const fallbackId = React.useId();
+    const fieldId = id ?? (name ? undefined : fallbackId);
+
     return (
       <textarea
+        id={fieldId}
+        name={name}
         className={cn(
           "flex min-h-[80px] w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,

adminfront/src/components/ui/use-toast.ts

@@ -18,6 +18,11 @@ const notify = () => {
 };
 
 const toastBase = (message: string, type: ToastType = "success") => {
+  if (
+    toasts.some((toast) => toast.message === message && toast.type === type)
+  ) {
+    return;
+  }
   const id = Math.random().toString(36).substring(2, 9);
   toasts = [...toasts, { id, message, type }];
   notify();

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

@@ -1,6 +1,5 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { createApiKey } from "../../lib/adminApi";
@@ -50,15 +49,13 @@ describe("ApiKeyCreatePage", () => {
   });
 
   it("includes org-context:read in the create request when selected", async () => {
-    const user = userEvent.setup();
     renderPage();
 
-    await user.type(
-      screen.getByLabelText("서비스 또는 목적 식별 이름"),
-      "org-context-client",
-    );
-    await user.click(screen.getByRole("button", { name: /조직 Context 조회/ }));
-    await user.click(screen.getByRole("button", { name: /API 키 발급하기/ }));
+    fireEvent.change(screen.getByLabelText("서비스 또는 목적 식별 이름"), {
+      target: { value: "org-context-client" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /조직 Context 조회/ }));
+    fireEvent.click(screen.getByRole("button", { name: /API 키 발급하기/ }));
 
     await waitFor(() => {
       expect(createApiKey).toHaveBeenCalledWith(

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

@@ -74,7 +74,7 @@ describe("ApiKeyListPage", () => {
   });
 
   it("updates scopes without changing client_id", async () => {
-    const user = userEvent.setup();
+    const user = userEvent.setup({ delay: null });
     renderPage();
 
     expect(await screen.findByText("client-id-stable")).toBeInTheDocument();
@@ -88,7 +88,7 @@ describe("ApiKeyListPage", () => {
         scopes: expect.arrayContaining(["audit:read", "org-context:read"]),
       });
     });
-  });
+  }, 15_000);
 
   it("rotates only the secret and shows the one-time secret", async () => {
     const user = userEvent.setup();

adminfront/src/features/audit/AuditLogsPage.tsx

@@ -2,13 +2,6 @@ import { useInfiniteQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import { Download, NotebookTabs, RefreshCw, Search } from "lucide-react";
 import * as React from "react";
-import {
-  formatAuditValue,
-  parseAuditDetails,
-  resolveAuditAction,
-  resolveAuditActor,
-} from "../../../../common/core/audit";
-import { AuditLogTable } from "../../../../common/core/components/audit";
 import { PageHeader } from "../../../../common/core/components/page";
 import { SearchFilterBar } from "../../../../common/ui/search-filter-bar";
 import { Badge } from "../../components/ui/badge";
@@ -24,6 +17,7 @@ import { Input } from "../../components/ui/input";
 import type { AuditLog } from "../../lib/adminApi";
 import { fetchAuditLogs } from "../../lib/adminApi";
 import { t } from "../../lib/i18n";
+import { VirtualizedAuditLogTable } from "./VirtualizedAuditLogTable";
 
 function AuditLogsPage() {
   const [searchActorId, setSearchActorId] = React.useState("");
@@ -41,8 +35,23 @@ function AuditLogsPage() {
     isFetching,
     refetch,
   } = useInfiniteQuery({
-    queryKey: ["audit-logs"],
-    queryFn: ({ pageParam }) => fetchAuditLogs(50, pageParam),
+    queryKey: [
+      "audit-logs",
+      deferredSearchActorId,
+      deferredSearchAction,
+      statusFilter,
+    ],
+    queryFn: ({ pageParam }) => {
+      const search = [deferredSearchActorId, deferredSearchAction]
+        .filter(Boolean)
+        .join(" ");
+      return fetchAuditLogs(
+        50,
+        pageParam,
+        search || undefined,
+        statusFilter === "all" ? undefined : statusFilter,
+      );
+    },
     initialPageParam: undefined as string | undefined,
     getNextPageParam: (lastPage) => lastPage.next_cursor || undefined,
   });
@@ -52,45 +61,6 @@ function AuditLogsPage() {
       (page) =>
         page?.items?.filter((item): item is AuditLog => Boolean(item)) ?? [],
     ) ?? [];
-  const filteredLogs = React.useMemo(
-    () =>
-      logs.filter((row) => {
-        const details = parseAuditDetails(row.details);
-        const actorLabel = resolveAuditActor(row, details).toLowerCase();
-        const actionLabel = resolveAuditAction(row, details).toLowerCase();
-        const matchesActor =
-          deferredSearchActorId === "" ||
-          actorLabel.includes(deferredSearchActorId.toLowerCase());
-        const matchesAction =
-          deferredSearchAction === "" ||
-          actionLabel.includes(deferredSearchAction.toLowerCase());
-        const matchesStatus =
-          statusFilter === "all" || row.status === statusFilter;
-        return matchesActor && matchesAction && matchesStatus;
-      }),
-    [logs, deferredSearchActorId, deferredSearchAction, statusFilter],
-  );
-
-  if (isLoading) {
-    return (
-      <div className="p-8 text-center">
-        {t("msg.common.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.common.audit.load_error", "Error loading logs: {{error}}", {
-          error: errMsg,
-        })}
-      </div>
-    );
-  }
 
   return (
     <div className="space-y-6">
@@ -105,7 +75,7 @@ function AuditLogsPage() {
           <>
             <Badge variant="muted">
               {t("msg.common.audit.registry.count", "총 {{count}}개 로그", {
-                count: filteredLogs.length,
+                count: logs.length,
               })}
             </Badge>
             <Button
@@ -138,65 +108,87 @@ function AuditLogsPage() {
             </CardDescription>
           </div>
         </CardHeader>
-        <CardContent className="space-y-4 pt-0">
-          <SearchFilterBar
-            primary={
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  refetch();
-                }}
-                className="grid flex-1 gap-2 md:grid-cols-[1fr,1fr,180px]"
-              >
-                <div className="relative">
-                  <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        {isLoading ? (
+          <div className="p-8 text-center" data-testid="audit-loading">
+            {t("msg.common.audit.loading", "Loading audit logs...")}
+          </div>
+        ) : error ? (
+          <div
+            className="p-8 text-center text-red-500"
+            data-testid="audit-error"
+          >
+            {t("msg.common.audit.load_error", "Error loading logs: {{error}}", {
+              error:
+                (error as AxiosError<{ error?: string }>).response?.data
+                  ?.error ?? (error as Error).message,
+            })}
+          </div>
+        ) : (
+          <CardContent className="space-y-4 pt-0">
+            <SearchFilterBar
+              primary={
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    refetch();
+                  }}
+                  className="grid flex-1 gap-2 md:grid-cols-[1fr,1fr,180px]"
+                >
+                  <div className="relative">
+                    <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                      className="pl-10"
+                      data-testid="audit-search-user-id"
+                      value={searchActorId}
+                      onChange={(event) => setSearchActorId(event.target.value)}
+                      placeholder={t(
+                        "ui.common.audit.filters.user_id",
+                        "Filter by User ID",
+                      )}
+                    />
+                  </div>
                   <Input
-                    className="pl-10"
-                    value={searchActorId}
-                    onChange={(event) => setSearchActorId(event.target.value)}
+                    data-testid="audit-search-action"
+                    value={searchAction}
+                    onChange={(event) =>
+                      setSearchAction(event.target.value.toUpperCase())
+                    }
                     placeholder={t(
-                      "ui.common.audit.filters.user_id",
-                      "Filter by User ID",
+                      "ui.common.audit.filters.action",
+                      "Filter by Action (e.g. ROTATE_SECRET)",
                     )}
                   />
-                </div>
-                <Input
-                  value={searchAction}
-                  onChange={(event) =>
-                    setSearchAction(event.target.value.toUpperCase())
-                  }
-                  placeholder={t(
-                    "ui.common.audit.filters.action",
-                    "Filter by Action (e.g. ROTATE_SECRET)",
-                  )}
-                />
-                <select
-                  className="h-10 rounded-md border border-input bg-background px-3 text-sm"
-                  value={statusFilter}
-                  onChange={(event) => setStatusFilter(event.target.value)}
-                >
-                  <option value="all">
-                    {t("ui.common.audit.filters.status_all", "All Status")}
-                  </option>
-                  <option value="success">
-                    {t("ui.common.status.success", "Success")}
-                  </option>
-                  <option value="failure">
-                    {t("ui.common.status.failure", "Failure")}
-                  </option>
-                </select>
-              </form>
-            }
-          />
-          <AuditLogTable
-            logs={filteredLogs}
-            t={t}
-            loading={isLoading}
-            hasNextPage={Boolean(hasNextPage)}
-            isFetchingNextPage={isFetchingNextPage}
-            onLoadMore={() => fetchNextPage()}
-          />
-        </CardContent>
+                  <select
+                    id="audit-filter-status"
+                    name="audit-filter-status"
+                    data-testid="audit-filter-status"
+                    className="h-10 rounded-md border border-input bg-background px-3 text-sm"
+                    value={statusFilter}
+                    onChange={(event) => setStatusFilter(event.target.value)}
+                  >
+                    <option value="all">
+                      {t("ui.common.audit.filters.status_all", "All Status")}
+                    </option>
+                    <option value="success">
+                      {t("ui.common.status.success", "Success")}
+                    </option>
+                    <option value="failure">
+                      {t("ui.common.status.failure", "Failure")}
+                    </option>
+                  </select>
+                </form>
+              }
+            />
+            <VirtualizedAuditLogTable
+              logs={logs}
+              t={t}
+              loading={isLoading}
+              hasNextPage={Boolean(hasNextPage)}
+              isFetchingNextPage={isFetchingNextPage}
+              onLoadMore={() => fetchNextPage()}
+            />
+          </CardContent>
+        )}
       </Card>
     </div>
   );

adminfront/src/features/audit/VirtualizedAuditLogTable.tsx

@@ -0,0 +1,475 @@
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ChevronDown, ChevronUp, Copy } from "lucide-react";
+import * as React from "react";
+import {
+  formatAuditDateParts,
+  formatAuditValue,
+  parseAuditDetails,
+  resolveAuditAction,
+  resolveAuditActor,
+  resolveAuditTarget,
+} from "../../../../common/core/audit";
+import {
+  type CommonBadgeVariant,
+  getCommonBadgeClasses,
+} from "../../../../common/ui/badge";
+import { getCommonButtonClasses } from "../../../../common/ui/button";
+import {
+  commonStickyTableHeaderClass,
+  commonTableBodyClass,
+  commonTableCellClass,
+  commonTableClass,
+  commonTableHeadClass,
+  commonTableHeaderClass,
+  commonTableRowClass,
+  commonTableShellClass,
+  commonTableViewportClass,
+  commonTableWrapperClass,
+} from "../../../../common/ui/table";
+import { Button } from "../../components/ui/button";
+import type { AuditLog } from "../../lib/adminApi";
+
+type AuditTranslate = (
+  key: string,
+  fallback: string,
+  vars?: Record<string, string | number>,
+) => string;
+
+type VirtualizedAuditLogTableProps = {
+  logs: AuditLog[];
+  t: AuditTranslate;
+  loading: boolean;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onLoadMore: () => void;
+  className?: string;
+};
+
+function cx(...classNames: Array<string | false | null | undefined>) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+function statusVariant(status: string): CommonBadgeVariant {
+  return status === "success" || status === "ok" ? "success" : "warning";
+}
+
+export function VirtualizedAuditLogTable({
+  logs,
+  t,
+  loading,
+  hasNextPage,
+  isFetchingNextPage,
+  onLoadMore,
+  className,
+}: VirtualizedAuditLogTableProps) {
+  const [expandedRows, setExpandedRows] = React.useState<
+    Record<string, boolean>
+  >({});
+  const viewportRef = React.useRef<HTMLDivElement>(null);
+  const isTest =
+    (typeof process !== "undefined" && process.env.NODE_ENV === "test") ||
+    (typeof window !== "undefined" &&
+      (window as Window & { _IS_TEST_MODE?: boolean })._IS_TEST_MODE);
+
+  const handleCopy = (value: string) => {
+    if (!value) {
+      return;
+    }
+    navigator.clipboard.writeText(value);
+  };
+
+  const rowVirtualizer = useVirtualizer({
+    count: logs.length,
+    getScrollElement: () => viewportRef.current,
+    estimateSize: () => 80,
+    measureElement: (el) => el.getBoundingClientRect().height,
+    overscan: isTest ? logs.length : 10,
+    initialRect: isTest ? { width: 1010, height: 1000 } : undefined,
+  });
+
+  const virtualRows = rowVirtualizer.getVirtualItems();
+
+  React.useEffect(() => {
+    if (isTest) {
+      return;
+    }
+    const lastItem = virtualRows[virtualRows.length - 1];
+    if (!lastItem) return;
+
+    if (
+      lastItem.index >= logs.length - 1 &&
+      hasNextPage &&
+      !isFetchingNextPage
+    ) {
+      onLoadMore();
+    }
+  }, [
+    virtualRows,
+    logs.length,
+    hasNextPage,
+    isFetchingNextPage,
+    onLoadMore,
+    isTest,
+  ]);
+
+  const tableMinWidth = 1010;
+
+  const renderRow = (
+    row: AuditLog,
+    index: number,
+    virtualRow?: { start: number; end: number },
+  ) => {
+    if (!row) return null;
+
+    const details = parseAuditDetails(row.details);
+    const actorLabel = resolveAuditActor(row, details);
+    const actionLabel = resolveAuditAction(row, details);
+    const targetLabel = resolveAuditTarget(details);
+    const rowKey = `${row.event_id}-${row.timestamp}-${index}`;
+    const expanded = Boolean(expandedRows[rowKey]);
+    const { date, time } = formatAuditDateParts(row.timestamp);
+
+    return (
+      <tr
+        key={rowKey}
+        data-index={index}
+        ref={virtualRow ? rowVirtualizer.measureElement : undefined}
+        className={cx(
+          commonTableRowClass,
+          "bg-card/40",
+          virtualRow ? "absolute left-0 w-full" : "",
+        )}
+        style={
+          virtualRow
+            ? {
+                transform: `translateY(${virtualRow.start}px)`,
+              }
+            : undefined
+        }
+      >
+        <td colSpan={6} className="p-0">
+          <div className={cx("flex items-center", expanded && "border-b")}>
+            <div
+              className={cx(
+                commonTableCellClass,
+                "w-[190px] shrink-0 text-xs text-muted-foreground",
+              )}
+            >
+              <div className="space-y-1">
+                <div>{date}</div>
+                <div>{time}</div>
+              </div>
+            </div>
+            <div className={cx(commonTableCellClass, "w-[180px] shrink-0")}>
+              <div className="flex items-center gap-2">
+                <code className="rounded-md bg-secondary/60 px-2 py-1 text-xs text-muted-foreground">
+                  {actorLabel}
+                </code>
+                {actorLabel !== "-" ? (
+                  <button
+                    type="button"
+                    className={cx(
+                      getCommonButtonClasses({
+                        variant: "ghost",
+                        size: "icon",
+                      }),
+                      "h-7 w-7 text-muted-foreground hover:text-primary",
+                    )}
+                    aria-label={t(
+                      "ui.common.audit.copy.actor_id",
+                      "Copy User ID",
+                    )}
+                    onClick={() => handleCopy(actorLabel)}
+                  >
+                    <Copy className="h-3 w-3" />
+                  </button>
+                ) : null}
+              </div>
+            </div>
+            <div
+              className={cx(
+                commonTableCellClass,
+                "w-[180px] shrink-0 text-xs text-muted-foreground",
+              )}
+            >
+              <div className="font-semibold text-foreground">{actionLabel}</div>
+            </div>
+            <div
+              className={cx(
+                commonTableCellClass,
+                "w-[260px] shrink-0 text-xs text-muted-foreground",
+              )}
+            >
+              <div className="flex items-center gap-2">
+                <span className="break-all">{targetLabel}</span>
+                {targetLabel !== "-" ? (
+                  <button
+                    type="button"
+                    className={cx(
+                      getCommonButtonClasses({
+                        variant: "ghost",
+                        size: "icon",
+                      }),
+                      "h-7 w-7 text-muted-foreground hover:text-primary",
+                    )}
+                    aria-label={t(
+                      "ui.common.audit.copy.target",
+                      "Copy Client ID",
+                    )}
+                    onClick={() => handleCopy(targetLabel)}
+                  >
+                    <Copy className="h-3 w-3" />
+                  </button>
+                ) : null}
+              </div>
+            </div>
+            <div className={cx(commonTableCellClass, "w-[120px] shrink-0")}>
+              <span
+                className={getCommonBadgeClasses({
+                  variant: statusVariant(row.status),
+                })}
+              >
+                {row.status}
+              </span>
+            </div>
+            <div
+              className={cx(
+                commonTableCellClass,
+                "w-[80px] shrink-0 text-right",
+              )}
+            >
+              <button
+                type="button"
+                className={getCommonButtonClasses({
+                  variant: "ghost",
+                  size: "sm",
+                })}
+                onClick={() => {
+                  setExpandedRows((prev) => ({
+                    ...prev,
+                    [rowKey]: !expanded,
+                  }));
+                  // Re-measure after state change
+                  setTimeout(() => rowVirtualizer.measure(), 0);
+                }}
+              >
+                {expanded ? (
+                  <ChevronUp className="h-4 w-4" />
+                ) : (
+                  <ChevronDown className="h-4 w-4" />
+                )}
+              </button>
+            </div>
+          </div>
+          {expanded && (
+            <div className={cx(commonTableCellClass, "bg-card/20 text-xs")}>
+              <div className="grid gap-4 text-muted-foreground md:grid-cols-3">
+                <div className="space-y-1">
+                  <div className="uppercase tracking-[0.16em]">
+                    {t("ui.common.audit.details.request", "Request")}
+                  </div>
+                  <div className="break-all">
+                    {t(
+                      "ui.common.audit.details.request_id",
+                      "Request ID · {{value}}",
+                      { value: formatAuditValue(details.request_id) },
+                    )}
+                  </div>
+                  <div className="break-all">
+                    {t(
+                      "ui.common.audit.details.event_id",
+                      "Event ID · {{value}}",
+                      { value: formatAuditValue(row.event_id) },
+                    )}
+                  </div>
+                  <div>
+                    {t("ui.common.audit.details.ip", "IP · {{value}}", {
+                      value: formatAuditValue(row.ip_address),
+                    })}
+                  </div>
+                  <div className="break-all">
+                    {t("ui.common.audit.details.method", "Method · {{value}}", {
+                      value: formatAuditValue(details.method),
+                    })}
+                  </div>
+                  <div className="break-all">
+                    {t("ui.common.audit.details.path", "Path · {{value}}", {
+                      value: formatAuditValue(details.path),
+                    })}
+                  </div>
+                  <div>
+                    {t(
+                      "ui.common.audit.details.latency",
+                      "Latency · {{value}}",
+                      {
+                        value:
+                          details.latency_ms !== undefined
+                            ? `${details.latency_ms}ms`
+                            : "-",
+                      },
+                    )}
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <div className="uppercase tracking-[0.16em]">
+                    {t("ui.common.audit.details.actor", "Actor")}
+                  </div>
+                  <div>
+                    {t(
+                      "ui.common.audit.details.actor_id",
+                      "User ID · {{value}}",
+                      { value: actorLabel },
+                    )}
+                  </div>
+                  <div>
+                    {t("ui.common.audit.details.tenant", "Tenant · {{value}}", {
+                      value: formatAuditValue(details.tenant_id),
+                    })}
+                  </div>
+                  <div>
+                    {t("ui.common.audit.details.device", "Device · {{value}}", {
+                      value: formatAuditValue(row.device_id),
+                    })}
+                  </div>
+                  <div className="break-all">
+                    {t(
+                      "ui.common.audit.details.target",
+                      "Client ID · {{value}}",
+                      { value: targetLabel },
+                    )}
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <div className="uppercase tracking-[0.16em]">
+                    {t("ui.common.audit.details.result", "Result")}
+                  </div>
+                  <div className="break-all">
+                    {t("ui.common.audit.details.error", "Error · {{value}}", {
+                      value: formatAuditValue(details.error),
+                    })}
+                  </div>
+                  <div className="break-all">
+                    {t("ui.common.audit.details.before", "Before · {{value}}", {
+                      value: formatAuditValue(details.before),
+                    })}
+                  </div>
+                  <div className="break-all">
+                    {t("ui.common.audit.details.after", "After · {{value}}", {
+                      value: formatAuditValue(details.after),
+                    })}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </td>
+      </tr>
+    );
+  };
+
+  return (
+    <div className={cx(commonTableShellClass, className)}>
+      <div
+        ref={viewportRef}
+        className={cx(commonTableViewportClass, "flex-1")}
+        data-testid="audit-table-viewport"
+      >
+        <div
+          className={commonTableWrapperClass}
+          style={{ minWidth: tableMinWidth }}
+        >
+          <table
+            className={cx(commonTableClass, "table-fixed w-full")}
+            style={{ borderCollapse: "separate", borderSpacing: 0 }}
+          >
+            <thead
+              className={cx(
+                commonTableHeaderClass,
+                commonStickyTableHeaderClass,
+              )}
+            >
+              <tr className={commonTableRowClass}>
+                <th className={cx(commonTableHeadClass, "w-[190px]")}>
+                  {t("ui.common.audit.table.time", "Time")}
+                </th>
+                <th className={cx(commonTableHeadClass, "w-[180px]")}>
+                  {t("ui.common.audit.table.user_id", "User ID")}
+                </th>
+                <th className={cx(commonTableHeadClass, "w-[180px]")}>
+                  {t("ui.common.audit.table.action", "Action")}
+                </th>
+                <th className={cx(commonTableHeadClass, "w-[260px]")}>
+                  {t("ui.common.audit.table.client_id", "Client ID")}
+                </th>
+                <th className={cx(commonTableHeadClass, "w-[120px]")}>
+                  {t("ui.common.audit.table.status", "Status")}
+                </th>
+                <th className={cx(commonTableHeadClass, "w-[80px]")} />
+              </tr>
+            </thead>
+            <tbody
+              className={commonTableBodyClass}
+              style={
+                !isTest
+                  ? {
+                      height: `${rowVirtualizer.getTotalSize()}px`,
+                      position: "relative",
+                    }
+                  : undefined
+              }
+            >
+              {isTest
+                ? logs.map((row, index) => renderRow(row, index))
+                : virtualRows.map((virtualRow) =>
+                    renderRow(
+                      logs[virtualRow.index],
+                      virtualRow.index,
+                      virtualRow,
+                    ),
+                  )}
+              {logs.length === 0 && !loading && (
+                <tr>
+                  <td
+                    colSpan={6}
+                    className={cx(
+                      commonTableCellClass,
+                      "text-center py-8 text-muted-foreground",
+                    )}
+                  >
+                    {t("ui.common.audit.table.no_logs", "No audit logs found")}
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="flex-shrink-0 border-t bg-background/50 p-4 text-center backdrop-blur-sm">
+        {hasNextPage ? (
+          <div className="flex flex-col items-center gap-2">
+            {isFetchingNextPage && (
+              <span className="animate-pulse text-xs text-muted-foreground">
+                {t("msg.common.loading", "Loading more...")}
+              </span>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onLoadMore}
+              disabled={isFetchingNextPage}
+            >
+              {isFetchingNextPage
+                ? t("msg.common.loading", "Loading...")
+                : t("ui.common.audit.load_more", "더 보기")}
+            </Button>
+          </div>
+        ) : logs.length > 0 ? (
+          <span className="text-xs text-muted-foreground">
+            {t("msg.common.audit.end", "End of audit feed")}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}

adminfront/src/features/auth/AuthGuard.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import AuthGuard from "./AuthGuard";
+
+const authState = {
+  activeNavigator: undefined,
+  error: undefined as Error | undefined,
+  isAuthenticated: false,
+  isLoading: false,
+  removeUser: vi.fn(async () => undefined),
+};
+
+vi.mock("react-oidc-context", () => ({
+  useAuth: () => authState,
+}));
+
+function renderAuthGuard(initialEntry = "/users") {
+  return render(
+    <MemoryRouter initialEntries={[initialEntry]}>
+      <Routes>
+        <Route path="/" element={<AuthGuard />}>
+          <Route path="users" element={<div>Users outlet</div>} />
+        </Route>
+        <Route path="/login" element={<div>Login outlet</div>} />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+describe("AuthGuard", () => {
+  beforeEach(() => {
+    (
+      window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean }
+    )._IS_TEST_MODE = false;
+    authState.activeNavigator = undefined;
+    authState.error = undefined;
+    authState.isAuthenticated = false;
+    authState.isLoading = false;
+    authState.removeUser.mockClear();
+    window.localStorage.clear();
+  });
+
+  it("clears stale auth state and returns to login when OIDC reports an error", async () => {
+    window.localStorage.setItem("admin_session", "stale-token");
+    authState.error = new Error("stale session");
+
+    renderAuthGuard();
+
+    await waitFor(() => {
+      expect(authState.removeUser).toHaveBeenCalled();
+    });
+    await screen.findByText("Login outlet");
+    expect(window.localStorage.getItem("admin_session")).toBeNull();
+  });
+});

adminfront/src/features/auth/AuthGuard.tsx

@@ -1,13 +1,31 @@
+import { useEffect, useRef } from "react";
 import { useAuth } from "react-oidc-context";
-import { Navigate, Outlet, useLocation } from "react-router-dom";
+import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
+import { clearStoredAdminAuthSession } from "../../lib/auth";
 
 export default function AuthGuard() {
   const auth = useAuth();
   const location = useLocation();
+  const navigate = useNavigate();
+  const handledAuthErrorRef = useRef(false);
   const isTest =
     (window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
       ._IS_TEST_MODE === true;
 
+  useEffect(() => {
+    if (!auth.error || handledAuthErrorRef.current || isTest) {
+      return;
+    }
+
+    handledAuthErrorRef.current = true;
+    clearStoredAdminAuthSession();
+    void Promise.resolve(
+      auth.removeUser ? auth.removeUser() : undefined,
+    ).finally(() => {
+      navigate("/login", { replace: true });
+    });
+  }, [auth, auth.error, isTest, navigate]);
+
   if (isTest) {
     return <Outlet />;
   }

adminfront/src/features/auth/AuthPage.test.tsx

@@ -31,6 +31,8 @@ describe("AuthPage", () => {
 
     expect(screen.getByText("Auth Guard")).toBeInTheDocument();
     expect(screen.getByText("ReBAC permission checker")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Check permission" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Check permission" }),
+    ).toBeInTheDocument();
   });
 });

adminfront/src/features/auth/LoginPage.test.tsx

@@ -0,0 +1,76 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import LoginPage from "./LoginPage";
+
+const mockSigninRedirect = vi.fn();
+const mockUseAuth = vi.fn();
+
+vi.mock("react-oidc-context", () => ({
+  useAuth: () => mockUseAuth(),
+}));
+
+function renderLoginPage(initialEntry: string) {
+  return render(
+    <MemoryRouter initialEntries={[initialEntry]}>
+      <LoginPage />
+    </MemoryRouter>,
+  );
+}
+
+describe("LoginPage", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "crypto", {
+      configurable: true,
+      value: {},
+    });
+    Object.defineProperty(window, "isSecureContext", {
+      configurable: true,
+      value: false,
+    });
+    mockSigninRedirect.mockReset();
+    mockUseAuth.mockReturnValue({
+      activeNavigator: undefined,
+      error: undefined,
+      isAuthenticated: false,
+      isLoading: false,
+      signinRedirect: mockSigninRedirect,
+    });
+  });
+
+  it("shows an actionable error instead of starting PKCE when WebCrypto is unavailable", async () => {
+    renderLoginPage("/login?returnTo=%2F");
+
+    await userEvent.click(
+      screen.getByRole("button", { name: /SSO 계정으로 로그인/i }),
+    );
+
+    expect(mockSigninRedirect).not.toHaveBeenCalled();
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      /SSO 로그인을 시작할 수 없습니다/,
+    );
+  });
+
+  it("preserves the returnTo query when starting SSO manually", async () => {
+    Object.defineProperty(window, "crypto", {
+      configurable: true,
+      value: { subtle: {} },
+    });
+    Object.defineProperty(window, "isSecureContext", {
+      configurable: true,
+      value: true,
+    });
+    renderLoginPage("/login?returnTo=%2Fusers%3Fpage%3D2");
+
+    await userEvent.click(
+      screen.getByRole("button", { name: /SSO 계정으로 로그인/i }),
+    );
+
+    expect(mockSigninRedirect).toHaveBeenCalledWith({
+      state: {
+        returnTo: "/users?page=2",
+      },
+    });
+  });
+});

adminfront/src/features/auth/LoginPage.tsx

@@ -1,5 +1,5 @@
-import { ExternalLink, LogIn, ShieldHalf } from "lucide-react";
-import { useEffect, useRef } from "react";
+import { AlertTriangle, ExternalLink, LogIn, ShieldHalf } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useAuth } from "react-oidc-context";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { Button } from "../../components/ui/button";
@@ -10,15 +10,36 @@ import {
   CardHeader,
   CardTitle,
 } from "../../components/ui/card";
+import { canStartBrowserPkceLogin } from "../../lib/authConfig";
 import { debugLog } from "../../lib/debugLog";
 
+const insecurePkceMessage =
+  "이 주소에서는 브라우저 보안 정책 때문에 SSO 로그인을 시작할 수 없습니다. HTTPS 또는 localhost로 접속하거나, 내부망/host.docker.internal 개발 접속은 Chrome의 insecure-origin secure context 옵션에 실제 auth UI origin(예: http://host.docker.internal:5000)을 정확히 등록해 주세요.";
+
+function isPkceSetupFailure(error: unknown) {
+  const message = error instanceof Error ? error.message : String(error);
+  return /Crypto\.subtle|WebCrypto|PKCE|secure context|subtle/i.test(message);
+}
+
 function LoginPage() {
   const auth = useAuth();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const autoStartedRef = useRef(false);
+  const [loginError, setLoginError] = useState<string | null>(null);
   const returnTo = searchParams.get("returnTo") || "/";
   const shouldAutoLogin = searchParams.get("auto") === "1";
+  const authErrorMessage = useMemo(() => {
+    const message = auth.error?.message;
+    if (!message) {
+      return null;
+    }
+    if (message.includes("Crypto.subtle")) {
+      return insecurePkceMessage;
+    }
+    return message;
+  }, [auth.error?.message]);
+  const visibleLoginError = loginError || authErrorMessage;
 
   useEffect(() => {
     debugLog("[LoginPage] Auth state check:", {
@@ -42,21 +63,46 @@ function LoginPage() {
     if (autoStartedRef.current || auth.isLoading || auth.activeNavigator) {
       return;
     }
+    if (!canStartBrowserPkceLogin()) {
+      setLoginError(insecurePkceMessage);
+      return;
+    }
 
     autoStartedRef.current = true;
-    void auth.signinRedirect({
-      state: {
-        returnTo,
-      },
-    });
+    void auth
+      .signinRedirect({
+        state: {
+          returnTo,
+        },
+      })
+      .catch((error) => {
+        if (isPkceSetupFailure(error)) {
+          setLoginError(insecurePkceMessage);
+          return;
+        }
+        console.error("Auto login redirect failed", error);
+      });
   }, [auth, auth.activeNavigator, auth.isLoading, returnTo, shouldAutoLogin]);
 
-  const handleSSOLogin = () => {
-    void auth.signinRedirect({
-      state: {
-        returnTo: "/",
-      },
-    });
+  const handleSSOLogin = async () => {
+    try {
+      setLoginError(null);
+      if (!canStartBrowserPkceLogin()) {
+        setLoginError(insecurePkceMessage);
+        return;
+      }
+      await auth.signinRedirect({
+        state: {
+          returnTo,
+        },
+      });
+    } catch (error) {
+      if (isPkceSetupFailure(error)) {
+        setLoginError(insecurePkceMessage);
+        return;
+      }
+      console.error("Redirect login failed", error);
+    }
   };
 
   return (
@@ -85,11 +131,7 @@ function LoginPage() {
               variant="ghost"
               className="p-0 h-auto text-destructive underline mt-2 hover:bg-transparent"
               onClick={() => {
-                void auth.signinRedirect({
-                  state: {
-                    returnTo,
-                  },
-                });
+                void handleSSOLogin();
               }}
             >
               다시 시도하기
@@ -127,6 +169,16 @@ function LoginPage() {
               )}
             </Button>
 
+            {visibleLoginError ? (
+              <div
+                role="alert"
+                className="flex gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm leading-5 text-destructive"
+              >
+                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+                <span>{visibleLoginError}</span>
+              </div>
+            ) : null}
+
             <p className="mt-6 text-xs text-center text-muted-foreground leading-relaxed">
               관리자 전역 세션은 보안을 위해 15분간 유지됩니다.
               <br />

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

@@ -48,10 +48,7 @@ function PermissionChecker() {
     <Card className="border-primary/20 bg-[var(--color-panel)]">
       <CardHeader>
         <CardTitle className="text-lg font-bold">
-          {t(
-            "ui.admin.auth_guard.checker.title",
-            "ReBAC permission checker",
-          )}
+          {t("ui.admin.auth_guard.checker.title", "ReBAC permission checker")}
         </CardTitle>
         <CardDescription>
           {t(
@@ -67,6 +64,8 @@ function PermissionChecker() {
               {t("ui.admin.auth_guard.checker.namespace.label", "Namespace")}
             </Label>
             <select
+              id="permission-checker-namespace"
+              name="permission-checker-namespace"
               value={namespace}
               onChange={(e) => setNamespace(e.target.value)}
               className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
@@ -92,7 +91,9 @@ function PermissionChecker() {
             </select>
           </div>
           <div className="space-y-2">
-            <Label>{t("ui.admin.auth_guard.checker.relation", "Relation")}</Label>
+            <Label>
+              {t("ui.admin.auth_guard.checker.relation", "Relation")}
+            </Label>
             <Input
               placeholder={t(
                 "ui.admin.auth_guard.checker.relation_placeholder",
@@ -103,7 +104,9 @@ function PermissionChecker() {
             />
           </div>
           <div className="space-y-2">
-            <Label>{t("ui.admin.auth_guard.checker.object_id", "Object ID")}</Label>
+            <Label>
+              {t("ui.admin.auth_guard.checker.object_id", "Object ID")}
+            </Label>
             <Input
               placeholder={t(
                 "ui.admin.auth_guard.checker.object_id_placeholder",
@@ -115,10 +118,7 @@ function PermissionChecker() {
           </div>
           <div className="space-y-2">
             <Label>
-              {t(
-                "ui.admin.auth_guard.checker.subject",
-                "Subject (User:ID)",
-              )}
+              {t("ui.admin.auth_guard.checker.subject", "Subject (User:ID)")}
             </Label>
             <Input
               placeholder={t(
@@ -155,10 +155,7 @@ function PermissionChecker() {
               <>
                 <CheckCircle2 size={48} />
                 <div className="text-lg font-bold">
-                  {t(
-                    "ui.admin.auth_guard.checker.allowed",
-                    "Access ALLOWED",
-                  )}
+                  {t("ui.admin.auth_guard.checker.allowed", "Access ALLOWED")}
                 </div>
                 <p className="text-center text-sm opacity-80">
                   {t(
@@ -171,10 +168,7 @@ function PermissionChecker() {
               <>
                 <XCircle size={48} />
                 <div className="text-lg font-bold">
-                  {t(
-                    "ui.admin.auth_guard.checker.denied",
-                    "Access DENIED",
-                  )}
+                  {t("ui.admin.auth_guard.checker.denied", "Access DENIED")}
                 </div>
                 <p className="text-center text-sm opacity-80">
                   {t(

adminfront/src/features/coverage/adminAuditAuth.test.tsx

@@ -0,0 +1,192 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import type React from "react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18nMock } from "../../test/i18nMock";
+import AuditLogsPage from "../audit/AuditLogsPage";
+import AuthCallbackPage from "../auth/AuthCallbackPage";
+import AuthGuard from "../auth/AuthGuard";
+
+const authState = {
+  isAuthenticated: true,
+  isLoading: false,
+  activeNavigator: undefined as string | undefined,
+  error: null as Error | null,
+  user: {
+    access_token: "access-token",
+    state: undefined as unknown,
+  },
+};
+
+vi.mock("react-oidc-context", () => ({
+  useAuth: () => authState,
+}));
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+vi.mock("../../../../common/core/components/audit", () => ({
+  AuditLogTable: ({
+    logs,
+  }: {
+    logs: Array<{ user_id: string; event_type: string }>;
+  }) => (
+    <div>
+      {logs.map((log) => (
+        <div key={`${log.user_id}-${log.event_type}`}>
+          <span>{log.user_id}</span>
+          <span>{log.event_type}</span>
+        </div>
+      ))}
+    </div>
+  ),
+}));
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchAuditLogs: vi.fn(async () => ({
+    items: [
+      {
+        event_id: "event-1",
+        timestamp: "2026-05-01T00:00:00Z",
+        user_id: "admin-1",
+        event_type: "USER_UPDATE",
+        status: "success",
+        ip_address: "127.0.0.1",
+        user_agent: "Vitest",
+        details: JSON.stringify({ action: "USER_UPDATE", actor: "Admin" }),
+      },
+      {
+        event_id: "event-2",
+        timestamp: "2026-05-01T01:00:00Z",
+        user_id: "admin-2",
+        event_type: "LOGIN_FAILED",
+        status: "failure",
+        ip_address: "127.0.0.2",
+        user_agent: "Vitest",
+        details: "{}",
+      },
+    ],
+    limit: 50,
+  })),
+}));
+
+function renderWithProviders(ui: React.ReactElement, entry = "/") {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[entry]}>{ui}</MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("admin audit and auth coverage smoke", () => {
+  beforeEach(() => {
+    (
+      window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean }
+    )._IS_TEST_MODE = false;
+    authState.isAuthenticated = true;
+    authState.isLoading = false;
+    authState.activeNavigator = undefined;
+    authState.error = null;
+    authState.user = {
+      access_token: "access-token",
+      state: undefined,
+    };
+    window.localStorage.clear();
+  });
+
+  it("renders audit log table with fetched events", async () => {
+    renderWithProviders(<AuditLogsPage />);
+
+    expect(await screen.findByText("감사 로그")).toBeInTheDocument();
+    expect(await screen.findByText("admin-1")).toBeInTheDocument();
+    expect(screen.getByText("USER_UPDATE")).toBeInTheDocument();
+  });
+
+  it("renders AuthGuard loading, error, redirect, test, and outlet states", async () => {
+    authState.isLoading = true;
+    renderWithProviders(
+      <Routes>
+        <Route path="/secure" element={<AuthGuard />}>
+          <Route index element={<div>Secure outlet</div>} />
+        </Route>
+      </Routes>,
+      "/secure",
+    );
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+
+    authState.isLoading = false;
+    authState.error = new Error("OIDC failed");
+    renderWithProviders(
+      <Routes>
+        <Route path="/secure" element={<AuthGuard />}>
+          <Route index element={<div>Secure outlet</div>} />
+        </Route>
+      </Routes>,
+      "/secure",
+    );
+    expect(screen.getByText("인증 오류")).toBeInTheDocument();
+
+    authState.error = null;
+    authState.isAuthenticated = false;
+    renderWithProviders(
+      <Routes>
+        <Route path="/secure" element={<AuthGuard />}>
+          <Route index element={<div>Secure outlet</div>} />
+        </Route>
+        <Route path="/login" element={<div>Login outlet</div>} />
+      </Routes>,
+      "/secure?x=1",
+    );
+    expect(screen.getByText("Login outlet")).toBeInTheDocument();
+
+    (
+      window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean }
+    )._IS_TEST_MODE = true;
+    renderWithProviders(
+      <Routes>
+        <Route path="/secure" element={<AuthGuard />}>
+          <Route index element={<div>Secure outlet</div>} />
+        </Route>
+      </Routes>,
+      "/secure",
+    );
+    expect(screen.getByText("Secure outlet")).toBeInTheDocument();
+  });
+
+  it("stores callback token and navigates by auth result", async () => {
+    authState.isAuthenticated = true;
+    authState.user = {
+      access_token: "callback-token",
+      state: { returnTo: "/users" },
+    };
+
+    renderWithProviders(
+      <Routes>
+        <Route path="/auth/callback" element={<AuthCallbackPage />} />
+        <Route path="/users" element={<div>Users outlet</div>} />
+        <Route path="/login" element={<div>Login outlet</div>} />
+      </Routes>,
+      "/auth/callback",
+    );
+    expect(await screen.findByText("Users outlet")).toBeInTheDocument();
+    expect(window.localStorage.getItem("admin_session")).toBe("callback-token");
+
+    authState.isAuthenticated = false;
+    authState.error = new Error("callback failed");
+    renderWithProviders(
+      <Routes>
+        <Route path="/auth/callback" element={<AuthCallbackPage />} />
+        <Route path="/login" element={<div>Login outlet</div>} />
+      </Routes>,
+      "/auth/callback",
+    );
+    expect(await screen.findByText("Login outlet")).toBeInTheDocument();
+  });
+});

adminfront/src/features/coverage/adminLargePages.test.tsx

@@ -0,0 +1,506 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import type React from "react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18nMock } from "../../test/i18nMock";
+import * as adminApi from "../../lib/adminApi";
+import { TenantWorksmobilePage } from "../tenants/routes/TenantWorksmobilePage";
+import TenantListPage from "../tenants/routes/TenantListPage";
+import UserCreatePage from "../users/UserCreatePage";
+import UserDetailPage from "../users/UserDetailPage";
+
+const tenantItems = [
+  {
+    id: "tenant-root",
+    type: "COMPANY_GROUP",
+    name: "한맥 가족",
+    slug: "hanmac-family",
+    description: "root",
+    status: "active",
+    memberCount: 0,
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+  {
+    id: "tenant-company",
+    type: "COMPANY",
+    parentId: "tenant-root",
+    name: "GPDTDC",
+    slug: "gpdtdc",
+    description: "company",
+    status: "active",
+    memberCount: 2,
+    config: {
+      userSchema: [
+        {
+          key: "employee_id",
+          label: "사번",
+          type: "text",
+          required: false,
+        },
+      ],
+    },
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+  {
+    id: "tenant-leaf",
+    type: "ORGANIZATION",
+    parentId: "tenant-company",
+    name: "기술연구팀",
+    slug: "gpdtdc-rnd",
+    description: "leaf",
+    status: "active",
+    memberCount: 1,
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+];
+
+const userDetail = {
+  id: "user-1",
+  email: "engineer@example.com",
+  name: "Engineer User",
+  phone: "010-0000-0000",
+  role: "user",
+  status: "active",
+  tenantSlug: "gpdtdc-rnd",
+  tenantId: "tenant-leaf",
+  department: "기술연구팀",
+  grade: "책임",
+  position: "팀장",
+  jobTitle: "Backend",
+  metadata: {
+    employee_id: "EMP001",
+    sub_email: ["engineer.sub@example.com"],
+  },
+  tenant: tenantItems[2],
+  appointments: [
+    {
+      tenantId: "tenant-leaf",
+      tenantSlug: "gpdtdc-rnd",
+      tenantName: "기술연구팀",
+      isPrimary: true,
+      isOwner: false,
+      isAdmin: false,
+      isManager: true,
+      department: "기술연구팀",
+      grade: "책임",
+      position: "팀장",
+      jobTitle: "Backend",
+      metadata: { employee_id: "EMP001" },
+    },
+  ],
+  createdAt: "2026-05-01T00:00:00Z",
+  updatedAt: "2026-05-02T00:00:00Z",
+};
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+vi.mock("../../components/auth/RoleGuard", () => ({
+  RoleGuard: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchMe: vi.fn(async () => ({
+    id: "admin-1",
+    role: "super_admin",
+    name: "Admin User",
+    email: "admin@example.com",
+  })),
+  fetchAllTenants: vi.fn(async () => ({
+    items: tenantItems,
+    total: tenantItems.length,
+  })),
+  fetchTenants: vi.fn(async () => ({
+    items: tenantItems,
+    limit: 500,
+    offset: 0,
+    total: tenantItems.length,
+    nextCursor: null,
+  })),
+  fetchTenant: vi.fn(async (id: string) => {
+    return tenantItems.find((tenant) => tenant.id === id) ?? tenantItems[1];
+  }),
+  createUser: vi.fn(async () => ({
+    id: "created-user",
+    email: "created@example.com",
+    generatedPassword: "GeneratedPassword!1",
+  })),
+  fetchUser: vi.fn(async () => userDetail),
+  fetchUserRpHistory: vi.fn(async () => [
+    {
+      client_id: "orgfront",
+      client_name: "OrgFront",
+      last_login_at: "2026-05-01T00:00:00Z",
+      login_count: 3,
+    },
+  ]),
+  fetchGlobalCustomClaimDefinitions: vi.fn(async () => ({ items: [] })),
+  fetchPasswordPolicy: vi.fn(async () => ({
+    minLength: 12,
+    lowercase: true,
+    uppercase: true,
+    number: true,
+    nonAlphanumeric: true,
+    minCharacterTypes: 3,
+  })),
+  updateUser: vi.fn(async () => userDetail),
+  deleteUser: vi.fn(async () => undefined),
+  updateTenant: vi.fn(async () => tenantItems[1]),
+  deleteTenantsBulk: vi.fn(async () => ({ deleted: 1 })),
+  exportTenantsCSV: vi.fn(async () => new Blob(["name,slug\nGPDTDC,gpdtdc"])),
+  importTenantsCSV: vi.fn(async () => ({
+    created: 1,
+    updated: 0,
+    failed: 0,
+    errors: [],
+  })),
+  fetchWorksmobileOverview: vi.fn(async () => ({
+    tenant: tenantItems[1],
+    config: {
+      enabled: true,
+      tokenConfigured: true,
+      adminTenantId: "works-admin",
+      domainMappings: { "example.com": 1001 },
+    },
+    recentJobs: [
+      {
+        id: "job-1",
+        resourceType: "USER",
+        resourceId: "user-1",
+        action: "SYNC",
+        status: "failed",
+        retryCount: 1,
+        lastError: "temporary failure",
+        createdAt: "2026-05-01T00:00:00Z",
+        updatedAt: "2026-05-01T00:10:00Z",
+      },
+    ],
+  })),
+  fetchWorksmobileComparison: vi.fn(async () => ({
+    users: [
+      {
+        resourceType: "USER",
+        baronId: "user-1",
+        baronName: "Engineer User",
+        baronEmail: "engineer@example.com",
+        baronPrimaryOrgId: "tenant-leaf",
+        baronPrimaryOrgName: "기술연구팀",
+        worksmobileId: "works-user-1",
+        worksmobileName: "Engineer User",
+        worksmobileEmail: "engineer@example.com",
+        worksmobileDomainId: 1001,
+        worksmobilePrimaryOrgId: "works-org-1",
+        worksmobilePrimaryOrgName: "기술연구팀",
+        status: "matched",
+      },
+      {
+        resourceType: "USER",
+        baronId: "user-2",
+        baronName: "New User",
+        baronEmail: "new@example.com",
+        worksmobileJobStatus: "failed",
+        worksmobileJobRetryCount: 2,
+        worksmobileLastError: "worksmobile api failed",
+        status: "missing_in_worksmobile",
+      },
+      {
+        resourceType: "USER",
+        baronId: "user-3",
+        baronName: "Next User",
+        baronEmail: "next@example.com",
+        status: "missing_in_worksmobile",
+      },
+    ],
+    groups: [
+      {
+        resourceType: "ORG_UNIT",
+        baronId: "tenant-leaf",
+        baronSlug: "gpdtdc-rnd",
+        baronName: "기술연구팀",
+        worksmobileId: "works-org-1",
+        worksmobileName: "기술연구팀",
+        status: "needs_update",
+      },
+    ],
+  })),
+  fetchWorksmobileCredentialBatches: vi.fn(async () => [
+    {
+      batchId: "credential-batch-1",
+      operation: "worksmobile_user_sync",
+      userCount: 1,
+      processedCount: 1,
+      failedCount: 1,
+      hasPasswords: true,
+      failures: [
+        {
+          userId: "failed-user",
+          email: "failed-user@samaneng.com",
+          status: "failed",
+          retryCount: 2,
+          lastError: "worksmobile api failed",
+          updatedAt: "2026-06-01T04:05:00Z",
+        },
+      ],
+      createdAt: "2026-06-01T04:00:00Z",
+      updatedAt: "2026-06-01T04:00:00Z",
+    },
+    {
+      batchId: "credential-batch-pending",
+      operation: "worksmobile_user_sync",
+      userCount: 2,
+      pendingCount: 1,
+      processingCount: 1,
+      processedCount: 0,
+      failedCount: 0,
+      hasPasswords: true,
+      createdAt: "2026-06-01T04:10:00Z",
+      updatedAt: "2026-06-01T04:10:00Z",
+    },
+  ]),
+  enqueueWorksmobileBackfillDryRun: vi.fn(async () => ({ id: "job-dry" })),
+  retryWorksmobileJob: vi.fn(async () => ({ id: "job-retry" })),
+  downloadWorksmobileInitialPasswordsCSV: vi.fn(async () => ({
+    blob: new Blob(["id"]),
+    filename: "worksmobile_initial_passwords.csv",
+  })),
+  enqueueWorksmobileOrgUnitSync: vi.fn(async () => ({ id: "job-org" })),
+  enqueueWorksmobileOrgUnitDelete: vi.fn(async () => ({ id: "job-delete" })),
+  enqueueWorksmobileUserSync: vi.fn(async () => ({ id: "job-user" })),
+  resetWorksmobileUserPassword: vi.fn(async () => ({ id: "job-reset" })),
+  deleteWorksmobileCredentialBatchPasswords: vi.fn(async () => ({
+    batchId: "credential-batch-1",
+    userCount: 1,
+    hasPasswords: false,
+  })),
+}));
+
+function renderWithProviders(ui: React.ReactElement, entry = "/") {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[entry]}>{ui}</MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("adminfront large page coverage smoke", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    if (typeof window !== "undefined") {
+      (window as any)._IS_TEST_MODE = true;
+    }
+  });
+
+  it("renders user creation form with tenant context", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route path="/users/new" element={<UserCreatePage />} />
+      </Routes>,
+      "/users/new?tenantSlug=gpdtdc-rnd",
+    );
+
+    expect(await screen.findByText("사용자 추가")).toBeInTheDocument();
+    expect(screen.getByLabelText("이메일")).toBeInTheDocument();
+  });
+
+  it("renders user detail form and RP history", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route path="/users/:id" element={<UserDetailPage />} />
+      </Routes>,
+      "/users/user-1",
+    );
+
+    expect(await screen.findByDisplayValue("Engineer User")).toBeInTheDocument();
+    expect(screen.getAllByText("기술연구팀").length).toBeGreaterThan(0);
+    expect(screen.getByDisplayValue("engineer@example.com")).toBeInTheDocument();
+  });
+
+  it("renders tenant list hierarchy", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route path="/tenants" element={<TenantListPage />} />
+      </Routes>,
+      "/tenants",
+    );
+
+    expect(await screen.findByText("GPDTDC")).toBeInTheDocument();
+    expect(screen.getByText("기술연구팀")).toBeInTheDocument();
+  });
+
+  it("renders worksmobile comparison screens", async () => {
+    cleanup();
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/worksmobile"
+          element={<TenantWorksmobilePage />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/worksmobile",
+    );
+
+    expect(await screen.findByText("Worksmobile 연동")).toBeInTheDocument();
+    expect(await screen.findByText("Baron / Works 비교")).toBeInTheDocument();
+    expect(
+      await screen.findByText("최근 실패: worksmobile api failed"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Backfill Dry-run")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "초기 비밀번호 CSV" })).toBeNull();
+  });
+
+  it("does not automatically download the selected Worksmobile user credential batch after create enqueue", async () => {
+    vi.spyOn(window.URL, "createObjectURL").mockReturnValue("blob:test");
+    vi.spyOn(window.URL, "revokeObjectURL").mockImplementation(() => {});
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/worksmobile"
+          element={<TenantWorksmobilePage />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/worksmobile",
+    );
+
+    await screen.findByText("New User");
+    fireEvent.click(screen.getByRole("checkbox", { name: "New User 선택" }));
+    fireEvent.click(
+      screen.getByRole("button", { name: "선택 구성원 WORKS에 생성" }),
+    );
+    fireEvent.change(screen.getByLabelText("초기 비밀번호"), {
+      target: { value: "InitialPassword!1" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "생성 작업 등록" }));
+
+    await waitFor(() =>
+      expect(adminApi.enqueueWorksmobileUserSync).toHaveBeenCalledWith(
+        "tenant-company",
+        "user-2",
+        undefined,
+        "InitialPassword!1",
+      ),
+    );
+    expect(adminApi.downloadWorksmobileInitialPasswordsCSV).not.toHaveBeenCalled();
+  });
+
+  it("continues selected Worksmobile user create enqueue after one row fails", async () => {
+    vi.mocked(adminApi.enqueueWorksmobileUserSync)
+      .mockRejectedValueOnce(new Error("sync failed"))
+      .mockResolvedValueOnce({ id: "job-user-3" } as never);
+    vi.spyOn(window.URL, "createObjectURL").mockReturnValue("blob:test");
+    vi.spyOn(window.URL, "revokeObjectURL").mockImplementation(() => {});
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/worksmobile"
+          element={<TenantWorksmobilePage />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/worksmobile",
+    );
+
+    await screen.findByText("New User");
+    fireEvent.click(screen.getByRole("checkbox", { name: "New User 선택" }));
+    fireEvent.click(screen.getByRole("checkbox", { name: "Next User 선택" }));
+    fireEvent.click(
+      screen.getByRole("button", { name: "선택 구성원 WORKS에 생성" }),
+    );
+    fireEvent.change(screen.getByLabelText("초기 비밀번호"), {
+      target: { value: "InitialPassword!1" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "생성 작업 등록" }));
+
+    await waitFor(() =>
+      expect(adminApi.enqueueWorksmobileUserSync).toHaveBeenCalledTimes(2),
+    );
+    expect(adminApi.enqueueWorksmobileUserSync).toHaveBeenNthCalledWith(
+      1,
+      "tenant-company",
+      "user-2",
+      undefined,
+      "InitialPassword!1",
+    );
+    expect(adminApi.enqueueWorksmobileUserSync).toHaveBeenNthCalledWith(
+      2,
+      "tenant-company",
+      "user-3",
+      undefined,
+      "InitialPassword!1",
+    );
+    expect(adminApi.downloadWorksmobileInitialPasswordsCSV).not.toHaveBeenCalled();
+  });
+
+  it("renders and retries Worksmobile jobs from history", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/worksmobile"
+          element={<TenantWorksmobilePage />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/worksmobile",
+    );
+
+    fireEvent.click(screen.getByRole("tab", { name: "이력" }));
+    expect((await screen.findAllByText("user-1")).length).toBeGreaterThan(0);
+    expect(screen.getByText("failed")).toBeInTheDocument();
+
+    fireEvent.click(screen.getAllByRole("button", { name: "" })[0]);
+    await waitFor(() =>
+      expect(adminApi.retryWorksmobileJob).toHaveBeenCalledWith(
+        "tenant-company",
+        "job-1",
+      ),
+    );
+  });
+
+  it("opens Worksmobile password management for matched users", async () => {
+    const openSpy = vi.spyOn(window, "open").mockReturnValue(null);
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/worksmobile"
+          element={<TenantWorksmobilePage />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/worksmobile",
+    );
+
+    await screen.findByText("Worksmobile 연동");
+    fireEvent.click(screen.getAllByRole("button", { name: "양쪽 다 있음" })[0]);
+    await screen.findAllByText("Engineer User");
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "Engineer User 비밀번호 관리",
+      }),
+    );
+
+    expect(openSpy).toHaveBeenCalledWith(
+      expect.stringContaining(
+        "https://auth.worksmobile.com/integrate/password/manage",
+      ),
+      "_blank",
+      "noopener,noreferrer",
+    );
+    const [url] = openSpy.mock.calls[0] ?? [];
+    const parsed = new URL(String(url));
+    expect(parsed.searchParams.get("targetUserTenantId")).toBe("works-admin");
+    expect(parsed.searchParams.get("targetUserDomainId")).toBe("1001");
+    expect(parsed.searchParams.get("targetUserIdNo")).toBe("works-user-1");
+  });
+});

adminfront/src/features/coverage/adminPageAnimationPolicy.test.ts

@@ -0,0 +1,33 @@
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+function listSourceFiles(directory: string): string[] {
+  const entries = readdirSync(directory);
+  const files: string[] = [];
+  for (const entry of entries) {
+    const path = join(directory, entry);
+    const stat = statSync(path);
+    if (stat.isDirectory()) {
+      files.push(...listSourceFiles(path));
+      continue;
+    }
+    if (path.endsWith(".tsx")) {
+      files.push(path);
+    }
+  }
+  return files;
+}
+
+describe("admin page animation policy", () => {
+  it("does not use long enter fade animations on stable page containers", () => {
+    const sourceRoot = join(process.cwd(), "src");
+    const offenders = listSourceFiles(sourceRoot).filter((file) =>
+      readFileSync(file, "utf8").includes("animate-in fade-in duration-500"),
+    );
+
+    expect(offenders.map((file) => file.replace(`${sourceRoot}/`, ""))).toEqual(
+      [],
+    );
+  });
+});

adminfront/src/features/coverage/adminTenantDetailPages.test.tsx

@@ -0,0 +1,129 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import type React from "react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18nMock } from "../../test/i18nMock";
+import TenantCreatePage from "../tenants/routes/TenantCreatePage";
+import { TenantProfilePage } from "../tenants/routes/TenantProfilePage";
+import { TenantSchemaPage } from "../tenants/routes/TenantSchemaPage";
+
+const tenants = [
+  {
+    id: "tenant-root",
+    type: "COMPANY_GROUP",
+    name: "한맥 가족",
+    slug: "hanmac-family",
+    description: "",
+    status: "active",
+    memberCount: 0,
+    domains: ["hmac.kr"],
+    config: { visibility: "public" },
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+  {
+    id: "tenant-company",
+    type: "COMPANY",
+    parentId: "tenant-root",
+    name: "GPDTDC",
+    slug: "gpdtdc",
+    description: "실 조직",
+    status: "active",
+    memberCount: 2,
+    domains: ["gpdtdc.example.com"],
+    config: {
+      visibility: "public",
+      userSchema: [
+        {
+          key: "employee_id",
+          label: "사번",
+          type: "text",
+          required: false,
+          adminOnly: false,
+          isLoginId: true,
+          indexed: true,
+        },
+      ],
+    },
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+];
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchMe: vi.fn(async () => ({
+    id: "admin-1",
+    role: "super_admin",
+  })),
+  fetchAllTenants: vi.fn(async () => ({
+    items: tenants,
+    total: tenants.length,
+  })),
+  fetchTenant: vi.fn(async (id: string) => {
+    return tenants.find((tenant) => tenant.id === id) ?? tenants[1];
+  }),
+  createTenant: vi.fn(async () => tenants[1]),
+  updateTenant: vi.fn(async () => tenants[1]),
+  deleteTenant: vi.fn(async () => undefined),
+  approveTenant: vi.fn(async () => tenants[1]),
+}));
+
+function renderWithProviders(ui: React.ReactElement, entry: string) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[entry]}>{ui}</MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("admin tenant detail page coverage smoke", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+  });
+
+  it("renders tenant create page with parent context", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route path="/tenants/new" element={<TenantCreatePage />} />
+      </Routes>,
+      "/tenants/new?parentId=tenant-root",
+    );
+
+    expect(await screen.findByText("테넌트 생성")).toBeInTheDocument();
+    expect(screen.getByText("Tenant Profile")).toBeInTheDocument();
+    expect(screen.getByText("정책 메모")).toBeInTheDocument();
+  });
+
+  it("renders tenant profile and schema management pages", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId"
+          element={
+            <>
+              <TenantProfilePage />
+              <TenantSchemaPage />
+            </>
+          }
+        />
+      </Routes>,
+      "/tenants/tenant-company",
+    );
+
+    expect(await screen.findByDisplayValue("GPDTDC")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("gpdtdc")).toBeInTheDocument();
+    expect(await screen.findByText("사용자 스키마 확장")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("employee_id")).toBeInTheDocument();
+  });
+});

adminfront/src/features/coverage/adminTenantGroupsPage.test.tsx

@@ -0,0 +1,117 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import type React from "react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18nMock } from "../../test/i18nMock";
+import TenantGroupsPage from "../tenants/routes/TenantGroupsPage";
+
+const tenant = {
+  id: "tenant-company",
+  type: "COMPANY",
+  name: "GPDTDC",
+  slug: "gpdtdc",
+  description: "",
+  status: "active",
+  memberCount: 2,
+  createdAt: "2026-05-01T00:00:00Z",
+  updatedAt: "2026-05-01T00:00:00Z",
+};
+
+const members = [
+  {
+    id: "user-1",
+    name: "Member User",
+    email: "member@example.com",
+  },
+];
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchMe: vi.fn(async () => ({ id: "admin-user", role: "super_admin" })),
+  fetchTenant: vi.fn(async () => tenant),
+  fetchUsers: vi.fn(async () => ({
+    items: [
+      {
+        id: "user-1",
+        name: "Member User",
+        email: "member@example.com",
+        role: "user",
+        status: "active",
+      },
+      {
+        id: "user-2",
+        name: "Candidate User",
+        email: "candidate@example.com",
+        role: "user",
+        status: "active",
+      },
+    ],
+    total: 2,
+  })),
+  fetchGroups: vi.fn(async () => [
+    {
+      id: "group-root",
+      tenantId: "tenant-company",
+      name: "연구소",
+      description: "root group",
+      members,
+      createdAt: "2026-05-01T00:00:00Z",
+      updatedAt: "2026-05-01T00:00:00Z",
+    },
+    {
+      id: "group-child",
+      tenantId: "tenant-company",
+      parentId: "group-root",
+      name: "플랫폼팀",
+      description: "child group",
+      members: [],
+      createdAt: "2026-05-01T00:00:00Z",
+      updatedAt: "2026-05-01T00:00:00Z",
+    },
+  ]),
+  createGroup: vi.fn(async () => undefined),
+  deleteGroup: vi.fn(async () => undefined),
+  addGroupMember: vi.fn(async () => undefined),
+  removeGroupMember: vi.fn(async () => undefined),
+}));
+
+function renderWithProviders(ui: React.ReactElement, entry: string) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[entry]}>{ui}</MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("TenantGroupsPage coverage smoke", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+  });
+
+  it("renders group hierarchy and selected group members", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/groups"
+          element={<TenantGroupsPage />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/groups",
+    );
+
+    expect((await screen.findAllByText("연구소")).length).toBeGreaterThan(0);
+    expect(screen.getAllByText("플랫폼팀").length).toBeGreaterThan(0);
+    expect(screen.getByText("새 그룹 생성")).toBeInTheDocument();
+    expect(screen.getByText("조직 단위 레벨")).toBeInTheDocument();
+  });
+});

adminfront/src/features/coverage/adminTenantTabs.test.tsx

@@ -0,0 +1,276 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type React from "react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18nMock } from "../../test/i18nMock";
+import { TenantAdminsAndOwnersTab } from "../tenants/routes/TenantAdminsAndOwnersTab";
+import { TenantFineGrainedPermissionsTab } from "../tenants/routes/TenantFineGrainedPermissionsTab";
+import TenantUserGroupsTab from "../user-groups/routes/TenantUserGroupsTab";
+
+const exportUsersCSVMock = vi.hoisted(() =>
+  vi.fn(async () => ({
+    blob: new Blob(["email,name\nmember@example.com,Member User\n"], {
+      type: "text/csv",
+    }),
+    filename: "users_export_20260609.csv",
+  })),
+);
+const bulkUpdateUsersMock = vi.hoisted(() => vi.fn(async () => ({ results: [] })));
+
+const tenants = [
+  {
+    id: "tenant-root",
+    type: "COMPANY_GROUP",
+    name: "한맥 가족",
+    slug: "hanmac-family",
+    description: "",
+    status: "active",
+    memberCount: 0,
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+  {
+    id: "tenant-company",
+    type: "COMPANY",
+    parentId: "tenant-root",
+    name: "GPDTDC",
+    slug: "gpdtdc",
+    description: "",
+    status: "active",
+    memberCount: 2,
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+  {
+    id: "tenant-leaf",
+    type: "ORGANIZATION",
+    parentId: "tenant-company",
+    name: "기술연구팀",
+    slug: "gpdtdc-rnd",
+    description: "",
+    status: "active",
+    memberCount: 1,
+    createdAt: "2026-05-01T00:00:00Z",
+    updatedAt: "2026-05-01T00:00:00Z",
+  },
+];
+
+const users = [
+  {
+    id: "user-owner",
+    name: "Owner User",
+    email: "owner@example.com",
+    role: "super_admin",
+    status: "active",
+  },
+  {
+    id: "user-admin",
+    name: "Admin User",
+    email: "admin@example.com",
+    role: "tenant_admin",
+    status: "active",
+  },
+  {
+    id: "user-member",
+    name: "Member User",
+    email: "member@example.com",
+    role: "user",
+    status: "active",
+    tenantSlug: "gpdtdc-rnd",
+    tenant: tenants[2],
+  },
+];
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+vi.mock("react-oidc-context", () => ({
+  useAuth: () => ({
+    user: {
+      profile: {
+        sub: "admin-1",
+      },
+    },
+  }),
+}));
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchMe: vi.fn(async () => users[0]),
+  fetchTenant: vi.fn(async (tenantId) => ({
+    id: tenantId,
+    name: "Test Tenant",
+    slug: "test-tenant",
+    userPermissions: { view: true, manage: true, manage_admins: true },
+  })),
+  fetchTenantOwners: vi.fn(async () => [users[0]]),
+  fetchTenantAdmins: vi.fn(async () => [users[1]]),
+  addTenantOwner: vi.fn(async () => undefined),
+  addTenantAdmin: vi.fn(async () => undefined),
+  removeTenantOwner: vi.fn(async () => undefined),
+  removeTenantAdmin: vi.fn(async () => undefined),
+  fetchTenantRelations: vi.fn(async () => [
+    {
+      userId: "user-relation-1",
+      name: "Relation User",
+      email: "relation@example.com",
+      relations: ["profile_managers", "schema_viewers"],
+    },
+  ]),
+  addTenantRelation: vi.fn(async () => undefined),
+  removeTenantRelation: vi.fn(async () => undefined),
+  fetchUsers: vi.fn(async () => ({
+    items: users,
+    total: users.length,
+  })),
+  fetchAllTenants: vi.fn(async () => ({
+    items: tenants,
+    total: tenants.length,
+  })),
+  updateTenant: vi.fn(async () => tenants[2]),
+  updateUser: vi.fn(async () => users[2]),
+  bulkUpdateUsers: bulkUpdateUsersMock,
+  exportTenantsCSV: vi.fn(async () => ({
+    blob: new Blob(["name,slug"]),
+    filename: "tenants.csv",
+  })),
+  exportUsersCSV: exportUsersCSVMock,
+}));
+
+function renderWithProviders(ui: React.ReactElement, entry: string) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[entry]}>{ui}</MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("admin tenant tab coverage smoke", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+    vi.spyOn(window.URL, "createObjectURL").mockReturnValue(
+      "blob:tenant-users-export",
+    );
+    vi.spyOn(window.URL, "revokeObjectURL").mockImplementation(() => {});
+  });
+
+  it("renders tenant owners and admins lists", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/permissions"
+          element={<TenantAdminsAndOwnersTab />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/permissions",
+    );
+
+    expect(await screen.findByText("Owner User")).toBeInTheDocument();
+    expect(screen.getByText("Admin User")).toBeInTheDocument();
+    expect(screen.getByText("owner@example.com")).toBeInTheDocument();
+    expect(screen.getByText("admin@example.com")).toBeInTheDocument();
+  });
+
+  it("renders tenant fine-grained relations list", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/relations"
+          element={<TenantFineGrainedPermissionsTab />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/relations",
+    );
+
+    expect(await screen.findByText("Relation User")).toBeInTheDocument();
+    expect(screen.getByText("relation@example.com")).toBeInTheDocument();
+    expect(screen.getByText("세부 권한 설정 (Fine-grained Permissions)")).toBeInTheDocument();
+  });
+
+  it("renders tenant hierarchy and selected organization members", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/organization"
+          element={<TenantUserGroupsTab />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/organization",
+    );
+
+    expect((await screen.findAllByText("GPDTDC")).length).toBeGreaterThan(0);
+    expect(screen.getAllByText("기술연구팀").length).toBeGreaterThan(0);
+    expect(await screen.findByText("Member User")).toBeInTheDocument();
+  });
+
+  it("exports selected organization users by tenant slug", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/organization"
+          element={<TenantUserGroupsTab />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/organization",
+    );
+
+    expect(await screen.findByText("Member User")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("tenant-current-users-export-btn"));
+
+    await waitFor(() => {
+      expect(exportUsersCSVMock).toHaveBeenCalledWith("", "gpdtdc", false);
+    });
+  });
+
+  it("queues searched users and bulk adds them to the selected organization", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/tenants/:tenantId/organization"
+          element={<TenantUserGroupsTab />}
+        />
+      </Routes>,
+      "/tenants/tenant-company/organization",
+    );
+
+    expect(await screen.findByText("Member User")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /멤버 추가/ }));
+    fireEvent.change(screen.getByTestId("tenant-org-member-search-input"), {
+      target: { value: "user" },
+    });
+    fireEvent.click(screen.getByTestId("tenant-org-member-search-btn"));
+
+    fireEvent.click(
+      await screen.findByTestId("tenant-org-member-search-result-user-owner"),
+    );
+    fireEvent.click(
+      await screen.findByTestId("tenant-org-member-search-result-user-admin"),
+    );
+
+    expect(screen.getByTestId("tenant-org-member-add-queue")).toHaveTextContent(
+      "Owner User",
+    );
+    expect(screen.getByTestId("tenant-org-member-add-queue")).toHaveTextContent(
+      "Admin User",
+    );
+
+    fireEvent.click(screen.getByTestId("tenant-org-member-add-submit-btn"));
+
+    await waitFor(() => {
+      expect(bulkUpdateUsersMock).toHaveBeenCalledWith({
+        userIds: ["user-owner", "user-admin"],
+        tenantSlug: "gpdtdc",
+        isAddTenant: true,
+      });
+    });
+  });
+});

adminfront/src/features/integrity/DataIntegrityPage.test.tsx

@@ -7,6 +7,7 @@ import {
   fetchMe,
   fetchOrphanUserLoginIDs,
 } from "../../lib/adminApi";
+import { expectNoAnonymousFormFields } from "../../test/formFieldDiagnostics";
 import { createI18nMock } from "../../test/i18nMock";
 import DataIntegrityPage from "./DataIntegrityPage";
 
@@ -95,6 +96,7 @@ describe("DataIntegrityPage", () => {
   beforeEach(() => {
     currentRole = "super_admin";
     vi.clearAllMocks();
+    vi.spyOn(window, "confirm").mockReturnValue(true);
     window.localStorage.setItem("locale", "ko");
   });
 
@@ -115,11 +117,12 @@ describe("DataIntegrityPage", () => {
 
   it("shows orphan login ID targets and deletes selected rows", async () => {
     vi.spyOn(window, "confirm").mockReturnValue(true);
-    renderPage();
+    const { container } = renderPage();
 
     expect(await screen.findByText("유령 로그인 ID 정리")).toBeInTheDocument();
     expect(await screen.findByText("EMP001")).toBeInTheDocument();
     expect(screen.getByText("삭제된 테넌트")).toBeInTheDocument();
+    expectNoAnonymousFormFields(container);
     expect(fetchOrphanUserLoginIDs).toHaveBeenCalledTimes(1);
 
     fireEvent.click(screen.getByRole("checkbox", { name: "EMP001 선택" }));
@@ -175,16 +178,16 @@ describe("DataIntegrityPage", () => {
     window.localStorage.setItem("locale", "en");
     renderPage();
 
-    expect(
-      await screen.findByText("Data Integrity Check"),
-    ).toBeInTheDocument();
+    expect(await screen.findByText("Data Integrity Check")).toBeInTheDocument();
     expect(
       await screen.findByText(
         "Review integrity status and inspect checks across the admin data model.",
       ),
     ).toBeInTheDocument();
     expect(await screen.findByText("Tenant integrity")).toBeInTheDocument();
-    expect(await screen.findByText("Duplicate tenant slug")).toBeInTheDocument();
+    expect(
+      await screen.findByText("Duplicate tenant slug"),
+    ).toBeInTheDocument();
     expect(
       await screen.findByText(
         "Checks duplicate active tenant slugs using LOWER(TRIM(slug)).",

adminfront/src/features/integrity/DataIntegrityPage.tsx

@@ -12,10 +12,10 @@ import { Button } from "../../components/ui/button";
 import {
   type DataIntegrityCheck,
   type DataIntegrityStatus,
-  type OrphanUserLoginID,
   deleteOrphanUserLoginIDs,
   fetchDataIntegrityReport,
   fetchOrphanUserLoginIDs,
+  type OrphanUserLoginID,
 } from "../../lib/adminApi";
 import { t } from "../../lib/i18n";
 import { getAdminDateLocale } from "../../lib/locale";
@@ -238,6 +238,7 @@ function OrphanLoginIDTable({
             <tr key={item.id}>
               <td className="px-3 py-2">
                 <input
+                  name={`orphan-login-id-select-${item.id}`}
                   type="checkbox"
                   aria-label={t(
                     "ui.admin.integrity.table.select_item",

adminfront/src/features/ory-ssot/OrySSOTPage.test.tsx

@@ -0,0 +1,85 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  fetchMe,
+  fetchOrySSOTSystemStatus,
+  flushIdentityCache,
+} from "../../lib/adminApi";
+import { createI18nMock } from "../../test/i18nMock";
+import OrySSOTPage from "./OrySSOTPage";
+
+vi.mock("../../lib/i18n", () => createI18nMock());
+
+let currentRole = "super_admin";
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchMe: vi.fn(async () => ({ role: currentRole })),
+  fetchOrySSOTSystemStatus: vi.fn(async () => ({
+    identityCache: {
+      status: "ready",
+      redisReady: true,
+      observedCount: 151,
+      keyCount: 153,
+      lastRefreshedAt: "2026-05-11T03:00:00Z",
+      updatedAt: "2026-05-11T03:00:10Z",
+    },
+  })),
+  flushIdentityCache: vi.fn(async () => ({
+    status: "success",
+    flushedKeys: 153,
+    updatedAt: "2026-05-11T03:02:00Z",
+  })),
+}));
+
+function renderPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <OrySSOTPage />
+    </QueryClientProvider>,
+  );
+}
+
+describe("OrySSOTPage", () => {
+  beforeEach(() => {
+    currentRole = "super_admin";
+    vi.clearAllMocks();
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+    window.localStorage.setItem("locale", "ko");
+  });
+
+  it("renders identity cache status and flushes cache", async () => {
+    renderPage();
+
+    expect(
+      (await screen.findAllByText("Ory SSOT 시스템")).length,
+    ).toBeGreaterThan(0);
+    expect(await screen.findByText("Redis identity cache")).toBeInTheDocument();
+    expect(screen.getAllByText("준비됨").length).toBeGreaterThan(0);
+    expect(screen.getByText("151")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /Redis cache flush/ }));
+
+    await waitFor(() => {
+      expect(flushIdentityCache).toHaveBeenCalledTimes(1);
+    });
+    expect(fetchOrySSOTSystemStatus).toHaveBeenCalled();
+  });
+
+  it("blocks non-super admins", async () => {
+    currentRole = "tenant_admin";
+
+    renderPage();
+
+    expect(await screen.findByText("접근 권한이 없습니다")).toBeInTheDocument();
+    expect(fetchMe).toHaveBeenCalled();
+    expect(fetchOrySSOTSystemStatus).not.toHaveBeenCalled();
+  });
+});

adminfront/src/features/ory-ssot/OrySSOTPage.tsx

@@ -0,0 +1,238 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { AlertTriangle, Database, Trash2 } from "lucide-react";
+import { RoleGuard } from "../../components/auth/RoleGuard";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import {
+  fetchOrySSOTSystemStatus,
+  flushIdentityCache,
+} from "../../lib/adminApi";
+import { t } from "../../lib/i18n";
+import { getAdminDateLocale } from "../../lib/locale";
+
+function formatDateTime(value?: string) {
+  if (!value) return "-";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(getAdminDateLocale(), {
+    dateStyle: "medium",
+    timeStyle: "medium",
+  }).format(date);
+}
+
+function StatusBadge({ ready, status }: { ready: boolean; status: string }) {
+  if (ready) {
+    return (
+      <Badge variant="success">
+        {t("ui.admin.ory_ssot.status.ready", "ready")}
+      </Badge>
+    );
+  }
+  if (status === "failed") {
+    return (
+      <Badge variant="warning">
+        {t("ui.admin.ory_ssot.status.failed", "failed")}
+      </Badge>
+    );
+  }
+  return (
+    <Badge variant="secondary">
+      {status ? status : t("ui.admin.ory_ssot.status.not_ready", "not ready")}
+    </Badge>
+  );
+}
+
+function OrySSOTContent() {
+  const queryClient = useQueryClient();
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: ["ory-ssot-system-status"],
+    queryFn: fetchOrySSOTSystemStatus,
+  });
+
+  const flushMutation = useMutation({
+    mutationFn: flushIdentityCache,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["ory-ssot-system-status"],
+      });
+    },
+  });
+
+  const handleFlush = () => {
+    const confirmed = window.confirm(
+      t(
+        "msg.admin.ory_ssot.flush_confirm",
+        "Flush only Redis identity cache keys?",
+      ),
+    );
+    if (confirmed) flushMutation.mutate();
+  };
+
+  const identityCache = data?.identityCache;
+
+  return (
+    <main className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
+      <header className="flex flex-shrink-0 flex-wrap items-start justify-between gap-4 sticky top-[-2.5rem] z-20 -mt-4 bg-background/95 pb-2 pt-4 backdrop-blur">
+        <div className="flex min-w-0 items-start gap-3">
+          <div className="mt-1 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-primary/15 bg-primary/10 text-primary">
+            <Database size={20} />
+          </div>
+          <div className="space-y-2">
+            <h2 className="text-3xl font-semibold">
+              {t("ui.admin.ory_ssot.title", "Ory SSOT System")}
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              {t(
+                "msg.admin.ory_ssot.subtitle",
+                "Review Kratos source-of-truth and Redis identity cache status separately.",
+              )}
+            </p>
+          </div>
+        </div>
+        <Button
+          type="button"
+          variant="destructive"
+          onClick={handleFlush}
+          disabled={flushMutation.isPending}
+        >
+          <Trash2 size={16} />
+          {t(
+            "ui.admin.ory_ssot.actions.flush_identity_cache",
+            "Redis cache flush",
+          )}
+        </Button>
+      </header>
+
+      {isError ? (
+        <section className="rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
+          {(error as Error)?.message ||
+            t(
+              "msg.admin.ory_ssot.load_error",
+              "Failed to load Ory SSOT system status.",
+            )}
+        </section>
+      ) : null}
+
+      {flushMutation.data ? (
+        <section className="rounded-lg border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200">
+          {t(
+            "msg.admin.ory_ssot.flush_success",
+            "Flushed {{count}} Redis identity cache keys.",
+            { count: flushMutation.data.flushedKeys },
+          )}
+        </section>
+      ) : null}
+
+      {flushMutation.error ? (
+        <section className="rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
+          {(flushMutation.error as Error)?.message ||
+            t(
+              "msg.admin.ory_ssot.flush_error",
+              "Redis identity cache flush failed.",
+            )}
+        </section>
+      ) : null}
+
+      <section className="rounded-lg border border-border bg-card p-5">
+        <div className="flex items-center gap-3 border-b border-border pb-4">
+          <div>
+            <h3 className="text-lg font-bold">
+              {t("ui.admin.ory_ssot.cache_card.title", "Redis identity cache")}
+            </h3>
+            <p className="text-sm text-muted-foreground">
+              {t(
+                "ui.admin.ory_ssot.cache_card.description",
+                "Redis mirror/cache status for Kratos identity list and lookup operations.",
+              )}
+            </p>
+          </div>
+        </div>
+
+        {isLoading ? (
+          <div className="py-8 text-sm text-muted-foreground">
+            {t("ui.admin.ory_ssot.loading", "Loading")}
+          </div>
+        ) : (
+          <dl className="grid gap-4 py-5 sm:grid-cols-2 lg:grid-cols-4">
+            <div>
+              <dt className="text-sm text-muted-foreground">
+                {t("ui.admin.ory_ssot.summary.status", "Status")}
+              </dt>
+              <dd className="mt-1">
+                <StatusBadge
+                  ready={
+                    Boolean(identityCache?.redisReady) &&
+                    identityCache?.status === "ready"
+                  }
+                  status={identityCache?.status ?? "unknown"}
+                />
+              </dd>
+            </div>
+            <div>
+              <dt className="text-sm text-muted-foreground">
+                {t(
+                  "ui.admin.ory_ssot.summary.observed_identities",
+                  "Observed identities",
+                )}
+              </dt>
+              <dd className="mt-1 text-xl font-semibold tabular-nums">
+                {identityCache?.observedCount ?? 0}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-sm text-muted-foreground">
+                {t("ui.admin.ory_ssot.summary.cache_keys", "Cache keys")}
+              </dt>
+              <dd className="mt-1 text-xl font-semibold tabular-nums">
+                {identityCache?.keyCount ?? 0}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-sm text-muted-foreground">
+                {t(
+                  "ui.admin.ory_ssot.summary.last_refreshed",
+                  "Last refreshed",
+                )}
+              </dt>
+              <dd className="mt-1 text-sm">
+                {formatDateTime(identityCache?.lastRefreshedAt)}
+              </dd>
+            </div>
+          </dl>
+        )}
+
+        {identityCache?.lastError ? (
+          <div className="flex gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200">
+            <AlertTriangle className="mt-0.5 shrink-0" size={16} />
+            <span>{identityCache.lastError}</span>
+          </div>
+        ) : null}
+      </section>
+    </main>
+  );
+}
+
+export default function OrySSOTPage() {
+  return (
+    <RoleGuard
+      roles={["super_admin"]}
+      fallback={
+        <main className="p-6 md:p-8">
+          <section className="rounded-lg border border-border bg-card p-5">
+            <h2 className="text-lg font-semibold">
+              {t("ui.admin.ory_ssot.forbidden.title", "Access denied")}
+            </h2>
+            <p className="mt-2 text-sm text-muted-foreground">
+              {t(
+                "msg.admin.ory_ssot.forbidden.description",
+                "This screen is only available to super_admin users.",
+              )}
+            </p>
+          </section>
+        </main>
+      }
+    >
+      <OrySSOTContent />
+    </RoleGuard>
+  );
+}

adminfront/src/features/overview/GlobalOverviewPage.tsx

@@ -17,13 +17,12 @@ import {
 import { RoleGuard } from "../../components/auth/RoleGuard";
 import {
   type DataIntegrityStatus,
-  type RPUsageDailyMetric,
-  type RPUsagePeriod,
-  type TenantSummary,
   fetchAdminOverviewStats,
   fetchAdminRPUsageDaily,
   fetchAllTenants,
   fetchDataIntegrityReport,
+  type RPUsageDailyMetric,
+  type RPUsagePeriod,
 } from "../../lib/adminApi";
 import { t } from "../../lib/i18n";
 
@@ -203,10 +202,7 @@ function IntegrityOverviewSummary() {
             <AlertTriangle size={18} className="text-amber-600" />
           )}
           <h3 className="text-lg font-bold flex items-center gap-2">
-            {t(
-              "ui.admin.integrity.summary.title",
-              "정합성 최종 검증",
-            )}
+            {t("ui.admin.integrity.summary.title", "정합성 최종 검증")}
           </h3>
         </div>
         <div className="flex flex-wrap items-center gap-3 text-sm">
@@ -466,7 +462,7 @@ function GlobalOverviewPage() {
   const metric = (value: number | undefined) =>
     value === undefined ? "-" : value.toLocaleString();
   const periodControls = (
-    <div className="flex h-8 items-center gap-1" aria-label="집계 단위">
+    <fieldset className="flex h-8 items-center gap-1" aria-label="집계 단위">
       {[
         ["day", t("ui.common.chart.period.day", "일")],
         ["week", t("ui.common.chart.period.week", "주")],
@@ -486,7 +482,7 @@ function GlobalOverviewPage() {
           {label}
         </button>
       ))}
-    </div>
+    </fieldset>
   );
   const chartFilters = (
     <div>
@@ -510,7 +506,7 @@ function GlobalOverviewPage() {
   );
 
   return (
-    <div className="space-y-4 animate-in fade-in duration-500">
+    <div className="space-y-4">
       <div className="flex flex-wrap items-start justify-between gap-4">
         <div className="flex min-w-0 items-start gap-3">
           <div className="mt-1 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-primary/15 bg-primary/10 text-primary">

adminfront/src/features/projections/UserProjectionPage.test.tsx

@@ -1,122 +0,0 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import {
-  fetchUserProjectionStatus,
-  reconcileUserProjection,
-  resetUserProjection,
-} from "../../lib/adminApi";
-import { createI18nMock } from "../../test/i18nMock";
-import UserProjectionPage from "./UserProjectionPage";
-
-vi.mock("../../lib/i18n", () => createI18nMock());
-
-let currentRole = "super_admin";
-
-vi.mock("../../lib/adminApi", () => ({
-  fetchMe: vi.fn(async () => ({ role: currentRole })),
-  fetchUserProjectionStatus: vi.fn(async () => ({
-    name: "kratos_users",
-    status: "ready",
-    ready: true,
-    lastSyncedAt: "2026-05-11T03:00:00Z",
-    updatedAt: "2026-05-11T03:00:10Z",
-    projectedUsers: 152,
-  })),
-  reconcileUserProjection: vi.fn(async () => ({
-    status: "success",
-    syncedUsers: 152,
-    updatedAt: "2026-05-11T03:01:00Z",
-  })),
-  resetUserProjection: vi.fn(async () => ({
-    status: "success",
-    syncedUsers: 152,
-    updatedAt: "2026-05-11T03:02:00Z",
-  })),
-}));
-
-function renderPage() {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: { retry: false },
-      mutations: { retry: false },
-    },
-  });
-
-  return render(
-    <QueryClientProvider client={queryClient}>
-      <UserProjectionPage />
-    </QueryClientProvider>,
-  );
-}
-
-describe("UserProjectionPage", () => {
-  beforeEach(() => {
-    currentRole = "super_admin";
-    vi.clearAllMocks();
-    vi.spyOn(window, "confirm").mockReturnValue(true);
-    window.localStorage.setItem("locale", "ko");
-  });
-
-  it("renders projection status for super_admin", async () => {
-    renderPage();
-
-    expect(
-      await screen.findByText("사용자 동기화 관리"),
-    ).toBeInTheDocument();
-    expect(
-      await screen.findByText(
-        "Kratos 사용자 read model을 확인하고 동기화 상태를 갱신합니다.",
-      ),
-    ).toBeInTheDocument();
-    expect(
-      await screen.findByText("Kratos 사용자 동기화"),
-    ).toBeInTheDocument();
-    expect(screen.getByText("준비됨")).toBeInTheDocument();
-    expect(screen.getByText("152")).toBeInTheDocument();
-    expect(fetchUserProjectionStatus).toHaveBeenCalled();
-  });
-
-  it("runs reconcile and reset actions for super_admin", async () => {
-    renderPage();
-
-    await screen.findByText("사용자 동기화 관리");
-    fireEvent.click(screen.getByRole("button", { name: /재동기화/ }));
-
-    await waitFor(() => {
-      expect(reconcileUserProjection).toHaveBeenCalledTimes(1);
-    });
-
-    fireEvent.click(screen.getByRole("button", { name: /초기화 후 재구축/ }));
-
-    await waitFor(() => {
-      expect(resetUserProjection).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  it("blocks non-super admins", async () => {
-    currentRole = "tenant_admin";
-
-    renderPage();
-
-    expect(await screen.findByText("접근 권한이 없습니다")).toBeInTheDocument();
-    expect(
-      screen.queryByText("사용자 동기화 관리"),
-    ).not.toBeInTheDocument();
-    expect(fetchUserProjectionStatus).not.toHaveBeenCalled();
-  });
-
-  it("renders localized labels in English", async () => {
-    window.localStorage.setItem("locale", "en");
-    renderPage();
-
-    expect(
-      await screen.findByText("User Projection Management"),
-    ).toBeInTheDocument();
-    expect(
-      await screen.findByText("Review and sync the Kratos user read model."),
-    ).toBeInTheDocument();
-    expect(screen.getByText("Re-sync")).toBeInTheDocument();
-    expect(await screen.findByText("ready")).toBeInTheDocument();
-  });
-});

adminfront/src/features/projections/UserProjectionPage.tsx

@@ -1,282 +0,0 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { AlertTriangle, RefreshCw, RotateCcw, Users } from "lucide-react";
-import { RoleGuard } from "../../components/auth/RoleGuard";
-import { Badge } from "../../components/ui/badge";
-import { Button } from "../../components/ui/button";
-import {
-  fetchUserProjectionStatus,
-  reconcileUserProjection,
-  resetUserProjection,
-} from "../../lib/adminApi";
-import { t } from "../../lib/i18n";
-import { getAdminDateLocale } from "../../lib/locale";
-
-function formatDateTime(value?: string) {
-  if (!value) {
-    return "-";
-  }
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return value;
-  }
-  return new Intl.DateTimeFormat(getAdminDateLocale(), {
-    dateStyle: "medium",
-    timeStyle: "medium",
-  }).format(date);
-}
-
-function ProjectionStatusBadge({
-  ready,
-  status,
-}: {
-  ready: boolean;
-  status: string;
-}) {
-  if (ready) {
-    return (
-      <Badge variant="success">
-        {t("ui.admin.user_projection.status.ready", "ready")}
-      </Badge>
-    );
-  }
-  if (status === "failed") {
-    return (
-      <Badge variant="warning">
-        {t("ui.admin.user_projection.status.failed", "failed")}
-      </Badge>
-    );
-  }
-  return (
-    <Badge variant="secondary">
-      {status
-        ? status
-        : t("ui.admin.user_projection.status.not_ready", "not ready")}
-    </Badge>
-  );
-}
-
-function UserProjectionContent() {
-  const queryClient = useQueryClient();
-  const { data, isLoading, isError, error } = useQuery({
-    queryKey: ["user-projection-status"],
-    queryFn: fetchUserProjectionStatus,
-  });
-
-  const invalidate = async () => {
-    await queryClient.invalidateQueries({
-      queryKey: ["user-projection-status"],
-    });
-  };
-
-  const reconcileMutation = useMutation({
-    mutationFn: reconcileUserProjection,
-    onSuccess: invalidate,
-  });
-
-  const resetMutation = useMutation({
-    mutationFn: resetUserProjection,
-    onSuccess: invalidate,
-  });
-
-  const handleReset = () => {
-    const confirmed = window.confirm(
-      t(
-        "msg.admin.user_projection.reset_confirm",
-        "Rebuild user projection from the Kratos source of truth?",
-      ),
-    );
-    if (confirmed) {
-      resetMutation.mutate();
-    }
-  };
-
-  const isWorking = reconcileMutation.isPending || resetMutation.isPending;
-  const actionResult = reconcileMutation.data ?? resetMutation.data;
-  const actionError = reconcileMutation.error ?? resetMutation.error;
-
-  return (
-    <main className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
-      <header className="flex flex-shrink-0 flex-wrap items-start justify-between gap-4 sticky top-[-2.5rem] z-20 -mt-4 bg-background/95 pb-2 pt-4 backdrop-blur">
-        <div className="flex min-w-0 items-start gap-3">
-          <div className="mt-1 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-primary/15 bg-primary/10 text-primary">
-            <Users size={20} />
-          </div>
-          <div className="space-y-2">
-            <h2 className="text-3xl font-semibold">
-              {t(
-                "ui.admin.user_projection.title",
-                "User Projection Management",
-              )}
-            </h2>
-            <p className="text-sm text-muted-foreground">
-              {t(
-                "msg.admin.user_projection.subtitle",
-                "Review and sync the Kratos user read model.",
-              )}
-            </p>
-          </div>
-        </div>
-        <div className="flex flex-wrap gap-2">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => reconcileMutation.mutate()}
-            disabled={isWorking}
-          >
-            <RefreshCw size={16} />
-            {t("ui.admin.user_projection.actions.reconcile", "Re-sync")}
-          </Button>
-          <Button
-            type="button"
-            variant="destructive"
-            onClick={handleReset}
-            disabled={isWorking}
-          >
-            <RotateCcw size={16} />
-            {t(
-              "ui.admin.user_projection.actions.reset",
-              "Reset and rebuild",
-            )}
-          </Button>
-        </div>
-      </header>
-
-      {isError ? (
-        <section className="rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
-          {(error as Error)?.message ||
-            t(
-              "msg.admin.user_projection.load_error",
-              "Failed to load projection status.",
-            )}
-        </section>
-      ) : null}
-
-      {actionResult ? (
-        <section className="rounded-lg border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200">
-          {t(
-            "msg.admin.user_projection.action_success",
-            "Refreshed the projection for {{count}} users.",
-            { count: actionResult.syncedUsers },
-          )}
-        </section>
-      ) : null}
-
-      {actionError ? (
-        <section className="rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
-          {(actionError as Error)?.message ||
-            t(
-              "msg.admin.user_projection.action_error",
-              "Projection operation failed.",
-            )}
-        </section>
-      ) : null}
-
-      <section className="rounded-lg border border-border bg-card p-5">
-        <div className="flex items-center gap-3 border-b border-border pb-4">
-          <div>
-            <h3 className="text-lg font-bold flex items-center gap-2">
-              {t(
-                "ui.admin.user_projection.card.title",
-                "Kratos users projection",
-              )}
-            </h3>
-            <p className="text-sm text-muted-foreground">
-              {t(
-                "ui.admin.user_projection.card.description",
-                "Current user read model state referenced by backend DB statistics.",
-              )}
-            </p>
-          </div>
-        </div>
-
-        {isLoading ? (
-          <div className="py-8 text-sm text-muted-foreground">
-            {t("ui.admin.user_projection.loading", "Loading")}
-          </div>
-        ) : (
-          <dl className="grid gap-4 py-5 sm:grid-cols-2 lg:grid-cols-4">
-            <div>
-              <dt className="text-sm text-muted-foreground">
-                {t("ui.admin.user_projection.summary.status", "Status")}
-              </dt>
-              <dd className="mt-1">
-                <ProjectionStatusBadge
-                  ready={data?.ready ?? false}
-                  status={data?.status ?? "unknown"}
-                />
-              </dd>
-            </div>
-            <div>
-              <dt className="text-sm text-muted-foreground">
-                {t(
-                  "ui.admin.user_projection.summary.projected_users",
-                  "Projected users",
-                )}
-              </dt>
-              <dd className="mt-1 text-xl font-semibold tabular-nums">
-                {data?.projectedUsers ?? 0}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-sm text-muted-foreground">
-                {t(
-                  "ui.admin.user_projection.summary.last_synced",
-                  "Last synced",
-                )}
-              </dt>
-              <dd className="mt-1 text-sm">
-                {formatDateTime(data?.lastSyncedAt)}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-sm text-muted-foreground">
-                {t(
-                  "ui.admin.user_projection.summary.updated_at",
-                  "Updated at",
-                )}
-              </dt>
-              <dd className="mt-1 text-sm">
-                {formatDateTime(data?.updatedAt)}
-              </dd>
-            </div>
-          </dl>
-        )}
-
-        {data?.lastError ? (
-          <div className="flex gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200">
-            <AlertTriangle className="mt-0.5 shrink-0" size={16} />
-            <span>{data.lastError}</span>
-          </div>
-        ) : null}
-      </section>
-    </main>
-  );
-}
-
-export default function UserProjectionPage() {
-  return (
-    <RoleGuard
-      roles={["super_admin"]}
-      fallback={
-      <main className="p-6 md:p-8">
-        <section className="rounded-lg border border-border bg-card p-5">
-          <h2 className="text-lg font-semibold">
-            {t(
-              "ui.admin.user_projection.forbidden.title",
-              "Access denied",
-            )}
-          </h2>
-          <p className="mt-2 text-sm text-muted-foreground">
-            {t(
-              "msg.admin.user_projection.forbidden.description",
-              "This screen is only available to super_admin users.",
-            )}
-          </p>
-        </section>
-      </main>
-      }
-    >
-      <UserProjectionContent />
-    </RoleGuard>
-  );
-}

adminfront/src/features/tenants/components/DomainTagInput.test.tsx

@@ -1,11 +1,9 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { DomainTagInput } from "./DomainTagInput";
 
 describe("DomainTagInput", () => {
   it("shows a clear duplicate tenant warning and adds the domain after confirmation", async () => {
-    const user = userEvent.setup();
     const onChange = vi.fn();
     const onConfirmedConflictsChange = vi.fn();
 
@@ -34,10 +32,9 @@ describe("DomainTagInput", () => {
       />,
     );
 
-    await user.type(
-      screen.getByPlaceholderText("example.com"),
-      "samaneng.com ",
-    );
+    const input = screen.getByPlaceholderText("example.com");
+    fireEvent.change(input, { target: { value: "samaneng.com" } });
+    fireEvent.keyDown(input, { key: " " });
 
     expect(
       await screen.findByText(
@@ -45,7 +42,7 @@ describe("DomainTagInput", () => {
       ),
     ).toBeInTheDocument();
 
-    await user.click(screen.getByRole("button", { name: "계속 진행" }));
+    fireEvent.click(screen.getByRole("button", { name: "계속 진행" }));
 
     expect(onChange).toHaveBeenCalledWith(["samaneng.com"]);
     expect(onConfirmedConflictsChange).toHaveBeenCalledWith(["samaneng.com"]);

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

@@ -29,6 +29,7 @@ type DomainTagInputProps = {
   confirmedConflicts?: string[];
   onConfirmedConflictsChange?: (domains: string[]) => void;
   placeholder?: string;
+  disabled?: boolean;
 };
 
 export function DomainTagInput({
@@ -40,6 +41,7 @@ export function DomainTagInput({
   confirmedConflicts = [],
   onConfirmedConflictsChange,
   placeholder,
+  disabled = false,
 }: DomainTagInputProps) {
   const [input, setInput] = useState("");
   const [pendingConflict, setPendingConflict] = useState<DomainConflict | null>(
@@ -107,14 +109,16 @@ export function DomainTagInput({
             className="gap-1 rounded-md"
           >
             <span>{domain}</span>
-            <button
-              type="button"
-              className="inline-flex h-4 w-4 items-center justify-center rounded-sm hover:bg-background/60"
-              onClick={() => removeDomain(domain)}
-              aria-label={t("ui.common.remove", "삭제")}
-            >
-              <X size={12} />
-            </button>
+            {!disabled && (
+              <button
+                type="button"
+                className="inline-flex h-4 w-4 items-center justify-center rounded-sm hover:bg-background/60"
+                onClick={() => removeDomain(domain)}
+                aria-label={t("ui.common.remove", "삭제")}
+              >
+                <X size={12} />
+              </button>
+            )}
           </Badge>
         ))}
         <Input
@@ -133,6 +137,7 @@ export function DomainTagInput({
               tokenizeInput();
             }
           }}
+          disabled={disabled}
           className="h-7 min-w-[180px] flex-1 border-0 px-0 py-0 shadow-none focus-visible:ring-0"
           placeholder={value.length === 0 ? placeholder : undefined}
         />

adminfront/src/features/tenants/components/ParentTenantSelector.picker.test.tsx

@@ -46,8 +46,10 @@ describe("ParentTenantSelector picker", () => {
     fireEvent.click(screen.getByRole("button", { name: /테넌트 선택/ }));
 
     expect(screen.getByRole("dialog")).toBeInTheDocument();
-    const pickerSrc = screen.getByTitle("테넌트 선택").getAttribute("src");
-    expect(pickerSrc).toContain("/login");
+    const pickerSrc = screen
+      .getByTestId("parent-tenant-picker-frame")
+      .getAttribute("src");
+    expect(pickerSrc).toContain("http://localhost:5175/login");
     expect(decodeURIComponent(pickerSrc ?? "")).toContain("/embed/picker");
 
     fireEvent(
@@ -71,6 +73,30 @@ describe("ParentTenantSelector picker", () => {
     await waitFor(() => expect(onChange).toHaveBeenCalledWith("company-1"));
   });
 
+  it("scopes the org-chart picker to the requested tenant root", () => {
+    const onChange = vi.fn();
+
+    render(
+      <ParentTenantSelector
+        id="parentId"
+        label="상위 테넌트"
+        value=""
+        onChange={onChange}
+        tenants={tenants}
+        noneLabel="없음"
+        orgChartTenantId="group-1"
+        orgChartPickerLabel="한맥가족에서 선택"
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "한맥가족에서 선택" }));
+
+    const pickerSrc = screen
+      .getByTestId("parent-tenant-picker-frame")
+      .getAttribute("src");
+    expect(decodeURIComponent(pickerSrc ?? "")).toContain("tenantId=group-1");
+  });
+
   it("keeps the current tenant out of picker message selections", async () => {
     const onChange = vi.fn();
 

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

@@ -7,8 +7,8 @@ import {
   DialogContent,
   DialogDescription,
   DialogHeader,
-  DialogTrigger,
   DialogTitle,
+  DialogTrigger,
 } from "../../../components/ui/dialog";
 import { Label } from "../../../components/ui/label";
 import type { TenantSummary } from "../../../lib/adminApi";
@@ -31,8 +31,12 @@ type ParentTenantSelectorProps = {
   labelAction?: ReactNode;
   contextLabel?: string;
   orgChartPickerLabel?: string;
+  orgChartTenantId?: string;
   localPickerLabel?: string;
   localTenantFilter?: (tenant: TenantSummary) => boolean;
+  compact?: boolean;
+  controlTestId?: string;
+  disabled?: boolean;
 };
 
 export function ParentTenantSelector({
@@ -47,8 +51,12 @@ export function ParentTenantSelector({
   labelAction,
   contextLabel,
   orgChartPickerLabel,
+  orgChartTenantId,
   localPickerLabel,
   localTenantFilter,
+  compact = false,
+  controlTestId,
+  disabled = false,
 }: ParentTenantSelectorProps) {
   const [pickerOpen, setPickerOpen] = useState(false);
   const [localPickerOpen, setLocalPickerOpen] = useState(false);
@@ -62,6 +70,9 @@ export function ParentTenantSelector({
   );
   const pickerUrl = buildAuthenticatedOrgChartTenantPickerUrl(
     import.meta.env.ORGFRONT_URL,
+    {
+      tenantId: orgChartTenantId,
+    },
   );
 
   useEffect(() => {
@@ -81,19 +92,38 @@ export function ParentTenantSelector({
   }, [excludeTenantId, onChange, pickerOpen]);
 
   return (
-    <div className="space-y-2">
-      <div className="flex min-h-8 flex-wrap items-center justify-between gap-2">
+    <div className={compact ? "space-y-1" : "space-y-2"}>
+      <div
+        className={
+          compact
+            ? "flex min-h-5 flex-wrap items-center justify-between gap-2"
+            : "flex min-h-8 flex-wrap items-center justify-between gap-2"
+        }
+      >
         <Label className="text-sm font-semibold">{label}</Label>
         {labelAction}
       </div>
       <input id={id} name={id} type="hidden" value={value} readOnly />
-      <div className="flex min-h-10 flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2">
+      <div
+        data-testid={controlTestId}
+        className={
+          compact
+            ? "flex h-10 min-w-0 items-center gap-2 rounded-lg border border-input bg-background px-2"
+            : "flex min-h-10 flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2"
+        }
+      >
         <Dialog open={pickerOpen} onOpenChange={setPickerOpen}>
           <DialogTrigger asChild>
-            <Button type="button" variant="outline" size="sm">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className={compact ? "h-8 shrink-0 px-2" : undefined}
+              disabled={disabled}
+            >
               <Building2 className="h-4 w-4" />
               {orgChartPickerLabel ??
-                selectedTenant?.name ??
+                (compact ? undefined : selectedTenant?.name) ??
                 t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
             </Button>
           </DialogTrigger>
@@ -113,13 +143,19 @@ export function ParentTenantSelector({
               title={t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
               src={pickerUrl}
               className="h-[600px] w-full rounded-md border"
+              data-testid="parent-tenant-picker-frame"
             />
           </DialogContent>
         </Dialog>
         {localPickerLabel && (
           <Dialog open={localPickerOpen} onOpenChange={setLocalPickerOpen}>
             <DialogTrigger asChild>
-              <Button type="button" variant="outline" size="sm">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                disabled={disabled}
+              >
                 <Building2 className="h-4 w-4" />
                 {localPickerLabel}
               </Button>
@@ -139,6 +175,8 @@ export function ParentTenantSelector({
               </DialogHeader>
               <div className="space-y-3">
                 <input
+                  id="parent-tenant-local-search"
+                  name="parent-tenant-local-search"
                   className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                   value={localSearch}
                   onChange={(event) => setLocalSearch(event.target.value)}
@@ -185,22 +223,40 @@ export function ParentTenantSelector({
         )}
         {selectedTenant ? (
           <>
-            <span className="text-xs text-muted-foreground">
-              {selectedTenant.slug} · {selectedTenant.type}
+            <span
+              className={
+                compact
+                  ? "min-w-0 flex-1 truncate text-xs text-muted-foreground"
+                  : "text-xs text-muted-foreground"
+              }
+              title={`${selectedTenant.name} · ${selectedTenant.slug} · ${selectedTenant.type}`}
+            >
+              {compact
+                ? `${selectedTenant.name} · ${selectedTenant.slug}`
+                : `${selectedTenant.slug} · ${selectedTenant.type}`}
             </span>
             <Button
               type="button"
               variant="ghost"
               size="icon"
-              className="h-8 w-8"
+              className={compact ? "h-7 w-7 shrink-0" : "h-8 w-8"}
               onClick={() => onChange("")}
               aria-label={noneLabel}
+              disabled={disabled}
             >
               <X className="h-4 w-4" />
             </Button>
           </>
         ) : (
-          <span className="text-xs text-muted-foreground">{noneLabel}</span>
+          <span
+            className={
+              compact
+                ? "min-w-0 flex-1 truncate text-xs text-muted-foreground"
+                : "text-xs text-muted-foreground"
+            }
+          >
+            {noneLabel}
+          </span>
         )}
         {contextLabel && (
           <span className="rounded-md border px-2 py-1 text-xs font-medium text-muted-foreground">

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

@@ -0,0 +1,29 @@
+import type React from "react";
+import {
+  type TenantPermissionKey,
+  useTenantPermission,
+} from "../hooks/useTenantPermission";
+
+interface TenantPermissionGuardProps {
+  tenantId: string;
+  relation: TenantPermissionKey;
+  fallback?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function TenantPermissionGuard({
+  tenantId,
+  relation,
+  fallback = null,
+  children,
+}: TenantPermissionGuardProps) {
+  const { hasPermission, isLoading } = useTenantPermission(tenantId);
+
+  if (isLoading) return null;
+
+  if (!hasPermission(relation)) {
+    return <>{fallback}</>;
+  }
+
+  return <>{children}</>;
+}

adminfront/src/features/tenants/hooks/useTenantPermission.test.tsx

@@ -0,0 +1,184 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, renderHook, screen, waitFor } from "@testing-library/react";
+import type React from "react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  fetchMe,
+  fetchTenant,
+  type TenantSummary,
+  type UserProfileResponse,
+} from "../../../lib/adminApi";
+import { TenantPermissionGuard } from "../components/TenantPermissionGuard";
+import { useTenantPermission } from "./useTenantPermission";
+
+vi.mock("../../../lib/adminApi", () => ({
+  fetchMe: vi.fn(),
+  fetchTenant: vi.fn(),
+}));
+
+function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  });
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
+
+function mockProfile(
+  overrides: Partial<UserProfileResponse>,
+): UserProfileResponse {
+  return {
+    id: "user-id",
+    email: "user@example.com",
+    name: "Test User",
+    phone: "",
+    role: "user",
+    department: "",
+    affiliationType: "general",
+    ...overrides,
+  };
+}
+
+function mockTenant(overrides: Partial<TenantSummary>): TenantSummary {
+  return {
+    id: "tenant-id",
+    type: "COMPANY",
+    name: "Test Tenant",
+    slug: "test-tenant",
+    description: "",
+    status: "active",
+    memberCount: 0,
+    createdAt: "2026-01-01T00:00:00Z",
+    updatedAt: "2026-01-01T00:00:00Z",
+    ...overrides,
+  };
+}
+
+describe("useTenantPermission", () => {
+  it("returns true for all permissions if user is super_admin", async () => {
+    vi.mocked(fetchMe).mockResolvedValue(
+      mockProfile({
+        id: "user-super",
+        role: "super_admin",
+      }),
+    );
+
+    vi.mocked(fetchTenant).mockResolvedValue(
+      mockTenant({
+        id: "tenant-1",
+        name: "Super Tenant",
+        userPermissions: { view: false, manage: false, manage_admins: false },
+      }),
+    );
+
+    const { result } = renderHook(() => useTenantPermission("tenant-1"), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.hasPermission("view")).toBe(true);
+    expect(result.current.hasPermission("manage")).toBe(true);
+    expect(result.current.hasPermission("manage_admins")).toBe(true);
+  });
+
+  it("returns permissions mapped from userPermissions for normal admins/users", async () => {
+    vi.mocked(fetchMe).mockResolvedValue(
+      mockProfile({
+        id: "user-admin",
+        role: "tenant_admin",
+      }),
+    );
+
+    vi.mocked(fetchTenant).mockResolvedValue(
+      mockTenant({
+        id: "tenant-2",
+        name: "Tenant Admin Corp",
+        userPermissions: { view: true, manage: true, manage_admins: false },
+      }),
+    );
+
+    const { result } = renderHook(() => useTenantPermission("tenant-2"), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.hasPermission("view")).toBe(true);
+    expect(result.current.hasPermission("manage")).toBe(true);
+    expect(result.current.hasPermission("manage_admins")).toBe(false);
+  });
+});
+
+describe("TenantPermissionGuard", () => {
+  it("renders children when user has permission", async () => {
+    vi.mocked(fetchMe).mockResolvedValue(
+      mockProfile({
+        id: "user-admin",
+        role: "tenant_admin",
+      }),
+    );
+
+    vi.mocked(fetchTenant).mockResolvedValue(
+      mockTenant({
+        id: "tenant-3",
+        userPermissions: { view: true, manage: true, manage_admins: false },
+      }),
+    );
+
+    render(
+      <TenantPermissionGuard
+        tenantId="tenant-3"
+        relation="manage"
+        fallback={<div>Access Denied</div>}
+      >
+        <div>Access Granted</div>
+      </TenantPermissionGuard>,
+      { wrapper: createWrapper() },
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Access Granted")).toBeInTheDocument();
+    });
+    expect(screen.queryByText("Access Denied")).not.toBeInTheDocument();
+  });
+
+  it("renders fallback when user lacks permission", async () => {
+    vi.mocked(fetchMe).mockResolvedValue(
+      mockProfile({
+        id: "user-admin",
+        role: "tenant_admin",
+      }),
+    );
+
+    vi.mocked(fetchTenant).mockResolvedValue(
+      mockTenant({
+        id: "tenant-4",
+        userPermissions: { view: true, manage: false, manage_admins: false },
+      }),
+    );
+
+    render(
+      <TenantPermissionGuard
+        tenantId="tenant-4"
+        relation="manage"
+        fallback={<div>Access Denied</div>}
+      >
+        <div>Access Granted</div>
+      </TenantPermissionGuard>,
+      { wrapper: createWrapper() },
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Access Denied")).toBeInTheDocument();
+    });
+    expect(screen.queryByText("Access Granted")).not.toBeInTheDocument();
+  });
+});

adminfront/src/features/tenants/hooks/useTenantPermission.ts

@@ -0,0 +1,41 @@
+import { useQuery } from "@tanstack/react-query";
+import { fetchMe, fetchTenant } from "../../../lib/adminApi";
+import { normalizeAdminRole } from "../../../lib/roles";
+
+export type TenantPermissionKey =
+  | "view"
+  | "manage"
+  | "manage_admins"
+  | "view_profile"
+  | "manage_profile"
+  | "view_permissions"
+  | "manage_permissions"
+  | "view_organization"
+  | "manage_organization"
+  | "view_schema"
+  | "manage_schema"
+  | "view_worksmobile"
+  | "manage_worksmobile";
+
+export function useTenantPermission(tenantId: string) {
+  const { data: profile } = useQuery({
+    queryKey: ["me"],
+    queryFn: fetchMe,
+  });
+
+  const { data: tenant } = useQuery({
+    queryKey: ["tenant", tenantId],
+    queryFn: () => fetchTenant(tenantId),
+    enabled: !!tenantId,
+  });
+
+  const hasPermission = (requiredRelation: TenantPermissionKey): boolean => {
+    // Super Admin always has full bypass access
+    if (normalizeAdminRole(profile?.role) === "super_admin") {
+      return true;
+    }
+    return !!tenant?.userPermissions?.[requiredRelation];
+  };
+
+  return { hasPermission, isLoading: !tenant };
+}

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

@@ -5,7 +5,6 @@ import {
   Plus,
   Search,
   ShieldCheck,
-  Trash2,
   UserPlus,
   Users,
 } from "lucide-react";
@@ -28,7 +27,6 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "../../../components/ui/dialog";
 import { Input } from "../../../components/ui/input";
 import {
@@ -41,7 +39,6 @@ import {
 } from "../../../components/ui/table";
 import { toast } from "../../../components/ui/use-toast";
 import {
-  type TenantAdmin,
   addTenantAdmin,
   addTenantOwner,
   fetchTenantAdmins,
@@ -49,8 +46,10 @@ import {
   fetchUsers,
   removeTenantAdmin,
   removeTenantOwner,
+  type TenantAdmin,
 } from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";
+import { useTenantPermission } from "../hooks/useTenantPermission";
 
 type DialogMode = "owner" | "admin";
 
@@ -68,16 +67,19 @@ function mergePendingMembers(
 export function TenantAdminsAndOwnersTab() {
   const auth = useAuth();
   const navigate = useNavigate();
-  const currentUserId = auth.user?.profile.sub;
-  const { tenantId } = useParams<{ tenantId: string }>();
+  const _currentUserId = auth.user?.profile.sub;
+  const { tenantId: tenantIdParam } = useParams<{ tenantId: string }>();
+  const tenantId = tenantIdParam ?? "";
+  const { hasPermission } = useTenantPermission(tenantId);
+  const isWritable =
+    hasPermission("manage_permissions") || hasPermission("manage_admins");
+  const canView = hasPermission("view_permissions") || hasPermission("view");
   const queryClient = useQueryClient();
   const [searchTerm, setSearchTerm] = useState("");
   const [dialogMode, setDialogMode] = useState<DialogMode | null>(null);
   const [pendingOwners, setPendingOwners] = useState<TenantAdmin[]>([]);
   const [pendingAdmins, setPendingAdmins] = useState<TenantAdmin[]>([]);
 
-  if (!tenantId) return null;
-
   const ownersQuery = useQuery({
     queryKey: ["tenant-owners", tenantId],
     queryFn: () => fetchTenantOwners(tenantId),
@@ -188,7 +190,7 @@ export function TenantAdminsAndOwnersTab() {
         ),
       );
     },
-    onError: (err: AxiosError<{ error?: string }>, userId, context) => {
+    onError: (err: AxiosError<{ error?: string }>, _userId, context) => {
       if (context?.previousOwners) {
         queryClient.setQueryData(
           ["tenant-owners", tenantId],
@@ -289,7 +291,7 @@ export function TenantAdminsAndOwnersTab() {
         t("msg.admin.tenants.admins.remove_success", "권한이 회수되었습니다."),
       );
     },
-    onError: (err: AxiosError<{ error?: string }>, userId, context) => {
+    onError: (err: AxiosError<{ error?: string }>, _userId, context) => {
       if (context?.previousAdmins) {
         queryClient.setQueryData(
           ["tenant-admins", tenantId],
@@ -311,7 +313,7 @@ export function TenantAdminsAndOwnersTab() {
     }
   };
 
-  const handleRemoveOwner = (userId: string, userName: string) => {
+  const _handleRemoveOwner = (userId: string, userName: string) => {
     if (
       window.confirm(
         t(
@@ -325,7 +327,7 @@ export function TenantAdminsAndOwnersTab() {
     }
   };
 
-  const handleRemoveAdmin = (userId: string, userName: string) => {
+  const _handleRemoveAdmin = (userId: string, userName: string) => {
     if (
       window.confirm(
         t(
@@ -339,6 +341,18 @@ export function TenantAdminsAndOwnersTab() {
     }
   };
 
+  if (!tenantId) return null;
+
+  if (!canView) {
+    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>
+      </div>
+    );
+  }
+
   const serverOwners = ownersQuery.data || [];
   const serverAdmins = adminsQuery.data || [];
   const currentOwners = mergePendingMembers(serverOwners, pendingOwners);
@@ -363,7 +377,7 @@ export function TenantAdminsAndOwnersTab() {
         );
 
   return (
-    <div className="space-y-8 mt-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
+    <div className="space-y-8 mt-6 flex flex-col h-auto pb-10">
       <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)]">
@@ -383,6 +397,7 @@ export function TenantAdminsAndOwnersTab() {
             <Button
               className="bg-primary text-primary-foreground hover:bg-primary/90"
               onClick={() => setDialogMode("owner")}
+              disabled={!isWritable}
             >
               <UserPlus className="mr-2 h-4 w-4" />
               {t("ui.admin.tenants.owners.add_button", "소유자 추가")}
@@ -472,6 +487,7 @@ export function TenantAdminsAndOwnersTab() {
             <Button
               className="bg-primary text-primary-foreground hover:bg-primary/90"
               onClick={() => setDialogMode("admin")}
+              disabled={!isWritable}
             >
               <UserPlus className="mr-2 h-4 w-4" />
               {t("ui.admin.tenants.admins.add_button", "관리자 추가")}

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

@@ -11,6 +11,7 @@ import {
   CardHeader,
   CardTitle,
 } from "../../../components/ui/card";
+import { Checkbox } from "../../../components/ui/checkbox";
 import { Input } from "../../../components/ui/input";
 import { Label } from "../../../components/ui/label";
 import { Textarea } from "../../../components/ui/textarea";
@@ -19,15 +20,15 @@ import { t } from "../../../lib/i18n";
 import { DomainTagInput } from "../components/DomainTagInput";
 import { ParentTenantSelector } from "../components/ParentTenantSelector";
 import {
-  type ServerDomainConflict,
   formatDomainConflictMessage,
+  type ServerDomainConflict,
 } from "../utils/domainTags";
 import {
+  mergeTenantOrgConfig,
   ORG_UNIT_TYPE_OPTIONS,
+  shouldAllowHanmacOrgConfig,
   TENANT_VISIBILITY_OPTIONS,
   type TenantVisibility,
-  mergeTenantOrgConfig,
-  shouldAllowHanmacOrgConfig,
 } from "../utils/orgConfig";
 
 type AdminFrontTestHooks = {
@@ -46,6 +47,7 @@ function TenantCreatePage() {
   const [parentStepConfirmed, setParentStepConfirmed] = useState(false);
   const [orgUnitType, setOrgUnitType] = useState("");
   const [visibility, setVisibility] = useState<TenantVisibility>("public");
+  const [worksmobileExcluded, setWorksmobileExcluded] = useState(false);
   const [description, setDescription] = useState("");
   const [status, setStatus] = useState("active");
   const [domains, setDomains] = useState<string[]>([]);
@@ -59,6 +61,13 @@ function TenantCreatePage() {
   });
   const tenants = parentQuery.data?.items ?? [];
   const selectedParentTenant = tenants.find((tenant) => tenant.id === parentId);
+  const hanmacFamilyTenantId = useMemo(
+    () =>
+      tenants.find(
+        (tenant) => tenant.slug.trim().toLowerCase() === "hanmac-family",
+      )?.id ?? "",
+    [tenants],
+  );
   const canConfigureHanmacOrg = useMemo(() => {
     if (!selectedParentTenant) return false;
     if (selectedParentTenant.slug.toLowerCase() === "hanmac-family") {
@@ -109,7 +118,11 @@ function TenantCreatePage() {
         status,
         domains,
         config: canConfigureHanmacOrg
-          ? mergeTenantOrgConfig(undefined, { orgUnitType, visibility })
+          ? mergeTenantOrgConfig(undefined, {
+              orgUnitType,
+              visibility,
+              worksmobileExcluded,
+            })
           : undefined,
         forceDomainConflicts: overrideForceDomains ?? forceDomainConflicts,
       }),
@@ -200,6 +213,7 @@ function TenantCreatePage() {
                   "ui.admin.tenants.create.form.pick_hanmac_parent",
                   "한맥가족에서 선택",
                 )}
+                orgChartTenantId={hanmacFamilyTenantId}
                 localPickerLabel={t(
                   "ui.admin.tenants.create.form.pick_other_parent",
                   "다른 테넌트 선택",
@@ -284,6 +298,27 @@ function TenantCreatePage() {
                     ))}
                   </select>
                 </div>
+                <div
+                  data-testid="tenant-worksmobile-excluded-slot"
+                  className="flex min-h-9 items-center gap-2 rounded-md border border-input px-3 py-2"
+                >
+                  <Checkbox
+                    id="worksmobileExcluded"
+                    checked={worksmobileExcluded}
+                    onCheckedChange={(checked) =>
+                      setWorksmobileExcluded(checked === true)
+                    }
+                  />
+                  <Label
+                    htmlFor="worksmobileExcluded"
+                    className="cursor-pointer text-sm font-semibold"
+                  >
+                    {t(
+                      "ui.admin.tenants.profile.worksmobile_excluded",
+                      "WORKS 연동 제외",
+                    )}
+                  </Label>
+                </div>
               </>
             )}
           </div>

adminfront/src/features/tenants/routes/TenantDetailPage.helpers.ts

@@ -1,7 +0,0 @@
-export function canShowWorksmobileEntry(tenant?: {
-  id?: string;
-  slug?: string;
-  parentId?: string | null;
-}) {
-  return tenant?.slug === "hanmac-family" && !tenant.parentId;
-}

adminfront/src/features/tenants/routes/TenantDetailPage.test.ts

@@ -1,30 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { canShowWorksmobileEntry } from "./TenantDetailPage.helpers";
-
-describe("TenantDetailPage Worksmobile entry visibility", () => {
-  it("shows Worksmobile entry only for hanmac-family root tenant", () => {
-    expect(
-      canShowWorksmobileEntry({
-        id: "hanmac-family-id",
-        slug: "hanmac-family",
-        parentId: undefined,
-      }),
-    ).toBe(true);
-
-    expect(
-      canShowWorksmobileEntry({
-        id: "hanmac-child-id",
-        slug: "hanmac-family",
-        parentId: "root-id",
-      }),
-    ).toBe(false);
-
-    expect(
-      canShowWorksmobileEntry({
-        id: "other-id",
-        slug: "other",
-        parentId: undefined,
-      }),
-    ).toBe(false);
-  });
-});

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

@@ -1,12 +1,10 @@
 import { useQuery } from "@tanstack/react-query";
 import { Copy } from "lucide-react";
 import { Link, Outlet, useLocation, useParams } from "react-router-dom";
-import { Badge } from "../../../components/ui/badge";
 import { Button } from "../../../components/ui/button";
-import { fetchMe, fetchTenant } from "../../../lib/adminApi";
+import { fetchTenant } from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";
-import { normalizeAdminRole } from "../../../lib/roles";
-import { canShowWorksmobileEntry } from "./TenantDetailPage.helpers";
+import { useTenantPermission } from "../hooks/useTenantPermission";
 
 function TenantDetailPage() {
   const params = useParams<{ tenantId: string }>();
@@ -19,15 +17,7 @@ function TenantDetailPage() {
     enabled: tenantId.length > 0,
   });
 
-  const { data: profile } = useQuery({
-    queryKey: ["me"],
-    queryFn: fetchMe,
-  });
-
-  const profileRole = normalizeAdminRole(profile?.role);
-  const canAccessSchema =
-    profileRole === "super_admin" || profileRole === "tenant_admin";
-  const showWorksmobileEntry = canShowWorksmobileEntry(tenantQuery.data);
+  const { hasPermission } = useTenantPermission(tenantId);
 
   const isPermissionsTab = location.pathname.includes("/permissions");
   const isOrganizationTab = location.pathname.includes("/organization");
@@ -114,7 +104,7 @@ function TenantDetailPage() {
         >
           {t("ui.admin.tenants.detail.tab_organization", "조직 관리")}
         </Link>
-        {canAccessSchema && (
+        {hasPermission("view") && (
           <Link
             to={`/tenants/${tenantId}/schema`}
             className={`px-6 py-3 text-sm font-medium transition-colors relative ${
@@ -126,22 +116,22 @@ function TenantDetailPage() {
             {t("ui.admin.tenants.detail.tab_schema", "사용자 스키마")}
           </Link>
         )}
-        {showWorksmobileEntry && (
+        {hasPermission("view") && (
           <Link
-            to={`/tenants/${tenantId}/worksmobile`}
+            to={`/tenants/${tenantId}/relations`}
             className={`px-6 py-3 text-sm font-medium transition-colors relative ${
-              isWorksmobileTab
+              location.pathname.includes("/relations")
                 ? "text-primary border-b-2 border-primary"
                 : "text-muted-foreground hover:text-foreground"
             }`}
           >
-            {t("ui.admin.tenants.detail.tab_worksmobile", "Worksmobile")}
+            {t("ui.admin.tenants.detail.tab_relations", "세부 권한")}
           </Link>
         )}
       </div>
 
       {/* Outlet for nested routes */}
-      <div className="animate-in fade-in duration-500">
+      <div>
         <Outlet />
       </div>
     </div>

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

@@ -29,7 +29,6 @@ function renderTenantDetailPage() {
         <Routes>
           <Route path="/tenants/:tenantId/*" element={<TenantDetailPage />}>
             <Route index element={<div>profile</div>} />
-            <Route path="worksmobile" element={<div>worksmobile</div>} />
           </Route>
         </Routes>
       </MemoryRouter>
@@ -42,16 +41,11 @@ describe("TenantDetailPage Worksmobile navigation", () => {
     vi.clearAllMocks();
   });
 
-  it("opens Worksmobile management in the current admin route", async () => {
+  it("does not render Worksmobile as a tenant detail tab", async () => {
     renderTenantDetailPage();
 
-    const link = await screen.findByRole("link", { name: /Worksmobile/i });
+    await screen.findByText("프로필");
 
-    expect(link).toHaveAttribute(
-      "href",
-      "/tenants/hanmac-family-id/worksmobile",
-    );
-    expect(link).not.toHaveAttribute("target");
-    expect(link).not.toHaveAttribute("rel");
+    expect(screen.queryByRole("link", { name: /Worksmobile/i })).toBeNull();
   });
 });

adminfront/src/features/tenants/routes/TenantFineGrainedPermissionsPage.superAdmin.test.tsx

@@ -0,0 +1,164 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type React from "react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18nMock } from "../../../test/i18nMock";
+import { TenantFineGrainedPermissionsPage } from "./TenantFineGrainedPermissionsPage";
+
+const fetchUsersMock = vi.hoisted(() => vi.fn());
+const bulkUpdateUsersMock = vi.hoisted(() => vi.fn());
+
+vi.mock("../../../lib/i18n", () => createI18nMock());
+
+vi.mock("../../../lib/adminApi", () => ({
+  addSystemRelation: vi.fn(async () => undefined),
+  addTenantRelation: vi.fn(async () => undefined),
+  bulkUpdateUsers: bulkUpdateUsersMock,
+  fetchAllTenants: vi.fn(async () => ({ items: [], total: 0 })),
+  fetchMe: vi.fn(async () => ({
+    id: "current-admin",
+    name: "Current Admin",
+    email: "current@example.com",
+    role: "super_admin",
+  })),
+  fetchSystemRelations: vi.fn(async () => []),
+  fetchTenantRelations: vi.fn(async () => []),
+  fetchUsers: fetchUsersMock,
+  removeSystemRelation: vi.fn(async () => undefined),
+  removeTenantRelation: vi.fn(async () => undefined),
+}));
+
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={["/permissions-direct"]}>{ui}</MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("TenantFineGrainedPermissionsPage Super Admin role tab", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    bulkUpdateUsersMock.mockResolvedValue({ results: [] });
+    fetchUsersMock.mockResolvedValue({
+      items: [
+        {
+          id: "current-admin",
+          name: "Current Admin",
+          email: "current@example.com",
+          role: "super_admin",
+          status: "active",
+          createdAt: "2026-06-17T00:00:00Z",
+          updatedAt: "2026-06-17T00:00:00Z",
+        },
+        {
+          id: "bootstrap-admin",
+          name: "Bootstrap Admin",
+          email: "env-admin@example.com",
+          role: "super_admin",
+          status: "active",
+          metadata: { bootstrapSuperAdmin: true },
+          createdAt: "2026-06-17T00:00:00Z",
+          updatedAt: "2026-06-17T00:00:00Z",
+        },
+        {
+          id: "delegated-admin",
+          name: "Delegated Admin",
+          email: "delegated@example.com",
+          role: "super_admin",
+          status: "active",
+          createdAt: "2026-06-17T00:00:00Z",
+          updatedAt: "2026-06-17T00:00:00Z",
+        },
+        {
+          id: "regular-user",
+          name: "Regular User",
+          email: "regular@example.com",
+          phone: "010-0000-0001",
+          role: "user",
+          status: "active",
+          createdAt: "2026-06-17T00:00:00Z",
+          updatedAt: "2026-06-17T00:00:00Z",
+        },
+      ],
+      total: 4,
+      limit: 1000,
+      offset: 0,
+    });
+  });
+
+  it("shows revocable super admin users even when they have no direct system relations", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/permissions-direct"
+          element={<TenantFineGrainedPermissionsPage />}
+        />
+      </Routes>,
+    );
+
+    fireEvent.click(
+      await screen.findByRole("tab", { name: "Super Admin 역할" }),
+    );
+
+    expect(await screen.findByText("Delegated Admin")).toBeInTheDocument();
+    expect(screen.getByText("delegated@example.com")).toBeInTheDocument();
+    expect(screen.queryByText("Current Admin")).not.toBeInTheDocument();
+    expect(screen.queryByText("Bootstrap Admin")).not.toBeInTheDocument();
+    expect(screen.queryByText("Regular User")).not.toBeInTheDocument();
+
+    fireEvent.click(
+      screen.getByTestId("super-admin-role-user-delegated-admin"),
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Super Admin 회수" }));
+
+    await waitFor(() =>
+      expect(bulkUpdateUsersMock).toHaveBeenCalledWith({
+        userIds: ["delegated-admin"],
+        role: "user",
+      }),
+    );
+  });
+
+  it("searches regular users and grants the Super Admin role from the target queue", async () => {
+    renderWithProviders(
+      <Routes>
+        <Route
+          path="/permissions-direct"
+          element={<TenantFineGrainedPermissionsPage />}
+        />
+      </Routes>,
+    );
+
+    fireEvent.click(
+      await screen.findByRole("tab", { name: "Super Admin 역할" }),
+    );
+
+    fireEvent.change(
+      await screen.findByPlaceholderText("UUID, 이름, 이메일, 전화번호 검색"),
+      { target: { value: "010-0000-0001" } },
+    );
+    fireEvent.click(screen.getByRole("button", { name: "부여 대상 추가" }));
+
+    expect(
+      screen.getByTestId("super-admin-grant-target-regular-user"),
+    ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Super Admin 부여" }));
+
+    await waitFor(() =>
+      expect(bulkUpdateUsersMock).toHaveBeenCalledWith({
+        userIds: ["regular-user"],
+        role: "super_admin",
+      }),
+    );
+  });
+});

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

@@ -0,0 +1,782 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Plus, Search, ShieldCheck, Trash2, UserPlus } from "lucide-react";
+import { useEffect, 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 {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../../../components/ui/dialog";
+import { Input } from "../../../components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../components/ui/table";
+import { toast } from "../../../components/ui/use-toast";
+import {
+  addTenantRelation,
+  fetchMe,
+  fetchTenantRelations,
+  fetchUsers,
+  removeTenantRelation,
+  type TenantRelation,
+} from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+
+interface TenantFineGrainedPermissionsTabProps {
+  tenantIdProp?: string;
+}
+
+export function TenantFineGrainedPermissionsTab({
+  tenantIdProp,
+}: TenantFineGrainedPermissionsTabProps = {}) {
+  const { tenantId: tenantIdParam } = useParams<{ tenantId: string }>();
+  const tenantId = tenantIdProp || tenantIdParam || "";
+  const { data: profile } = useQuery({
+    queryKey: ["me"],
+    queryFn: fetchMe,
+  });
+  const isWritable = profile?.role === "super_admin";
+  const queryClient = useQueryClient();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  // 🌟 테넌트 탭별 드롭다운 즉각 변경을 위한 임시 로컬 맵 선언
+  const [localTenantPermissions, setLocalTenantPermissions] = useState<
+    Record<string, Record<string, "none" | "read" | "write">>
+  >({});
+
+  const relationsQuery = useQuery({
+    queryKey: ["tenant-relations", tenantId],
+    queryFn: () => fetchTenantRelations(tenantId),
+    enabled: !!tenantId,
+  });
+  const _relationsData = relationsQuery.data ?? [];
+
+  // 🌟 서버 데이터를 수신하면 로컬 변경 상태 맵을 실시간 동기화
+  useEffect(() => {
+    if (relationsQuery.data) {
+      const initialMap: Record<
+        string,
+        Record<string, "none" | "read" | "write">
+      > = {};
+      for (const user of relationsQuery.data) {
+        initialMap[user.userId] = {};
+        const tabs = [
+          "profile",
+          "permissions",
+          "organization",
+          "schema",
+          "worksmobile",
+        ];
+        for (const tab of tabs) {
+          const isWrite = user.relations.includes(`${tab}_managers`);
+          const isRead = user.relations.includes(`${tab}_viewers`);
+          initialMap[user.userId][tab] = isWrite
+            ? "write"
+            : isRead
+              ? "read"
+              : "none";
+        }
+      }
+      setLocalTenantPermissions(initialMap);
+    }
+  }, [relationsQuery.data]);
+  const relations = relationsQuery.data ?? [];
+
+  const invalidateAllQueries = () => {
+    queryClient.invalidateQueries({ queryKey: ["tenant-relations", tenantId] });
+    queryClient.invalidateQueries({ queryKey: ["tenant", tenantId] });
+    queryClient.invalidateQueries({ queryKey: ["me"] });
+    setTimeout(() => {
+      queryClient.invalidateQueries({
+        queryKey: ["tenant-relations", tenantId],
+      });
+      queryClient.invalidateQueries({ queryKey: ["tenant", tenantId] });
+      queryClient.invalidateQueries({ queryKey: ["me"] });
+    }, 500);
+  };
+
+  const addRelationMutation = useMutation({
+    mutationFn: (payload: { userId: string; relation: string }) =>
+      addTenantRelation(tenantId, payload.userId, payload.relation),
+    onMutate: async (newRelation) => {
+      await queryClient.cancelQueries({
+        queryKey: ["tenant-relations", tenantId],
+      });
+      const previousRelations = queryClient.getQueryData<TenantRelation[]>([
+        "tenant-relations",
+        tenantId,
+      ]);
+
+      queryClient.setQueryData<TenantRelation[]>(
+        ["tenant-relations", tenantId],
+        (old) => {
+          if (!old) return [];
+          return old.map((user) => {
+            if (user.userId === newRelation.userId) {
+              return {
+                ...user,
+                relations: user.relations.includes(newRelation.relation)
+                  ? user.relations
+                  : [...user.relations, newRelation.relation],
+              };
+            }
+            return user;
+          });
+        },
+      );
+
+      return { previousRelations };
+    },
+    onError: (err: AxiosError<{ error?: string }>, _, context) => {
+      if (context?.previousRelations) {
+        queryClient.setQueryData(
+          ["tenant-relations", tenantId],
+          context.previousRelations,
+        );
+      }
+      toast.error(
+        err.response?.data?.error ||
+          t("msg.common.error", "오류가 발생했습니다."),
+      );
+    },
+    onSuccess: () => {
+      // Quiet mutate
+    },
+  });
+
+  const removeRelationMutation = useMutation({
+    mutationFn: (payload: { userId: string; relation: string }) =>
+      removeTenantRelation(tenantId, payload.userId, payload.relation),
+    onMutate: async (targetRelation) => {
+      await queryClient.cancelQueries({
+        queryKey: ["tenant-relations", tenantId],
+      });
+      const previousRelations = queryClient.getQueryData<TenantRelation[]>([
+        "tenant-relations",
+        tenantId,
+      ]);
+
+      queryClient.setQueryData<TenantRelation[]>(
+        ["tenant-relations", tenantId],
+        (old) => {
+          if (!old) return [];
+          return old.map((user) => {
+            if (user.userId === targetRelation.userId) {
+              return {
+                ...user,
+                relations: user.relations.filter(
+                  (r) => r !== targetRelation.relation,
+                ),
+              };
+            }
+            return user;
+          });
+        },
+      );
+
+      return { previousRelations };
+    },
+    onError: (err: AxiosError<{ error?: string }>, _, context) => {
+      if (context?.previousRelations) {
+        queryClient.setQueryData(
+          ["tenant-relations", tenantId],
+          context.previousRelations,
+        );
+      }
+      toast.error(
+        err.response?.data?.error ||
+          t("msg.common.error", "오류가 발생했습니다."),
+      );
+    },
+    onSuccess: () => {
+      // Quiet mutate
+    },
+  });
+
+  const handleRelationChange = async (
+    userId: string,
+    tab: "profile" | "permissions" | "organization" | "schema" | "worksmobile",
+    currentVal: "none" | "read" | "write",
+    newVal: "none" | "read" | "write",
+  ) => {
+    const readRel = `${tab}_viewers`;
+    const writeRel = `${tab}_managers`;
+
+    if (currentVal === newVal) return;
+
+    try {
+      if (currentVal === "read") {
+        await removeRelationMutation.mutateAsync({ userId, relation: readRel });
+      } else if (currentVal === "write") {
+        await removeRelationMutation.mutateAsync({
+          userId,
+          relation: writeRel,
+        });
+      }
+
+      if (newVal === "read") {
+        await addRelationMutation.mutateAsync({ userId, relation: readRel });
+      } else if (newVal === "write") {
+        await addRelationMutation.mutateAsync({ userId, relation: writeRel });
+      }
+
+      invalidateAllQueries();
+
+      // 🌟 Trigger a single consolidated success toast at the very end
+      toast.success(
+        t(
+          "msg.admin.tenants.relations.update_success",
+          "세부 권한이 성공적으로 변경되었습니다.",
+        ),
+      );
+    } catch {
+      // Individual mutations handle error toast via onError
+    }
+  };
+
+  const handleRemoveAllRelations = async (
+    userId: string,
+    userRelations: string[],
+  ) => {
+    if (
+      !window.confirm(
+        t(
+          "msg.admin.tenants.relations.remove_all_confirm",
+          "이 사용자의 모든 세부 권한을 삭제하시겠습니까?",
+        ),
+      )
+    ) {
+      return;
+    }
+    for (const rel of userRelations) {
+      await removeRelationMutation.mutateAsync({ userId, relation: rel });
+    }
+    invalidateAllQueries();
+  };
+
+  const usersQuery = useQuery({
+    queryKey: ["admin-users-search", searchTerm],
+    queryFn: () => fetchUsers(20, 0, searchTerm),
+    enabled: isDialogOpen && searchTerm.length >= 2,
+  });
+
+  const handleAddUser = (userId: string) => {
+    addRelationMutation.mutate(
+      { userId, relation: "profile_viewers" },
+      {
+        onSettled: () => {
+          invalidateAllQueries();
+        },
+      },
+    );
+    setIsDialogOpen(false);
+    setSearchTerm("");
+  };
+
+  if (!tenantId) return null;
+
+  const searchResults = usersQuery.data?.items || [];
+
+  return (
+    <div className="space-y-8 mt-6 flex flex-col h-auto pb-10">
+      <Card className="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.relations.title",
+                "세부 권한 설정 (Fine-grained Permissions)",
+              )}
+            </CardTitle>
+            <CardDescription className="text-muted-foreground">
+              {t(
+                "msg.admin.tenants.relations.subtitle",
+                "사용자별로 각 탭의 세부 조회 및 수정 권한을 격리하여 할당합니다. 상위 상속 권한은 자동으로 보존됩니다.",
+              )}
+            </CardDescription>
+          </div>
+          <Button
+            className="bg-primary text-primary-foreground hover:bg-primary/90"
+            onClick={() => setIsDialogOpen(true)}
+            disabled={!isWritable}
+          >
+            <UserPlus className="mr-2 h-4 w-4" />
+            {t(
+              "ui.admin.tenants.relations.add_button",
+              "세부 권한 사용자 추가",
+            )}
+          </Button>
+        </CardHeader>
+        <CardContent className="pt-0">
+          {!isWritable && (
+            <div className="mb-4 p-3 bg-amber-50 dark:bg-amber-950/20 text-amber-800 dark:text-amber-200 border border-amber-200 dark:border-amber-800/30 rounded-lg text-sm font-medium">
+              {t(
+                "msg.admin.tenants.relations.super_admin_only_desc",
+                "이 화면의 권한 설정은 시스템 최고 관리자(super_admin)만 수정할 수 있습니다.",
+              )}
+            </div>
+          )}
+          <div className="rounded-md border border-border overflow-hidden">
+            <Table>
+              <TableHeader className="bg-secondary/40">
+                <TableRow>
+                  <TableHead className="font-bold">
+                    {t("ui.common.name", "이름")}
+                  </TableHead>
+                  <TableHead className="font-bold">
+                    {t("ui.admin.tenants.detail.tab_profile", "테넌트 프로필")}
+                  </TableHead>
+                  <TableHead className="font-bold">
+                    {t("ui.admin.tenants.detail.tab_permissions", "권한 관리")}
+                  </TableHead>
+                  <TableHead className="font-bold">
+                    {t("ui.admin.tenants.detail.tab_organization", "조직 관리")}
+                  </TableHead>
+                  <TableHead className="font-bold">
+                    {t("ui.admin.tenants.detail.tab_schema", "사용자 스키마")}
+                  </TableHead>
+                  <TableHead className="font-bold">
+                    {t(
+                      "ui.admin.tenants.detail.tab_worksmobile",
+                      "네이버웍스 연동",
+                    )}
+                  </TableHead>
+                  <TableHead className="font-bold text-center w-20">
+                    {t("ui.common.action", "작업")}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {relations.length === 0 ? (
+                  <TableRow>
+                    <TableCell
+                      colSpan={7}
+                      className="text-center py-12 text-muted-foreground"
+                    >
+                      {t(
+                        "msg.admin.tenants.relations.empty",
+                        "세부 권한이 지정된 사용자가 없습니다. 사용자를 추가해 설정하세요.",
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  relations.map((user) => {
+                    const profileVal = user.relations.includes(
+                      "profile_managers",
+                    )
+                      ? "write"
+                      : user.relations.includes("profile_viewers")
+                        ? "read"
+                        : "none";
+
+                    const permissionsVal = user.relations.includes(
+                      "permissions_managers",
+                    )
+                      ? "write"
+                      : user.relations.includes("permissions_viewers")
+                        ? "read"
+                        : "none";
+
+                    const organizationVal = user.relations.includes(
+                      "organization_managers",
+                    )
+                      ? "write"
+                      : user.relations.includes("organization_viewers")
+                        ? "read"
+                        : "none";
+
+                    const schemaVal = user.relations.includes("schema_managers")
+                      ? "write"
+                      : user.relations.includes("schema_viewers")
+                        ? "read"
+                        : "none";
+
+                    const worksmobileVal = user.relations.includes(
+                      "worksmobile_managers",
+                    )
+                      ? "write"
+                      : user.relations.includes("worksmobile_viewers")
+                        ? "read"
+                        : "none";
+
+                    const curProfileVal =
+                      localTenantPermissions[user.userId]?.profile ??
+                      profileVal;
+                    const curPermissionsVal =
+                      localTenantPermissions[user.userId]?.permissions ??
+                      permissionsVal;
+                    const curOrganizationVal =
+                      localTenantPermissions[user.userId]?.organization ??
+                      organizationVal;
+                    const curSchemaVal =
+                      localTenantPermissions[user.userId]?.schema ?? schemaVal;
+                    const curWorksmobileVal =
+                      localTenantPermissions[user.userId]?.worksmobile ??
+                      worksmobileVal;
+
+                    return (
+                      <TableRow
+                        key={user.userId}
+                        className="hover:bg-muted/10 transition-colors"
+                      >
+                        <TableCell className="font-medium">
+                          <div className="flex flex-col">
+                            <span className="font-semibold text-foreground">
+                              {user.name}
+                            </span>
+                            <span className="text-xs text-muted-foreground italic">
+                              {user.email}
+                            </span>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <select
+                            className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                            value={curProfileVal}
+                            disabled={!isWritable}
+                            name={`tenant-fine-grained-profile-${user.userId}`}
+                            onChange={(e) => {
+                              const nextVal = e.target.value as
+                                | "none"
+                                | "read"
+                                | "write";
+                              setLocalTenantPermissions((prev) => ({
+                                ...prev,
+                                [user.userId]: {
+                                  ...(prev[user.userId] ?? {}),
+                                  profile: nextVal,
+                                },
+                              }));
+                              handleRelationChange(
+                                user.userId,
+                                "profile",
+                                profileVal,
+                                nextVal,
+                              );
+                            }}
+                          >
+                            <option value="none">
+                              {t("ui.common.none", "권한 없음")}
+                            </option>
+                            <option value="read">
+                              {t("ui.common.read", "조회 가능 (Read)")}
+                            </option>
+                            <option value="write">
+                              {t("ui.common.write", "수정 가능 (Write)")}
+                            </option>
+                          </select>
+                        </TableCell>
+                        <TableCell>
+                          <select
+                            className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                            value={curPermissionsVal}
+                            disabled={!isWritable}
+                            name={`tenant-fine-grained-permissions-${user.userId}`}
+                            onChange={(e) => {
+                              const nextVal = e.target.value as
+                                | "none"
+                                | "read"
+                                | "write";
+                              setLocalTenantPermissions((prev) => ({
+                                ...prev,
+                                [user.userId]: {
+                                  ...(prev[user.userId] ?? {}),
+                                  permissions: nextVal,
+                                },
+                              }));
+                              handleRelationChange(
+                                user.userId,
+                                "permissions",
+                                permissionsVal,
+                                nextVal,
+                              );
+                            }}
+                          >
+                            <option value="none">
+                              {t("ui.common.none", "권한 없음")}
+                            </option>
+                            <option value="read">
+                              {t("ui.common.read", "조회 가능 (Read)")}
+                            </option>
+                            <option value="write">
+                              {t("ui.common.write", "수정 가능 (Write)")}
+                            </option>
+                          </select>
+                        </TableCell>
+                        <TableCell>
+                          <select
+                            className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                            value={curOrganizationVal}
+                            disabled={!isWritable}
+                            name={`tenant-fine-grained-organization-${user.userId}`}
+                            onChange={(e) => {
+                              const nextVal = e.target.value as
+                                | "none"
+                                | "read"
+                                | "write";
+                              setLocalTenantPermissions((prev) => ({
+                                ...prev,
+                                [user.userId]: {
+                                  ...(prev[user.userId] ?? {}),
+                                  organization: nextVal,
+                                },
+                              }));
+                              handleRelationChange(
+                                user.userId,
+                                "organization",
+                                organizationVal,
+                                nextVal,
+                              );
+                            }}
+                          >
+                            <option value="none">
+                              {t("ui.common.none", "권한 없음")}
+                            </option>
+                            <option value="read">
+                              {t("ui.common.read", "조회 가능 (Read)")}
+                            </option>
+                            <option value="write">
+                              {t("ui.common.write", "수정 가능 (Write)")}
+                            </option>
+                          </select>
+                        </TableCell>
+                        <TableCell>
+                          <select
+                            className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                            value={curSchemaVal}
+                            disabled={!isWritable}
+                            name={`tenant-fine-grained-schema-${user.userId}`}
+                            onChange={(e) => {
+                              const nextVal = e.target.value as
+                                | "none"
+                                | "read"
+                                | "write";
+                              setLocalTenantPermissions((prev) => ({
+                                ...prev,
+                                [user.userId]: {
+                                  ...(prev[user.userId] ?? {}),
+                                  schema: nextVal,
+                                },
+                              }));
+                              handleRelationChange(
+                                user.userId,
+                                "schema",
+                                schemaVal,
+                                nextVal,
+                              );
+                            }}
+                          >
+                            <option value="none">
+                              {t("ui.common.none", "권한 없음")}
+                            </option>
+                            <option value="read">
+                              {t("ui.common.read", "조회 가능 (Read)")}
+                            </option>
+                            <option value="write">
+                              {t("ui.common.write", "수정 가능 (Write)")}
+                            </option>
+                          </select>
+                        </TableCell>
+                        <TableCell>
+                          <select
+                            className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                            value={curWorksmobileVal}
+                            disabled={!isWritable}
+                            name={`tenant-fine-grained-worksmobile-${user.userId}`}
+                            onChange={(e) => {
+                              const nextVal = e.target.value as
+                                | "none"
+                                | "read"
+                                | "write";
+                              setLocalTenantPermissions((prev) => ({
+                                ...prev,
+                                [user.userId]: {
+                                  ...(prev[user.userId] ?? {}),
+                                  worksmobile: nextVal,
+                                },
+                              }));
+                              handleRelationChange(
+                                user.userId,
+                                "worksmobile",
+                                worksmobileVal,
+                                nextVal,
+                              );
+                            }}
+                          >
+                            <option value="none">
+                              {t("ui.common.none", "권한 없음")}
+                            </option>
+                            <option value="read">
+                              {t("ui.common.read", "조회 가능 (Read)")}
+                            </option>
+                            <option value="write">
+                              {t("ui.common.write", "수정 가능 (Write)")}
+                            </option>
+                          </select>
+                        </TableCell>
+                        <TableCell className="text-center">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            disabled={!isWritable}
+                            onClick={() =>
+                              handleRemoveAllRelations(
+                                user.userId,
+                                user.relations,
+                              )
+                            }
+                          >
+                            <Trash2 className="h-4 w-4 text-destructive" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Common Dialog for adding users */}
+      <Dialog
+        open={isDialogOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setIsDialogOpen(false);
+            setSearchTerm("");
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-xl font-bold">
+              {t(
+                "ui.admin.tenants.relations.dialog_title",
+                "세부 권한 관리 유저 추가",
+              )}
+            </DialogTitle>
+            <DialogDescription>
+              {t(
+                "ui.admin.tenants.admins.dialog_description",
+                "이름 또는 이메일로 사용자를 검색하세요.",
+              )}
+            </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 isAlreadyInMatrix = relations.some(
+                      (r) => r.userId === user.id,
+                    );
+
+                    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={isAlreadyInMatrix ? "ghost" : "outline"}
+                          disabled={
+                            isAlreadyInMatrix || addRelationMutation.isPending
+                          }
+                          onClick={() => handleAddUser(user.id)}
+                        >
+                          {isAlreadyInMatrix ? (
+                            <Badge variant="secondary" className="font-normal">
+                              {t(
+                                "ui.admin.tenants.relations.already_added",
+                                "이미 추가됨",
+                              )}
+                            </Badge>
+                          ) : (
+                            <>
+                              <Plus className="h-3 w-3 mr-1" />{" "}
+                              {t("ui.common.add", "추가")}
+                            </>
+                          )}
+                        </Button>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

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

@@ -38,7 +38,6 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "../../../components/ui/dialog";
 import { Input } from "../../../components/ui/input";
 import { Label } from "../../../components/ui/label";
@@ -53,16 +52,17 @@ import {
 } from "../../../components/ui/table";
 import { toast } from "../../../components/ui/use-toast";
 import {
-  type GroupSummary,
   addGroupMember,
   createGroup,
   deleteGroup,
   fetchGroups,
   fetchTenant,
   fetchUsers,
+  type GroupSummary,
   removeGroupMember,
 } from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";
+import { useTenantPermission } from "../hooks/useTenantPermission";
 
 type UserGroupNode = GroupSummary & {
   children: UserGroupNode[];
@@ -127,6 +127,7 @@ interface UserGroupTreeNodeProps {
     AxiosError<{ error?: string }>,
     { groupId: string; userId: string }
   >;
+  isWritable?: boolean;
 }
 
 const UserGroupTreeNode: React.FC<UserGroupTreeNodeProps> = ({
@@ -138,6 +139,7 @@ const UserGroupTreeNode: React.FC<UserGroupTreeNodeProps> = ({
   onAddSubGroup,
   addMemberMutation,
   removeMemberMutation,
+  isWritable = true,
 }) => {
   const [isExpanded, setIsExpanded] = useState(true);
   const hasChildren = node.children.length > 0;
@@ -201,6 +203,7 @@ const UserGroupTreeNode: React.FC<UserGroupTreeNodeProps> = ({
                 e.stopPropagation();
                 onAddSubGroup(node.id);
               }}
+              disabled={!isWritable}
             >
               <Plus size={14} />
             </Button>
@@ -211,6 +214,7 @@ const UserGroupTreeNode: React.FC<UserGroupTreeNodeProps> = ({
                 e.stopPropagation();
                 onDelete(node.id);
               }}
+              disabled={!isWritable}
             >
               <Trash2 size={14} className="text-destructive" />
             </Button>
@@ -230,6 +234,7 @@ const UserGroupTreeNode: React.FC<UserGroupTreeNodeProps> = ({
             onAddSubGroup={onAddSubGroup}
             addMemberMutation={addMemberMutation}
             removeMemberMutation={removeMemberMutation}
+            isWritable={isWritable}
           />
         ))}
     </>
@@ -239,7 +244,12 @@ const UserGroupTreeNode: React.FC<UserGroupTreeNodeProps> = ({
 function TenantGroupsPage() {
   const params = useParams<{ tenantId: string }>();
   const tenantId = params.tenantId ?? "";
-  const queryClient = useQueryClient();
+  const _queryClient = useQueryClient();
+
+  const { hasPermission } = useTenantPermission(tenantId);
+  const isWritable =
+    hasPermission("manage_organization") || hasPermission("manage");
+  const canView = hasPermission("view_organization") || hasPermission("view");
 
   const [newGroupName, setNewGroupName] = useState("");
   const [newGroupDesc, setNewGroupNameDesc] = useState("");
@@ -388,6 +398,16 @@ function TenantGroupsPage() {
     },
   });
 
+  if (!canView) {
+    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>
+      </div>
+    );
+  }
+
   const groupTree = groupsQuery.data
     ? buildGroupTree(groupsQuery.data, tenantId)
     : [];
@@ -424,6 +444,7 @@ function TenantGroupsPage() {
                   id="name"
                   value={newGroupName}
                   onChange={(e) => setNewGroupName(e.target.value)}
+                  disabled={!isWritable}
                   placeholder={t(
                     "ui.admin.groups.form.name_placeholder",
                     "예: 개발팀, 인사팀",
@@ -438,6 +459,7 @@ function TenantGroupsPage() {
                   id="unitType"
                   value={newGroupUnitType}
                   onChange={(e) => setNewGroupUnitType(e.target.value)}
+                  disabled={!isWritable}
                   placeholder={t(
                     "ui.admin.groups.form.unit_level_placeholder",
                     "예: 본부, 팀, 셀",
@@ -450,9 +472,10 @@ function TenantGroupsPage() {
                 </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"
+                  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 disabled:cursor-not-allowed disabled:opacity-50"
                   value={newGroupParentId || ""}
                   onChange={(e) => setNewGroupParentId(e.target.value || null)}
+                  disabled={!isWritable}
                 >
                   <option value="">{t("ui.common.none", "없음")}</option>
                   {groupsQuery.data?.map((group) => (
@@ -470,6 +493,7 @@ function TenantGroupsPage() {
                   id="desc"
                   value={newGroupDesc}
                   onChange={(e) => setNewGroupNameDesc(e.target.value)}
+                  disabled={!isWritable}
                   placeholder={t(
                     "ui.admin.groups.form.desc_placeholder",
                     "그룹 용도 설명",
@@ -479,7 +503,9 @@ function TenantGroupsPage() {
               <Button
                 className="w-full"
                 onClick={() => createMutation.mutate()}
-                disabled={!newGroupName || createMutation.isPending}
+                disabled={
+                  !newGroupName || createMutation.isPending || !isWritable
+                }
               >
                 {t("ui.admin.groups.form.submit", "생성하기")}
               </Button>
@@ -570,6 +596,7 @@ function TenantGroupsPage() {
                           onAddSubGroup={handleAddSubGroup}
                           addMemberMutation={addMemberMutation}
                           removeMemberMutation={removeMemberMutation}
+                          isWritable={isWritable}
                         />
                       ))}
                     </TableBody>

adminfront/src/features/tenants/routes/TenantListPage.test.ts

@@ -2,6 +2,8 @@ import { describe, expect, it } from "vitest";
 import type { TenantSummary } from "../../../lib/adminApi";
 import {
   filterTenantsByScope,
+  filterTenantViewRowsBySearch,
+  getTenantSearchMatchIds,
   getTenantViewRows,
   resolveTenantSelectionIds,
   tenantMatchesListSearch,
@@ -69,6 +71,7 @@ describe("TenantListPage tenant list helpers", () => {
     expect(tenantMatchesListSearch(tenants[2], "team-1")).toBe(true);
     expect(tenantMatchesListSearch(tenants[2], "platform")).toBe(true);
     expect(tenantMatchesListSearch(tenants[2], "플랫폼")).toBe(true);
+    expect(tenantMatchesListSearch(tenants[2], "삼안")).toBe(false);
   });
 
   it("can return tree rows or same-level table rows", () => {
@@ -79,4 +82,33 @@ describe("TenantListPage tenant list helpers", () => {
       [0, 0, 0, 0],
     );
   });
+
+  it("marks only direct search matches when tree search includes ancestors", () => {
+    const treeRows = getTenantViewRows(
+      tenants.filter((item) => item.id !== "company-2"),
+      "tree",
+      "",
+      true,
+    );
+
+    expect(treeRows.map((row) => row.id)).toEqual([
+      "company-1",
+      "dept-1",
+      "team-1",
+    ]);
+    expect(getTenantSearchMatchIds(treeRows, "platform")).toEqual(["team-1"]);
+  });
+
+  it("filters displayed tenant rows to direct matches only", () => {
+    const treeRows = getTenantViewRows(
+      tenants.filter((item) => item.id !== "company-2"),
+      "tree",
+      "",
+      true,
+    );
+
+    expect(
+      filterTenantViewRowsBySearch(treeRows, "team-1").map((row) => row.id),
+    ).toEqual(["team-1"]);
+  });
 });

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

@@ -0,0 +1,81 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import type React from "react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createI18nMock } from "../../../test/i18nMock";
+import { TenantProfilePage } from "./TenantProfilePage";
+
+const fetchAllTenantsMock = vi.hoisted(() => vi.fn());
+const fetchTenantMock = vi.hoisted(() => vi.fn());
+
+vi.mock("../../../lib/i18n", () => createI18nMock());
+
+vi.mock("../../../lib/adminApi", () => ({
+  approveTenant: vi.fn(),
+  deleteTenant: vi.fn(),
+  fetchAllTenants: fetchAllTenantsMock,
+  fetchMe: vi.fn(async () => ({
+    id: "admin-1",
+    role: "super_admin",
+  })),
+  fetchTenant: fetchTenantMock,
+  updateTenant: vi.fn(),
+}));
+
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={["/tenants/tenant-leaf"]}>
+        {ui}
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("TenantProfilePage initial profile loading", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    fetchTenantMock.mockResolvedValue({
+      id: "tenant-leaf",
+      type: "USER_GROUP",
+      parentId: "tenant-company",
+      name: "기술기획",
+      slug: "tech-planning",
+      description: "",
+      status: "active",
+      domains: [],
+      memberCount: 0,
+      config: {
+        orgUnitType: "팀",
+        visibility: "internal",
+        worksmobileExcluded: true,
+      },
+      createdAt: "2026-06-17T00:00:00Z",
+      updatedAt: "2026-06-17T00:00:00Z",
+    });
+  });
+
+  it("renders tenant config fields from the tenant response before the full tenant list resolves", async () => {
+    fetchAllTenantsMock.mockReturnValue(new Promise(() => undefined));
+
+    renderWithProviders(
+      <Routes>
+        <Route path="/tenants/:tenantId" element={<TenantProfilePage />} />
+      </Routes>,
+    );
+
+    expect(await screen.findByDisplayValue("기술기획")).toBeInTheDocument();
+    expect(screen.getByTestId("tenant-org-unit-type-select")).toHaveValue("팀");
+    expect(screen.getByLabelText("공개 범위")).toHaveValue("internal");
+    expect(screen.getByLabelText("WORKS 연동")).toHaveValue("excluded");
+    expect(fetchAllTenantsMock).not.toHaveBeenCalled();
+  });
+});

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

@@ -25,41 +25,37 @@ import {
 import { t } from "../../../lib/i18n";
 import { DomainTagInput } from "../components/DomainTagInput";
 import { ParentTenantSelector } from "../components/ParentTenantSelector";
+import { useTenantPermission } from "../hooks/useTenantPermission";
 import {
-  type ServerDomainConflict,
   formatDomainConflictMessage,
+  type ServerDomainConflict,
 } from "../utils/domainTags";
 import {
-  ORG_UNIT_TYPE_OPTIONS,
-  TENANT_VISIBILITY_OPTIONS,
-  type TenantVisibility,
+  getOrgUnitTypeOptionsForTenantType,
   mergeTenantOrgConfig,
   readTenantOrgConfig,
   removeTenantOrgConfig,
   shouldAllowHanmacOrgConfig,
+  TENANT_VISIBILITY_OPTIONS,
+  type TenantVisibility,
 } from "../utils/orgConfig";
 import { isSeedTenant } from "../utils/protectedTenants";
 
 export function TenantProfilePage() {
-  const { tenantId } = useParams<{ tenantId: string }>();
+  const { tenantId: tenantIdParam } = useParams<{ tenantId: string }>();
+  const tenantId = tenantIdParam ?? "";
   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),
+    enabled: tenantId.length > 0,
   });
 
-  const parentQuery = useQuery({
-    queryKey: ["tenants", "list-all"],
-    queryFn: () => fetchAllTenants(),
-  });
+  const { hasPermission } = useTenantPermission(tenantId);
+  const isWritable = hasPermission("manage_profile") || hasPermission("manage");
+  const canView = hasPermission("view_profile") || hasPermission("view");
 
   const [name, setName] = useState("");
   const [type, setType] = useState("COMPANY");
@@ -74,6 +70,7 @@ export function TenantProfilePage() {
   const [orgUnitType, setOrgUnitType] = useState("");
   const [tenantVisibility, setTenantVisibility] =
     useState<TenantVisibility>("public");
+  const [worksmobileExcluded, setWorksmobileExcluded] = useState(false);
 
   useEffect(() => {
     if (tenantQuery.data) {
@@ -88,9 +85,20 @@ export function TenantProfilePage() {
       setParentId(tenantQuery.data.parentId ?? "");
       setOrgUnitType(orgConfig.orgUnitType);
       setTenantVisibility(orgConfig.visibility);
+      setWorksmobileExcluded(orgConfig.worksmobileExcluded);
     }
   }, [tenantQuery.data]);
 
+  const hasPersistedOrgConfig =
+    tenantQuery.data?.slug?.toLowerCase() !== "hanmac-family" &&
+    (typeof tenantQuery.data?.config?.orgUnitType === "string" ||
+      typeof tenantQuery.data?.config?.visibility === "string" ||
+      typeof tenantQuery.data?.config?.worksmobileExcluded !== "undefined");
+  const parentQuery = useQuery({
+    queryKey: ["tenants", "list-all"],
+    queryFn: () => fetchAllTenants(),
+    enabled: !!tenantQuery.data && !hasPersistedOrgConfig,
+  });
   const allTenants = parentQuery.data?.items ?? [];
   const orgConfigCandidate = tenantQuery.data
     ? {
@@ -100,11 +108,13 @@ export function TenantProfilePage() {
       }
     : undefined;
   const canEditOrgConfig = orgConfigCandidate
-    ? shouldAllowHanmacOrgConfig(orgConfigCandidate, [
+    ? hasPersistedOrgConfig ||
+      shouldAllowHanmacOrgConfig(orgConfigCandidate, [
         ...allTenants,
         orgConfigCandidate,
       ])
     : false;
+  const orgUnitTypeOptions = getOrgUnitTypeOptionsForTenantType(type);
 
   const updateMutation = useMutation({
     mutationFn: (overrideForceDomains?: string[]) => {
@@ -113,6 +123,7 @@ export function TenantProfilePage() {
         ? mergeTenantOrgConfig(baseConfig, {
             orgUnitType,
             visibility: tenantVisibility,
+            worksmobileExcluded,
           })
         : removeTenantOrgConfig(baseConfig);
 
@@ -197,6 +208,22 @@ export function TenantProfilePage() {
     ? isSeedTenant(tenantQuery.data)
     : false;
 
+  if (!tenantId) {
+    return (
+      <div>{t("msg.admin.tenants.missing_id", "테넌트 ID가 없습니다.")}</div>
+    );
+  }
+
+  if (!canView) {
+    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>
+      </div>
+    );
+  }
+
   const handleDelete = () => {
     if (isProtectedSeedTenant) {
       return;
@@ -224,78 +251,54 @@ export function TenantProfilePage() {
 
   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>
+      <Card className="mt-4 bg-[var(--color-panel)]">
+        <CardHeader className="px-5 py-3">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div>
+              <CardTitle className="text-lg">
+                {t("ui.admin.tenants.profile.title", "테넌트 프로필")}
+              </CardTitle>
+              <CardDescription>
+                {t(
+                  "ui.admin.tenants.profile.subtitle",
+                  "슬러그 및 상태 변경은 즉시 적용됩니다.",
+                )}
+              </CardDescription>
+            </div>
+          </div>
         </CardHeader>
-        <CardContent className="space-y-4">
+        <CardContent className="space-y-3 px-5 pb-4">
           {loadError && (
             <div className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
               {loadError}
             </div>
           )}
-          <div 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="ORGANIZATION">
-                {t(
-                  "domain.tenant_type.organization",
-                  "ORGANIZATION (정규 조직)",
-                )}
-              </option>
-              <option value="USER_GROUP">
-                {t(
-                  "domain.tenant_type.user_group",
-                  "USER_GROUP (내부 부서/팀)",
-                )}
-              </option>
-              <option value="PERSONAL">
-                {t(
-                  "domain.tenant_type.personal",
-                  "PERSONAL (개인 워크스페이스)",
-                )}
-              </option>
-            </select>
-          </div>
           <div
-            data-testid="tenant-parent-org-config-layout"
-            className="grid gap-4 md:grid-cols-4"
+            data-testid="tenant-profile-primary-row"
+            className="grid gap-3 lg:grid-cols-[minmax(180px,1fr)_minmax(160px,0.8fr)_minmax(320px,1.4fr)]"
           >
-            <div
-              data-testid="tenant-parent-picker-slot"
-              className={canEditOrgConfig ? "md:col-span-2" : "md:col-span-4"}
-            >
+            <div data-testid="tenant-name-slot" className="space-y-1">
+              <Label className="text-sm font-semibold">
+                {t("ui.admin.tenants.profile.name", "테넌트 이름")}{" "}
+                <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                disabled={!isWritable}
+              />
+            </div>
+            <div data-testid="tenant-slug-slot" className="space-y-1">
+              <Label className="text-sm font-semibold">
+                {t("ui.admin.tenants.profile.slug", "슬러그 (Slug)")}
+              </Label>
+              <Input
+                value={slug}
+                onChange={(e) => setSlug(e.target.value)}
+                disabled={!isWritable}
+              />
+            </div>
+            <div data-testid="tenant-parent-picker-slot" className="min-w-0">
               <ParentTenantSelector
                 id="parentId"
                 label={t(
@@ -306,50 +309,108 @@ export function TenantProfilePage() {
                 onChange={setParentId}
                 tenants={parentQuery.data?.items ?? []}
                 noneLabel={t("ui.common.none", "없음 (최상위)")}
-                helpText={t(
-                  "ui.admin.tenants.profile.form.parent_help",
-                  "하위 조직을 종속시킬 경우 상위 테넌트를 선택해주세요.",
-                )}
                 excludeTenantId={tenantId}
+                compact
+                controlTestId="tenant-parent-picker-control"
+                disabled={!isWritable}
               />
             </div>
+          </div>
+          <div
+            data-testid="tenant-profile-config-row"
+            className="grid gap-3 lg:grid-cols-[minmax(190px,1fr)_minmax(150px,0.8fr)_minmax(150px,0.8fr)_minmax(190px,0.9fr)]"
+          >
+            <div data-testid="tenant-type-slot" className="space-y-1">
+              <Label className="text-sm font-semibold">
+                {t("ui.admin.tenants.profile.type", "테넌트 유형")}
+              </Label>
+              <select
+                id="type"
+                data-testid="tenant-type-select"
+                className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                value={type}
+                onChange={(e) => setType(e.target.value)}
+                disabled={!isWritable}
+              >
+                <option value="COMPANY">
+                  {t("domain.tenant_type.company", "COMPANY (일반 기업)")}
+                </option>
+                <option value="COMPANY_GROUP">
+                  {t(
+                    "domain.tenant_type.company_group",
+                    "COMPANY_GROUP (그룹사/지주사)",
+                  )}
+                </option>
+                <option value="ORGANIZATION">
+                  {t(
+                    "domain.tenant_type.organization",
+                    "ORGANIZATION (정규 조직)",
+                  )}
+                </option>
+                <option value="USER_GROUP">
+                  {t(
+                    "domain.tenant_type.user_group",
+                    "USER_GROUP (내부 부서/팀)",
+                  )}
+                </option>
+                <option value="PERSONAL">
+                  {t(
+                    "domain.tenant_type.personal",
+                    "PERSONAL (개인 워크스페이스)",
+                  )}
+                </option>
+              </select>
+            </div>
             {canEditOrgConfig && (
               <>
                 <div
                   data-testid="tenant-org-unit-type-slot"
-                  className="space-y-2"
+                  className="space-y-1"
                 >
-                  <Label className="text-sm font-semibold">
+                  <Label
+                    htmlFor="tenant-org-unit-type"
+                    className="text-sm font-semibold"
+                  >
                     {t(
                       "ui.admin.tenants.profile.org_unit_type",
                       "조직 세부타입",
                     )}
                   </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"
+                    id="tenant-org-unit-type"
+                    name="tenant-org-unit-type"
+                    data-testid="tenant-org-unit-type-select"
+                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
                     value={orgUnitType}
                     onChange={(event) => setOrgUnitType(event.target.value)}
+                    disabled={!isWritable}
                   >
                     <option value="">{t("ui.common.none", "없음")}</option>
-                    {ORG_UNIT_TYPE_OPTIONS.map((option) => (
+                    {orgUnitTypeOptions.map((option) => (
                       <option key={option} value={option}>
                         {option}
                       </option>
                     ))}
                   </select>
                 </div>
-                <div data-testid="tenant-visibility-slot" className="space-y-2">
-                  <Label className="text-sm font-semibold">
+                <div data-testid="tenant-visibility-slot" className="space-y-1">
+                  <Label
+                    htmlFor="tenant-visibility"
+                    className="text-sm font-semibold"
+                  >
                     {t("ui.admin.tenants.profile.visibility", "공개 범위")}
                   </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"
+                    id="tenant-visibility"
+                    name="tenant-visibility"
+                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
                     value={tenantVisibility}
                     onChange={(event) =>
                       setTenantVisibility(
                         event.target.value as TenantVisibility,
                       )
                     }
+                    disabled={!isWritable}
                   >
                     {TENANT_VISIBILITY_OPTIONS.map((option) => (
                       <option key={option.value} value={option.value}>
@@ -358,68 +419,100 @@ export function TenantProfilePage() {
                     ))}
                   </select>
                 </div>
+                <div
+                  data-testid="tenant-worksmobile-excluded-slot"
+                  className="space-y-1"
+                >
+                  <Label
+                    htmlFor="worksmobileExcluded"
+                    className="text-sm font-semibold"
+                  >
+                    {t(
+                      "ui.admin.tenants.profile.worksmobile_sync",
+                      "WORKS 연동",
+                    )}
+                  </Label>
+                  <select
+                    id="worksmobileExcluded"
+                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                    value={worksmobileExcluded ? "excluded" : "enabled"}
+                    onChange={(event) =>
+                      setWorksmobileExcluded(event.target.value === "excluded")
+                    }
+                    disabled={!isWritable}
+                  >
+                    <option value="enabled">
+                      {t(
+                        "ui.admin.tenants.profile.worksmobile_enabled",
+                        "연동",
+                      )}
+                    </option>
+                    <option value="excluded">
+                      {t(
+                        "ui.admin.tenants.profile.worksmobile_excluded",
+                        "제외",
+                      )}
+                    </option>
+                  </select>
+                </div>
               </>
             )}
           </div>
-          <div className="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>
-            <DomainTagInput
-              id="tenant-domains"
-              value={domains}
-              onChange={setDomains}
-              tenants={parentQuery.data?.items ?? []}
-              currentTenantId={tenantId}
-              confirmedConflicts={forceDomainConflicts}
-              onConfirmedConflictsChange={setForceDomainConflicts}
-              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 className="grid gap-3 lg:grid-cols-[minmax(260px,0.9fr)_minmax(360px,1.4fr)_auto]">
+            <div className="space-y-1">
+              <Label className="text-sm font-semibold">
+                {t("ui.admin.tenants.profile.description", "설명")}
+              </Label>
+              <Textarea
+                rows={2}
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                disabled={!isWritable}
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-sm font-semibold">
+                {t(
+                  "ui.admin.tenants.profile.allowed_domains",
+                  "허용된 도메인 (콤마로 구분)",
+                )}
+              </Label>
+              <DomainTagInput
+                id="tenant-domains"
+                value={domains}
+                onChange={setDomains}
+                tenants={parentQuery.data?.items ?? []}
+                currentTenantId={tenantId}
+                confirmedConflicts={forceDomainConflicts}
+                onConfirmedConflictsChange={setForceDomainConflicts}
+                placeholder="example.com, example.kr"
+                disabled={!isWritable}
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-sm font-semibold">
+                {t("ui.admin.tenants.profile.status", "상태")}
+              </Label>
+              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  size="sm"
+                  variant={status === "active" ? "default" : "outline"}
+                  onClick={() => setStatus("active")}
+                  disabled={!isWritable}
+                >
+                  {t("ui.common.status.active", "활성")}
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant={status === "inactive" ? "default" : "outline"}
+                  onClick={() => setStatus("inactive")}
+                  disabled={!isWritable}
+                >
+                  {t("ui.common.status.inactive", "비활성")}
+                </Button>
+              </div>
             </div>
           </div>
           {errorMsg && (
@@ -430,11 +523,13 @@ export function TenantProfilePage() {
         </CardContent>
       </Card>
 
-      <div className="mt-8 flex flex-wrap items-center justify-between gap-3">
+      <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
         <Button
           variant="outline"
           onClick={handleDelete}
-          disabled={deleteMutation.isPending || isProtectedSeedTenant}
+          disabled={
+            deleteMutation.isPending || isProtectedSeedTenant || !isWritable
+          }
           title={
             isProtectedSeedTenant
               ? t(
@@ -453,7 +548,7 @@ export function TenantProfilePage() {
               variant="default"
               className="bg-green-600 hover:bg-green-700"
               onClick={handleApprove}
-              disabled={approveMutation.isPending}
+              disabled={approveMutation.isPending || !isWritable}
             >
               {t("ui.admin.tenants.profile.approve_button", "테넌트 승인")}
             </Button>
@@ -466,7 +561,8 @@ export function TenantProfilePage() {
             disabled={
               updateMutation.isPending ||
               tenantQuery.isLoading ||
-              name.trim() === ""
+              name.trim() === "" ||
+              !isWritable
             }
           >
             <Save size={16} />

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

@@ -14,28 +14,25 @@ import {
 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 { fetchTenant, updateTenant } from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";
-import { normalizeAdminRole } from "../../../lib/roles";
+import { useTenantPermission } from "../hooks/useTenantPermission";
 import {
-  type SchemaField,
   createSchemaField,
   isSchemaFieldType,
   normalizeSchemaField,
+  type SchemaField,
 } from "./tenantSchemaFields";
 
 export function TenantSchemaPage() {
   const { tenantId } = useParams<{ tenantId: string }>();
   const queryClient = useQueryClient();
 
-  const { data: profile, isLoading: isProfileLoading } = useQuery({
-    queryKey: ["me"],
-    queryFn: fetchMe,
-  });
-
-  const profileRole = normalizeAdminRole(profile?.role);
-  const canAccess =
-    profileRole === "super_admin" || profileRole === "tenant_admin";
+  const { hasPermission, isLoading: isPermissionLoading } = useTenantPermission(
+    tenantId ?? "",
+  );
+  const canView = hasPermission("view_schema") || hasPermission("view");
+  const isWritable = hasPermission("manage_schema") || hasPermission("manage");
 
   const tenantQuery = useQuery({
     queryKey: ["tenant", tenantId],
@@ -43,7 +40,7 @@ export function TenantSchemaPage() {
       if (!tenantId) throw new Error("Tenant ID is required");
       return fetchTenant(tenantId);
     },
-    enabled: !!tenantId && canAccess,
+    enabled: !!tenantId && canView,
   });
 
   const [fields, setFields] = useState<SchemaField[]>([]);
@@ -86,7 +83,7 @@ export function TenantSchemaPage() {
     },
   });
 
-  if (isProfileLoading) {
+  if (isPermissionLoading) {
     return (
       <div className="p-8 text-center animate-pulse text-muted-foreground">
         {t("msg.common.loading", "로딩 중...")}
@@ -94,7 +91,7 @@ export function TenantSchemaPage() {
     );
   }
 
-  if (!canAccess) {
+  if (!canView) {
     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">
@@ -148,7 +145,7 @@ export function TenantSchemaPage() {
                 )}
               </CardDescription>
             </div>
-            <Button onClick={addField} size="sm">
+            <Button onClick={addField} size="sm" disabled={!isWritable}>
               <Plus size={16} className="mr-2" />
               {t("ui.admin.tenants.schema.add_field", "필드 추가")}
             </Button>
@@ -183,6 +180,7 @@ export function TenantSchemaPage() {
                       "예: employee_id",
                     )}
                     className="h-10"
+                    disabled={!isWritable}
                   />
                 </div>
                 <div className="space-y-2">
@@ -199,6 +197,7 @@ export function TenantSchemaPage() {
                       "예: 사번",
                     )}
                     className="h-10"
+                    disabled={!isWritable}
                   />
                 </div>
                 <div className="space-y-2">
@@ -206,8 +205,11 @@ export function TenantSchemaPage() {
                     {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"
+                    id={`tenant-schema-field-type-${field.key || index}`}
+                    name={`tenant-schema-field-type-${field.key || index}`}
+                    className="flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus:ring-1 focus:ring-primary disabled:opacity-60"
                     value={field.type}
+                    disabled={!isWritable}
                     onChange={(e) => {
                       const nextType = e.target.value;
                       if (isSchemaFieldType(nextType)) {
@@ -267,12 +269,14 @@ export function TenantSchemaPage() {
                 <div className="flex flex-wrap items-center gap-4">
                   <label className="flex items-center gap-2 cursor-pointer">
                     <input
+                      name={`tenant-schema-field-required-${field.key || index}`}
                       type="checkbox"
                       checked={field.required}
+                      disabled={!isWritable}
                       onChange={(e) =>
                         updateField(index, { required: e.target.checked })
                       }
-                      className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
+                      className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary disabled:opacity-60"
                     />
                     <span className="text-sm font-medium">
                       {t("ui.admin.tenants.schema.field.required", "필수 입력")}
@@ -280,12 +284,14 @@ export function TenantSchemaPage() {
                   </label>
                   <label className="flex items-center gap-2 cursor-pointer">
                     <input
+                      name={`tenant-schema-field-admin-only-${field.key || index}`}
                       type="checkbox"
                       checked={field.adminOnly}
+                      disabled={!isWritable}
                       onChange={(e) =>
                         updateField(index, { adminOnly: e.target.checked })
                       }
-                      className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
+                      className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary disabled:opacity-60"
                     />
                     <span className="text-sm font-medium">
                       {t(
@@ -296,8 +302,10 @@ export function TenantSchemaPage() {
                   </label>
                   <label className="flex items-center gap-2 cursor-pointer">
                     <input
+                      name={`tenant-schema-field-login-id-${field.key || index}`}
                       type="checkbox"
                       checked={field.isLoginId || false}
+                      disabled={!isWritable}
                       onChange={(e) =>
                         updateField(index, {
                           isLoginId: e.target.checked,
@@ -305,7 +313,7 @@ export function TenantSchemaPage() {
                           type: e.target.checked ? "text" : field.type,
                         })
                       }
-                      className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
+                      className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary disabled:opacity-60"
                     />
                     <span className="text-sm font-medium text-blue-600">
                       {t(
@@ -316,9 +324,10 @@ export function TenantSchemaPage() {
                   </label>
                   <label className="flex items-center gap-2 cursor-pointer">
                     <input
+                      name={`tenant-schema-field-indexed-${field.key || index}`}
                       type="checkbox"
                       checked={field.indexed || field.isLoginId || false}
-                      disabled={field.isLoginId}
+                      disabled={field.isLoginId || !isWritable}
                       onChange={(e) =>
                         updateField(index, { indexed: e.target.checked })
                       }
@@ -334,12 +343,14 @@ export function TenantSchemaPage() {
                   {(field.type === "number" || field.type === "float") && (
                     <label className="flex items-center gap-2 cursor-pointer">
                       <input
+                        name={`tenant-schema-field-unsigned-${field.key || index}`}
                         type="checkbox"
                         checked={field.unsigned}
+                        disabled={!isWritable}
                         onChange={(e) =>
                           updateField(index, { unsigned: e.target.checked })
                         }
-                        className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
+                        className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary disabled:opacity-60"
                       />
                       <span className="text-sm font-medium">
                         {t(
@@ -353,6 +364,7 @@ export function TenantSchemaPage() {
                 <div className="space-y-2">
                   <Input
                     value={field.validation}
+                    disabled={!isWritable}
                     onChange={(e) =>
                       updateField(index, { validation: e.target.value })
                     }
@@ -369,6 +381,7 @@ export function TenantSchemaPage() {
                     size="icon"
                     className="text-destructive hover:bg-destructive/10 h-10 w-10"
                     onClick={() => removeField(index)}
+                    disabled={!isWritable}
                   >
                     <Trash2 size={18} />
                   </Button>
@@ -382,7 +395,9 @@ export function TenantSchemaPage() {
       <div className="flex justify-end pt-2">
         <Button
           onClick={() => updateMutation.mutate(fields)}
-          disabled={updateMutation.isPending || tenantQuery.isLoading}
+          disabled={
+            updateMutation.isPending || tenantQuery.isLoading || !isWritable
+          }
           className="px-8 h-11"
         >
           <Save size={18} className="mr-2" />

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

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { ArrowRight, Building2, Plus } from "lucide-react";
+import { Building2, Plus } from "lucide-react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import {
   commonStickyTableHeaderClass,