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

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,19 +161,16 @@ 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">
+      <PageHeader
-        <div className="space-y-2">
+        sticky
-          <h2 className="text-3xl font-semibold">
+        titleAs="h2"
-            {t("ui.admin.api_keys.list.title", "API 키 관리 (M2M)")}
+        title={t("ui.admin.api_keys.list.title", "API 키 관리 (M2M)")}
-          </h2>
+        description={t(
-          <p className="text-sm text-[var(--color-muted)]">
-            {t(
           "msg.admin.api_keys.list.subtitle",
           "서버 간 통신(Machine-to-Machine)을 위한 API 키를 발급하고 관리합니다.",
         )}
-          </p>
+        actions={
-        </div>
+          <>
-        <div className="flex items-center gap-2">
             <Button
               variant="outline"
               onClick={() => query.refetch()}
@@ -187,8 +185,9 @@ function ApiKeyListPage() {
                 {t("ui.admin.api_keys.list.add", "API 키 생성")}
               </Link>
             </Button>
-        </div>
+          </>
-      </header>
+        }
+      />
 
       <Card className="bg-[var(--color-panel)] flex-1 flex flex-col min-h-0 overflow-hidden">
         <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">

adminfront/src/features/audit/AuditLogsPage.tsx

@@ -32,6 +32,7 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table";
+import { PageHeader } from "../../../../common/core/components/page";
 import type { AuditLog } from "../../lib/adminApi";
 import { fetchAuditLogs } from "../../lib/adminApi";
 import { t } from "../../lib/i18n";
@@ -164,19 +165,16 @@ function AuditLogsPage() {
 
   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">
+      <PageHeader
-        <div>
+        sticky
-          <h2 className="text-3xl font-semibold">
+        titleAs="h2"
-            {t("ui.admin.audit.title", "감사 로그")}
+        title={t("ui.admin.audit.title", "감사 로그")}
-          </h2>
+        description={t(
-          <p className="text-sm text-[var(--color-muted)]">
-            {t(
           "msg.admin.audit.subtitle",
           "Command 요청 기반 ClickHouse 로그를 조회합니다. 사용자/테넌트는 추후 세션 연동 시 자동 채워집니다.",
         )}
-          </p>
+        actions={
-        </div>
+          <>
-        <div className="flex items-center gap-2">
             <Button
               variant="outline"
               onClick={() => refetch()}
@@ -189,8 +187,9 @@ function AuditLogsPage() {
               <ListChecks size={16} />
               {t("ui.admin.audit.export_csv", "Export CSV")}
             </Button>
-        </div>
+          </>
-      </header>
+        }
+      />
 
       <Card className="glass-panel flex-1 flex flex-col min-h-0 overflow-hidden">
         <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">

adminfront/src/features/users/UserListPage.tsx

@@ -29,6 +29,7 @@ import {
   sortItems,
   toggleSort,
 } from "../../../../common/core/utils";
+import { PageHeader } from "../../../../common/core/components/page";
 import {
   commonTableShellClass,
   commonTableViewportClass,
@@ -411,20 +412,21 @@ function UserListPage() {
 
   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">
+      <PageHeader
-        <div className="space-y-2">
+        sticky
-          <h2 className="text-3xl font-semibold" data-testid="page-title">
+        titleAs="h2"
+        title={
+          <span data-testid="page-title">
             {t("ui.admin.users.list.title", "사용자 관리")}
-          </h2>
+          </span>
-          <p className="text-sm text-[var(--color-muted)]">
+        }
-            {t(
+        description={t(
           "msg.admin.users.list.subtitle",
           "시스템 사용자를 조회하고 관리합니다.",
         )}
-          </p>
+        actions={
-        </div>
+          <>
-        <div className="flex items-center gap-2">
+            <div className="mr-2 flex items-center gap-2">
-          <div className="flex items-center gap-2 mr-2">
               <div className="relative w-48">
                 <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                 <Input
@@ -432,7 +434,7 @@ function UserListPage() {
                     "ui.admin.users.list.search_placeholder",
                     "이름 또는 이메일 검색...",
                   )}
-                className="pl-9 h-9"
+                  className="h-9 pl-9"
                   value={searchDraft}
                   onChange={(e) => setSearchDraft(e.target.value)}
                   onKeyDown={handleKeyDown}
@@ -466,65 +468,35 @@ function UserListPage() {
               </Button>
             </div>
 
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
             <Button
               variant="outline"
               size="sm"
-                data-testid="user-data-mgmt-btn"
+              className="h-9"
-                className="gap-2 h-9"
-              >
-                <LayoutDashboard size={16} />
-                {t("ui.admin.users.data_mgmt", "데이터 관리")}
-                <ChevronDown size={14} className="opacity-50" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56">
-              <DropdownMenuItem
-                onClick={() => handleExport(false)}
-                disabled={exportMutation.isPending}
-                data-testid="user-export-menu-item"
-                className="cursor-pointer"
-              >
-                <FileDown size={16} className="mr-2 opacity-50" />
-                {t("ui.common.export_without_ids", "UUID 제외 내보내기")}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => handleExport(true)}
-                disabled={exportMutation.isPending}
-                data-testid="user-export-with-ids-menu-item"
-                className="cursor-pointer"
-              >
-                <FileDown size={16} className="mr-2 opacity-50" />
-                {t("ui.common.export_with_ids", "UUID 포함 내보내기")}
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                className="px-2 py-1.5 focus:bg-transparent cursor-default"
-                onSelect={(e) => e.preventDefault()}
-              >
-                <UserBulkUploadModal
-                  onSuccess={() => query.refetch()}
-                  variant="dropdown"
-                />
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-
-          <Button
-            variant="outline"
-            size="sm"
-            className="w-9 px-0 h-9"
               onClick={() => query.refetch()}
               disabled={query.isFetching}
-            title={t("ui.common.refresh", "새로고침")}
             >
               <RefreshCw size={16} />
-            <span className="sr-only">
               {t("ui.common.refresh", "새로고침")}
-            </span>
             </Button>
-
+            <Button
+              variant="outline"
+              onClick={() => handleExport(false)}
+              className="gap-2"
+              disabled={exportMutation.isPending}
+            >
+              <FileDown size={16} />
+              {t("ui.common.export_without_ids", "UUID 제외 내보내기")}
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => handleExport(true)}
+              className="gap-2"
+              disabled={exportMutation.isPending}
+            >
+              <FileDown size={16} />
+              {t("ui.common.export_with_ids", "UUID 포함")}
+            </Button>
+            <UserBulkUploadModal onSuccess={() => query.refetch()} />
             <Dialog>
               <DialogTrigger asChild>
                 <Button variant="outline" size="icon" className="h-9 w-9">
@@ -545,7 +517,7 @@ function UserListPage() {
                 </DialogHeader>
                 <div className="grid gap-4 py-4">
                   {userSchema.length === 0 && (
-                  <p className="text-sm text-muted-foreground text-center py-4">
+                    <p className="py-4 text-center text-sm text-muted-foreground">
                       {t(
                         "msg.admin.users.list.columns.no_custom",
                         "현재 테넌트에 정의된 커스텀 필드가 없습니다.",
@@ -555,17 +527,17 @@ function UserListPage() {
                   {userSchema.map((field) => (
                     <label
                       key={field.key}
-                    className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted/50 cursor-pointer"
+                      className="flex cursor-pointer items-center gap-3 rounded-lg p-2 hover:bg-muted/50"
                     >
                       <input
                         type="checkbox"
-                      className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
+                        className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
                         checked={visibleColumns[field.key] !== false}
                         onChange={() => toggleColumn(field.key)}
                       />
                       <div className="flex flex-col">
                         <span className="text-sm font-medium">{field.label}</span>
-                      <span className="text-xs text-muted-foreground font-mono">
+                        <span className="font-mono text-xs text-muted-foreground">
                           {field.key}
                         </span>
                       </div>
@@ -587,8 +559,9 @@ function UserListPage() {
                 {t("ui.admin.users.list.add", "사용자 추가")}
               </Link>
             </Button>
-        </div>
+          </>
-      </header>
+        }
+      />
 
       <Card className="flex-1 flex flex-col min-h-0 bg-[var(--color-panel)] overflow-hidden">
         <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">