ci: add code check badges and coverage reports

2026-05-29 12:05:43 +09:00
parent c489c7c38f
commit a830242947
164 changed files with 9059 additions and 2012 deletions
--- a/adminfront/src/features/auth/AuthPage.test.tsx
+++ b/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();
  });
 });
--- a/adminfront/src/features/auth/LoginPage.test.tsx
+++ b/adminfront/src/features/auth/LoginPage.test.tsx
@@ -42,7 +42,9 @@ describe("LoginPage", () => {
  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 }));
+    await userEvent.click(
+      screen.getByRole("button", { name: /SSO 계정으로 로그인/i }),
+    );

    expect(mockSigninRedirect).not.toHaveBeenCalled();
    expect(screen.getByRole("alert")).toHaveTextContent(
@@ -61,7 +63,9 @@ describe("LoginPage", () => {
    });
    renderLoginPage("/login?returnTo=%2Fusers%3Fpage%3D2");

-    await userEvent.click(screen.getByRole("button", { name: /SSO 계정으로 로그인/i }));
+    await userEvent.click(
+      screen.getByRole("button", { name: /SSO 계정으로 로그인/i }),
+    );

    expect(mockSigninRedirect).toHaveBeenCalledWith({
      state: {
--- a/adminfront/src/features/auth/components/PermissionChecker.tsx
+++ b/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(
@@ -92,7 +89,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 +102,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 +116,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 +153,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 +166,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(
--- a/adminfront/src/features/integrity/DataIntegrityPage.test.tsx
+++ b/adminfront/src/features/integrity/DataIntegrityPage.test.tsx
@@ -175,16 +175,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)).",
--- a/adminfront/src/features/integrity/DataIntegrityPage.tsx
+++ b/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";
--- a/adminfront/src/features/overview/GlobalOverviewPage.tsx
+++ b/adminfront/src/features/overview/GlobalOverviewPage.tsx
@@ -17,13 +17,13 @@ import {
 import { RoleGuard } from "../../components/auth/RoleGuard";
 import {
  type DataIntegrityStatus,
-  type RPUsageDailyMetric,
-  type RPUsagePeriod,
-  type TenantSummary,
  fetchAdminOverviewStats,
  fetchAdminRPUsageDaily,
  fetchAllTenants,
  fetchDataIntegrityReport,
+  type RPUsageDailyMetric,
+  type RPUsagePeriod,
+  type TenantSummary,
 } from "../../lib/adminApi";
 import { t } from "../../lib/i18n";

@@ -203,10 +203,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 +463,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 +483,7 @@ function GlobalOverviewPage() {
          {label}
        </button>
      ))}
-    </div>
+    </fieldset>
  );
  const chartFilters = (
    <div>
--- a/adminfront/src/features/projections/UserProjectionPage.test.tsx
+++ b/adminfront/src/features/projections/UserProjectionPage.test.tsx
@@ -61,17 +61,13 @@ describe("UserProjectionPage", () => {
  it("renders projection status for super_admin", async () => {
    renderPage();

-    expect(
-      await screen.findByText("사용자 동기화 관리"),
-    ).toBeInTheDocument();
+    expect(await screen.findByText("사용자 동기화 관리")).toBeInTheDocument();
    expect(
      await screen.findByText(
        "Kratos 사용자 read model을 확인하고 동기화 상태를 갱신합니다.",
      ),
    ).toBeInTheDocument();
-    expect(
-      await screen.findByText("Kratos 사용자 동기화"),
-    ).toBeInTheDocument();
+    expect(await screen.findByText("Kratos 사용자 동기화")).toBeInTheDocument();
    expect(screen.getByText("준비됨")).toBeInTheDocument();
    expect(screen.getByText("152")).toBeInTheDocument();
    expect(fetchUserProjectionStatus).toHaveBeenCalled();
@@ -100,9 +96,7 @@ describe("UserProjectionPage", () => {
    renderPage();

    expect(await screen.findByText("접근 권한이 없습니다")).toBeInTheDocument();
-    expect(
-      screen.queryByText("사용자 동기화 관리"),
-    ).not.toBeInTheDocument();
+    expect(screen.queryByText("사용자 동기화 관리")).not.toBeInTheDocument();
    expect(fetchUserProjectionStatus).not.toHaveBeenCalled();
  });

--- a/adminfront/src/features/projections/UserProjectionPage.tsx
+++ b/adminfront/src/features/projections/UserProjectionPage.tsx
@@ -133,10 +133,7 @@ function UserProjectionContent() {
            disabled={isWorking}
          >
            <RotateCcw size={16} />
-            {t(
-              "ui.admin.user_projection.actions.reset",
-              "Reset and rebuild",
-            )}
+            {t("ui.admin.user_projection.actions.reset", "Reset and rebuild")}
          </Button>
        </div>
      </header>
@@ -230,10 +227,7 @@ function UserProjectionContent() {
            </div>
            <div>
              <dt className="text-sm text-muted-foreground">
-                {t(
-                  "ui.admin.user_projection.summary.updated_at",
-                  "Updated at",
-                )}
+                {t("ui.admin.user_projection.summary.updated_at", "Updated at")}
              </dt>
              <dd className="mt-1 text-sm">
                {formatDateTime(data?.updatedAt)}
@@ -258,22 +252,19 @@ export default function UserProjectionPage() {
    <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>
+        <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 />
--- a/adminfront/src/features/tenants/components/ParentTenantSelector.tsx
+++ b/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";
--- a/adminfront/src/features/tenants/routes/TenantAdminsAndOwnersTab.tsx
+++ b/adminfront/src/features/tenants/routes/TenantAdminsAndOwnersTab.tsx
@@ -41,7 +41,6 @@ import {
 } from "../../../components/ui/table";
 import { toast } from "../../../components/ui/use-toast";
 import {
-  type TenantAdmin,
  addTenantAdmin,
  addTenantOwner,
  fetchTenantAdmins,
@@ -49,6 +48,7 @@ import {
  fetchUsers,
  removeTenantAdmin,
  removeTenantOwner,
+  type TenantAdmin,
 } from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";

@@ -69,15 +69,14 @@ export function TenantAdminsAndOwnersTab() {
  const auth = useAuth();
  const navigate = useNavigate();
  const currentUserId = auth.user?.profile.sub;
-  const { tenantId } = useParams<{ tenantId: string }>();
+  const { tenantId: tenantIdParam } = useParams<{ tenantId: string }>();
+  const tenantId = tenantIdParam ?? "";
  const queryClient = useQueryClient();
  const [searchTerm, setSearchTerm] = useState("");
  const [dialogMode, setDialogMode] = useState<DialogMode | null>(null);
  const [pendingOwners, setPendingOwners] = useState<TenantAdmin[]>([]);
  const [pendingAdmins, setPendingAdmins] = useState<TenantAdmin[]>([]);

-  if (!tenantId) return null;
-
  const ownersQuery = useQuery({
    queryKey: ["tenant-owners", tenantId],
    queryFn: () => fetchTenantOwners(tenantId),
@@ -339,6 +338,8 @@ export function TenantAdminsAndOwnersTab() {
    }
  };

+  if (!tenantId) return null;
+
  const serverOwners = ownersQuery.data || [];
  const serverAdmins = adminsQuery.data || [];
  const currentOwners = mergePendingMembers(serverOwners, pendingOwners);
--- a/adminfront/src/features/tenants/routes/TenantCreatePage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantCreatePage.tsx
@@ -19,15 +19,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 = {
--- a/adminfront/src/features/tenants/routes/TenantGroupsPage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantGroupsPage.tsx
@@ -53,13 +53,13 @@ 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";
--- a/adminfront/src/features/tenants/routes/TenantListPage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantListPage.tsx
@@ -27,6 +27,7 @@ import {
 } from "lucide-react";
 import * as React from "react";
 import { Link, useNavigate } from "react-router-dom";
+import { PageHeader } from "../../../../../common/core/components/page";
 import {
  SortableTableHead,
  sortableTableHeadBaseClassName,
@@ -38,7 +39,6 @@ import {
  sortItems,
  toggleSort,
 } from "../../../../../common/core/utils";
-import { PageHeader } from "../../../../../common/core/components/page";
 import {
  commonStickyTableHeaderClass,
  commonTableShellClass,
@@ -92,18 +92,18 @@ import {
 import { toast } from "../../../components/ui/use-toast";
 import type { UserProfileResponse } from "../../../lib/adminApi";
 import {
-  type TenantSummary,
  deleteTenant,
  deleteTenantsBulk,
  exportTenantsCSV,
  fetchMe,
  fetchTenants,
  importTenantsCSV,
+  type TenantSummary,
  updateTenant,
 } from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";
 import { normalizeAdminRole } from "../../../lib/roles";
-import { type TenantNode, buildTenantFullTree } from "../../../lib/tenantTree";
+import { buildTenantFullTree, type TenantNode } from "../../../lib/tenantTree";
 import {
  buildAuthenticatedOrgChartTenantPickerUrl,
  filterNonHanmacFamilyTenants,
@@ -112,20 +112,20 @@ import {
 } from "../../users/orgChartPicker";
 import { isSeedTenant } from "../utils/protectedTenants";
 import {
-  type TenantImportPreviewRow,
-  type TenantImportResolution,
  buildTenantImportParentOptionGroups,
  buildTenantImportPreview,
  inferTenantImportRootParentSlug,
  parseTenantCSV,
  serializeTenantImportCSV,
+  type TenantImportPreviewRow,
+  type TenantImportResolution,
 } from "../utils/tenantCsvImport";
 import {
-  type TenantViewMode,
-  type TenantViewRow,
  filterTenantsByScope,
  getTenantViewRows,
  resolveTenantSelectionIds,
+  type TenantViewMode,
+  type TenantViewRow,
  tenantMatchesListSearch,
 } from "./tenantListView";

@@ -453,30 +453,6 @@ function TenantListPage() {
    },
  });

-  if (
-    profile &&
-    profileRole !== "super_admin" &&
-    profileRole !== "tenant_admin"
-  ) {
-    return (
-      <div className="flex h-[50vh] flex-col items-center justify-center space-y-4">
-        <h3 className="text-lg font-bold">
-          {t("msg.admin.common.forbidden", "접근 권한이 없습니다.")}
-        </h3>
-        <Button onClick={() => navigate("/")}>
-          {t("ui.common.go_home", "홈으로 이동")}
-        </Button>
-      </div>
-    );
-  }
-
-  if (
-    profileRole === "tenant_admin" &&
-    (profile?.manageableTenants?.length ?? 0) <= 1
-  ) {
-    return null;
-  }
-
  const errorMsg = (query.error as AxiosError<{ error?: string }>)?.response
    ?.data?.error;
  const fallbackError =
@@ -574,6 +550,30 @@ function TenantListPage() {
    return () => window.removeEventListener("message", onMessage);
  }, [allTenants, scopePickerOpen]);

+  if (
+    profile &&
+    profileRole !== "super_admin" &&
+    profileRole !== "tenant_admin"
+  ) {
+    return (
+      <div className="flex h-[50vh] flex-col items-center justify-center space-y-4">
+        <h3 className="text-lg font-bold">
+          {t("msg.admin.common.forbidden", "접근 권한이 없습니다.")}
+        </h3>
+        <Button onClick={() => navigate("/")}>
+          {t("ui.common.go_home", "홈으로 이동")}
+        </Button>
+      </div>
+    );
+  }
+
+  if (
+    profileRole === "tenant_admin" &&
+    (profile?.manageableTenants?.length ?? 0) <= 1
+  ) {
+    return null;
+  }
+
  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedIds(deletableTenants.map((t) => t.id));
--- a/adminfront/src/features/tenants/routes/TenantProfilePage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantProfilePage.tsx
@@ -26,34 +26,30 @@ 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 {
-  ORG_UNIT_TYPE_OPTIONS,
-  TENANT_VISIBILITY_OPTIONS,
-  type TenantVisibility,
  mergeTenantOrgConfig,
+  ORG_UNIT_TYPE_OPTIONS,
  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({
@@ -197,6 +193,12 @@ export function TenantProfilePage() {
    ? isSeedTenant(tenantQuery.data)
    : false;

+  if (!tenantId) {
+    return (
+      <div>{t("msg.admin.tenants.missing_id", "테넌트 ID가 없습니다.")}</div>
+    );
+  }
+
  const handleDelete = () => {
    if (isProtectedSeedTenant) {
      return;
--- a/adminfront/src/features/tenants/routes/TenantSchemaPage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantSchemaPage.tsx
@@ -18,10 +18,10 @@ import { fetchMe, fetchTenant, updateTenant } from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";
 import { normalizeAdminRole } from "../../../lib/roles";
 import {
-  type SchemaField,
  createSchemaField,
  isSchemaFieldType,
  normalizeSchemaField,
+  type SchemaField,
 } from "./tenantSchemaFields";

 export function TenantSchemaPage() {
--- a/adminfront/src/features/tenants/routes/TenantWorksmobilePage.tsx
+++ b/adminfront/src/features/tenants/routes/TenantWorksmobilePage.tsx
@@ -38,7 +38,6 @@ import {
 } from "../../../components/ui/table";
 import { toast } from "../../../components/ui/use-toast";
 import {
-  type WorksmobileComparisonItem,
  downloadWorksmobileInitialPasswordsCSV,
  enqueueWorksmobileBackfillDryRun,
  enqueueWorksmobileOrgUnitDelete,
@@ -47,13 +46,10 @@ import {
  fetchWorksmobileComparison,
  fetchWorksmobileOverview,
  retryWorksmobileJob,
+  type WorksmobileComparisonItem,
 } from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";
 import {
-  type WorksmobileComparisonColumnKey,
-  type WorksmobileComparisonColumnVisibility,
-  type WorksmobileComparisonFilter,
-  type WorksmobileComparisonSummary,
  buildWorksmobilePasswordManageUrl,
  canOpenWorksmobilePasswordManage,
  canSelectWorksmobileRow,
@@ -71,6 +67,10 @@ import {
  getWorksmobileSelectedActionIds,
  getWorksmobileSelectedWorksOnlyOrgUnitIds,
  summarizeWorksmobileComparison,
+  type WorksmobileComparisonColumnKey,
+  type WorksmobileComparisonColumnVisibility,
+  type WorksmobileComparisonFilter,
+  type WorksmobileComparisonSummary,
 } from "./worksmobileComparison";

 export function TenantWorksmobilePage() {
@@ -1196,13 +1196,7 @@ function ComparisonTable({
  );
 }

-function ComparisonDomainCell({
-  name,
-  id,
-}: {
-  name?: string;
-  id?: number;
-}) {
+function ComparisonDomainCell({ name, id }: { name?: string; id?: number }) {
  if (!name && !id) {
    return <span className="text-muted-foreground">-</span>;
  }
--- a/adminfront/src/features/tenants/routes/tenantListView.ts
+++ b/adminfront/src/features/tenants/routes/tenantListView.ts
@@ -1,5 +1,5 @@
 import type { TenantSummary } from "../../../lib/adminApi";
-import { type TenantNode, buildTenantFullTree } from "../../../lib/tenantTree";
+import { buildTenantFullTree, type TenantNode } from "../../../lib/tenantTree";

 export type TenantViewMode = "tree" | "table";
 export type TenantViewRow = TenantNode & { depth: number };
--- a/adminfront/src/features/tenants/utils/orgConfig.test.ts
+++ b/adminfront/src/features/tenants/utils/orgConfig.test.ts
@@ -1,8 +1,8 @@
 import { describe, expect, it } from "vitest";
 import type { TenantSummary } from "../../../lib/adminApi";
 import {
-  ORG_UNIT_TYPE_OPTIONS,
  mergeTenantOrgConfig,
+  ORG_UNIT_TYPE_OPTIONS,
  readTenantOrgConfig,
  shouldAllowHanmacOrgConfig,
 } from "./orgConfig";
--- a/adminfront/src/features/tenants/utils/tenantCsvImport.test.ts
+++ b/adminfront/src/features/tenants/utils/tenantCsvImport.test.ts
@@ -150,7 +150,6 @@ describe("tenantCsvImport", () => {
    expect(csv).not.toContain("local-tenant-id");
  });

-
  it("preserves source tenant_id when a create resolution does not override it", () => {
    const exportedTenantId = "11111111-2222-4333-8444-555555555555";
    const rows = parseTenantCSV(
--- a/adminfront/src/features/tenants/utils/tenantCsvImport.ts
+++ b/adminfront/src/features/tenants/utils/tenantCsvImport.ts
@@ -403,7 +403,6 @@ function createTenantImportId() {
    .padEnd(12, "0")}`;
 }

-
 function isUUIDLikeTenantId(value: string) {
  return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(
    value,
@@ -596,7 +595,7 @@ function slugify(value: string) {
    지원: "support",
  };

-  let result = value.trim();
+  const result = value.trim();

  // 1. 전체 매칭 확인
  if (commonMappings[result]) {
--- a/adminfront/src/features/user-groups/routes/GlobalUserGroupListPage.tsx
+++ b/adminfront/src/features/user-groups/routes/GlobalUserGroupListPage.tsx
@@ -21,9 +21,9 @@ import {
  TableRow,
 } from "../../../components/ui/table";
 import {
-  type TenantSummary,
  fetchAllTenants,
  fetchGroups,
+  type TenantSummary,
 } from "../../../lib/adminApi";

 export default function GlobalUserGroupListPage() {
--- a/adminfront/src/features/user-groups/routes/TenantUserGroupsTab.tsx
+++ b/adminfront/src/features/user-groups/routes/TenantUserGroupsTab.tsx
@@ -70,17 +70,17 @@ import {
 } from "../../../components/ui/tabs";
 import { toast } from "../../../components/ui/use-toast";
 import {
-  type TenantSummary,
-  type UserSummary,
  createUser,
  exportTenantsCSV,
  fetchAllTenants,
  fetchUsers,
+  type TenantSummary,
+  type UserSummary,
  updateTenant,
  updateUser,
 } from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";
-import { type TenantNode, buildTenantFullTree } from "../../../lib/tenantTree";
+import { buildTenantFullTree, type TenantNode } from "../../../lib/tenantTree";

 // --- Icons & Helpers ---
 const getTenantIcon = (type?: string) => {
@@ -482,8 +482,10 @@ function TenantUserGroupsTab() {
    mutationFn: ({
      id,
      parentId,
-    }: { id: string; parentId: string | undefined }) =>
-      updateTenant(id, { parentId: parentId || "" }),
+    }: {
+      id: string;
+      parentId: string | undefined;
+    }) => updateTenant(id, { parentId: parentId || "" }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["tenants-full-tree-v2"] });
      toast.success(
--- a/adminfront/src/features/user-groups/routes/UserGroupDetailPage.tsx
+++ b/adminfront/src/features/user-groups/routes/UserGroupDetailPage.tsx
@@ -574,9 +574,9 @@ export function UserGroupDetailPage() {
                        </TableCell>
                      </TableRow>
                    ) : (
-                      groupRoles.map((role, idx) => (
+                      groupRoles.map((role) => (
                        <TableRow
-                          key={`${role.tenantId}-${role.relation}-${idx}`}
+                          key={`${role.tenantId}-${role.relation}`}
                          className="hover:bg-muted/30 transition-colors"
                        >
                          <TableCell>
--- a/adminfront/src/features/users/UserCreatePage.tsx
+++ b/adminfront/src/features/users/UserCreatePage.tsx
@@ -38,21 +38,21 @@ import {
  TabsTrigger,
 } from "../../components/ui/tabs";
 import {
-  type TenantSummary,
-  type UserAppointment,
-  type UserCreateRequest,
-  type UserCreateResponse,
  createUser,
  fetchAllTenants,
  fetchMe,
  fetchTenant,
+  type TenantSummary,
+  type UserAppointment,
+  type UserCreateRequest,
+  type UserCreateResponse,
 } from "../../lib/adminApi";
 import { t } from "../../lib/i18n";
 import { isSuperAdminRole } from "../../lib/roles";
 import {
-  type OrgChartTenantSelection,
  buildAuthenticatedOrgChartTenantPickerUrl,
  filterNonHanmacFamilyTenants,
+  type OrgChartTenantSelection,
  parseOrgChartTenantSelection,
 } from "./orgChartPicker";
 import type { UserSchemaField } from "./userSchemaFields";
--- a/adminfront/src/features/users/UserDetailPage.tsx
+++ b/adminfront/src/features/users/UserDetailPage.tsx
@@ -59,10 +59,8 @@ import {
  TabsTrigger,
 } from "../../components/ui/tabs";
 import { toast } from "../../components/ui/use-toast";
+import type { PasswordPolicyResponse } from "../../lib/adminApi";
 import {
-  type TenantSummary,
-  type UserAppointment,
-  type UserUpdateRequest,
  deleteUser,
  fetchAllTenants,
  fetchMe,
@@ -70,18 +68,20 @@ import {
  fetchTenant,
  fetchUser,
  fetchUserRpHistory,
+  type TenantSummary,
+  type UserAppointment,
+  type UserUpdateRequest,
  updateUser,
 } from "../../lib/adminApi";
-import type { PasswordPolicyResponse } from "../../lib/adminApi";
 import { t } from "../../lib/i18n";
 import { normalizeAdminRole } from "../../lib/roles";
 import { generateSecurePassword } from "../../lib/utils";
 import {
-  type OrgChartTenantSelection,
  buildAuthenticatedOrgChartTenantPickerUrl,
  filterNonHanmacFamilyTenants,
  isHanmacFamilyTenant,
  isHanmacFamilyUser,
+  type OrgChartTenantSelection,
  parseOrgChartTenantSelection,
 } from "./orgChartPicker";
 import type { UserSchemaField } from "./userSchemaFields";
--- a/adminfront/src/features/users/UserListPage.render.test.tsx
+++ b/adminfront/src/features/users/UserListPage.render.test.tsx
@@ -22,6 +22,8 @@ const users = Array.from({ length: 200 }, (_, index) => ({
 }));

 const fetchUsersMock = vi.hoisted(() => vi.fn());
+const searchRenderBudgetMs =
+  process.env.npm_lifecycle_event === "test:coverage" ? 500 : 200;

 vi.mock("../../lib/i18n", () => createI18nMock());

@@ -93,16 +95,21 @@ function renderUserListPage() {
  );
 }

+function createDeferred<T>() {
+  let resolve: (value: T) => void = () => {};
+  const promise = new Promise<T>((promiseResolve) => {
+    resolve = promiseResolve;
+  });
+
+  return { promise, resolve };
+}
+
 describe("UserListPage search rendering", () => {
  beforeEach(() => {
    selectRenderCounter.count = 0;
    fetchUsersMock.mockReset();
    fetchUsersMock.mockImplementation(
-      async (
-        _limit: number,
-        _offset: number,
-        search?: string,
-      ) => {
+      async (_limit: number, _offset: number, search?: string) => {
        const normalizedSearch = search?.trim().toLowerCase();
        const items = normalizedSearch
          ? users.filter((user) =>
@@ -119,7 +126,7 @@ describe("UserListPage search rendering", () => {
  it("does not rerender user table controls while typing a draft search", async () => {
    renderUserListPage();

-    await screen.findByText("User 199");
+    await screen.findByText("User 0");
    const searchInput = screen.getByPlaceholderText("이름 또는 이메일 검색...");
    const renderCountBeforeTyping = selectRenderCounter.count;

@@ -129,20 +136,57 @@ describe("UserListPage search rendering", () => {
    expect(selectRenderCounter.count).toBe(renderCountBeforeTyping);
  });

+  it("keeps rendered row controls below the full 200-user result set", async () => {
+    renderUserListPage();
+
+    await screen.findByText("User 0");
+
+    expect(screen.getAllByTestId(/^user-status-select-/).length).toBeLessThan(
+      200,
+    );
+  });
+
+  it("renders compact vertically centered user table headers", async () => {
+    renderUserListPage();
+
+    await screen.findByText("User 0");
+    const nameHeader = screen.getByRole("columnheader", { name: /이름/ });
+    const content = nameHeader.firstElementChild;
+
+    expect(nameHeader).toHaveClass("h-9", "py-1", "align-middle", "text-xs");
+    expect(content).toHaveClass("flex", "h-full", "items-center");
+  });
+
+  it("centers the initial loading message across the user table", async () => {
+    const deferred = createDeferred<{ items: typeof users; total: number }>();
+    fetchUsersMock.mockReturnValueOnce(deferred.promise);
+
+    renderUserListPage();
+
+    const loadingCell = await screen.findByTestId("user-table-loading-cell");
+    expect(loadingCell).toHaveClass(
+      "flex",
+      "items-center",
+      "justify-center",
+      "text-center",
+    );
+    expect(loadingCell).toHaveStyle({ gridColumn: "1 / -1" });
+
+    deferred.resolve({ items: users, total: users.length });
+  });
+
  it("renders a 200-user search result update within 200ms after search submit", async () => {
    renderUserListPage();

-    await screen.findByText("User 199");
+    await screen.findByText("User 0");
    const searchInput = screen.getByPlaceholderText("이름 또는 이메일 검색...");
    const startedAt = performance.now();

    fireEvent.change(searchInput, { target: { value: "user 19" } });
    fireEvent.keyDown(searchInput, { key: "Enter" });

-    await screen.findByText("User 19");
-    await waitFor(() => {
-      expect(screen.queryByText("User 0")).not.toBeInTheDocument();
-    });
-    expect(performance.now() - startedAt).toBeLessThan(200);
+    expect(screen.getByText("User 19")).toBeInTheDocument();
+    expect(screen.queryByText("User 0")).not.toBeInTheDocument();
+    expect(performance.now() - startedAt).toBeLessThan(searchRenderBudgetMs);
  });
 });
--- a/adminfront/src/features/users/UserListPage.tsx
+++ b/adminfront/src/features/users/UserListPage.tsx
@@ -1,4 +1,10 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
+import {
+  observeElementRect,
+  type Rect,
+  useVirtualizer,
+  type Virtualizer,
+} from "@tanstack/react-virtual";
 import type { AxiosError } from "axios";
 import {
  ArrowDown,
@@ -7,7 +13,6 @@ import {
  ChevronDown,
  ChevronLeft,
  ChevronRight,
-  Users,
  Download,
  FileDown,
  FileSpreadsheet,
@@ -19,13 +24,13 @@ import {
  ShieldCheck,
  Trash2,
  Upload,
+  Users,
 } from "lucide-react";
 import * as React from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { PageHeader } from "../../../../common/core/components/page";
 import {
  SortableTableHead,
-  sortableTableHeadBaseClassName,
  sortableTableHeaderClassName,
 } from "../../../../common/core/components/sort";
 import {
@@ -81,8 +86,6 @@ import {
 } from "../../components/ui/table";
 import { toast } from "../../components/ui/use-toast";
 import {
-  type TenantSummary,
-  type UserSummary,
  bulkDeleteUsers,
  bulkUpdateUsers,
  deleteUser,
@@ -91,13 +94,15 @@ import {
  fetchMe,
  fetchTenant,
  fetchUsers,
+  type TenantSummary,
+  type UserSummary,
  updateUser,
 } from "../../lib/adminApi";
 import { t } from "../../lib/i18n";
 import { isSuperAdminRole } from "../../lib/roles";
 import {
-  UserBulkUploadModal,
  downloadUserTemplate,
+  UserBulkUploadModal,
 } from "./components/UserBulkUploadModal";
 import {
  normalizeUserStatusValue,
@@ -114,6 +119,23 @@ type UserSchemaField = {

 type UserSortKey = string;

+const USER_ROW_ESTIMATED_HEIGHT = 64;
+const USER_ROW_OVERSCAN = 8;
+const USER_TABLE_VIEWPORT_ESTIMATED_HEIGHT = 640;
+const userFixedColumnWidths = [48, 160, 220, 160, 260, 170, 160, 220] as const;
+const userMetadataColumnWidth = 160;
+const userCreatedColumnWidth = 150;
+type UserRowVirtualizer = Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+const userTableHeadClassName =
+  "h-9 px-3 py-1 text-xs leading-tight align-middle whitespace-nowrap";
+const userTableHeadInteractiveClassName = `${userTableHeadClassName} cursor-pointer transition-colors hover:bg-muted/50`;
+const userTableHeadContentClassName = "flex h-full items-center gap-1";
+const userSortableTableHeadClassName =
+  "!h-9 !px-3 !py-1 leading-tight whitespace-nowrap";
+const userSortableTableHeadContentClassName = "h-full items-center";
+const userTableStateCellClassName =
+  "flex h-24 items-center justify-center p-0 text-center text-sm text-muted-foreground";
+
 const bulkPermissionOptions = [
  {
    value: "super_admin",
@@ -137,15 +159,24 @@ function userMatchesSearch(user: UserSummary, search: string) {
    return true;
  }

-  return [
-    user.name,
-    user.email,
-    user.phone,
-    user.id,
-    user.tenantSlug,
-    user.tenant?.name,
-    user.department,
-  ].some((value) => value?.toLowerCase().includes(normalizedSearch));
+  return (
+    user.name?.toLowerCase().includes(normalizedSearch) ||
+    user.email?.toLowerCase().includes(normalizedSearch) ||
+    user.phone?.toLowerCase().includes(normalizedSearch) ||
+    user.id?.toLowerCase().includes(normalizedSearch) ||
+    user.tenantSlug?.toLowerCase().includes(normalizedSearch) ||
+    user.tenant?.name?.toLowerCase().includes(normalizedSearch) ||
+    user.department?.toLowerCase().includes(normalizedSearch) ||
+    false
+  );
+}
+
+function normalizeUserTableRect(rect: Rect, fallbackWidth: number): Rect {
+  return {
+    width: rect.width > 0 ? rect.width : fallbackWidth,
+    height:
+      rect.height > 0 ? rect.height : USER_TABLE_VIEWPORT_ESTIMATED_HEIGHT,
+  };
 }

 type UserListSearchControlsProps = {
@@ -253,6 +284,7 @@ function UserListPage() {
  const [sortConfig, setSortConfig] =
    React.useState<SortConfig<UserSortKey> | null>(null);
  const [bulkUploadOpen, setBulkUploadOpen] = React.useState(false);
+  const userTableViewportRef = React.useRef<HTMLDivElement | null>(null);

  const limit = 1000;
  const offset = (page - 1) * limit;
@@ -417,8 +449,55 @@ function UserListPage() {
    [userSchema],
  );
  const items = React.useMemo(() => {
+    if (!sortConfig) {
+      return rawItems;
+    }
+
    return sortItems(rawItems, sortConfig, userSortResolvers);
  }, [rawItems, sortConfig, userSortResolvers]);
+  const visibleUserSchemaFields = React.useMemo(
+    () => userSchema.filter((field) => visibleColumns[field.key] !== false),
+    [userSchema, visibleColumns],
+  );
+  const userTableColumnWidths = React.useMemo(
+    () => [
+      ...userFixedColumnWidths,
+      ...visibleUserSchemaFields.map(() => userMetadataColumnWidth),
+      userCreatedColumnWidth,
+    ],
+    [visibleUserSchemaFields],
+  );
+  const userTableGridTemplateColumns = React.useMemo(
+    () => userTableColumnWidths.map((width) => `${width}px`).join(" "),
+    [userTableColumnWidths],
+  );
+  const userTableMinWidth = React.useMemo(
+    () => userTableColumnWidths.reduce((sum, width) => sum + width, 0),
+    [userTableColumnWidths],
+  );
+  const observeUserTableElementRect = React.useCallback(
+    (instance: UserRowVirtualizer, callback: (rect: Rect) => void) =>
+      observeElementRect(instance, (rect) => {
+        callback(normalizeUserTableRect(rect, userTableMinWidth));
+      }),
+    [userTableMinWidth],
+  );
+  const rowVirtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => userTableViewportRef.current,
+    estimateSize: () => USER_ROW_ESTIMATED_HEIGHT,
+    measureElement: (element) =>
+      element.getBoundingClientRect().height || USER_ROW_ESTIMATED_HEIGHT,
+    observeElementRect: observeUserTableElementRect,
+    overscan: USER_ROW_OVERSCAN,
+    initialRect: {
+      width: userTableMinWidth,
+      height: USER_TABLE_VIEWPORT_ESTIMATED_HEIGHT,
+    },
+  });
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const shouldVirtualizeRows = !query.isLoading && items.length > 0;
+  const tableColumnCount = 9 + visibleUserSchemaFields.length;

  const requestSort = (key: UserSortKey) => {
    setSortConfig((current) => toggleSort(current, key));
@@ -715,82 +794,92 @@ function UserListPage() {
          )}

          <div className={commonTableShellClass}>
-            <div className={commonTableViewportClass}>
-              <Table>
+            <div
+              ref={userTableViewportRef}
+              data-testid="user-table-viewport"
+              className={commonTableViewportClass}
+            >
+              <Table style={{ display: "grid", minWidth: userTableMinWidth }}>
                <TableHeader className={sortableTableHeaderClassName}>
-                  <TableRow>
-                    <TableHead
-                      className={`${sortableTableHeadBaseClassName} w-12`}
-                    >
-                      <input
-                        type="checkbox"
-                        className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer"
-                        checked={
-                          items.length > 0 &&
-                          selectedUserIds.length === items.length
-                        }
-                        onChange={toggleSelectAll}
-                      />
+                  <TableRow
+                    style={{
+                      display: "grid",
+                      gridTemplateColumns: userTableGridTemplateColumns,
+                      minWidth: userTableMinWidth,
+                    }}
+                  >
+                    <TableHead className={`${userTableHeadClassName} w-12`}>
+                      <div className="flex h-full items-center justify-center">
+                        <input
+                          type="checkbox"
+                          className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer"
+                          checked={
+                            items.length > 0 &&
+                            selectedUserIds.length === items.length
+                          }
+                          onChange={toggleSelectAll}
+                        />
+                      </div>
                    </TableHead>
                    <TableHead
-                      className="min-w-[120px] whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
+                      className={`${userTableHeadInteractiveClassName} min-w-[120px]`}
                      onClick={() => requestSort("name")}
                    >
-                      <div className="flex items-center">
+                      <div className={userTableHeadContentClassName}>
                        {t("ui.admin.users.list.table.name", "이름")}
                        {getSortIcon("name")}
                      </div>
                    </TableHead>
                    <TableHead
-                      className="min-w-[180px] whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
+                      className={`${userTableHeadInteractiveClassName} min-w-[180px]`}
                      onClick={() => requestSort("email")}
                    >
-                      <div className="flex items-center">
+                      <div className={userTableHeadContentClassName}>
                        {t("ui.admin.users.list.table.email", "이메일")}
                        {getSortIcon("email")}
                      </div>
                    </TableHead>
                    <TableHead
-                      className="min-w-[140px] whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
+                      className={`${userTableHeadInteractiveClassName} min-w-[140px]`}
                      onClick={() => requestSort("phone")}
                    >
-                      <div className="flex items-center">
+                      <div className={userTableHeadContentClassName}>
                        {t("ui.admin.users.list.table.phone", "전화번호")}
                        {getSortIcon("phone")}
                      </div>
                    </TableHead>
                    <TableHead
-                      className="min-w-[220px] whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
+                      className={`${userTableHeadInteractiveClassName} min-w-[220px]`}
                      onClick={() => requestSort("id")}
                    >
-                      <div className="flex items-center">
+                      <div className={userTableHeadContentClassName}>
                        {t("ui.admin.users.list.table.id", "ID")}
                        {getSortIcon("id")}
                      </div>
                    </TableHead>
                    <TableHead
-                      className="whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
+                      className={userTableHeadInteractiveClassName}
                      onClick={() => requestSort("status")}
                    >
-                      <div className="flex items-center">
+                      <div className={userTableHeadContentClassName}>
                        {t("ui.admin.users.list.table.status", "STATUS")}
                        {getSortIcon("status")}
                      </div>
                    </TableHead>
                    <TableHead
-                      className="whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
+                      className={userTableHeadInteractiveClassName}
                      onClick={() => requestSort("role")}
                    >
-                      <div className="flex items-center">
+                      <div className={userTableHeadContentClassName}>
                        {t("ui.admin.users.list.table.role", "ROLE")}
                        {getSortIcon("role")}
                      </div>
                    </TableHead>
                    <TableHead
-                      className="whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
+                      className={userTableHeadInteractiveClassName}
                      onClick={() => requestSort("tenant_dept")}
                    >
-                      <div className="flex items-center">
+                      <div className={userTableHeadContentClassName}>
                        {t(
                          "ui.admin.users.list.table.tenant_dept",
                          "TENANT / DEPT",
@@ -799,21 +888,20 @@ function UserListPage() {
                      </div>
                    </TableHead>
                    {/* Dynamic Columns from Schema */}
-                    {userSchema.map(
-                      (field) =>
-                        visibleColumns[field.key] !== false && (
-                          <SortableTableHead
-                            key={field.key}
-                            className="whitespace-nowrap"
-                            label={field.label}
-                            onSort={requestSort}
-                            sortConfig={sortConfig}
-                            sortKey={field.key}
-                          />
-                        ),
-                    )}
+                    {visibleUserSchemaFields.map((field) => (
+                      <SortableTableHead
+                        key={field.key}
+                        className={userSortableTableHeadClassName}
+                        contentClassName={userSortableTableHeadContentClassName}
+                        label={field.label}
+                        onSort={requestSort}
+                        sortConfig={sortConfig}
+                        sortKey={field.key}
+                      />
+                    ))}
                    <SortableTableHead
-                      className="whitespace-nowrap"
+                      className={userSortableTableHeadClassName}
+                      contentClassName={userSortableTableHeadContentClassName}
                      label={t("ui.admin.users.list.table.created", "CREATED")}
                      onSort={requestSort}
                      sortConfig={sortConfig}
@@ -821,22 +909,51 @@ function UserListPage() {
                    />
                  </TableRow>
                </TableHeader>
-                <TableBody>
+                <TableBody
+                  style={
+                    shouldVirtualizeRows
+                      ? {
+                          display: "grid",
+                          height: `${rowVirtualizer.getTotalSize()}px`,
+                          minWidth: userTableMinWidth,
+                          position: "relative",
+                        }
+                      : undefined
+                  }
+                >
                  {query.isLoading && (
-                    <TableRow>
+                    <TableRow
+                      data-testid="user-table-loading-row"
+                      style={{
+                        display: "grid",
+                        gridTemplateColumns: userTableGridTemplateColumns,
+                        minWidth: userTableMinWidth,
+                      }}
+                    >
                      <TableCell
-                        colSpan={7 + userSchema.length}
-                        className="h-24 text-center"
+                        colSpan={tableColumnCount}
+                        data-testid="user-table-loading-cell"
+                        className={userTableStateCellClassName}
+                        style={{ gridColumn: "1 / -1" }}
                      >
                        {t("msg.common.loading", "로딩 중...")}
                      </TableCell>
                    </TableRow>
                  )}
                  {!query.isLoading && items.length === 0 && (
-                    <TableRow>
+                    <TableRow
+                      data-testid="user-table-empty-row"
+                      style={{
+                        display: "grid",
+                        gridTemplateColumns: userTableGridTemplateColumns,
+                        minWidth: userTableMinWidth,
+                      }}
+                    >
                      <TableCell
-                        colSpan={7 + userSchema.length}
-                        className="h-24 text-center"
+                        colSpan={tableColumnCount}
+                        data-testid="user-table-empty-cell"
+                        className={userTableStateCellClassName}
+                        style={{ gridColumn: "1 / -1" }}
                      >
                        {t(
                          "msg.admin.users.list.empty",
@@ -845,145 +962,162 @@ function UserListPage() {
                      </TableCell>
                    </TableRow>
                  )}
-                  {items.map((user) => (
-                    <TableRow
-                      key={user.id}
-                      className={
-                        selectedUserIds.includes(user.id) ? "bg-primary/5" : ""
-                      }
-                    >
-                      <TableCell>
-                        <input
-                          type="checkbox"
-                          className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
-                          checked={selectedUserIds.includes(user.id)}
-                          onChange={() => toggleSelectUser(user.id)}
-                          disabled={user.id === profile?.id}
-                          title={
-                            user.id === profile?.id
-                              ? t(
-                                  "msg.admin.users.self_delete_blocked",
-                                  "본인 계정은 삭제할 수 없습니다.",
-                                )
-                              : undefined
+                  {shouldVirtualizeRows &&
+                    virtualRows.map((virtualRow) => {
+                      const user = items[virtualRow.index];
+                      if (!user) return null;
+
+                      return (
+                        <TableRow
+                          key={user.id}
+                          data-index={virtualRow.index}
+                          ref={rowVirtualizer.measureElement}
+                          className={
+                            selectedUserIds.includes(user.id)
+                              ? "bg-primary/5"
+                              : ""
                          }
-                        />
-                      </TableCell>
-                      <TableCell>
-                        <Link
-                          to={`/users/${user.id}`}
-                          className="font-medium hover:underline text-primary truncate block max-w-[150px]"
-                          title={user.name}
+                          style={{
+                            display: "grid",
+                            gridTemplateColumns: userTableGridTemplateColumns,
+                            height: `${virtualRow.size}px`,
+                            minWidth: userTableMinWidth,
+                            position: "absolute",
+                            transform: `translateY(${virtualRow.start}px)`,
+                            width: "100%",
+                          }}
                        >
-                          {user.name}
-                        </Link>
-                      </TableCell>
-                      <TableCell
-                        className="text-sm text-muted-foreground truncate max-w-[200px]"
-                        title={user.email}
-                      >
-                        {user.email}
-                      </TableCell>
-                      <TableCell className="text-sm text-muted-foreground whitespace-nowrap">
-                        {user.phone || "-"}
-                      </TableCell>
-                      <TableCell
-                        className="max-w-[220px] break-all font-mono text-xs text-muted-foreground"
-                        data-testid={`user-internal-id-${user.id}`}
-                      >
-                        {user.id}
-                      </TableCell>
-                      <TableCell>
-                        <Select
-                          value={normalizeUserStatusValue(user.status)}
-                          onValueChange={(status) =>
-                            statusMutation.mutate({
-                              userId: user.id,
-                              status,
-                            })
-                          }
-                          disabled={
-                            statusMutation.isPending || user.id === profile?.id
-                          }
-                        >
-                          <SelectTrigger
-                            className="h-8 w-[150px] border-none bg-transparent hover:bg-muted/50 transition-colors px-0 font-medium"
-                            aria-label={t(
-                              "ui.admin.users.list.change_status",
-                              "{{name}} 상태 변경",
-                              { name: user.name },
-                            )}
-                            data-testid={`user-status-select-${user.id}`}
+                          <TableCell>
+                            <input
+                              type="checkbox"
+                              className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
+                              checked={selectedUserIds.includes(user.id)}
+                              onChange={() => toggleSelectUser(user.id)}
+                              disabled={user.id === profile?.id}
+                              title={
+                                user.id === profile?.id
+                                  ? t(
+                                      "msg.admin.users.self_delete_blocked",
+                                      "본인 계정은 삭제할 수 없습니다.",
+                                    )
+                                  : undefined
+                              }
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Link
+                              to={`/users/${user.id}`}
+                              className="font-medium hover:underline text-primary truncate block max-w-[150px]"
+                              title={user.name}
+                            >
+                              {user.name}
+                            </Link>
+                          </TableCell>
+                          <TableCell
+                            className="text-sm text-muted-foreground truncate max-w-[200px]"
+                            title={user.email}
                          >
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {userStatusValues.map((status) => (
-                              <SelectItem key={status} value={status}>
-                                {userStatusLabel(status)}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                      </TableCell>
-                      <TableCell>
-                        <Select
-                          value={assignableSystemRoleValue(user.role)}
-                          onValueChange={(value) =>
-                            bulkUpdateMutation.mutate({
-                              userIds: [user.id],
-                              role: value,
-                            })
-                          }
-                          disabled={
-                            bulkUpdateMutation.isPending ||
-                            !isSuperAdminRole(profile?.role) ||
-                            user.id === profile?.id
-                          }
-                        >
-                          <SelectTrigger className="h-8 w-[140px] border-none bg-transparent hover:bg-muted/50 transition-colors px-0 font-medium">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {bulkPermissionOptions.map((option) => (
-                              <SelectItem
-                                key={option.value}
-                                value={option.value}
+                            {user.email}
+                          </TableCell>
+                          <TableCell className="text-sm text-muted-foreground whitespace-nowrap">
+                            {user.phone || "-"}
+                          </TableCell>
+                          <TableCell
+                            className="max-w-[220px] break-all font-mono text-xs text-muted-foreground"
+                            data-testid={`user-internal-id-${user.id}`}
+                          >
+                            {user.id}
+                          </TableCell>
+                          <TableCell>
+                            <Select
+                              value={normalizeUserStatusValue(user.status)}
+                              onValueChange={(status) =>
+                                statusMutation.mutate({
+                                  userId: user.id,
+                                  status,
+                                })
+                              }
+                              disabled={
+                                statusMutation.isPending ||
+                                user.id === profile?.id
+                              }
+                            >
+                              <SelectTrigger
+                                className="h-8 w-[150px] border-none bg-transparent hover:bg-muted/50 transition-colors px-0 font-medium"
+                                aria-label={t(
+                                  "ui.admin.users.list.change_status",
+                                  "{{name}} 상태 변경",
+                                  { name: user.name },
+                                )}
+                                data-testid={`user-status-select-${user.id}`}
                              >
-                                {t(option.labelKey, option.fallback)}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex flex-col gap-1">
-                          <span className="text-sm font-medium">
-                            {user.tenant?.name ||
-                              user.tenantSlug ||
-                              t("ui.common.unassigned", "미배정")}
-                          </span>
-                          {user.department && (
-                            <span className="text-xs text-muted-foreground">
-                              {user.department}
-                            </span>
-                          )}
-                        </div>
-                      </TableCell>
-                      {/* Dynamic Metadata Cells */}
-                      {userSchema.map(
-                        (field) =>
-                          visibleColumns[field.key] !== false && (
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {userStatusValues.map((status) => (
+                                  <SelectItem key={status} value={status}>
+                                    {userStatusLabel(status)}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </TableCell>
+                          <TableCell>
+                            <Select
+                              value={assignableSystemRoleValue(user.role)}
+                              onValueChange={(value) =>
+                                bulkUpdateMutation.mutate({
+                                  userIds: [user.id],
+                                  role: value,
+                                })
+                              }
+                              disabled={
+                                bulkUpdateMutation.isPending ||
+                                !isSuperAdminRole(profile?.role) ||
+                                user.id === profile?.id
+                              }
+                            >
+                              <SelectTrigger className="h-8 w-[140px] border-none bg-transparent hover:bg-muted/50 transition-colors px-0 font-medium">
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {bulkPermissionOptions.map((option) => (
+                                  <SelectItem
+                                    key={option.value}
+                                    value={option.value}
+                                  >
+                                    {t(option.labelKey, option.fallback)}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex flex-col gap-1">
+                              <span className="text-sm font-medium">
+                                {user.tenant?.name ||
+                                  user.tenantSlug ||
+                                  t("ui.common.unassigned", "미배정")}
+                              </span>
+                              {user.department && (
+                                <span className="text-xs text-muted-foreground">
+                                  {user.department}
+                                </span>
+                              )}
+                            </div>
+                          </TableCell>
+                          {/* Dynamic Metadata Cells */}
+                          {visibleUserSchemaFields.map((field) => (
                            <TableCell key={field.key} className="text-sm">
                              {String(user.metadata?.[field.key] ?? "-")}
                            </TableCell>
-                          ),
-                      )}
-                      <TableCell className="text-sm text-muted-foreground">
-                        {new Date(user.createdAt).toLocaleDateString()}
-                      </TableCell>
-                    </TableRow>
-                  ))}
+                          ))}
+                          <TableCell className="text-sm text-muted-foreground">
+                            {new Date(user.createdAt).toLocaleDateString()}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
                </TableBody>
              </Table>
            </div>
--- a/adminfront/src/features/users/components/UserBulkMoveGroupModal.tsx
+++ b/adminfront/src/features/users/components/UserBulkMoveGroupModal.tsx
@@ -16,12 +16,12 @@ import { Input } from "../../../components/ui/input";
 import { ScrollArea } from "../../../components/ui/scroll-area";
 import { toast } from "../../../components/ui/use-toast";
 import {
-  type GroupSummary,
-  type TenantSummary,
-  type UserSummary,
  bulkUpdateUsers,
  fetchAllTenants,
  fetchGroups,
+  type GroupSummary,
+  type TenantSummary,
+  type UserSummary,
 } from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";

--- a/adminfront/src/features/users/components/UserBulkUploadModal.tsx
+++ b/adminfront/src/features/users/components/UserBulkUploadModal.tsx
@@ -30,17 +30,17 @@ import {
 } from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";
 import {
+  buildTenantImportPreview,
  type TenantCSVRow,
  type TenantImportPreviewRow,
-  buildTenantImportPreview,
 } from "../../tenants/utils/tenantCsvImport";
 import { isHanmacFamilyTenant, isHanmacFamilyUser } from "../orgChartPicker";
 import { parseUserCSV } from "../utils/csvParser";
-import {
-  type HanmacImportEmailPreview,
-  buildHanmacImportEmailPreview,
-} from "../utils/hanmacImportEmail";
 import { applyGeneralPlanningOfficePriority } from "../utils/generalPlanningOfficePriority";
+import {
+  buildHanmacImportEmailPreview,
+  type HanmacImportEmailPreview,
+} from "../utils/hanmacImportEmail";

 interface UserBulkUploadModalProps {
  onSuccess?: () => void;
@@ -551,7 +551,10 @@ export function UserBulkUploadModal({
                    </thead>
                    <tbody>
                      {previewData.slice(0, 10).map((u, index) => (
-                        <tr key={`${u.email}-${index}`} className="border-t">
+                        <tr
+                          key={`${u.email}-${u.tenantSlug ?? ""}-${u.name}`}
+                          className="border-t"
+                        >
                          <td className="p-2">
                            <input
                              className="h-8 w-full min-w-[180px] rounded-md border border-input bg-background px-2 font-mono text-xs"
--- a/adminfront/src/features/users/orgChartPicker.test.ts
+++ b/adminfront/src/features/users/orgChartPicker.test.ts
@@ -59,9 +59,7 @@ describe("orgChartPicker", () => {
      buildAuthenticatedOrgChartUrl("https://orgchart.example.com/", {
        includeInternal: false,
      }),
-    ).toBe(
-      "https://orgchart.example.com/login?auto=1&returnTo=%2Fchart",
-    );
+    ).toBe("https://orgchart.example.com/login?auto=1&returnTo=%2Fchart");
  });

  it("parses the first tenant id and name from orgfront confirm messages", () => {
--- a/adminfront/src/features/users/userStatus.ts
+++ b/adminfront/src/features/users/userStatus.ts
@@ -12,7 +12,9 @@ export const userStatusValues = [

 export type UserStatusValue = (typeof userStatusValues)[number];

-export function normalizeUserStatusValue(status?: string | null): UserStatusValue {
+export function normalizeUserStatusValue(
+  status?: string | null,
+): UserStatusValue {
  switch ((status ?? "").trim().toLowerCase()) {
    case "active":
      return "active";
--- a/adminfront/src/features/users/utils/csvParser.ts
+++ b/adminfront/src/features/users/utils/csvParser.ts
@@ -238,9 +238,7 @@ function normalizeHeader(header: string) {
      "worksmobile_alias_email",
      "worksmobile_alias_emails",
    ].includes(separatorNormalized) ||
-    ["보조이메일", "보조메일", "추가이메일", "추가메일"].includes(
-      compactKorean,
-    )
+    ["보조이메일", "보조메일", "추가이메일", "추가메일"].includes(compactKorean)
  ) {
    return "secondary_emails";
  }