feat: integrate latest HMDesign design system updates

src/patterns/page-header.stories.tsx

@@ -12,6 +12,8 @@ import {
   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"
 
@@ -32,9 +34,12 @@ export const All: Story = {
       <StoryPageHeader
         kicker={STORY_KICKER.patterns}
         title="Page Header"
-        description="화면 콘텐츠의 제목 영역입니다. Breadcrumb, 제목, 설명과 대표 Action을 조합합니다."
+        description="기본형은 Breadcrumb 없이 제목 중심입니다. 설명·액션·Breadcrumb는 화면의 필요에 따라 선택 적용합니다."
       />
-      <StorySection title="Overview" description="단일 Brand Action을 사용하는 기본 조합입니다.">
+      <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>
@@ -61,6 +66,29 @@ export const All: Story = {
             </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>
   ),