페이지 헤더 레이아웃 공통화

devfront/src/features/audit/AuditLogsPage.tsx

@@ -20,9 +20,6 @@ import { Button } from "../../components/ui/button";
 import {
   Card,
   CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
 } from "../../components/ui/card";
 import { Input } from "../../components/ui/input";
 import {
@@ -33,6 +30,7 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table";
+import { PageHeader } from "../../../../common/core/components/page";
 import type { DevAuditLog } from "../../lib/devApi";
 import { fetchDevAuditLogs } from "../../lib/devApi";
 import { t } from "../../lib/i18n";
@@ -194,23 +192,15 @@ function AuditLogsPage() {
 
   return (
     <div className="space-y-6">
-      <Card className="glass-panel">
-        <CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-          <div>
-            <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {t("ui.dev.audit.registry.title", "Audit registry")}
-            </p>
-            <CardTitle className="text-3xl font-black tracking-tight">
-              {t("ui.dev.audit.title", "Audit Logs")}
-            </CardTitle>
-            <CardDescription>
-              {t(
-                "msg.dev.audit.subtitle",
-                "Shows DevFront activity history within current tenant/app scope.",
-              )}
-            </CardDescription>
-          </div>
-          <div className="flex items-center gap-2">
+      <PageHeader
+        eyebrow={t("ui.dev.audit.registry.title", "Audit registry")}
+        title={t("ui.dev.audit.title", "Audit Logs")}
+        description={t(
+          "msg.dev.audit.subtitle",
+          "Shows DevFront activity history within current tenant/app scope.",
+        )}
+        actions={
+          <>
             <Badge variant="muted">
               {t("msg.dev.audit.loaded_count", "Loaded {{count}} rows", {
                 count: logs.length,
@@ -231,9 +221,12 @@ function AuditLogsPage() {
               <Download size={16} />
               {t("ui.dev.clients.consents.export_csv", "Export CSV")}
             </Button>
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
+          </>
+        }
+      />
+
+      <Card className="glass-panel">
+        <CardContent className="space-y-4 pt-6">
           <form
             onSubmit={(e) => {
               e.preventDefault();

devfront/src/features/clients/ClientsPage.tsx

@@ -9,6 +9,7 @@ import {
   sortableTableHeadBaseClassName,
   sortableTableHeaderClassName,
 } from "../../../../common/core/components/sort";
+import { PageHeader } from "../../../../common/core/components/page";
 import {
   type SortConfig,
   type SortResolverMap,
@@ -259,37 +260,30 @@ function ClientsPage() {
 
   return (
     <div className="space-y-8">
+      <PageHeader
+        eyebrow={t("ui.dev.clients.registry.title", "RP registry")}
+        title={t("ui.dev.clients.registry.subtitle", "연동 앱")}
+        description={t(
+          "msg.dev.clients.registry.description",
+          "OIDC 클라이언트, 인증 방식, 리다이렉트 URI, 비밀키 재발행을 감사 로그와 함께 관리합니다.",
+        )}
+        actions={
+          canCreateClient ? (
+            <Button
+              size="sm"
+              className="shadow-lg shadow-primary/30"
+              onClick={() => navigate("/clients/new")}
+            >
+              <Plus className="h-4 w-4" />
+              {t("ui.dev.clients.new", "새 클라이언트")}
+            </Button>
+          ) : null
+        }
+      />
+
       <Card className="glass-panel">
-        <CardHeader className="pb-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                {t("ui.dev.clients.registry.title", "RP registry")}
-              </p>
-              <CardTitle className="text-3xl font-black tracking-tight">
-                {t("ui.dev.clients.registry.subtitle", "연동 앱")}
-              </CardTitle>
-              <CardDescription>
-                {t(
-                  "msg.dev.clients.registry.description",
-                  "OIDC 클라이언트, 인증 방식, 리다이렉트 URI, 비밀키 재발행을 감사 로그와 함께 관리합니다.",
-                )}
-              </CardDescription>
-            </div>
-            {canCreateClient && (
-              <div className="hidden items-center gap-2 md:flex">
-                <Button
-                  size="sm"
-                  className="shadow-lg shadow-primary/30"
-                  onClick={() => navigate("/clients/new")}
-                >
-                  <Plus className="h-4 w-4" />
-                  {t("ui.dev.clients.new", "새 클라이언트")}
-                </Button>
-              </div>
-            )}
-          </div>
-          <div className="mt-4 flex flex-col gap-3">
+        <CardHeader className="pb-4 pt-6">
+          <div className="flex flex-col gap-3">
             <div className="flex flex-col gap-3 md:flex-row md:items-center">
               <div className="relative flex-1">
                 <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
@@ -437,14 +431,6 @@ function ClientsPage() {
               )}
             </CardDescription>
           </div>
-          {canCreateClient && (
-            <div className="flex items-center gap-2 md:hidden">
-              <Button size="sm" onClick={() => navigate("/clients/new")}>
-                <Plus className="h-4 w-4" />
-                {t("ui.dev.clients.new", "새 클라이언트")}
-              </Button>
-            </div>
-          )}
         </CardHeader>
         <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
           <div className={commonTableShellClass}>

devfront/src/features/developer-request/DeveloperRequestPage.tsx

@@ -32,6 +32,7 @@ import {
   commonTableShellClass,
   commonTableViewportClass,
 } from "../../../../common/ui/table";
+import { PageHeader } from "../../../../common/core/components/page";
 import { Textarea } from "../../components/ui/textarea";
 import {
   approveDeveloperRequest,
@@ -158,30 +159,28 @@ export default function DeveloperRequestPage() {
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">
-            {t("ui.dev.nav.developer_request", "개발자 권한 신청")}
-          </h1>
-          <p className="text-muted-foreground mt-1">
-            {isSuperAdmin
-              ? t(
-                  "msg.dev.request.admin_desc",
-                  "사용자들의 개발자 권한 신청 내역을 관리합니다.",
-                )
-              : t(
-                  "msg.dev.request.user_desc",
-                  "내 신청 내역을 확인하고 새로운 권한을 신청할 수 있습니다.",
-                )}
-          </p>
-        </div>
-        {!isSuperAdmin && !hasActiveRequest && (
-          <Button onClick={() => setIsRequestModalOpen(true)}>
-            <Plus className="mr-2 h-4 w-4" />
-            {t("ui.dev.welcome.btn_request", "신규 신청하기")}
-          </Button>
-        )}
-      </div>
+      <PageHeader
+        title={t("ui.dev.nav.developer_request", "개발자 권한 신청")}
+        description={
+          isSuperAdmin
+            ? t(
+                "msg.dev.request.admin_desc",
+                "사용자들의 개발자 권한 신청 내역을 관리합니다.",
+              )
+            : t(
+                "msg.dev.request.user_desc",
+                "내 신청 내역을 확인하고 새로운 권한을 신청할 수 있습니다.",
+              )
+        }
+        actions={
+          !isSuperAdmin && !hasActiveRequest ? (
+            <Button onClick={() => setIsRequestModalOpen(true)}>
+              <Plus className="mr-2 h-4 w-4" />
+              {t("ui.dev.welcome.btn_request", "신규 신청하기")}
+            </Button>
+          ) : null
+        }
+      />
 
       <Card className="glass-panel">
         <CardHeader>