docs(sw): align viewer AI docs with open button, documents list and hover
- AI_USAGE.md §0.4: viewer hover changes only text and icon to #FFC600 (no #266651 face) - AI_USAGE.md §0.2: file open is the onDocumentOpen button next to the logo, samples are documents - COMPONENT_CATALOG.md §9: SWViewerHeader open button position, logoMenu marked compatibility only
This commit is contained in:
1 parent
d71db6c5b0
commit
d03cc910b2
2 files changed
+3
-3
No files matched your search
@@ -42,7 +42,7 @@ SW 패키지에는 Header·Popup 계열이 두 벌 있습니다. 화면마다 **
|
||||
| Header | `SWHeader`, 또는 `<SWTheme>` 안의 개별 컨트롤(`SWHeaderHome`, `SWHeaderDocumentTitle`, `SWHeaderLayerMenu`, `SWHeaderColorMenu`, `SWHeaderLineStyleMenu`, `SWHeaderTextStyleMenu`, `SWHeaderDimensionStyleMenu`, `SWHeaderActions`, `SWHeaderWindowControls`, `SWHeaderProperties` …) | `SWViewerHeader`(`groups` 데이터 + `trailing`), 오른쪽 끝·`custom` 버튼 `SWViewerHeaderButton`, 상태 `SWViewerStatus` |
|
||||
| Dropdown | 각 필드 Dropdown(`SWHeaderLayerMenu` …) | `type: "menu"` 항목, 단독·우클릭은 `SWViewerMenu` |
|
||||
| 팝업·설정창 | `SWPopup`(`titleActions`, `footer`) + `SWPopupSection` / `SWPopupRow` + `SWHeaderInput`, 레이어·색상 행 `SWPopupPropertyRow`(Header 필드 Dropdown은 Header 전용), 게이지바 `SWSlider`(`appearance`), 선택 목록 `SWSelect`, 속성창 `SWHeaderPropertyPanel`, 속성Bar `SWHeaderPropertyBar` | `SWViewerPanel`(이동·크기 조절·접기·`modal`, `headerActions`, `footer`) + `SWViewerSection` / `SWViewerField` / `SWViewerSwitch` / `SWViewerSlider` / `SWViewerInput` / `SWViewerButton` / `SWViewerBadge` / `SWViewerHint`, 선택 목록 `SWSelect`(뷰어 패널 토큰으로 표시) |
|
||||
| 로고(홈) 버튼 메뉴 | `SWHeader`의 `homeMenu`(`SWHomeMenu` 데이터, 최근파일 `SWRecentFiles`, Figma 26:10591). 기본 숨김 → 로고 클릭 열기 → 다시 클릭 닫기 | **사용하지 않음.** `SWViewerHeader`에는 홈 메뉴 Props가 없고 로고 클릭은 `onHomeClick`만 호출합니다. 파일 열기·샘플은 Header `groups`의 `button`·`menu` 항목 |
|
||||
| 로고(홈) 버튼 메뉴 | `SWHeader`의 `homeMenu`(`SWHomeMenu` 데이터, 최근파일 `SWRecentFiles`, Figma 26:10591). 기본 숨김 → 로고 클릭 열기 → 다시 클릭 닫기 | **사용하지 않음.** `SWViewerHeader`에는 홈 메뉴 Props가 없고 로고 클릭은 `onHomeClick`만 호출합니다. 파일 열기는 로고 오른쪽 버튼(`onDocumentOpen`·`documentOpenLabel`), 샘플 목록은 파일명 클릭 목록(`documents`·`activeDocumentId`·`onDocumentSelect`)이며 `groups` 항목으로 만들지 않습니다([VIEWER.md](./VIEWER.md) §2) |
|
||||
| 하단 Footer | `SWFooter`(+ 바 안 명령창 `command={<SWFooterCommandLine />}`, 좌표 `status`, `SWFooterLayoutTabs`, 부품 `SWFooter*`), [FOOTER.md](./FOOTER.md) | **사용하지 않음.** 뷰어 화면에는 하단 명령 막대가 없습니다. 도면 공간 탭은 `SWViewerHeader`의 `tabs` 항목 |
|
||||
| 버튼·탭·토글 | `SWToolButton` / `SWToolGroup` | Header 항목 `type: "button" \| "toggle" \| "tabs" \| "switch"`, 패널 안 `SWViewerButton` |
|
||||
| 아이콘 | 패키지 자산(필드 안 아이콘) | 프로그램 아이콘 16px, 직접 그린 아이콘은 `SWViewerIcon`으로 감쌈 |
|
||||
@@ -73,7 +73,7 @@ SW 패키지에는 Header·Popup 계열이 두 벌 있습니다. 화면마다 **
|
||||
| 단계 | SW 일반 모드 | SW 뷰어 모드 |
|
||||
|---|---|---|
|
||||
| ① 기존 재사용 | `SWHeader` Props(`hiddenControls`·`menuOrder`·`controls`·`documentOpenPlacement`·`leading`·`tools`) → 개별 컨트롤 조합 → `SWPopup` children → `SWToolButton` / `SWToolGroup` | `SWViewerHeader`의 `groups` 항목(`button`·`toggle`·`menu`·`tabs`·`switch`·`custom`)과 `trailing` → `SWViewerMenu` → `SWViewerPanel` children·`footer`·`headerActions` + 패널 컨트롤 |
|
||||
| ② 소비 프로젝트에 신규 | 토큰 `--hm-sw-header-*`, Popup 안은 `--hm-sw-property-*`. 상태 표현은 [DESIGN_RULES.md](./DESIGN_RULES.md) §4(테두리형 gradient 링, 텍스트형 글자만 `#FFC600`). 안쪽 입력은 `SWHeaderInput` 재사용(예제 D) | 토큰 `--hm-sw-viewer-*` + 공유 `--hm-sw-header-*`(면·외곽선). 상태 표현은 [DESIGN_RULES.md](./DESIGN_RULES.md) §11 / VIEWER.md §2(Hover `#266651` 면, Active·Pressed 글자 `#FFC600`, Focus 2px `#FFC600`). 안쪽은 뷰어 공개 컴포넌트 재사용(예: 새 패널 콘텐츠 = `SWViewerField` + `SWViewerInput`, 새 Header 도구 = `custom` 항목 안 `SWViewerHeaderButton`, 아이콘 = `SWViewerIcon`) |
|
||||
| ② 소비 프로젝트에 신규 | 토큰 `--hm-sw-header-*`, Popup 안은 `--hm-sw-property-*`. 상태 표현은 [DESIGN_RULES.md](./DESIGN_RULES.md) §4(테두리형 gradient 링, 텍스트형 글자만 `#FFC600`). 안쪽 입력은 `SWHeaderInput` 재사용(예제 D) | 토큰 `--hm-sw-viewer-*` + 공유 `--hm-sw-header-*`(면·외곽선). 상태 표현은 [DESIGN_RULES.md](./DESIGN_RULES.md) §11 / VIEWER.md §2(Hover·Active·Pressed = 배경 변경 없이 글자·아이콘만 `#FFC600`, Focus 2px `#FFC600`). 안쪽은 뷰어 공개 컴포넌트 재사용(예: 새 패널 콘텐츠 = `SWViewerField` + `SWViewerInput`, 새 Header 도구 = `custom` 항목 안 `SWViewerHeaderButton`, 아이콘 = `SWViewerIcon`) |
|
||||
| ③ 참고 값 없음 | 기존 HMDesign SW 규칙과 조화: Font Weight 400/500/700만, Light/Dark 없음, 전역 CSS(`html`·`body`·`*`) 금지, SW 공통 토큰 우선. 토큰에 없는 값은 결과 보고에 **"AI 구성 값 — 디자인 확인 필요"**로 표시 | 같음 |
|
||||
|
||||
- 뷰어 패널 안에 `@hm-design/ui` 컨트롤을 넣는 것은 `SWViewerPanel` `children`이 `ReactNode`라 가능하지만, `SWViewer*` 컨트롤로 안 될 때만 씁니다(별도 설치·외형 확인 필요, [VIEWER.md](./VIEWER.md) `SWViewerPanel` 절).
|
||||
|
||||
Reference in new issue
Block a user