페이지 헤더 스타일 통일

devfront/src/features/overview/GlobalOverviewPage.tsx

@@ -3,8 +3,8 @@ import type { AxiosError } from "axios";
 import {
   Activity,
   AlertTriangle,
-  BarChart3,
   CheckCircle2,
+  LayoutDashboard,
   Layers3,
   ShieldCheck,
 } from "lucide-react";
@@ -662,17 +662,22 @@ 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="space-y-1">
-          <h2 className="text-2xl font-semibold tracking-tight">
-            {t("ui.common.overview.title", "운영 현황")}
-          </h2>
-          <p className="text-sm text-muted-foreground">
-            {t(
-              "msg.dev.dashboard.description",
-              "연동 앱 구성과 인증 운영 지표를 한 곳에서 확인합니다.",
-            )}
-          </p>
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="flex min-w-0 items-start gap-3">
+          <div className="mt-1 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-primary/15 bg-primary/10 text-primary">
+            <LayoutDashboard size={20} />
+          </div>
+          <div className="space-y-1">
+            <h2 className="text-3xl font-semibold">
+              {t("ui.common.overview.title", "운영 현황")}
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              {t(
+                "msg.dev.dashboard.description",
+                "연동 앱 구성과 인증 운영 지표를 한 곳에서 확인합니다.",
+              )}
+            </p>
+          </div>
         </div>
       </div>
 
@@ -704,22 +709,19 @@ function GlobalOverviewPage() {
 
       <section className="space-y-3">
         <div className="flex flex-wrap items-center justify-between gap-3">
-          <div className="flex items-center gap-2">
-            <BarChart3 size={18} className="text-primary" />
-            <div className="space-y-1">
-              <h3 className="text-base font-semibold">
-                {t(
-                  "ui.dev.dashboard.chart.title",
-                  "애플리케이션별 로그인요청/기타 요청 현황",
-                )}
-              </h3>
-              <p className="text-sm text-muted-foreground">
-                {t(
-                  "msg.dev.dashboard.chart.filter_description",
-                  "전체 또는 선택한 애플리케이션만 기준으로 그래프를 확인합니다.",
-                )}
-              </p>
-            </div>
+          <div className="space-y-1">
+            <h3 className="text-base font-semibold">
+              {t(
+                "ui.dev.dashboard.chart.title",
+                "애플리케이션별 로그인요청/기타 요청 현황",
+              )}
+            </h3>
+            <p className="text-sm text-muted-foreground">
+              {t(
+                "msg.dev.dashboard.chart.filter_description",
+                "전체 또는 선택한 애플리케이션만 기준으로 그래프를 확인합니다.",
+              )}
+            </p>
           </div>
           <div className="flex h-8 items-center gap-1" aria-label="집계 단위">
             {[