docs(sw): ask the user before substituting or omitting a missing icon

When no official public icon export covers a requested icon, the AI guides now
require asking the user first: approval to use the Storybook icon or an SVG asset
(3-A), or an asset / replacement choice when HMDesign has none (3-B). Creating,
copying, replacing or finally omitting the icon before the answer is not allowed.
Consumer-project use approval is kept separate from official package export
registration. AI_GUIDE shared copies synced.
This commit is contained in:
shkim4 committed 2026-11-05 17:59:20 +09:00
1 parent c7926aeffd
commit 42f0cb7d0b
9 files changed
+31 -18

No files matched your search

+1 -1
View File
@@ -141,7 +141,7 @@
| 색·Typography | DESIGN_RULES §2·§3 | DESIGN_RULES §2·§3 | VIEWER.md `SWViewerHeader`·디자인 변경 절 | DESIGN_RULES §2·§3 |
| 크기·여백 | DESIGN_RULES §4 | DESIGN_RULES §1 | VIEWER.md 디자인 변경 절(52px Header 등 실측값) | 카드·간격 변경 금지(승인 디자인) |
| Border·Radius·배경·그림자 | DESIGN_RULES §2·§4 | DESIGN_RULES §2·§8 | VIEWER.md `SWViewerPanel` 절(프레임은 SWPopup과 같음) | 공개 입력만 |
| 아이콘 | `lucide-react`(패키지 의존성) | 사용자·프로젝트 제공 에셋 → 패키지 공개 Export 중 같은 기능 → 없으면 미지원 보고(외부 라이브러리·AI 생성 SVG·Storybook 파일로 대체 금지). 시안 기반 Header 도구 아이콘·창 제어 버튼은 `@hm-design/sw` `ai/AI_USAGE.md` §5 | 프로그램 제공 16px `currentColor` 아이콘, 외곽선은 `SWViewerIcon`. 선택 순서는 SW 일반 모드와 같음(`AI_USAGE.md` §5) | Core 내장 |
| 아이콘 | `lucide-react`(패키지 의존성) | 사용자·프로젝트 제공 에셋 → 패키지 공개 Export 중 같은 기능 → 없으면 코드 작성 전에 사용자에게 먼저 확인(Storybook에만 있으면 소비 프로젝트 사용 승인 또는 SVG 제공, HMDesign에도 없으면 에셋 제공 또는 대체 여부. 답변 전에는 외부 라이브러리·AI 생성 SVG·Storybook 파일로 대체하거나 생략 확정 금지. 사용 승인은 공식 패키지 등록 권한이 아님). 시안 기반 Header 도구 아이콘·창 제어 버튼은 `@hm-design/sw` `ai/AI_USAGE.md` §5 | 프로그램 제공 16px `currentColor` 아이콘, 외곽선은 `SWViewerIcon`. 선택 순서는 SW 일반 모드와 같음(`AI_USAGE.md` §5) | Core 내장 |
| 스크롤바 | `ScrollArea`(Radix), DESIGN_RULES §6 | 전용 디자인 없음 — 브라우저 기본(AI_USAGE §2) | 전용 디자인 없음 — 패널 본문 스크롤은 `SWViewerPanel` | Core 내부 Zoom/Pan |
| Hover / Active / Focus / Disabled | DESIGN_RULES §5 | DESIGN_RULES §4 | VIEWER.md `SWViewerHeader` 절 상태 표현 | Core 내장 |
| Popup·Panel | `Dialog`·`AlertDialog`·`Sheet`·`Drawer`·`Popover` | `SWPopup` + `SWPopupSection`/`SWPopupRow` | `SWViewerPanel`(+ `modal`) + `SWViewerSection`/`SWViewerField` | Core 팝업 / HM Dialog / 어댑터 |
+1 -1
View File
@@ -356,6 +356,6 @@ Strana 비교 캡처는 `D:\Strana\_verification\header-rework-20261029\renders\
- **확인된 사실:** Figma StrAna-SW(`4y8lTK1E1hAGYiMcYZwuNe`) 원본 내보내기(adbb034, §9.2). 기본 `#B6D0C9` / Hover `#FFC600` 두 장, 24 × 24, `<img>`로 쓰면 SVG 내부 id 충돌 없음. `SWToolButton`의 `icon`·`hoverIcon`과 그대로 호환(Process Header에서는 `pressed`도 Hover 그림).
- **미확인:** 원작자·사용 권한·라이선스. 프레임 이름의 " 1" 접미사는 외부 SVG를 Figma로 가져왔을 가능성을 시사(추정).
- **Export 전제 조건:** ① 5개 아이콘의 출처·사용 권한(공개 패키지 배포 포함) 사용자 확인, ② 아래 구조와 이름의 별도 승인, ③ `public-api.approved.json` 갱신 승인.
- **Export 전제 조건:** ① 5개 아이콘의 출처·사용 권한(공개 패키지 배포 포함) 사용자 확인(소비 프로젝트에서의 사용 승인은 이 조건을 충족하지 않음 — `AI_USAGE.md` §5.2 3순위 4번), ② 아래 구조와 이름의 별도 승인, ③ `public-api.approved.json` 갱신 승인.
- **제안 구조(미구현, 승인 전 문서화·사용 금지):** `swFooterToolIcons` 선례와 같은 방식. `packages/sw/src/components/sw-process-header/icons.tsx`에 `swProcessToolIcons: Record<SWProcessToolIconName, { icon: ReactElement; hoverIcon: ReactElement }>`(기능 키 `help` · `view3d` · `settings` · `menu` · `exit`, `<img width={24} height={24} alt="" />`), SVG 10개는 같은 폴더 `assets/`로 이동(data URI 번들), `sw-process-header/index.ts`에서 Export. 사용: `<SWToolButton appearance="pill" {...swProcessToolIcons.help} onClick={openHelp}>도움말</SWToolButton>`. 지원 범위는 `SWProcessHeader`의 `tools`(두 appearance), `SWHeader` `tools`는 별도 검증.
- **Export 시 함께 할 일:** Story를 공개 Export로 전환하고 Fixture 중복 제거, `COMPONENT_CATALOG.md` §11 Export 추가, `AI_USAGE.md` §5.2 공개 목록 갱신·§5.3 Storybook 전용 목록에서 제외, `check:ai-docs` · `typecheck:sw` · `build:sw` · `public-api` 검사 · Tarball 소비 프로젝트 Import·Hover/Pressed 확인.