docs(storybook): simplify sidebar Story pages around the UI

Drop the category kicker from the 83 sidebar Stories (kicker is now optional;
hidden verification Stories keep it) and shorten or remove repeated, obvious
or internal page/section descriptions. Required specs, limits, virtual-data
and undecided-value notices stay. Story IDs, exports, fixtures, shared state
notes and package code are unchanged. Record: docs/reports/storybook-ui-simplification-2026-10-22.md
This commit is contained in:
shkim4 committed 2026-10-22 16:13:58 +09:00
1 parent aa8b7f8df1
commit da0e647b49
70 files changed
+305 -333

No files matched your search

+2 -2
View File
@@ -80,7 +80,7 @@ export const FullFooter: Story = {
name: "SW Footer",
render: () => (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="SW Footer"description="사용자 제공 실제 화면(2026-10-20) 구성: SWHeader + 도면 영역 + SWFooter(좌표 status, 바 안의 명령창 command, 오른쪽 명령 칸, Layout 탭). 모든 상태는 호스트(Story)가 Props로 소유하고, 컴포넌트는 Callback만 보냅니다." />
<StoryPageHeader title="SW Footer"description="사용자 제공 실제 화면(2026-10-20) 구성: SWHeader + 도면 영역 + SWFooter(좌표 status, 바 안의 명령창 command, 오른쪽 명령 칸, Layout 탭). 모든 상태는 호스트(Story)가 Props로 소유하고, 컴포넌트는 Callback만 보냅니다." />
<StorySection title="실제 Footer 조합 (동작)" description="명령 클릭 = 선택(다시 클릭 해제)·명령 기록 추가, 분류 탭(←/→, 바꿔도 칸 영역 고정), 빈 칸 + 클릭·Hover 가이드(영상 대신 Figma 6프레임 순환), 보조기능 토글(켜짐 = 주황 테두리·글자), 명령어 전체보기·▲ = 명령창 위로 펼치기, Layout 탭 선택·+·×·더블클릭/F2 이름 변경·Delete, 명령창 Enter 실행. 좁은 폭의 ▲ 확장 목록은 「화면 폭 변화」, Hover · Active · Selected · Disabled는 이 화면의 각 부품에서 동작합니다.">
<Workspace width={1920} />
</StorySection>
@@ -378,7 +378,7 @@ export const Responsive: Story = {
name: "Responsive More",
render: () => (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="Responsive More" description="칸 영역은 바 폭으로만 정해지고 분류의 명령 수와 무관합니다(분류를 바꿔도 위치 고정). Figma에는 좁은 폭 정의가 없어 사용자 제공 실제 화면(2026-10-20)을 따릅니다: 빈 칸(+)이 먼저 줄고, 그래도 넘치는 명령은 마지막 칸의 ▲(ico_arrow)로 칸 위 패널에 펼침(▼ = 열림, Escape·바깥 클릭 닫힘). 분류 탭이 넘치면 ◀ ▶로 스크롤. 바 폭 1279px 이하에서 보조기능은 아이콘만(45 × 33). 바 안 명령창은 최소 280px." />
<StoryPageHeader title="Responsive More" description="칸 영역은 바 폭으로만 정해지고 분류의 명령 수와 무관합니다(분류를 바꿔도 위치 고정). Figma에는 좁은 폭 정의가 없어 사용자 제공 실제 화면(2026-10-20)을 따릅니다: 빈 칸(+)이 먼저 줄고, 그래도 넘치는 명령은 마지막 칸의 ▲(ico_arrow)로 칸 위 패널에 펼침(▼ = 열림, Escape·바깥 클릭 닫힘). 분류 탭이 넘치면 ◀ ▶로 스크롤. 바 폭 1279px 이하에서 보조기능은 아이콘만(45 × 33). 바 안 명령창은 최소 280px." />
{[1920, 1440, 1280, 950, 860, 760].map(width => (
<div key={width} className="sw-footer-story-width">
<StorySection title={`${width}px`}>
+5 -6
View File
@@ -90,18 +90,17 @@ export const HomeMenu: Story = {
name: "Home Menu",
render: () => (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="Home Menu — 로고(홈) 버튼 메뉴"
description="SWHeader의 homeMenu 하나로 연결합니다(SW 일반 모드 전용, SW 뷰어 모드에는 적용하지 않음). 로고 클릭 = 열기, 다시 클릭 = 닫기(onHomeClick은 호출하지 않음), 메뉴 빈 곳 클릭 = 닫기(Figma CLOSE), 타일 클릭 = 실행(누르는 동안만 Variant3, 클릭 후 ON 없음), 최근파일만 목록이 열린 동안 Variant3. Escape는 더보기 → 하위 패널 → 메뉴 순으로 닫고 로고로 Focus를 돌립니다. ←/→/Home/End로 타일을 이동합니다. New / Open은 문서 Dropdown 안에 그대로 있고, Dropdown을 열면 메뉴가 닫힙니다. 메뉴는 Header 위에 겹치는 층이라 열고 닫아도 Header 요소의 위치·너비가 바뀌지 않습니다." />
<StorySection title="로고 클릭 · 열기 / 닫기 (현재 폭)" description="5개 섹션(파일 · 손상된 파일 · Display · 설정 · 궁금하면) 15개 타일. 마우스를 올리면 Hover(Variant2), 누르는 동안 Pressed(Variant3)이며 클릭 후 ON 상태는 남지 않습니다. 최근파일 타일만 하위 패널을 열고, 목록이 열린 동안 Variant3를 유지합니다.">
<StoryPageHeader title="Home Menu — 로고(홈) 버튼 메뉴" description="SW 일반 모드 전용(뷰어 모드 미적용) · 로고 클릭으로 열고 닫기 · 상세 동작은 SW AI 가이드 COMPONENT_CATALOG" />
<StorySection title="로고 클릭 · 열기 / 닫기 (현재 폭)" description="5개 섹션 15개 타일 · 클릭 후 ON 상태 없음">
<HeaderWithMenu>{log => log}</HeaderWithMenu>
</StorySection>
<StorySection title="열림 (현재 폭)" description="열림 동안 로고는 Home On(노란 테두리), Header 상·하단에 #5F4B0F 2px 선이 표시되고 닫으면 기본으로 돌아갑니다(Figma 26:10591 / 662:67267).">
<StorySection title="열림 (현재 폭)" description="로고 Home On · Header 상·하단 2px 선">
<HeaderWithMenu defaultOpen autoFocus={false} />
</StorySection>
<StorySection title="최근파일 하위 패널 (662:67267)" description="최근파일 타일을 누르면(Variant3) 메뉴 하단 강조가 전체 2px 외곽선으로 바뀌고 그 아래에 최근파일 목록이 열립니다. 행에 마우스를 올리면 2뎁스 미리보기 영역이 옆에 나타나며 이미지는 표시하지 않고 빈 영역으로 둡니다(2026-10-21). 다시 누르거나 Escape로 닫습니다. 최근파일이 더보기 안에 있으면 목록은 더보기 타일 아래에 열리고 더보기 타일이 Variant3가 됩니다. 목록은 Story 데이터입니다.">
<StorySection title="최근파일 하위 패널 (662:67267)" description="미리보기는 빈 영역 · 목록은 Story 데이터">
<div className="sw-home-menu-story__tall"><HeaderWithMenu defaultOpen autoFocus={false} defaultActiveIds={["recent"]}>{log => log}</HeaderWithMenu></div>
</StorySection>
<StorySection title="통합 · 속성창 · SWPopup · Escape" description="Escape는 Focus가 있는 곳을 먼저 닫습니다(메뉴 안: 하위 패널 → 메뉴, Popup 안: 그 Popup). Focus가 모두의 밖이면 가장 최근에 열거나 사용한 하나만 닫습니다.">
<StorySection title="통합 · 속성창 · SWPopup · Escape" description="Escape는 Focus 위치부터 닫고, 밖에서는 가장 최근 하나만 닫음">
<IntegrationDemo />
</StorySection>
</StoryPage>
+1 -1
View File
@@ -131,7 +131,7 @@ export function SWHeaderOverview({ initial, fixtures, propertyGroups, propertyFi
const weight = weights.find(item => item.id === weightId)
return <StoryPage className="sw-story-overview">
<StoryPageHeader kicker="HM DESIGN SYSTEM / SW" title="SW Header" />
<StoryPageHeader title="SW Header" />
{showVerificationControls() && <div className="sw-overview-toolbar" aria-label="Storybook 전용 미리보기 설정">
<label htmlFor={`${controlId}-selection`}>선택 상태</label>
<select id={`${controlId}-selection`} value={example} onChange={event => changeExample(event.target.value as Selection)}>
+2 -3
View File
@@ -453,7 +453,6 @@ export const LogoSlot: Story = {
render: () => (
<StoryPage>
<StoryPageHeader
kicker={KICKER}
title="Logo Slot"
description="로고 영역의 위치·크기(홈 버튼 안 12 / 16, 32 × 17)는 공통 디자인이고, 로고 이미지는 각 SW 프로그램이 정합니다. Storybook 기본 로고는 임시 자산(sw-header-logo-placeholder.svg)이며 확정 로고가 아닙니다."
/>
@@ -785,7 +784,7 @@ export const ResponsiveMore: Story = {
parameters: { controls: { disable: true } },
render: () => (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="SW Header — 화면 너비" />
<StoryPageHeader title="SW Header — 화면 너비" />
{MORE_WIDTHS.map(width => (
<StorySection key={width} title={`${width}px`}>
<MenuFrame width={width}><StyleHeader /></MenuFrame>
@@ -931,5 +930,5 @@ function PropertyCompare() {
}
/** Rendered by SW/Popup › Property Panel · 4개 비교 (sw-property-panel.stories.tsx, ID sw-header--property-panel-compare). */
export function PropertyPanelComparePage() {
return <StoryPage className="sw-story-compare-page"><StoryPageHeader kicker={KICKER} title="속성창 4개 상태 비교" /><PropertyCompare /></StoryPage>
return <StoryPage className="sw-story-compare-page"><StoryPageHeader title="속성창 4개 상태 비교" /><PropertyCompare /></StoryPage>
}
+2 -3
View File
@@ -12,7 +12,6 @@ import "./sw-integrated-stories.css"
// SWPopup (2026-10-19): the SW property window frame with free children. Public API only, like a consuming
// project. HM UI components are placed inside to show that the content is not restricted.
const KICKER = "HM DESIGN SYSTEM / SW"
const LAYERS: SWHeaderLayer[] = [
{ id: "0", name: "0", color: "#ffffff" },
{ id: "wall", name: "WALL", color: "#ff4242" },
@@ -159,7 +158,7 @@ function PopupPage() {
const [log, record] = useLog()
return (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="SW Popup — 외형 고정, 콘텐츠 자유"
<StoryPageHeader title="SW Popup — 외형 고정, 콘텐츠 자유"
description="SWPopup은 속성창 프레임(314px, 제목줄, 닫기, 내부 스크롤)을 그대로 쓰고 children으로 아무 콘텐츠나 받습니다. SWPopupSection / SWPopupRow는 속성창 그룹·행 모양을 그대로 재사용합니다. Header 없이 SWTheme 안에서 씁니다." />
{log}
<StorySection title="사용자 정의 설정 · 객체 정보 · 기존 속성창 + children" description="SW Input·Select(단위, Viewer 축척 지정과 같은 SWSelect)·레이어/색상(속성창 컨트롤 SWPopupPropertyRow — SWHeader 필드 Dropdown은 Header 전용)·투명도 게이지바(SWSlider)와, SW에 없는 컨트롤인 HM UI Switch·Button을 함께 배치합니다. 기존 SWHeaderPropertyPanel도 children을 받습니다.">
@@ -188,7 +187,7 @@ function StackPage() {
const rows = Array.from({ length: 30 }, (_, index) => index + 1)
return (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="여러 Popup · Escape · 스크롤"
<StoryPageHeader title="여러 Popup · Escape · 스크롤"
description="Popup 안의 Escape는 그 Popup만 닫습니다. 바깥의 Escape는 가장 최근에 열리거나 사용한 Popup 하나만 닫습니다. Dropdown·편집 중인 Input이 처리한 Escape로는 닫히지 않습니다. 긴 콘텐츠는 본문이 스크롤됩니다." />
{log}
<SWTheme className="sw-story-popups" data-stack="">
+5 -5
View File
@@ -86,7 +86,7 @@ export const ViewerHeader: Story = {
name: "Viewer Header",
render: () => (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="SW Viewer — SWViewerHeader" />
<StoryPageHeader title="SW Viewer — SWViewerHeader" />
<StorySection title="기본형 (1440px, 도면 열림)">
<ViewerScreen />
</StorySection>
@@ -278,7 +278,7 @@ export const ContentVariants: Story = {
const [snap, setSnap] = useState(true)
return (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="SW Viewer — 설정창 (SWViewerPanel)" />
<StoryPageHeader title="SW Viewer — 설정창 (SWViewerPanel)" />
<Log lines={demo.log} />
<ViewerFrame height={760} header={<SWViewerHeader documentTitle={demo.documentName} {...demo.fileProps} groups={demo.groups} trailing={demo.trailing} onCommand={demo.onCommand} />}>
<LayerPanel demo={demo} strategy="absolute" defaultPosition={{ left: 24, top: 16 }} />
@@ -333,7 +333,7 @@ export const Responsive: Story = {
const demo = useViewerDemo({ initialDocument: SAMPLES[1].name })
return (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="SW Viewer — 화면 너비" />
<StoryPageHeader title="SW Viewer — 화면 너비" />
<Log lines={demo.log} />
<div className="sw-story-stack">
{[1920, 1440, 1280, 950, 860, 760, 520].map(width => (
@@ -372,7 +372,7 @@ export const CompareWithSWHeader: Story = {
name: "SWHeader vs Viewer Header",
render: () => (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="SW Viewer — 일반 SW Header와 비교" />
<StoryPageHeader title="SW Viewer — 일반 SW Header와 비교" />
<StorySection title="나란히 비교 (1440px)">
<div className="sw-story-stack">
<div className="sw-story-scroller"><div style={{ width: 1440 }}><SWHeader documentTitle="C0060202-001-평면및종단면도" /></div></div>
@@ -397,7 +397,7 @@ export const Logo: Story = {
]
return (
<StoryPage>
<StoryPageHeader kicker={KICKER} title="SW Viewer — 로고" />
<StoryPageHeader title="SW Viewer — 로고" />
<div className="sw-story-stack">
{rows.map(row => (
<StorySection key={row.title} title={row.title}>