From 40c5b898146cbba10d71043a6bdae5ff189f6707 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=88=98=ED=98=84?= Date: Tue, 20 Oct 2026 09:58:13 +0900 Subject: [PATCH] fix(sw): correct footer auxiliary button state colors --- docs/sw/sw-footer-figma-mapping-2026-10-20.md | 8 ++- packages/sw/ai/COMPONENT_CATALOG.md | 4 +- packages/sw/ai/DESIGN_RULES.md | 6 +- packages/sw/ai/FOOTER.md | 6 +- .../sw/src/components/sw-footer/icons.tsx | 53 +++++++++++++----- packages/sw/src/theme/sw-footer.css | 33 +++++++---- .../footer/aux-buttons/26-9248.png | Bin 0 -> 13960 bytes .../footer/aux-buttons/26-9267.png | Bin 0 -> 13885 bytes .../footer/aux-buttons/26-9298.png | Bin 0 -> 14394 bytes .../footer/aux-buttons/26-9320.png | Bin 0 -> 13855 bytes .../footer/aux-buttons/26-9381.png | Bin 0 -> 14067 bytes .../footer/aux-buttons/26-9412.png | Bin 0 -> 13734 bytes src/sw/sw-footer-stories.css | 8 ++- src/sw/sw-footer.stories.tsx | 41 ++++++++++++-- 14 files changed, 118 insertions(+), 41 deletions(-) create mode 100644 src/sw/assets/figma-reference/footer/aux-buttons/26-9248.png create mode 100644 src/sw/assets/figma-reference/footer/aux-buttons/26-9267.png create mode 100644 src/sw/assets/figma-reference/footer/aux-buttons/26-9298.png create mode 100644 src/sw/assets/figma-reference/footer/aux-buttons/26-9320.png create mode 100644 src/sw/assets/figma-reference/footer/aux-buttons/26-9381.png create mode 100644 src/sw/assets/figma-reference/footer/aux-buttons/26-9412.png diff --git a/docs/sw/sw-footer-figma-mapping-2026-10-20.md b/docs/sw/sw-footer-figma-mapping-2026-10-20.md index 33a6820..5db5b4c 100644 --- a/docs/sw/sw-footer-figma-mapping-2026-10-20.md +++ b/docs/sw/sw-footer-figma-mapping-2026-10-20.md @@ -30,6 +30,8 @@ | 34 | 26:10056 | command (펼침) | 명령창 | `SWFooterCommandLine expanded` | 270px | 〃 | | 35 | 26:10097 | 레이아웃 분리 | 전체 | `SWFooter`(+ `SWFooterLayoutTabs`) | 하단 72px 전체 | 기본 Footer, Figma Variant · Footer 전체 | +보조 참고(35개 목록 밖, 2026-10-20 상태 수정 때 확인): 26:10104의 보조기능 버튼은 Component Set btn_객체스냅 26:9248 · btn_선택효과 26:9267 · btn_직각교차 26:9298 · btn_격자스냅 26:9320 · btn_격자배경 26:9381 · btn_선가중치 26:9412(Default / Variant2 / Variant3)의 인스턴스입니다. 기준 이미지 `src/sw/assets/figma-reference/footer/aux-buttons/`, Story = Hover / Active / Selected / Disabled. + 26:10097 안의 보조기능 버튼(btn_객체스냅 …, 26:10104)·측면 버튼(26:10189 / 26:10192)·구분선·bg_vacant·menu_bg도 같은 노드에서 읽어 `SWFooterAuxGroup`·`SWFooterSideButton`·`SWFooterMenu` 면으로 구현했습니다. ## 2. Storybook `SW/Footer` @@ -56,8 +58,10 @@ | Model 선택 | Figma On = 갈색 / 실제 화면 = 주황 | Figma(갈색) | Figma 우선 | | Layout 01 단독 | 26:10097에는 Model 없이 Layout 01만 | `modelLabel={false}` 지원, 마지막 탭은 항상 사선 | 두 구성 모두 표현 | | Variant5 / 6 의미 | 이름 없음(검정 면 + 빨강 글자) | 이름 편집 상태로 해석(Header 입력 편집 `#0F0D0A`·`#E60403`과 같은 값) | 해석 — 검토 필요 | -| 보조기능 켜짐 | Figma 없음 / 실제 화면 주황 테두리·글자 | 실제 화면 적용(아이콘은 자산 색 유지) | 주황 아이콘 자산 없음 | -| Hover(보조기능·측면 버튼), Disabled | Figma 없음 | 글자 `#FF5C00`, 40% | AI 구성 값 — 디자인 확인 필요 | +| 보조기능 Selected | Figma Variant2 = Variant3: 주황 그라데이션 테두리 + 아이콘·글자 `#FF5C00` | Figma 그대로(2026-10-20 수정: 아이콘을 `currentColor` 인라인 SVG로 바꿔 아이콘까지 주황) | — | +| 보조기능 Hover | 버튼 세트에 Hover 없음 | 노랑 테두리만(SW Header Figma Hover 토큰), 아이콘·글자 기본색 | 사용자 확정 2026-10-20 | +| 보조기능 Default 테두리 | Figma 갈색 그라데이션 | 그라데이션(2026-10-20 수정 전에는 단색 `#886D35`) | Figma 일치 | +| Hover(측면 버튼), Disabled | Figma 없음 | 글자 `#FF5C00`, 40% | AI 구성 값 — 디자인 확인 필요 | | 좁은 폭 | Figma 없음 / 실제 화면 | 빈 칸 축소 → ▲ 패널, 분류 ◀ ▶, 보조기능 아이콘만(1279px 이하), 명령창 최소 280 | 전환 폭·최소 폭은 AI 구성 값 | | 명령창 줄 수 | Figma 3줄(줄 14px) / 실제 화면 접힘 5줄 | Figma 3줄 | Figma 우선 | | 가이드 영상 | Figma는 6프레임 스토리보드(래스터) | `media`로 프로그램이 제공, Story만 프레임 순환 | 영상 자산은 프로그램 소유 | diff --git a/packages/sw/ai/COMPONENT_CATALOG.md b/packages/sw/ai/COMPONENT_CATALOG.md index 4dce90e..6d3f98f 100644 --- a/packages/sw/ai/COMPONENT_CATALOG.md +++ b/packages/sw/ai/COMPONENT_CATALOG.md @@ -162,7 +162,7 @@ SW **뷰어 모드** 전용 Export입니다(2026-10-19 추가, 참고 DWG/DXF | `SWFooter` | 72px 하단 막대: 보조기능 버튼 → 3 × 2 보조기능 → (바 안 명령창) → 명령 칸(68 × 47) + 분류 행(24) → 명령어 전체보기, 위 오른쪽 끝 Layout 탭 | `categories: SWFooterCategory[]`(필수), `categoryId`/`defaultCategoryId`/`onCategoryChange`, `activeToolId`, `onToolSelect(toolId, categoryId, tool)`, `slotCount`(17), `onSlotAdd(slotIndex, categoryId)`, `slotGuide`(`SWFooterGuideContent \| false`), `onCategoryAdd`, `auxItems`, `onAuxPressedChange`, `onAuxItemClick`, `auxAll`/`commandAll`(`SWFooterSideAction \| false`), `command`(바 안 명령창), `status`(바 위 왼쪽 좌표), `layoutTabs`, `trailing`, `label`, `