docs: finalize HMDesign v2 guidelines and remove stale references
This commit is contained in:
1 parent
3ebc84e32c
commit
e9144348e5
10 files changed
+46
-29
No files matched your search
@@ -1,14 +1,14 @@
|
||||
# 퍼블리셔 Git 테스트 공유·실행 안내
|
||||
|
||||
현재 공유 기준은 [GitHub HMDesignSystemTest](https://github.com/shkim25027/HMDesignSystemTest)의 Git Clone입니다. 먼저 [AGENTS.md](../../AGENTS.md)를 확인합니다. 과거 ZIP 제작·압축 해제 검증은 [추가 수정 보고서](publisher-additional-review-2026-10-10.md)의 당시 기록이며 현재 설치 방법을 대체하지 않습니다. 이번 공유에는 신규 ZIP·포터블 패키지를 만들지 않습니다.
|
||||
현재 공유 기준은 [공식 Gitea HMDesign](https://gitea.hmac.kr/b25027/HMDesign)의 Git Clone입니다. 먼저 [AGENTS.md](../../AGENTS.md)를 확인합니다. 과거 ZIP 제작·압축 해제 검증은 [추가 수정 보고서](publisher-additional-review-2026-10-10.md)의 당시 기록이며 현재 설치 방법을 대체하지 않습니다. 이번 공유에는 신규 ZIP·포터블 패키지를 만들지 않습니다.
|
||||
|
||||
## 설치 조건과 Storybook 열람
|
||||
|
||||
lockfile의 Node 조건은 `^20.19.0 || >=22.12.0`이며 Node 21은 제외합니다. 검증 환경은 Windows, Node 20.20.1 / npm 10.8.2입니다. Git, Node/npm의 PATH와 버전을 확인합니다. 최초 설치에는 GitHub·npm 레지스트리 접속이 필요합니다. HM Registry 설치·publish는 필요하지 않습니다.
|
||||
lockfile의 Node 조건은 `^20.19.0 || >=22.12.0`이며 Node 21은 제외합니다. 검증 환경은 Windows, Node 20.20.1 / npm 10.8.2입니다. Git, Node/npm의 PATH와 버전을 확인합니다. 최초 설치에는 공식 Gitea·npm 레지스트리 접속이 필요합니다. HM Registry 설치·publish는 필요하지 않습니다.
|
||||
|
||||
```powershell
|
||||
git clone https://github.com/shkim25027/HMDesignSystemTest.git
|
||||
cd HMDesignSystemTest
|
||||
git clone https://gitea.hmac.kr/b25027/HMDesign.git
|
||||
cd HMDesign
|
||||
node --version
|
||||
npm --version
|
||||
npm ci
|
||||
@@ -18,7 +18,9 @@ npm run storybook
|
||||
|
||||
브라우저에서 **http://localhost:6024/** 를 엽니다. Components에서 기존 UI, Patterns에서 업무/Layout 조합, Foundation에서 Color/Typography를 확인합니다. 내부 Theme 비교는 `?path=/story/theme-runtime-contract--comparison`, JSON Loader 검증은 `?path=/story/theme-runtime-contract-loader--cdn-verification`입니다. Runtime Focus는 `?path=/story/theme-runtime-contract--verification`의 Run verification 버튼에 Tab으로 이동한 뒤 Enter/Space로 검사합니다. 자동·포인터 실행의 Focus는 `NOT VERIFIED`입니다.
|
||||
|
||||
기존 `start-storybook.bat`도 사용할 수 있습니다. 의존성·패키지 산출물이 없으면 기존 설치·빌드 명령을 실행하고 HM Story index/preview 준비 후 6024 주소를 엽니다. 포트 충돌 시 오류를 표시합니다. 종료는 실행 터미널의 Ctrl+C입니다. Git Clone에는 `node_modules`, 사전 빌드 Storybook, ZIP 실행기, 로컬 증거가 포함되지 않습니다.
|
||||
Windows에서는 Clone한 `HMDesign` 루트에서 `.\start-storybook.bat`를 실행하거나 파일을 더블 클릭할 수 있습니다. 이 소스 실행기는 PATH의 Node.js/npm을 사용하므로 별도 Node 설치가 필요합니다. 의존성·패키지 산출물이 없으면 기존 설치·빌드 명령을 실행하고 HM Story index/preview 준비 후 6024 주소를 엽니다. 포트 충돌 시 오류를 표시합니다. 종료는 실행 터미널의 Ctrl+C입니다. Git Clone에는 `node_modules`, 사전 빌드 Storybook, 포터블 Node, 로컬 증거가 포함되지 않습니다.
|
||||
|
||||
과거 포터블 ZIP은 당시 포함된 Node·정적 Storybook·ZIP 전용 실행기를 사용한 별도 배포물입니다. 일반 Git Clone이나 소스 ZIP에는 그 런타임이 포함되지 않으므로 Node.js/npm 설치 조건을 생략할 수 없습니다. 과거 ZIP의 6007은 현재 개발 Storybook 기본 포트 6024와 다릅니다.
|
||||
|
||||
## 새 React 화면 제작과 실행
|
||||
|
||||
@@ -28,7 +30,7 @@ npm run storybook
|
||||
npm run dev:publisher-example
|
||||
```
|
||||
|
||||
출력된 Vite 주소(기본 5173)를 엽니다. [실제 예제](../../examples/publisher-list/main.tsx)는 공개 `@hm-design/ui`의 GNB/GNBMobileMenu, PageHeader, Card, FilterBar, Select, Button, DataTable을 렌더링합니다. GNB_ONLY이며 Sidebar를 추가하지 않습니다. 예제 폴더를 새 경로에 복사한 뒤 제목·data·columns와 필요한 조합을 수정합니다. 임시 검증 화면은 공식 Story로 등록하지 않습니다.
|
||||
출력된 Vite 주소(기본 5173)를 엽니다. [실제 예제](../../examples/publisher-list/main.tsx)는 공개 `@hm-design/ui`의 GNB/GNBMobileMenu, PageHeader, Card, FilterBar, Select, Button, DataTable을 렌더링합니다. GNB_ONLY이며 Sidebar를 추가하지 않습니다. 예제 폴더를 새 경로에 복사한 뒤 제목·data·columns와 필요한 조합을 수정합니다. 기존 Pattern을 먼저 검토한 뒤 Component → Variant/Prop → Composition 순으로 재사용하고 현재 Theme/Semantic Token과 공개 CSS 연결을 유지합니다. 임시 검증 화면은 공식 Story로 등록하지 않습니다.
|
||||
|
||||
검색 조건 → 검색어 → 조회 → 초기화 순서, 8px 간격, 기본 구성 중앙 정렬을 사용합니다. 기간·담당자 등 추가 조건을 제공하는 구성은 `hm-list-search-extended`를 사용합니다. 입력값으로 정렬을 바꾸지 않습니다. 모바일은 줄바꿈·버튼 우측 정렬·표 내부 가로 스크롤을 유지합니다.
|
||||
|
||||
|
||||
Reference in new issue
Block a user