Initial commit: HMDesignSystem baseline

src/patterns/page-header.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Button,
+  PageHeader,
+  PageHeaderActions,
+  PageHeaderContent,
+  PageHeaderDescription,
+  PageHeaderTitle,
+} from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+const meta = {
+  title: "Patterns/Layout/Page Header",
+  component: PageHeader,
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+} satisfies Meta<typeof PageHeader>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Content composition only. The consuming screen owns navigation and action handlers.
+// Dashboard's minimum width and internal navigation belong to DashboardLayout.
+export const All: Story = {
+  name: "Page Header",
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.patterns}
+        title="Page Header"
+        description="화면 콘텐츠의 제목 영역입니다. Breadcrumb, 제목, 설명과 대표 Action을 조합합니다."
+      />
+      <StorySection title="Overview" description="단일 Brand Action을 사용하는 기본 조합입니다.">
+        <PageHeader>
+          <PageHeaderContent>
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#home">홈</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#projects">프로젝트</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>업무 현황</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+            <PageHeaderTitle>업무 현황</PageHeaderTitle>
+            <PageHeaderDescription>프로젝트별 업무 진행 상황을 확인하고 조회합니다.</PageHeaderDescription>
+          </PageHeaderContent>
+          <PageHeaderActions>
+            <Button type="button" variant="primary" appearance="brand" size="default">
+              신규 등록
+            </Button>
+          </PageHeaderActions>
+        </PageHeader>
+      </StorySection>
+    </StoryPage>
+  ),
+}