From 73e30242f246edfcee94b82106e9f3f0a5171457 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 10:38:42 +0900 Subject: [PATCH] fix(sw): stabilize footer command layout and overflow alignment --- docs/sw/sw-footer-figma-mapping-2026-10-20.md | 6 ++-- packages/sw/ai/COMPONENT_CATALOG.md | 2 +- packages/sw/ai/DESIGN_RULES.md | 4 +-- packages/sw/ai/FOOTER.md | 3 +- .../sw/src/components/sw-footer/SWFooter.tsx | 29 ++++++++++++------- packages/sw/src/theme/sw-footer.css | 7 ++++- src/sw/sw-footer.stories.tsx | 6 ++-- 7 files changed, 36 insertions(+), 21 deletions(-) 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 5db5b4c..96fe09b 100644 --- a/docs/sw/sw-footer-figma-mapping-2026-10-20.md +++ b/docs/sw/sw-footer-figma-mapping-2026-10-20.md @@ -62,7 +62,7 @@ | 보조기능 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 없음 / 실제 화면 | 빈 칸 축소 → ▲ 패널, 분류 ◀ ▶, 보조기능 아이콘만(1279px 이하), 명령창 최소 280, 바 안 명령창 구성의 칸 영역 = 남는 폭 × 0.57 | 전환 폭·최소 폭·비율은 AI 구성 값(비율은 두 실제 화면 재현) | | 명령창 줄 수 | Figma 3줄(줄 14px) / 실제 화면 접힘 5줄 | Figma 3줄 | Figma 우선 | | 가이드 영상 | Figma는 6프레임 스토리보드(래스터) | `media`로 프로그램이 제공, Story만 프레임 순환 | 영상 자산은 프로그램 소유 | | WIPEOUT · 객체스냅추적 아이콘 | 실제 화면에만 있음 | Story에서 lucide 아이콘(프로그램 제공 방식) | Figma 자산 없음 | @@ -79,7 +79,9 @@ | Storybook 렌더링(8개 Story, 실행 중인 6024) | PASS — Story별 Footer 수·콘솔 오류 확인 | | Figma ↔ 구현 1:1 비교(기본 Footer, 35 노드 Story) | PASS — 위치 측정: 보조기능 (76, 2), 명령 칸 396·y 1, 명령어 전체보기 1552, 분류 탭 Figma 대비 ≤ 12px | | 동작(실제 조합 Story) | PASS — 명령 선택, 분류 ←/→, 빈 칸 가이드 위치(가운데·4px 위)·클릭, 보조기능 토글, Layout 선택·F2 이름 변경·Delete·추가, 명령창 Enter·펼치기, ▲ 패널 열기·선택 후 닫힘·Escape 복귀 | -| 화면 폭 | PASS — 실제 조합 1920 → 12칸, 1440 → 10칸, 1280 → 명령 6 + ▲, 950 → 명령 4 + ▲·보조기능 아이콘만·분류 ◀ ▶ | +| 화면 폭 | PASS — 실제 조합 1920 → 12칸(명령창 629), 1440 → 명령 7 + ▲, 1280 → 5 + ▲, 950 → 4 + ▲·보조기능 아이콘만·분류 ◀ ▶. Figma 구성 1920 → 17칸, 1280 → 11, 1024 → 10, 820 → 6 + ▲ | +| ▲ 패널 줄바꿈(2026-10-20 수정) | PASS — 패널 `justify-content: flex-end` → `flex-start`. 데이터 순서대로 각 줄 왼쪽 첫 칸부터 채움: 1440(3개 1줄), 1280(5개 1줄 가득), 950(5 + WIPEOUT 1), 860(4 + 3), 760(2 × 4 + 1, 5줄), Figma 820(3개). 칸 68 × 47, 패널은 명령 칸 오른쪽 끝 정렬 유지 | +| 분류 전환 시 영역 유지(2026-10-20 수정) | PASS — 같은 폭에서 명령 10 / 1 / 0개 분류를 전환해도 칸 영역·명령창·명령어 전체보기·Layout 탭·보조기능 좌표와 폭 동일(8개 폭 모두). 수정 전에는 바 안 명령창 구성의 칸 수가 "명령 수 + 2"라 817 → 205 → 137px로 변함 | | Header·Popup 영향 | 수정 없음(기존 파일 변경 없음, Footer CSS는 `hm-sw-footer*`와 새 토큰만) | | 독립 소비 프로젝트(Tarball) 설치·빌드 | 미검증 | | `npm run build-storybook` (정적 빌드) | 미검증 | diff --git a/packages/sw/ai/COMPONENT_CATALOG.md b/packages/sw/ai/COMPONENT_CATALOG.md index 69c71ff..690919c 100644 --- a/packages/sw/ai/COMPONENT_CATALOG.md +++ b/packages/sw/ai/COMPONENT_CATALOG.md @@ -159,7 +159,7 @@ SW **뷰어 모드** 전용 Export입니다(2026-10-19 추가, 참고 DWG/DXF | 컴포넌트 | 용도 | 주요 Props | 검증 | |---|---|---|---| -| `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`, `