Foundation Color 표시 정리 — 2026-10-11

최종 표시 요청과 추가 문구 정리를 함께 반영했다. 실제 정적 Storybook에서 한맥그린·한맥브라운·한맥오렌지 3개 그룹, 각 8개·총 24개 컬러칩을 확인했다. 개별 단계명·현재 HEX·Default 강조를 유지한다. Theme·Token·Gradient·Button·Dashboard 및 AI Guard 구현은 변경하지 않았다. Guard의 원본 NOT VERIFIED는 별도로 보존한다.

기준과 변경 범위

공식 경로: D:\디자인시스템\HMDesign-Gitea-Transfer, 브랜치 main, origin https://gitea.hmac.kr/b25027/HMDesign.git.
시작 Local/Remote SHA: d6d6eb53afa57cc267e5ff337177e00c7d2e92f2. 시작 Working Tree는 깨끗했다.
Scope: STORYBOOK_ONLY / React. 기존 Foundation/Color, All export 및 foundation-color--all ID 유지. 최종 build index의 기존 292개 Story ID 유지.
실제 변경 코드는 Color Story 하나다. ReferencePage / ReferenceSection / Computed Property Hook, 공통 StoryPage, 기존 팔레트 행·Swatch·Default 강조 CSS를 그대로 재사용한다.
신규 업무 화면·Navigation·검색·Form control이 없으므로 Pattern / FilterBar / Navigation 선택 및 control Label·disabled/readOnly·focus 복귀 검증은 해당하지 않는다.

최종 표시

소개: 한맥 브랜드 컬러. 그룹 설명의 단계 순서 나열 문구는 제거하며 빈 설명 paragraph도 렌더하지 않는다.
각 그룹의 단계 순서는 기존 Light 4·Light 3·Light 2·Light 1·Default·Dark 1·Dark 2·Dark 3이며, 개별 칩에 단계명과 HEX를 표시한다.
Brown Deep 및 Orange Light·Mid·Dark·Deep의 별도 칩, Accent·Semantic·Gradients 섹션 전체, Token 상세와 Canonical Token·CSS Variable·Runtime Key 등 개발용 설명을 제거했다.
Default 3개 모두 기존 2px border와 font-weight: 700 강조를 유지한다. 작은 화면의 기본색 문구는 기존 칩 폭에 따라 2줄이며 HEX는 읽을 수 있다.
실제 색은 공개 @hm-design/ui/theme 계약의 기존 CSS property를 소비한다. Hook이 24개 property의 현재 computed 값을 읽으며 Story에 HEX 원본을 복제하지 않는다.

최종 통합 검증

항목	결과
AI Guard 회귀	Guard 94/94 + 증거 연결 20/20 + 요구사항 5/5 = 119/119 PASS, 실패·skip 0. 원본 테스트·Guard 소스 변경 없음
Component 회귀	`node --test scripts/publisher-components.test.mjs`: 9/9 PASS. FilterBar, Checkbox/Progress asChild·기본 root·Form, 소비자 style, CENTER DOM props, 반복 popup/페이지 ID, readOnly/disabled 검색 보호의 기존 기능 유지
타입 검사	`npm run typecheck` PASS: Theme defaults·패키지 build·root/UI/CENTER 타입 검사. 추가 문구 변경 후 영향받는 root `npm exec -- tsc -b` PASS
Storybook build	최종 `npm exec -- storybook build -o storybook-static --disable-telemetry` PASS. 선행 패키지 build와 Theme defaults 검사는 성공 결과를 재사용. 기존 bundler 성능 안내는 남음
최종 정적 Storybook	실제 React 렌더, 3개 그룹·24개 칩, 소개·그룹 문구 제거, 상세 설명 0개, 24개 Swatch/HEX/Default JSON 일치, 콘솔 error 0개
문서 정합성	브랜드 단계와 Runtime 계약의 현재 표시 안내 갱신. 과거 보고서는 본문 결과를 보존하고 현재 표시 링크만 보완. 내부 문서 링크 검사 및 Git diff 확인

최종 정적 빌드는 http://127.0.0.1:6322/storybook/iframe.html?id=foundation-color--all&viewMode=story에서 검사했다. 네 폭 모두 그룹 3개·칩 24개, 행별 칩 8개, 표시 HEX와 computed backgroundColor 및 Default JSON의 24개 값이 일치했다. 단계 순서 설명·개발용 설명·details는 0개다.

Viewport	Document clientWidth / scrollWidth	Palette row clientWidth / scrollWidth	행 clientHeight / scrollHeight
390	390 / 390	358 / 936	176 / 176
768	768 / 768	722 / 936	176 / 176
1280	1280 / 1280	1203 / 1203	156 / 156
1440	1440 / 1440	1200 / 1200	156 / 156

측정 높이는 1100px이며 문서 clientHeight / scrollHeight는 모두 1100 / 1100이었다. 작은 화면은 기존 overflow-x: auto 팔레트 행 안에서 스크롤하며 문서 전체 가로 넘침은 없다. 390px 개발 미리보기에서 첫 행의 끝까지 실제 가로 스크롤하여 Dark 3 접근을 확인했다. 숨김 absolute 알림은 기존 공통 Toaster이며 변경하지 않았다. 실제 스크린리더·실기기 터치 및 모든 Component × viewport 전수 검증은 NOT VERIFIED다.

Guard 원본과 별도 Runtime 근거

node scripts/ai-generation-guard.mjs --target . --profile STORYBOOK --scope PARTIAL --files src/foundation/color.stories.tsx --json을 실행했다. 이후 사용자 추가 요청으로 Story가 바뀌어 해당 범위만 재검사했다. Storybook profile에는 Production 전용 --result를 전달하지 않는다.

최종 원본 status / staticStatus / runtimeStatus: NOT VERIFIED, FAIL 0. TOKEN-002 5개는 StoryPage className, ColorChip 동적 style/property, 공유 helper의 Specimen 동적 값이다. CSS styleEvidence: STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS / FINAL NOT VERIFIED. 결합 styleVerification은 생성하지 않았다. 별도 실제 화면에서 ColorChip의 유한 후보 24개·현재 CSS 적용을 확인했지만 미실행 helper 위치나 원본 Guard 판정으로 확장하지 않는다.

로컬 실행 증거는 _local/foundation-color-cleanup-20261011/에 저장했다: guard-tests.log, guard-support-tests.log, component-tests.log, typecheck.log, typecheck-final.log, storybook-build-final.log, guard-final.json, runtime-final.json, color-final-{390,768,1280,1440}.png. 첫 요청 상태의 Guard·Runtime 증거도 별도 파일로 보존했다.

보존과 Git

시작 SHA와 비교한 themes/, packages/, scripts/, .storybook/, Theme entry·Foundation CSS·Dashboard 소스 및 package/lock은 변경 없음. 실제 Palette Key·색상값·공통/전용 Gradient·Component API와 기능을 보존한다. 다른 Story를 추가·교체하지 않았다.

관련 Story와 문서 6개만 Stage하고 Staged Diff를 검토한다. Commit/Push 직전 원격 main이 시작 SHA 그대로인지 확인하며 일반 Push를 수행한다. 최종 Commit SHA·Local/Remote 일치·Working Tree 및 작업 완료 시간은 Push 후 최종 응답에서 기록한다.

Started At: 2026-10-11 15:10:48 KST. Estimated Duration: 최초 약 25분. 완료 시각·실제 소요·차이는 최종 상태 확인 뒤 기록한다.

6.8 KiB Raw Blame History Unescape Escape