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.
15 KiB
Component / Pattern Reference Index
AI 화면 구현 Quick Start의 Component·Pattern 검색에 사용하는 파일 인덱스다. 현재 테스트 공유 기준은 README의 Git Clone 안내와 해당 checkout의 소스다. HMDesignTest.zip과 포터블 r1/r2/r3는 과거 스냅샷이며 현재 Git 소스와 별도로 취급한다. 당시 r3에는 44개 Component와 8개 Pattern 모듈, Dashboard Status 소스/export/CSS/문서/정적 예제와 사전 빌드된 Storybook을 포함했다. Git Clone에는 생성 dist·사전 빌드 Storybook·포터블 Node가 포함되지 않으므로 안내대로 설치·빌드한다. 아래 ZIP 수량은 역사적 비교다. 공개 심볼의 Source of Truth는 packages/ui/src/index.ts이며, Props와 상태는 각 연결 문서 및 구현을 확인한다. 파일 수, 공개 API 심볼 수, Story 그룹 수는 서로 다른 집계 단위다.
Component
현재 packages/ui/src/components/ui/에는 구현 TSX 44개가 있다. 각 구현 파일은 packages/ui/src/index.ts의 공개 export를 통해 소비한다. 아래 Story는 실제 Story 파일의 대표 그룹이다.
packages/ui/src/index.ts에는 위 44개 Component 모듈의 named export 222개(값과 type 포함)가 연결되어 있다. 사용 시 API·Props·Variant·주요 상태·Theme 연결은 해당 Component 문서의 API/상태/Token/Storybook 절을 따른다. 문서 45개 중 field.md는 별도 field.tsx 공개 Component를 나타내지 않는 Field 소비 가이드다.
Pattern
화면 요구 기능별 첫 선택은 선택·완료 계약을 따른다. 공개 Form/Empty/Error Pattern은 현재 없으며 기존 Component composition으로 구성한다. FilterBar의 목록형 opt-in은 layout="list-basic" | "list-extended"다. Story의 추가 조건·액션은 사용자 요구사항이 아니다.
현재 개발 저장소의 packages/ui/src/patterns/에는 8개 디렉터리와 63개 named export(값과 type 포함, FilterBarProps 추가)가 있다. 기존 포터블 r3 스냅샷은 62개이며 이번 작업에서 ZIP을 갱신하지 않는다. 역사적 오전 배포 기준 HMDesignTest.zip에는 7개 Pattern 모듈과 50개 named export가 있었다. Pattern 소스 디렉터리, Story 파일, Story 그룹 수는 별도 집계다.
| Pattern (문서) | Import 경로 | 주요 용도 | 대표 Story |
|---|---|---|---|
| Dashboard Layout | @hm-design/ui |
전용 Header·업무 상태·Content | Patterns/Layout/Dashboard → Dashboard |
| Dashboard Status | @hm-design/ui |
업무 상태·필터 계약 | React 대표 Story |
| Data Table | @hm-design/ui |
데이터 표·정렬·페이지 | Patterns/Data/Data Table → Data Table |
| Filter Bar | @hm-design/ui |
조회 조건·조회 액션 | Patterns/Data/Filter Bar → Filter Bar |
| GNB | @hm-design/ui |
상단 Navigation | Patterns/Layout/GNB |
| LNB | @hm-design/ui |
좌측 Navigation | Patterns/Layout/LNB |
| Loading Screen | @hm-design/ui |
전체 화면 로딩 | Patterns/Layout/Loading Screen |
| Page Header | @hm-design/ui |
제목·경로·주요 작업 | Patterns/Layout/Page Header → Page Header |
Data Table은 기존 Table·Pagination·Checkbox·Select·Dropdown Menu 등을 조합한다. 연동 예제가 필요하면 Data Table Story 안의 With Filter Bar를 참고하되 숨김 verification Story이므로 일반 화면의 단독 기본 Reference로 삼지 않는다. Filter Bar는 단독으로도 사용 가능하며 검색·Select·Combobox·Date Picker 등 조회 조건의 layout이다. Dashboard 빠른 상태 필터는 Filter Bar API가 아니라 Dashboard Status 계약을 따른다.
과거 소스/포터블 ZIP을 받은 AI는 Dashboard Status 행의 현재 개발 경로를 사용할 수 있다고 가정하지 않는다. 해당 ZIP에 실제 포함된 Dashboard 구현·Story·문서와 공개 API를 확인하고, Status 공개 API가 없으면 없다고 보고한다. 현재 Git checkout에서는 실제 파일 목록과 공개 exports를 확인한 뒤 사용한다.
Reference 읽는 순서
화면 생성 시 놓치기 쉬운 소비 계약
- 검색·필터: Table이 없어도 FilterBar를 먼저 확인한다. 공개 Pattern 미사용 시 요구사항과 맞지 않는 제약을 기록한다. 대표 Story의 fixture·추가 액션은 요구사항이 아니다.
- Field Label: 공개 Label의 control 연결 예제를 확인한다. 기본 HTML은 레이아웃·콘텐츠나 미지원 사용처에 허용하며 기존 HM 위젯 대체는 이유 없이 만들지 않는다.
- Navigation 미지정: 선택 근거를 기록한다. GNB/LNB의 목적과 대표 화면 구조로 판단하며 일반 목록의 기본 모드를 임의 확정하지 않는다.
- GNB ONLY: Desktop·Mobile 구성을 함께 구현한다. 대표
patterns-layout-gnb--all의 Overview·Usage를 확인한다. 신규 AI Production 화면에는 GNB Sidebar를 적용하지 않는다. - LNB ONLY: 기존 독립 LNB 구조와 LNB Mobile Header/Menu를 유지한다.
- DASHBOARD ONLY: Sidebar를 생성하지 않는다. 대표
patterns-layout-dashboard-layout--all의 전용 Header(48px)·업무 상태 필터 + Content, 최소 폭 960px·내부 가로 스크롤을 따른다.DashboardSidebar와sidebarslot은 호환성·검증용이며 과거 Sidebar verification Story는 신규 운영 화면 구현 기준이 아니다. - Dashboard Status: 공개
@hm-design/ui/dashboard-status.css는 변수만 제공한다. Theme → Status CSS → 기존 Outline Badge mapping·React 소비 예제를 사용한다.issue는 독립 flag다. Static HTML Reference도 같은 계약을 소비한다. - FilterBar: 입력 draft / 조회 applied·초기화 예제를 확인한다. 대표
patterns-data-filter-bar--all은 조회 / 초기화 callback 조합 예시이고 입력/조회 적용 상태 구분은 숨김patterns-data-filter-bar--draft-applied가 표시한다. DataTable의patterns-data-data-table--with-filter-bar-story는 조회 버튼 적용 verification이다. - React 소비 CSS: Tailwind v4 검색 범위와 HM source 유지, Runtime Theme 연결을 확인한다.
- 실행 위치별 Asset: Noto Sans KR·폰트 URL·단일 HTML 내장을 확인한다.
탐색 절차
- 이 인덱스에서 후보를 찾고 실제 파일·공개 API가 존재하는지 확인한다.
- 사용 문서에서 Props/Variant, 상태, Theme Token, 조합 규칙을 확인한다.
- 대표 Story에서 시각 언어와 실제 composition을 확인한다. Storybook을 실행할 수 없으면 Story 소스에서 확인한다.
verificationStory는 계약·상태 검사로, Compatibility 예제는 호환성 확인으로, Fixture는 시각 테스트 데이터로 분류한다. 이들을 Production API나 운영 화면 예제로 일반화하지 않는다.- Dashboard는 GNB/LNB와 함께 사용하지 않는다. 허용되는 페이지 모드와 Responsive 규칙은 Navigation Single Mode Policy를 따른다.
- Theme Source of Truth는
themes/default.json및 공개 Runtime 계약이다. Component Token/상태 mapping은 연결된 Theme 문서를 확인한다.
정적 Storybook 빌드가 없거나 실행할 수 없는 환경에서는 확인된 Story 소스와 문서만 근거로 삼고, 검증하지 않은 시각 동작은 미확인으로 보고한다.