feat: integrate latest HMDesign design system updates
This commit is contained in:
1 parent
99faec189e
commit
1c4e0bb9a1
209 files changed
+8845
-552
No files matched your search
@@ -1,6 +1,6 @@
|
||||
# Component / Pattern Reference Index
|
||||
|
||||
AI 화면 구현 Quick Start의 Component·Pattern 검색에 사용하는 파일 인덱스다. 오전 `HMDesignTest.zip`과 현재 개발 저장소는 별도 스냅샷이다. 현재 검증된 최신 테스트 배포 기준 `HMDesignTest-Portable-Test-r3.zip`에는 아래 44개 Component와 8개 Pattern 모듈, Dashboard Status 소스/export/CSS/문서/정적 예제와 사전 빌드된 Storybook을 모두 포함한다. `HMDesignTest-Portable-Test-r2.zip`, 기존 `HMDesignTest-Portable-Test.zip` 및 오전 ZIP은 이전 스냅샷이며, 아래 오전 ZIP 수량은 역사적 비교로 표시한다. 공개 심볼의 Source of Truth는 [`packages/ui/src/index.ts`](../../packages/ui/src/index.ts)이며, Props와 상태는 각 연결 문서 및 구현을 확인한다. 파일 수, 공개 API 심볼 수, Story 그룹 수는 서로 다른 집계 단위다.
|
||||
AI 화면 구현 Quick Start의 Component·Pattern 검색에 사용하는 파일 인덱스다. 현재 테스트 공유 기준은 [README의 Git Clone 안내](../../README.md#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`](../../packages/ui/src/index.ts)이며, Props와 상태는 각 연결 문서 및 구현을 확인한다. 파일 수, 공개 API 심볼 수, Story 그룹 수는 서로 다른 집계 단위다.
|
||||
|
||||
## Component
|
||||
|
||||
@@ -57,7 +57,9 @@ AI 화면 구현 Quick Start의 Component·Pattern 검색에 사용하는 파일
|
||||
|
||||
## Pattern
|
||||
|
||||
현재 개발 저장소와 포터블 r3의 `packages/ui/src/patterns/`에는 8개 디렉터리와 62개 named export(값과 type 포함)가 있다. 역사적 오전 배포 기준 `HMDesignTest.zip`에는 7개 Pattern 모듈과 50개 named export가 있었다. Pattern 소스 디렉터리, Story 파일, Story 그룹 수는 별도 집계다.
|
||||
화면 요구 기능별 첫 선택은 [선택·완료 계약](ai-screen-contract.md#구현-전-기록)을 따른다. 공개 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 |
|
||||
|---|---|---|---|
|
||||
@@ -72,18 +74,20 @@ AI 화면 구현 Quick Start의 Component·Pattern 검색에 사용하는 파일
|
||||
|
||||
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에서는 해당 상대경로와 공개 API를 사용할 수 있다. ZIP에 실제 포함된 Dashboard 구현·Story와 해당 ZIP 안의 Dashboard 문서를 확인하고, Status 공개 API가 없으면 없다고 보고한다.
|
||||
과거 소스/포터블 ZIP을 받은 AI는 Dashboard Status 행의 현재 개발 경로를 사용할 수 있다고 가정하지 않는다. 해당 ZIP에 실제 포함된 Dashboard 구현·Story·문서와 공개 API를 확인하고, Status 공개 API가 없으면 없다고 보고한다. 현재 Git checkout에서는 실제 파일 목록과 공개 exports를 확인한 뒤 사용한다.
|
||||
|
||||
## Reference 읽는 순서
|
||||
|
||||
### 화면 생성 시 놓치기 쉬운 소비 계약
|
||||
|
||||
- 검색·필터: Table이 없어도 [FilterBar](../patterns/filter-bar.md)를 먼저 확인한다. 공개 Pattern 미사용 시 요구사항과 맞지 않는 제약을 기록한다. 대표 Story의 fixture·추가 액션은 요구사항이 아니다.
|
||||
- Field Label: [공개 Label의 control 연결 예제](../components/label.md#5-api)를 확인한다. 기본 HTML은 레이아웃·콘텐츠나 미지원 사용처에 허용하며 기존 HM 위젯 대체는 이유 없이 만들지 않는다.
|
||||
- Navigation 미지정: [선택 근거](navigation-single-mode.md#선택-근거)를 기록한다. GNB/LNB의 목적과 대표 화면 구조로 판단하며 일반 목록의 기본 모드를 임의 확정하지 않는다.
|
||||
- GNB ONLY: [Desktop·Mobile 구성](../patterns/gnb.md#8-desktop--mobile)을 함께 구현한다. 대표 `patterns-layout-gnb--all`의 Overview·Usage를 확인한다. 신규 AI Production 화면에는 GNB Sidebar를 적용하지 않는다.
|
||||
- LNB ONLY: 기존 독립 LNB 구조와 [LNB Mobile Header/Menu](../patterns/lnb.md#3b-lnb-mobile-header-2026-10-07)를 유지한다.
|
||||
- DASHBOARD ONLY: Sidebar를 생성하지 않는다. 대표 `patterns-layout-dashboard-layout--all`의 전용 Header(48px)·업무 상태 필터 + Content, 최소 폭 960px·내부 가로 스크롤을 따른다. `DashboardSidebar`와 `sidebar` slot은 호환성·검증용이며 과거 Sidebar verification Story는 신규 운영 화면 구현 기준이 아니다.
|
||||
- Dashboard Status: 공개 `@hm-design/ui/dashboard-status.css`는 변수만 제공한다. [Theme → Status CSS → 기존 Outline Badge mapping·React 소비 예제](../patterns/dashboard-layout.md#dashboard-업무-상태-공통-계약)를 사용한다. `issue`는 독립 flag다. [Static HTML Reference](../patterns/dashboard-status-static.html)도 같은 계약을 소비한다.
|
||||
- FilterBar: [입력 draft / 조회 applied·초기화 예제](../patterns/filter-bar.md#61-조회-버튼으로-적용하는-소비-예제)를 확인한다. 대표 `patterns-data-filter-bar--all`은 조회 callback 없는 조합 예시이며 DataTable의 `patterns-data-data-table--with-filter-bar-story`는 즉시 적용 verification이다.
|
||||
- FilterBar: [입력 draft / 조회 applied·초기화 예제](../patterns/filter-bar.md#61-조회-버튼으로-적용하는-소비-예제)를 확인한다. 대표 `patterns-data-filter-bar--all`은 입력/조회 적용 상태와 초기화 callback을 구분하는 조합 예시이며 DataTable의 `patterns-data-data-table--with-filter-bar-story`는 즉시 적용 verification이다.
|
||||
- React 소비 CSS: [Tailwind v4 검색 범위와 HM source 유지](runtime-portability.md#21-tailwind-v4-소비자-검색-범위), [Runtime Theme 연결](runtime-theme.md)을 확인한다.
|
||||
- 실행 위치별 Asset: [Noto Sans KR·폰트 URL·단일 HTML 내장](runtime-portability.md#41-noto-sans-kr-경로-실행-환경별-확인)을 확인한다.
|
||||
|
||||
|
||||
Reference in new issue
Block a user