박스 타이틀 description 추가 및 로고 추가

common/core/components/page/PageHeader.tsx

@@ -6,6 +6,7 @@ function cx(...classNames: Array<string | false | null | undefined>) {
 
 type PageHeaderProps = Omit<HTMLAttributes<HTMLElement>, "title"> & {
   actions?: ReactNode;
+  icon?: ReactNode;
   as?: ElementType;
   description?: ReactNode;
   eyebrow?: ReactNode;
@@ -20,6 +21,7 @@ export function PageHeader({
   className,
   description,
   eyebrow,
+  icon,
   sticky = false,
   title,
   titleAs,
@@ -38,18 +40,25 @@ export function PageHeader({
       )}
       {...props}
     >
-      <div className="space-y-2">
-        {eyebrow ? (
-          <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
-            {eyebrow}
-          </p>
-        ) : null}
-        <Title className="text-3xl font-semibold tracking-tight">
-          {title}
-        </Title>
-        {description ? (
-          <p className="text-sm text-muted-foreground">{description}</p>
+      <div className="flex min-w-0 items-start gap-3">
+        {icon ? (
+          <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">
+            {icon}
+          </div>
         ) : null}
+        <div className="space-y-2">
+          {eyebrow ? (
+            <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
+              {eyebrow}
+            </p>
+          ) : null}
+          <Title className="text-3xl font-semibold tracking-tight">
+            {title}
+          </Title>
+          {description ? (
+            <p className="text-sm text-muted-foreground">{description}</p>
+          ) : null}
+        </div>
       </div>
       {actions ? (
         <div className="flex flex-wrap items-center gap-2">{actions}</div>