From 0a5ae51a68dd3d89474fcf14bd628977e7eededd Mon Sep 17 00:00:00 2001
From: kyy <b24053@hanmaceng.co.kr>
Date: Thu, 14 May 2026 13:40:30 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/core/components/page/PageHeader.tsx | 59 ++++++++++++++++++++++
 common/core/components/page/index.ts       |  1 +
 2 files changed, 60 insertions(+)
 create mode 100644 common/core/components/page/PageHeader.tsx
 create mode 100644 common/core/components/page/index.ts

diff --git a/common/core/components/page/PageHeader.tsx b/common/core/components/page/PageHeader.tsx
new file mode 100644
index 00000000..537f76f7
--- /dev/null
+++ b/common/core/components/page/PageHeader.tsx
@@ -0,0 +1,59 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+
+function cx(...classNames: Array<string | false | null | undefined>) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+type PageHeaderProps = Omit<HTMLAttributes<HTMLElement>, "title"> & {
+  actions?: ReactNode;
+  as?: ElementType;
+  description?: ReactNode;
+  eyebrow?: ReactNode;
+  sticky?: boolean;
+  title: ReactNode;
+  titleAs?: ElementType;
+};
+
+export function PageHeader({
+  actions,
+  as,
+  className,
+  description,
+  eyebrow,
+  sticky = false,
+  title,
+  titleAs,
+  ...props
+}: PageHeaderProps) {
+  const Root = as ?? "header";
+  const Title = titleAs ?? "h1";
+
+  return (
+    <Root
+      className={cx(
+        "flex flex-wrap items-start justify-between gap-4",
+        sticky &&
+          "sticky top-[-2.5rem] z-20 -mt-4 bg-background/95 pt-4 pb-2 backdrop-blur",
+        className,
+      )}
+      {...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>
+        ) : null}
+      </div>
+      {actions ? (
+        <div className="flex flex-wrap items-center gap-2">{actions}</div>
+      ) : null}
+    </Root>
+  );
+}
diff --git a/common/core/components/page/index.ts b/common/core/components/page/index.ts
new file mode 100644
index 00000000..78b169af
--- /dev/null
+++ b/common/core/components/page/index.ts
@@ -0,0 +1 @@
+export * from "./PageHeader";