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

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}>