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
@@ -18,7 +18,9 @@ JSON schemaVersion 2는 기존 `status`, exit code, 원본 `issues`를 유지하
|
||||
|
||||
`tokenEvidence`는 entry별 연결 정의 수와 검사한 참조를 제공한다. 공개 Token의 정답은 실제 연결 CSS 및 [Runtime 계약표](runtime-theme-contract.md)다. Component mapping은 runtime JSON key와 같은 집계가 아니다. 별도 토큰·색상은 추가하지 않는다.
|
||||
|
||||
`node scripts/public-theme-tokens.mjs`로 연결된 공개 CSS의 선언 목록을 JSON으로 출력한다. 현재 1,170개 선언명이며 Runtime JSON 입력 key 수와 다르다. Native role widget은 `REUSE-006`으로 근거 검토를 요구하고 일반 콘텐츠 HTML은 허용한다.
|
||||
`node scripts/public-theme-tokens.mjs`로 연결된 공개 CSS의 선언 목록을 JSON으로 출력한다. 기준 Commit `3ebc84e32cf91298a2a4d8046753244c499fd719`에서 **1,203개 고유 `--hm-*` 선언명**이며 Runtime JSON 입력 Key 94개와 다르다. 집계 범위는 `@hm-design/ui/theme.css` + `@hm-design/ui/dashboard-status.css`의 연결 CSS이고 `definitionCount` / `incomplete: false`를 확인한다. selector마다 반복된 선언의 총 행 수나 Guard 규칙 수가 아니며 CSS가 바뀌면 위 명령으로 재집계한다.
|
||||
|
||||
보존된 검증은 기존 전체 범위 **FAIL 0 / NOT VERIFIED 16건**과 최신 변경 범위 **FAIL 0 / NOT VERIFIED 12건**으로 서로 다른 scope·source fingerprint의 기록이다. 둘을 합치거나 전체 PASS로 표현하지 않는다. 원본 CSS styleEvidence는 STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS / FINAL NOT VERIFIED이며 결합 styleVerification의 NOT VERIFIED도 유지한다. Native role widget은 `REUSE-006`으로 근거 검토를 요구하고 일반 콘텐츠 HTML은 허용한다.
|
||||
|
||||
## Runtime 증거 연결
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ RESULT: PARTIAL. 기준 HEAD는 `48ca1d22de0a4eca5af2084676fd6739e7223912`, 시
|
||||
|
||||
## 자료 확인 및 비교 가능성
|
||||
|
||||
사용자가 확인한 원본은 `C:\Users\ㅅㅎ\.codex\visualizations\2026\10\10\01a12479-1eac-7691-8044-de2330b7bfef\HMDesign-AI-Generation-Test`다. REPORT, experiment/rubric/results/findings, 10개 requirements·React 소스·initial·generation log·Guard·스크린샷을 확인했다. 원본 증거·소스 570개 SHA256 변화는 0개다(node_modules와 baseline 저장소 스냅샷은 인벤토리에서 제외).
|
||||
사용자가 확인한 원본은 `<USER_HOME>\.codex\visualizations\2026\10\10\01a12479-1eac-7691-8044-de2330b7bfef\HMDesign-AI-Generation-Test`다. REPORT, experiment/rubric/results/findings, 10개 requirements·React 소스·initial·generation log·Guard·스크린샷을 확인했다. 원본 증거·소스 570개 SHA256 변화는 0개다(node_modules와 baseline 저장소 스냅샷은 인벤토리에서 제외).
|
||||
|
||||
새 자료는 `D:\디자인시스템\HMDesign-AI-Generation-Test\retest-20261010`에 보존한다. requirements 10개와 rubric은 원본과 byte 일치, Seed는 실제 기록 `20261010`, 선택 알고리즘은 LCG(1664525,1013904223)+Fisher-Yates다. Viewport는 390/768/1280/1440 × 900이다. 동일 로컬 Windows/Node 20.20.1, React 19.3.0/Vite 8.3.0, 기존 의존성 복사와 같은 Chrome 실행 경로/Playwright 측정 함수를 사용했다. 원본의 정확한 브라우저 build ID는 NOT VERIFIED이며 서버 포트·새 파일 위치는 다르다.
|
||||
|
||||
|
||||
@@ -13,7 +13,9 @@
|
||||
| Dark 2 | #071E18 | #2F281C | #883700 |
|
||||
| Dark 3 | #020A07 | #1D1810 | #4F2000 |
|
||||
|
||||
모든 칸의 Key는 `color.palette.{green|brown|orange}-{light-4|light-3|light-2|light-1|default|dark-1|dark-2|dark-3}`로 선언되어 있다. CSS는 동일 suffix의 `--hm-sem-palette-*` → `--hm-*` Primitive를 사용한다. 이전 확정 누락분 8개 추가 이후의 81개 입력을 보존하고 Orange Dark 1·2만 추가했다. 전체 공개 입력은 83개(색상 81개, 기존 radius 2개)다. Dark 3와 Light 4~Default 값은 변경하지 않았다.
|
||||
모든 칸의 Key는 `color.palette.{green|brown|orange}-{light-4|light-3|light-2|light-1|default|dark-1|dark-2|dark-3}`로 선언되어 있다. CSS는 동일 suffix의 `--hm-sem-palette-*` → `--hm-*` Primitive를 사용한다. Orange Dark 1·2 확정 당시에는 83개(색상 81개 + radius 2개)였으며 이후 Generic Status Error 1개와 Brown/Orange Background Stop 10개가 추가됐다. 현재 공개 입력은 94개(색상 92개 + radius 2개)다. Dark 3와 Light 4~Default 값은 유지한다.
|
||||
|
||||
집계 기준 Commit은 `3ebc84e32cf91298a2a4d8046753244c499fd719`다. `scripts/theme-contract.mjs`가 `contract.ts`의 공개 Key·Property·type 항목을 추출한 `definitions.length`는 **94개(색상 92개 + radius 2개)**다. `Object.keys(themes/default.json의 tokens).length`는 색상 직접 설정값 **92개**이며 radius는 JSON에 없고 CSS Template에서 기본값을 제공한다. `scripts/theme-defaults.mjs --check`는 JSON + `scripts/theme-templates/{primitives,default}.css` → `packages/ui/src/theme/{primitives,default}.css` 및 `default-values.generated.ts`의 **94개 계약 기본값** 연결을 확인한다. 공개 CSS의 계산·Component 매핑 변수 선언 수는 이 Runtime 입력 수와 별도 집계다.
|
||||
|
||||
## Legacy Key 보존과 확정 이력
|
||||
|
||||
|
||||
@@ -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`를 사용합니다. 입력값으로 정렬을 바꾸지 않습니다. 모바일은 줄바꿈·버튼 우측 정렬·표 내부 가로 스크롤을 유지합니다.
|
||||
|
||||
|
||||
@@ -32,11 +32,13 @@ AI 신규·수정 UI 작업은 사용자의 별도 요청 없이 기존 Componen
|
||||
| `.storybook/`, `src/components/*.stories.tsx` | 현재 시제품 → 계속 사용 | 실제 컴포넌트 검수. 패키지 산출물에는 Story를 넣지 않음 |
|
||||
| `packages/ui/src/patterns/`, `packages/ui/src/theme.css` | 현재 구현 | 업무/Layout composition과 기본 Theme CSS. Library 산출물은 `npm run build:packages`로 생성 |
|
||||
| `packages/center-graphic/` | 현재 구현 | `@hm-design/center-graphic` 독립 package 배포 경계. UI package와 필수 의존 없음 |
|
||||
| `packages/ui/src/theme/contract.ts`, `runtime.ts` | 현재 구현 | 공개 83개 입력, 형식/범위 검증, atomic fallback·cleanup, Global/Scoped 적용. `@hm-design/ui/theme` export |
|
||||
| `packages/ui/src/theme/contract.ts`, `runtime.ts` | 현재 구현 | 공개 94개 입력(색상 92개 + radius 2개), 형식/범위 검증, atomic fallback·cleanup, Global/Scoped 적용. `@hm-design/ui/theme` export |
|
||||
| `themes/drafts/` | Runtime MVP 제안 | 디자인팀의 Theme 값 초안·검수 이력. Git 커밋만으로 운영 Theme이 바뀌지 않으며 패키지에도 넣지 않음 |
|
||||
| `themes/*.json` | 현재 구현 | `themes/default.json`은 공식 Default Color Source of Truth. 검증된 top-level JSON은 Theme CDN 배포 단위이며 Git push와 CDN publish는 별도 단계 |
|
||||
| 서비스 앱의 bootstrap | 개발팀 앱 | 패키지 버전 설치, themeId/mode 결정, API/CDN fetch·캐시·실패 처리, 검증된 값 적용 |
|
||||
|
||||
집계 기준 Commit은 `3ebc84e32cf91298a2a4d8046753244c499fd719`다. `scripts/theme-contract.mjs`가 `contract.ts`의 공개 Key·Property·type 항목을 추출한 `definitions.length`는 **94개(색상 92개 + radius 2개)**다. `Object.keys(themes/default.json의 tokens).length`는 색상 직접 설정값 **92개**이며 radius는 JSON에 없고 CSS Template에서 기본값을 제공한다. `scripts/theme-defaults.mjs --check`는 JSON + `scripts/theme-templates/{primitives,default}.css` → `packages/ui/src/theme/{primitives,default}.css` 및 `default-values.generated.ts`의 **94개 계약 기본값** 연결을 확인한다. 공개 CSS의 계산·Component 매핑 변수 선언 수는 이 Runtime 입력 수와 별도 집계다.
|
||||
|
||||
패키지 공개 파일은 `package.json`의 export·포함 목록과 빌드 결과로 확인한다. 기본 CSS와 컴포넌트 CSS 규칙은 패키지 버전에 묶인다. 외부 발행 대상은 계약에 등록된 **기존 Semantic Token 값**이며, 변경된 JSON/CSS 초안을 자동으로 운영 앱에 노출하지 않는다. 필요해지면 `packages/ui`와 `apps/storybook`으로 재배치해도 Git 저장소는 하나로 유지한다.
|
||||
|
||||
검증 계약은 Storybook·서비스 앱·Theme Publish가 공유해야 한다. 현재 검증·적용 도우미는 `@hm-design/ui/theme`에서 공개한다. 네트워크 URL, tenant 식별, 인증, 갱신 시점은 개발팀이 서비스 앱에서 관리한다.
|
||||
|
||||
@@ -43,7 +43,9 @@ Primitive (설계·빌드 시 관리) → Semantic (컴포넌트 참조) → Com
|
||||
|
||||
컴포넌트는 `blue-600` 같은 Primitive나 `#2563eb`, `8px` 같은 실제 값을 직접 참조하지 않는다. Tailwind를 쓰는 경우에도 `bg-primary`의 `--color-primary` → `--primary` → `--hm-sem-action-primary` adapter 연결을 확인한다. **Runtime override는 공개 allowlist의 Semantic/Theme palette 값만** 허용한다. Primitive, 컴포넌트 전용 내부 변수, 임의 CSS selector/rule/JavaScript는 Publish 대상이 아니다.
|
||||
|
||||
현재 allowlist는 `packages/ui/src/theme/contract.ts`의 83개 입력이다(색상 Semantic/Theme palette와 input/container radius). 정확한 이름·타입·기본값·허용 범위는 이 계약과 `runtime-theme-contract.md`를 따른다. Shadow geometry는 현재 공개 입력이 아니다. Typography와 spacing은 실제 사용처와 레이아웃 영향 검토 후 개별 등록한다. 문서에 예시가 있다는 이유로 곧바로 Runtime 허용 Token이 되지 않는다.
|
||||
현재 allowlist는 `packages/ui/src/theme/contract.ts`의 94개 입력이다(색상 92개: Semantic/Theme palette/Gradient stop, input/container radius 2개). 정확한 이름·타입·기본값·허용 범위는 이 계약과 `runtime-theme-contract.md`를 따른다. Shadow geometry는 현재 공개 입력이 아니다. Typography와 spacing은 실제 사용처와 레이아웃 영향 검토 후 개별 등록한다. 문서에 예시가 있다는 이유로 곧바로 Runtime 허용 Token이 되지 않는다.
|
||||
|
||||
집계 기준 Commit은 `3ebc84e32cf91298a2a4d8046753244c499fd719`다. `scripts/theme-contract.mjs`가 `contract.ts`의 공개 Key·Property·type 항목을 추출한 `definitions.length`는 **94개(색상 92개 + radius 2개)**다. `Object.keys(themes/default.json의 tokens).length`는 색상 직접 설정값 **92개**이며 radius는 JSON에 없고 CSS Template에서 기본값을 제공한다. `scripts/theme-defaults.mjs --check`는 JSON + `scripts/theme-templates/{primitives,default}.css` → `packages/ui/src/theme/{primitives,default}.css` 및 `default-values.generated.ts`의 **94개 계약 기본값** 연결을 확인한다. 공개 CSS의 계산·Component 매핑 변수 선언 수는 이 Runtime 입력 수와 별도 집계다.
|
||||
|
||||
기본 Theme은 `@company/ui`가 배포하는 CSS에 포함하고 앱이 초기 렌더 전에 로드한다. Runtime 값이 없거나 가져오기·검증에 실패해도 기본값으로 UI가 렌더링되어야 한다. 현재 Light/Dark 구분은 없으며 단일 HM Theme 값을 기준으로 한다([테마 토큰 가이드](테마-토큰-가이드.md) 참조).
|
||||
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
RESULT: PARTIAL. 승인된 두 Gradient의 구현·빌드·브라우저 검증은 PASS다. Guard의 패키지 범위 및 동적 스타일 NOT VERIFIED는 보존한다. Git Commit/Push 결과와 최종 SHA는 작업 최종 응답에서 기록한다.
|
||||
|
||||
> 이 문서는 Gradient 추가 당시의 검증 기록이다. 현재 Foundation Color에서는 공통 Background 3개만 미리보기하고 Button 전용 미리보기는 제거했다. 실제 Button·Dashboard Gradient와 당시 검증 결과는 보존한다. [현재 표시 계약](../guidelines/runtime-theme-contract.md)을 따른다. 현재 문서의 개인 식별 정보 정리는 과거 Git 객체나 Commit Author/Committer를 삭제하지 않는다.
|
||||
|
||||
## 기준과 범위
|
||||
|
||||
- 공식 경로 `D:\디자인시스템\HMDesign-Gitea-Transfer`, `main`, origin `https://gitea.hmac.kr/b25027/HMDesign.git`.
|
||||
@@ -64,9 +66,9 @@ SCOPE-001은 package 계약·생성값·Template이 증명된 소비 Storybook g
|
||||
## Git Identity와 인증
|
||||
|
||||
- 기존 전역 `user.name`과 이전 Commit의 Author/Committer는 Windows PC 이름을 포함했다. 기존 이메일은 PC 호스트명으로 구성된 주소는 아니지만 공식 Gitea 기본 이메일과 달랐다. 기존 이력과 전역 설정을 보존했다.
|
||||
- 기존 Credential Manager의 HTTPS credential로 공식 Gitea `/api/v1/user` 및 `/api/v1/user/emails`를 조회했다. 인증 계정 `b25027`, 실제 프로필 이름 `김수현`, 기본 이메일 `shkim4@samaneng.com`의 primary/verified 상태를 확인했다. 인증된 Push 사용자와 Commit 작성자는 별도로 확인한다.
|
||||
- 기존 Credential Manager의 HTTPS credential로 공식 Gitea `/api/v1/user` 및 `/api/v1/user/emails`를 읽기 전용 조회했다. 공식 계정의 프로필과 기본 이메일 primary/verified 상태 일치를 확인했다. 인증된 Push 사용자와 Commit 작성자는 별도로 확인하며 개인 이름·이메일은 문서에 중복 기재하지 않는다.
|
||||
- `/api/v1/user/settings`의 `hide_email=false` 확인. 이메일 숨김 옵션은 존재하지만 현재 활성화되지 않았다. 서버의 정확한 noreply 주소는 확인하지 않았으며 임의 생성하지 않았다. 현재 확인된 공개 기본 이메일을 사용한다. Git Commit의 Author/Committer 이메일은 저장소 이력에 기록된다.
|
||||
- 현재 저장소 `.git/config`에만 `user.name=김수현`, `user.email=shkim4@samaneng.com` 적용. `git var GIT_AUTHOR_IDENT`와 `GIT_COMMITTER_IDENT`도 이 값으로 해석됨을 확인했다.
|
||||
- 현재 저장소 Local Git 작성자 설정만 공식 계정에 맞춰 적용했고 `git var GIT_AUTHOR_IDENT`와 `GIT_COMMITTER_IDENT`도 해당 설정으로 해석됨을 확인했다. 실제 이름·이메일은 Git 설정과 Gitea 계정에서 관리한다.
|
||||
- 작업 프로세스의 Author/Committer 및 Git config 환경 Override는 없었다. 별도 core.hooksPath/사용자 정의 Git hook도 없었다. 현재 생성하는 Commit의 실제 메타데이터를 Commit 후 다시 확인한다.
|
||||
- 원격 URL·기존 Credential Manager·인증 방식·전역 config를 변경하지 않았고 재로그인·Token 재발급·GitHub Push·이력 재작성도 하지 않았다. 인증 비밀값은 출력·파일 저장하지 않았다.
|
||||
- 관련 12개 파일만 Stage, Staged Diff 검토 후 요청된 `feat(theme): add brown and orange background gradients`로 일반 Commit/Push한다. Commit/Push 직전 원격 main이 시작 SHA에서 변경되면 중단한다. 신규 Commit의 Gitea 계정 attribution 및 Local/Remote SHA·Working Tree는 최종 응답에서 기록한다.
|
||||
Reference in new issue
Block a user