96 lines
4.4 KiB
TypeScript
96 lines
4.4 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
Button,
|
|
PageHeader,
|
|
PageHeaderActions,
|
|
PageHeaderContent,
|
|
PageHeaderDescription,
|
|
PageHeaderTitle,
|
|
Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow,
|
|
Tabs, TabsContent, TabsList, TabsTrigger,
|
|
} 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 없이 제목 중심입니다. 설명·액션·Breadcrumb는 화면의 필요에 따라 선택 적용합니다."
|
|
/>
|
|
<StorySection title="Overview" description="제목 중심 기본형입니다. Breadcrumb는 생략하고 필요한 설명·액션을 선택 적용합니다.">
|
|
<PageHeader><PageHeaderContent><PageHeaderTitle>업무 현황</PageHeaderTitle></PageHeaderContent></PageHeader>
|
|
</StorySection>
|
|
<StorySection title="Breadcrumb 포함형" description="Breadcrumb·설명·단일 Brand Action과 Primary Tabs 조합입니다. 제목→설명 8px, Header→Tabs 20px을 유지합니다.">
|
|
<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>
|
|
<Tabs defaultValue="mine" className="min-w-0">
|
|
<TabsList aria-label="업무 목록 보기">
|
|
<TabsTrigger value="mine">내 업무</TabsTrigger>
|
|
<TabsTrigger value="completed">완료 업무</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="mine" className="px-0 py-6">
|
|
<Table>
|
|
<TableCaption>내 업무 일정 예시</TableCaption>
|
|
<TableHeader><TableRow><TableHead scope="col">업무</TableHead><TableHead scope="col">마감일</TableHead><TableHead scope="col">상태</TableHead></TableRow></TableHeader>
|
|
<TableBody>
|
|
<TableRow><TableCell>화면 설계서 검토</TableCell><TableCell>10월 14일</TableCell><TableCell>검토</TableCell></TableRow>
|
|
<TableRow><TableCell>고객 요구사항 정리</TableCell><TableCell>10월 16일</TableCell><TableCell>진행</TableCell></TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</TabsContent>
|
|
<TabsContent value="completed" className="px-0 py-6">
|
|
<Table>
|
|
<TableCaption>완료 업무 예시</TableCaption>
|
|
<TableHeader><TableRow><TableHead scope="col">업무</TableHead><TableHead scope="col">완료일</TableHead><TableHead scope="col">상태</TableHead></TableRow></TableHeader>
|
|
<TableBody><TableRow><TableCell>프로젝트 기본 정보 등록</TableCell><TableCell>10월 9일</TableCell><TableCell>완료</TableCell></TableRow></TableBody>
|
|
</Table>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|