120 lines
4.5 KiB
TypeScript
120 lines
4.5 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, TableCell, TableHead, TableHeader, TableRow,
|
|
Tabs, TabsContent, TabsList, TabsTrigger,
|
|
} from "@hm-design/ui"
|
|
import { StateBoard } from "@/components/story-board"
|
|
import { 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.
|
|
// The Breadcrumb header and the task Tabs / Table are shared by the representative page (header only) and the Full Page Story.
|
|
function BreadcrumbHeader() {
|
|
return (
|
|
<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>
|
|
)
|
|
}
|
|
|
|
function TaskTabs() {
|
|
return (
|
|
<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 aria-label="내 업무">
|
|
<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 aria-label="완료 업무">
|
|
<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>
|
|
)
|
|
}
|
|
|
|
export const All: Story = {
|
|
name: "Page Header",
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Page Header" />
|
|
<StorySection title="Variants">
|
|
<StateBoard
|
|
states={[
|
|
{ id: "basic", label: "Basic", wide: true, children: <PageHeader><PageHeaderContent><PageHeaderTitle>업무 현황</PageHeaderTitle></PageHeaderContent></PageHeader> },
|
|
{ id: "with-breadcrumb", label: "With Breadcrumb", wide: true, children: <BreadcrumbHeader /> },
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
// The former representative page's full work screen (Breadcrumb header + Tabs + Table), kept unchanged as its own Story.
|
|
export const FullPage: Story = {
|
|
tags: ["verification"],
|
|
name: "Full Page",
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Page Header" />
|
|
<StorySection title="Breadcrumb 포함형">
|
|
<BreadcrumbHeader />
|
|
<TaskTabs />
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|