shkim4
4c29894e56
Drop page / section descriptions, state notes and repeated captions from the representative Stories of 44 components, the Patterns, Center Graphic and OrgChart pages. Value readouts, spec lists and captions hide only on the representative page; hidden verification Stories keep them. Tabs Default API and the Filter Bar draft / applied counts move to the hidden DefaultApi and DraftApplied Stories; Center Overview is hidden with its direct URL kept. Story IDs are unchanged. Align the component, pattern and OrgChart docs with the pages, point the quality reference check at the DraftApplied Story, and make the P8 styles check expect no section header on the preview-only Expanded page.
90 lines
3.8 KiB
TypeScript
90 lines
3.8 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 { 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 title="Page Header" />
|
|
<StorySection title="Overview">
|
|
<PageHeader><PageHeaderContent><PageHeaderTitle>업무 현황</PageHeaderTitle></PageHeaderContent></PageHeader>
|
|
</StorySection>
|
|
<StorySection title="Breadcrumb 포함형">
|
|
<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 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>
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|