페이지 헤더 공통 컴포넌트 통일

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

@@ -38,6 +38,7 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table";
+import { PageHeader } from "../../../../common/core/components/page";
 import { commonStickyTableHeaderClass } from "../../../../common/ui/table";
 import {
   type ApiKeySummary,
@@ -160,35 +161,33 @@ function ApiKeyListPage() {
 
   return (
     <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
-      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
-        <div className="space-y-2">
-          <h2 className="text-3xl font-semibold">
-            {t("ui.admin.api_keys.list.title", "API 키 관리 (M2M)")}
-          </h2>
-          <p className="text-sm text-[var(--color-muted)]">
-            {t(
-              "msg.admin.api_keys.list.subtitle",
-              "서버 간 통신(Machine-to-Machine)을 위한 API 키를 발급하고 관리합니다.",
-            )}
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            onClick={() => query.refetch()}
-            disabled={query.isFetching}
-          >
-            <RefreshCw size={16} />
-            {t("ui.common.refresh", "새로고침")}
-          </Button>
-          <Button asChild>
-            <Link to="/api-keys/new">
-              <Plus size={16} />
-              {t("ui.admin.api_keys.list.add", "API 키 생성")}
-            </Link>
-          </Button>
-        </div>
-      </header>
+      <PageHeader
+        sticky
+        titleAs="h2"
+        title={t("ui.admin.api_keys.list.title", "API 키 관리 (M2M)")}
+        description={t(
+          "msg.admin.api_keys.list.subtitle",
+          "서버 간 통신(Machine-to-Machine)을 위한 API 키를 발급하고 관리합니다.",
+        )}
+        actions={
+          <>
+            <Button
+              variant="outline"
+              onClick={() => query.refetch()}
+              disabled={query.isFetching}
+            >
+              <RefreshCw size={16} />
+              {t("ui.common.refresh", "새로고침")}
+            </Button>
+            <Button asChild>
+              <Link to="/api-keys/new">
+                <Plus size={16} />
+                {t("ui.admin.api_keys.list.add", "API 키 생성")}
+              </Link>
+            </Button>
+          </>
+        }
+      />
 
       <Card className="bg-[var(--color-panel)] flex-1 flex flex-col min-h-0 overflow-hidden">
         <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">