feat(sw): bold 9-slice footer tabs and viewer panel bottom edge

User-approved 2026-10-22 SW changes (CSS only, public API unchanged).
- Footer Model / Layout tab labels 700 in every state, letter-spacing -5%;
  the name-edit input keeps 400.
- Slanted Layout tab and Model tab draw their SVG assets as 9-slice
  border-images: 97px / 73px stay the minimum, the slant and corners keep
  their size and only the flat middle grows with a longer label (max 12em,
  then ellipsis, like the rounded tabs). Hover surfaces use a union mask of
  the same asset (no mask-border), so Chromium and Firefox match. The
  default width renders pixel-identical to the previous drawing; the 8px
  slant / Model joint is unchanged.
- Viewer panel body: the 7px bottom padding (inside the scrollport) becomes
  a 2px transparent bottom border, so scrolled rows stop 2px above the
  frame border instead of running into it. SWPopup keeps its 7px.
- AI docs: DESIGN_RULES, AI_USAGE, FOOTER, VIEWER updated.
- Tests: text-weight and footer-design-review expect the 700 labels and read
  the Model surface from the 9-slice ::before.
This commit is contained in:
shkim4 committed 2026-10-22 15:32:07 +09:00
1 parent 449398e3de
commit fc65b2e836
8 files changed
+88 -36

No files matched your search

+1
View File
@@ -95,6 +95,7 @@
- Escape는 Focus가 패널 안에 있을 때 그 패널만 닫습니다. 비모달 패널은 바깥 클릭으로 닫히지 않습니다(참고 뷰어와 동일, 도구 창). 마지막으로 누른 패널이 맨 앞으로 옵니다.
- **콘텐츠 우선순위:** `children`·`footer`는 타입상 `ReactNode`이고 소스 주석도 자유 콘텐츠(“any component”)라고 적습니다. 그래도 기본은 `SWViewerSection`·`SWViewerField`·`SWViewerSwitch`·`SWViewerSlider`·`SWViewerInput`·`SWViewerButton`·`SWViewerBadge`·`SWViewerHint`와 선택 목록 `SWSelect`(축척 지정 단위, 뷰어 패널 토큰으로 표시) 우선입니다. 이것으로 안 되는 컨트롤(예: Select·Checkbox·표)만 `@hm-design/ui` 컴포넌트나 소비 프로젝트 요소를 넣을 수 있습니다. `@hm-design/ui`는 SW 패키지 dependency가 아니어서 별도 설치(사용 유형 혼합)가 필요하고, `SWPopup`과 달리 뷰어 패널 안 `@hm-design/ui` 외형 정합성은 문서화·검증 기록이 없으므로 결과 보고에 “디자인 확인 필요”로 적습니다. Header 안에는 `@hm-design/ui` DropdownMenu 등을 직접 두지 않습니다(§1 표).
- **콘텐츠 교체:** 같은 프레임에 다른 `children`을 넣습니다(레이어 목록 / 옵션 / 속성 / 입력 폼 — Storybook `SW/Viewer › Settings Popup`). 프레임을 복사하거나 `hm-sw-viewer-*` class로 새 팝업을 만들지 않습니다.
- **본문 하단 경계(2026-10-22):** 뷰어 패널 본문은 아래 7px 여백 대신 스크롤 영역 밖의 2px 투명 경계를 둡니다(패키지 CSS). 스크롤된 목록 행은 테두리 2px 위에서 잘리고, 맨 아래로 스크롤하면 마지막 행이 다 보입니다. 소비 코드에서 하단 여백·`padding`을 덧대지 않습니다. 일반 `SWPopup`은 7px 그대로입니다.
### 4.1 레이어 Popup — 개별 표시·숨김은 전구 아이콘 버튼, 전체는 Switch (필수, 2026-10-22)