From 097caf395cf12a33fd56e90feb94764a5d687183 Mon Sep 17 00:00:00 2001
From: kyy <b24053@hanmaceng.co.kr>
Date: Mon, 18 May 2026 14:26:50 +0900
Subject: [PATCH] =?UTF-8?q?=ED=83=80=EC=9D=B4=ED=8B=80=20=ED=81=AC?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B0=8F=20=EC=83=81=EB=8B=A8=20=ED=8C=A8=EB=94=A9?=
 =?UTF-8?q?=20=EB=B0=80=EB=A6=BC=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 adminfront/src/features/auth/AuthPage.tsx     |   6 +-
 .../features/integrity/DataIntegrityPage.tsx  | 334 +++++++++---------
 .../features/overview/GlobalOverviewPage.tsx  |  10 +-
 .../projections/UserProjectionPage.tsx        |  12 +-
 4 files changed, 185 insertions(+), 177 deletions(-)

diff --git a/adminfront/src/features/auth/AuthPage.tsx b/adminfront/src/features/auth/AuthPage.tsx
index 890d3b7e..39fa62c6 100644
--- a/adminfront/src/features/auth/AuthPage.tsx
+++ b/adminfront/src/features/auth/AuthPage.tsx
@@ -4,9 +4,9 @@ import PermissionChecker from "./components/PermissionChecker";
 function AuthPage() {
   return (
     <div className="space-y-6">
-      <div className="flex flex-wrap items-end justify-between gap-4">
-        <div className="space-y-1">
-          <h2 className="text-2xl font-semibold tracking-tight">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="space-y-2">
+          <h2 className="text-3xl font-semibold">
             {t("ui.admin.auth_guard.title", "Auth Guard")}
           </h2>
           <p className="text-sm text-muted-foreground">
diff --git a/adminfront/src/features/integrity/DataIntegrityPage.tsx b/adminfront/src/features/integrity/DataIntegrityPage.tsx
index 47c2128e..5b295a50 100644
--- a/adminfront/src/features/integrity/DataIntegrityPage.tsx
+++ b/adminfront/src/features/integrity/DataIntegrityPage.tsx
@@ -325,13 +325,13 @@ function DataIntegrityContent() {
   const recheckMessage = recheckStatusText(recheckStatus);
 
   return (
-    <main className="space-y-6 p-6 md:p-8">
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <h2 className="text-2xl font-semibold tracking-tight">
+    <main className="space-y-6">
+      <header className="flex flex-shrink-0 flex-wrap items-start justify-between gap-4 sticky top-[-2.5rem] z-20 -mt-4 bg-background/95 pb-2 pt-4 backdrop-blur">
+        <div className="space-y-2">
+          <h2 className="text-3xl font-semibold">
             {t("ui.admin.integrity.title", "데이터 정합성 검증")}
           </h2>
-          <p className="mt-1 text-sm text-muted-foreground">
+          <p className="text-sm text-muted-foreground">
             {t(
               "msg.admin.integrity.subtitle",
               "Review integrity status and inspect checks across the admin data model.",
@@ -359,176 +359,184 @@ function DataIntegrityContent() {
             </output>
           ) : null}
         </div>
-      </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.integrity.report.load_error",
-              "정합성 리포트를 불러오지 못했습니다.",
-            )}
-        </section>
-      ) : null}
-
-      <section className="rounded-lg border border-border bg-card p-5">
-        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border pb-4">
-          <div>
-            <h3 className="text-base font-semibold">
-              {t("ui.admin.integrity.read_model.title", "Read model integrity")}
-            </h3>
-            <p className="text-sm text-muted-foreground">
-              {t(
-                "msg.admin.integrity.read_model.description",
-                "Ory SoT를 덮어쓰지 않고 backend DB read model의 이상 징후만 확인합니다.",
+      <div className="space-y-4 pb-6">
+        {isError ? (
+          <section className="rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
+            {(error as Error)?.message ||
+              t(
+                "msg.admin.integrity.report.load_error",
+                "정합성 리포트를 불러오지 못했습니다.",
               )}
-            </p>
-          </div>
-          {data ? (
-            <Badge variant={statusBadgeVariant(data.status)}>
-              {statusLabel(data.status)}
-            </Badge>
-          ) : null}
-        </div>
+          </section>
+        ) : null}
 
-        {isLoading ? (
-          <div className="py-8 text-sm text-muted-foreground">
-            {t("ui.admin.integrity.loading", "불러오는 중")}
-          </div>
-        ) : (
-          <dl className="grid gap-4 py-5 sm:grid-cols-2 lg:grid-cols-4">
+        <section className="rounded-lg border border-border bg-card p-5">
+          <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border pb-4">
             <div>
-              <dt className="text-sm text-muted-foreground">
-                {t("ui.admin.integrity.summary.total_checks", "검사 항목")}
-              </dt>
-              <dd className="mt-1 text-xl font-semibold tabular-nums">
-                {data?.summary.totalChecks ?? 0}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-sm text-muted-foreground">
-                {t("ui.admin.integrity.summary.passed", "정상")}
-              </dt>
-              <dd className="mt-1 text-xl font-semibold tabular-nums">
-                {data?.summary.passed ?? 0}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-sm text-muted-foreground">
-                {t("ui.admin.integrity.summary.failures", "실패 건수")}
-              </dt>
-              <dd className="mt-1 text-xl font-semibold tabular-nums">
-                {data?.summary.failures ?? 0}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-sm text-muted-foreground">
-                {t("ui.admin.integrity.summary.checked_at", "검사 시각")}
-              </dt>
-              <dd className="mt-1 text-sm">
-                {formatDateTime(data?.checkedAt)}
-              </dd>
-            </div>
-          </dl>
-        )}
-      </section>
-
-      <div className="space-y-4">
-        {(data?.sections ?? []).map((section) => (
-          <section
-            key={section.key}
-            className="rounded-lg border border-border bg-card p-5"
-          >
-            <div className="mb-4 flex items-center justify-between gap-3">
               <h3 className="text-base font-semibold">
-                {integritySectionLabel(section.key, section.label)}
+                {t(
+                  "ui.admin.integrity.read_model.title",
+                  "Read model integrity",
+                )}
               </h3>
-              <Badge variant={statusBadgeVariant(section.status)}>
-                {statusLabel(section.status)}
-              </Badge>
+              <p className="text-sm text-muted-foreground">
+                {t(
+                  "msg.admin.integrity.read_model.description",
+                  "Ory SoT를 덮어쓰지 않고 backend DB read model의 이상 징후만 확인합니다.",
+                )}
+              </p>
             </div>
-            <div className="divide-y divide-border">
-              {section.checks.map((check) => (
-                <div
-                  key={check.key}
-                  className="grid gap-3 py-4 md:grid-cols-[1fr_auto]"
-                >
-                  <div className="flex gap-3">
-                    <CheckIcon check={check} />
-                    <div>
-                      <div className="font-medium">
-                        {integrityCheckLabel(check.key, check.label)}
+            {data ? (
+              <Badge variant={statusBadgeVariant(data.status)}>
+                {statusLabel(data.status)}
+              </Badge>
+            ) : null}
+          </div>
+
+          {isLoading ? (
+            <div className="py-8 text-sm text-muted-foreground">
+              {t("ui.admin.integrity.loading", "불러오는 중")}
+            </div>
+          ) : (
+            <dl className="grid gap-4 py-5 sm:grid-cols-2 lg:grid-cols-4">
+              <div>
+                <dt className="text-sm text-muted-foreground">
+                  {t("ui.admin.integrity.summary.total_checks", "검사 항목")}
+                </dt>
+                <dd className="mt-1 text-xl font-semibold tabular-nums">
+                  {data?.summary.totalChecks ?? 0}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-sm text-muted-foreground">
+                  {t("ui.admin.integrity.summary.passed", "정상")}
+                </dt>
+                <dd className="mt-1 text-xl font-semibold tabular-nums">
+                  {data?.summary.passed ?? 0}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-sm text-muted-foreground">
+                  {t("ui.admin.integrity.summary.failures", "실패 건수")}
+                </dt>
+                <dd className="mt-1 text-xl font-semibold tabular-nums">
+                  {data?.summary.failures ?? 0}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-sm text-muted-foreground">
+                  {t("ui.admin.integrity.summary.checked_at", "검사 시각")}
+                </dt>
+                <dd className="mt-1 text-sm">
+                  {formatDateTime(data?.checkedAt)}
+                </dd>
+              </div>
+            </dl>
+          )}
+        </section>
+
+        <div className="space-y-4">
+          {(data?.sections ?? []).map((section) => (
+            <section
+              key={section.key}
+              className="rounded-lg border border-border bg-card p-5"
+            >
+              <div className="mb-4 flex items-center justify-between gap-3">
+                <h3 className="text-base font-semibold">
+                  {integritySectionLabel(section.key, section.label)}
+                </h3>
+                <Badge variant={statusBadgeVariant(section.status)}>
+                  {statusLabel(section.status)}
+                </Badge>
+              </div>
+              <div className="divide-y divide-border">
+                {section.checks.map((check) => (
+                  <div
+                    key={check.key}
+                    className="grid gap-3 py-4 md:grid-cols-[1fr_auto]"
+                  >
+                    <div className="flex gap-3">
+                      <CheckIcon check={check} />
+                      <div>
+                        <div className="font-medium">
+                          {integrityCheckLabel(check.key, check.label)}
+                        </div>
+                        <p className="mt-1 text-sm text-muted-foreground">
+                          {integrityCheckDescription(
+                            check.key,
+                            check.description,
+                          )}
+                        </p>
                       </div>
-                      <p className="mt-1 text-sm text-muted-foreground">
-                        {integrityCheckDescription(check.key, check.description)}
-                      </p>
+                    </div>
+                    <div className="flex items-center gap-3 md:justify-end">
+                      <Badge variant={statusBadgeVariant(check.status)}>
+                        {statusLabel(check.status)}
+                      </Badge>
+                      <span className="min-w-12 text-right text-lg font-semibold tabular-nums">
+                        {check.count}
+                      </span>
                     </div>
                   </div>
-                  <div className="flex items-center gap-3 md:justify-end">
-                    <Badge variant={statusBadgeVariant(check.status)}>
-                      {statusLabel(check.status)}
-                    </Badge>
-                    <span className="min-w-12 text-right text-lg font-semibold tabular-nums">
-                      {check.count}
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </section>
-        ))}
-      </div>
-
-      <section className="rounded-lg border border-border bg-card p-5">
-        <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
-          <div>
-            <h3 className="text-base font-semibold">
-              {t(
-                "ui.admin.integrity.orphan_login_ids.title",
-                "유령 로그인 ID 정리",
-              )}
-            </h3>
-            <p className="mt-1 text-sm text-muted-foreground">
-              {t(
-                "msg.admin.integrity.orphan_login_ids.description",
-                "삭제되었거나 존재하지 않는 사용자/테넌트를 참조하는 로그인 ID를 확인한 뒤 선택 삭제합니다.",
-              )}
-            </p>
-          </div>
-          <Button
-            type="button"
-            variant="destructive"
-            onClick={handleDeleteSelected}
-            disabled={
-              selectedOrphanIds.length === 0 || deleteMutation.isPending
-            }
-          >
-            {t("ui.admin.integrity.orphan_login_ids.delete", "선택 삭제")}
-          </Button>
+                ))}
+              </div>
+            </section>
+          ))}
         </div>
-        {orphanLoginIDsQuery.isError ? (
-          <div className="mb-3 rounded border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
-            {t(
-              "msg.admin.integrity.orphan_login_ids.load_error",
-              "유령 로그인 ID 대상을 불러오지 못했습니다.",
-            )}
+
+        <section className="rounded-lg border border-border bg-card p-5">
+          <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+            <div>
+              <h3 className="text-base font-semibold">
+                {t(
+                  "ui.admin.integrity.orphan_login_ids.title",
+                  "유령 로그인 ID 정리",
+                )}
+              </h3>
+              <p className="mt-1 text-sm text-muted-foreground">
+                {t(
+                  "msg.admin.integrity.orphan_login_ids.description",
+                  "삭제되었거나 존재하지 않는 사용자/테넌트를 참조하는 로그인 ID를 확인한 뒤 선택 삭제합니다.",
+                )}
+              </p>
+            </div>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={handleDeleteSelected}
+              disabled={
+                selectedOrphanIds.length === 0 || deleteMutation.isPending
+              }
+            >
+              {t("ui.admin.integrity.orphan_login_ids.delete", "선택 삭제")}
+            </Button>
           </div>
-        ) : null}
-        {deleteMutation.data ? (
-          <div className="mb-3 rounded border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200">
-            {t(
-              "msg.admin.integrity.orphan_login_ids.delete_success",
-              "{{count}}개의 유령 로그인 ID를 삭제했습니다.",
-              { count: deleteMutation.data.deletedCount },
-            )}
-          </div>
-        ) : null}
-        <OrphanLoginIDTable
-          items={orphanItems}
-          selectedIds={selectedOrphanIds}
-          onToggle={toggleOrphanID}
-        />
-      </section>
+          {orphanLoginIDsQuery.isError ? (
+            <div className="mb-3 rounded border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+              {t(
+                "msg.admin.integrity.orphan_login_ids.load_error",
+                "유령 로그인 ID 대상을 불러오지 못했습니다.",
+              )}
+            </div>
+          ) : null}
+          {deleteMutation.data ? (
+            <div className="mb-3 rounded border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200">
+              {t(
+                "msg.admin.integrity.orphan_login_ids.delete_success",
+                "{{count}}개의 유령 로그인 ID를 삭제했습니다.",
+                { count: deleteMutation.data.deletedCount },
+              )}
+            </div>
+          ) : null}
+          <OrphanLoginIDTable
+            items={orphanItems}
+            selectedIds={selectedOrphanIds}
+            onToggle={toggleOrphanID}
+          />
+        </section>
+      </div>
     </main>
   );
 }
diff --git a/adminfront/src/features/overview/GlobalOverviewPage.tsx b/adminfront/src/features/overview/GlobalOverviewPage.tsx
index 6cf0b64f..59c33efc 100644
--- a/adminfront/src/features/overview/GlobalOverviewPage.tsx
+++ b/adminfront/src/features/overview/GlobalOverviewPage.tsx
@@ -194,7 +194,7 @@ function IntegrityOverviewSummary() {
 
   return (
     <section className="border-t border-border/60 pt-4">
-      <div className="flex flex-wrap items-center justify-between gap-3">
+      <div className="flex flex-wrap items-start justify-between gap-3">
         <div className="flex items-center gap-2">
           {data.status === "pass" ? (
             <CheckCircle2 size={18} className="text-emerald-600" />
@@ -287,7 +287,7 @@ function RPUsageMixedChart({
 
   return (
     <section className="space-y-3">
-      <div className="flex flex-wrap items-center justify-between gap-3">
+      <div className="flex flex-wrap items-start justify-between gap-3">
         <div className="space-y-1">
           <h3 className="text-base font-semibold">
             {t("ui.admin.overview.chart.title", "회사별 앱별 로그인 요청 현황")}
@@ -507,9 +507,9 @@ function GlobalOverviewPage() {
 
   return (
     <div className="space-y-4 animate-in fade-in duration-500">
-      <div className="flex flex-wrap items-end justify-between gap-4">
+      <div className="flex flex-wrap items-start justify-between gap-4">
         <div className="space-y-1">
-          <h2 className="text-2xl font-semibold tracking-tight">
+          <h2 className="text-3xl font-semibold">
             {t("ui.common.overview.title", "운영 현황")}
           </h2>
           <p className="text-sm text-muted-foreground">
@@ -562,7 +562,7 @@ function GlobalOverviewPage() {
 
       {usageQuery.isError ? (
         <section className="space-y-2">
-          <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex flex-wrap items-start justify-between gap-3">
             <div className="space-y-1">
               <h3 className="text-base font-semibold">
                 {t(
diff --git a/adminfront/src/features/projections/UserProjectionPage.tsx b/adminfront/src/features/projections/UserProjectionPage.tsx
index 763dd29b..2c8efa7e 100644
--- a/adminfront/src/features/projections/UserProjectionPage.tsx
+++ b/adminfront/src/features/projections/UserProjectionPage.tsx
@@ -95,16 +95,16 @@ function UserProjectionContent() {
   const actionError = reconcileMutation.error ?? resetMutation.error;
 
   return (
-    <main className="space-y-6 p-6 md:p-8">
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <h2 className="text-2xl font-semibold tracking-tight">
+    <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="space-y-2">
+          <h2 className="text-3xl font-semibold">
             {t(
               "ui.admin.user_projection.title",
               "User Projection Management",
             )}
           </h2>
-          <p className="mt-1 text-sm text-muted-foreground">
+          <p className="text-sm text-muted-foreground">
             {t(
               "msg.admin.user_projection.subtitle",
               "Review and sync the Kratos user read model.",
@@ -134,7 +134,7 @@ function UserProjectionContent() {
             )}
           </Button>
         </div>
-      </div>
+      </header>
 
       {isError ? (
         <section className="rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">