- SWProcessHeader appearance="multi": the process base and both end covers meet the file name and the window area with right angles (border-radius 0, multi block only). default keeps the Strana top corners 6 / covers 5; step tabs, arrows, colors and sizes unchanged - DESIGN_RULES §14 and Step Header spec §9.2 record the multi-only rule - process-header-states.check.mjs: default 6 / 5 kept, multi 0 (17/17); build:sw and check:ai-docs pass, Storybook zoom shows square multi ends
8.8 KiB
8.8 KiB
Working Context
2026-11-05 — Step Header 프로세스 영역 양 끝 직각
- 사용자 결정:
SWProcessHeader appearance="multi"만 프로세스 영역(파일명 옆·창 영역 옆) 위 모서리를 직각으로(default는 Strana 6px·덮개 5px 유지 — 처음 두 타입 모두로 들었다가 사용자 정정).sw-process-header.cssmulti 블록에 바탕::before·양 끝 덮개border-radius: 01줄. 단계 탭 캡슐·화살표·사다리꼴 면·색·높이 변경 없음. Header 최외곽은 원래 직각. - 문서: DESIGN_RULES §14 프로세스 바탕 행, Process 명세 §9.2. 회귀 검사
process-header-states.check.mjs에 default 6/5 유지·multi 0 검사 추가. 미Commit.
2026-11-05 — Header 스타일 적용 범위·빈 파일명 Hover·Step 활성화 규칙
- 단일 기준:
docs/ai/AI_GUIDE.md5단계 "Header 전용 스타일의 적용 범위"(4개 패키지 사본 sync, sw 사본 LF 유지). 참조만: AI_GUIDE 6단계 5번,packages/sw/ai/AI_USAGE.md§3,packages/ui/ai/AI_USAGE.md§3. SWProcessHeader:documentTitle=""이면 루트data-document-untitled, 파일명 면 Hover 색 변화 없음·cursor: default(sw-process-header.css빈 상태 블록). 버튼·onDocumentClick·크기·위치·색은 유지 — 테스트 앱 백업(D:\신규 헤더 테스트_backup_*)과 Storybook Live Multi Step이 빈 상태 클릭을 로그로 사용 중이라 클릭은 제거하지 않음.- Step 활성화: 코드 변경 없음.
disabled: true(단계·그룹·process·Header)만 비활성, 파일명·프로젝트 상태 무관을COMPONENT_CATALOG.md§11 "단계 활성화"에 명시,COMPOSITION_PATTERNS.md§12-6 문구 수정. 회귀 검사packages/sw/tests/process-header-states.check.mjs. - 보류: 도구 아이콘 5개 Export(출처·권한 미확인, Figma에 Iconify
mage:흔적),public-api.approved.json, Step 선택 애니메이션, 테스트 프로젝트 생성. 미Commit.
2026-11-05 — 시안 기반 Header 도구 아이콘·창 제어 규칙 (B안, 문서만)
- 단일 기준:
packages/sw/ai/AI_USAGE.md§5(기본 구성 vs 시안 재현, 아이콘 1~3순위, Storybook 전용 vs 공개, 상태 처리, 창 제어hiddenControls, 예시, 보고). - 참조만 추가:
docs/ai/AI_GUIDE.md아이콘 칸(+ 4개 패키지 사본 sync, sw 사본은 LF 유지),COMPOSITION_PATTERNS.md§12·§9,COMPONENT_CATALOG.md§4·§11,DESIGN_RULES.md§9. - 보류: Figma 도구 아이콘 5개(help·view-3d·controls·menu-list·exit) Export — 출처·권한 미확인. 제안 구조
swProcessToolIcons와 전제 조건은docs/sw/sw-process-header-design-spec.md§13. 소스·Props·CSS·공개 API·Fixture 변경 없음.
2026-11-03 — SWProcessHeader 1차 구현 (Strana Main Header)
- 작업 브랜치:
feature/sw-process-header(main 6ca92c5에서 분기). 미Commit·미Push — Commit·Push는 사용자 별도 지시 대상. - 범위: 방안 B(별도 컴포넌트) 승인안.
@hm-design/sw에SWProcessHeader·SWProcessBar추가(packages/sw/src/components/sw-process-header/,src/theme/sw-process-header.css), StorySW/Step Header(후속 12에서SW/Process Header에서 변경,src/sw/sw-process-header*.tsx|css), 이후SWProcessSplitButton추가(후속 5), 스펙docs/sw/sw-process-header-design-spec.md, SW AI 문서 4종 갱신,src/index.tsExport 1줄. - 변경 금지 유지:
SWHeader·SWViewerHeader·sw.css·기존 Story·docs/ai/AI_GUIDE.md·packages/ui·D:\Strana. - 1차 제외(호스트 소유·2차 후보): 로고 메뉴 본체, Layer Popup, Dark·Light·HighContrast 화면 비교. (화면 분할은 후속 5에서 추가)
- 검증: typecheck:sw · build:sw · check:ai-docs · tsc -b PASS, Storybook 상태·Hover·키보드 확인, Strana Hanmac 1100/1366/1920 캡처 비교,
SW/Header출력 HTML·기존 CSS 동일. Firefox·Safari·최신 분할 버튼 캡처는 미확인. - 2026-11-03 후속: Story 설명·이벤트 로그 제거, 로고를 임시 로고(
logoSrc,src/sw/assets/sw-header-logo-placeholder.svg)로 교체, 이 Header 로고 칸 기본 58 × 17(홈 106) 유지 — 후속 7에서 SWHeader 기준(홈 80)으로 대체. - 2026-11-03 후속 2:
appearance="multi"(StrAna-SW Figma 873:16481·873:16254·873:17421) 추가 — 같은 컴포넌트·DOM, CSS 분기,documentEmptyLabel·labelHidden·SWProcessAppearance, Story 7개, Figma 도구 아이콘 fixture. Default 치수·CSS 회귀 없음 확인. 넘침 정책 확정(말줄임, 접기·스크롤·More 없음; 선택 탭 유지는 후속 10에서 비례 축소로 대체). - 2026-11-03 후속 3: 사다리꼴(그룹 면)은 시작·끝 그룹에만 — 켜진 가운데 그룹의 발광 면 제거(Figma 873:17421 일치), default·multi 공통.
- 2026-11-03 후속 4: SWHeader 정합 — multi에도 SW 글자 외곽선, 창 이동을 SWHeaderWindowControls(창 이동만, 1.4s Motion)로 교체(정적 그림·토큰 2개 삭제), Multi 도구 Hover 노란 그림(fixture hoverIcon), 눌림도 노란 아이콘.
- 2026-11-03 후속 5: 선택 Step 전체 이름을 default에도 적용(측정한 최소 폭, flex 통일 — 후속 10에서 비례 축소로 대체), Hover 그림 없는 도구 아이콘이 Hover 시 사라지던 문제 수정(범위 안 보완 — 후속 6에서 SWToolButton 공통 수정으로 대체), 화면 분할
SWProcessSplitButton추가(Strana 6758:12510, 연장은 Header 끝까지). - 2026-11-03 후속 6: SWToolButton 공통 아이콘 버그 수정 — pill 기본 아이콘의
hm-sw-header__iconclass를hoverIcon이 있을 때만 부여(SWTool.tsx), SWProcessHeader 범위 보완 CSS 삭제. SWHeadertools도 함께 해결,sw.css·색·Hover 정책 변경 없음. - 2026-11-03 후속 7: 로고·파일명 영역 SWHeader 기준 통일(default·multi) — 로고 칸 58/55 고정 제거(SWHeader 자동 폭 → 홈 80), 홈과 파일명 간격 SWHeader와 같게(겹침 15 + 2), 파일명 padding 22·33/16·multi 자간 0 제거 → 글자 x 70. 파일명 최대 286/189 유지.
- 2026-11-03 후속 8: 화면 분할 Popup 하단 잘림 수정 — 아래 공간이 부족하면 위치 훅이 위로 뒤집어 Header에 가려지던 문제,
SWProcessSplitButton은 항상 버튼 아래(스크롤 시 따라감). 설계 문서 §11.3. - 2026-11-03 후속 9: Storybook
SW/Process Header간소화 — 사이드바 2개(Process Header = Default 섹션 + Multi Step 섹션(Figma 시안 3개, 각자 상태, 노드 ID 미표시) · Responsive), SW 페이지와 같은 제목 + StorySection. 검증용 숨김: Multi Step(시안 1920, data-figma-node) · 화면 분할 · Fixed Widths · Process Bar · Many Groups · Many Steps · States · Theme Override, Figma 시안 3개 Story를 한 페이지로 통합, 캡션·디버그 data 속성 제거. - 2026-11-03 후속 10: 단계 탭 비례 축소 — 선택 탭 최소 폭(
--hm-sw-process-step-min)·multi 선택 탭flex: 0 0 auto제거, 그룹 최소 폭은 모든 탭 여백만. 1920·2560 변화 없음. - 2026-11-03 후속 11: 화면 분할 Popup 아이콘 하단 잘림 — 원인은 틀 상자 소수 크기(31.6 × 21.73)의 픽셀 맞춤(배율 100%에서 21줄), 틀 32 × 22로 수정(
sw-process-header.css). 사용자 Chrome에서 재현·수정 확인. - 2026-11-03 후속 12: Storybook 표시 명칭
SW/Process Header→SW/Step Header(페이지 제목SW Step Header, 섹션·사이드바Step Header,Multi Step유지). Story ID는sw-step-header--*로 바뀜. 컴포넌트·공개 API(SWProcessHeader,SWProcessBar,SWProcessSplitButton)·파일명은 유지. - 2026-11-03 후속 13: Storybook 메뉴명
Responsive→Responsive More.SW/Header하위 이동·SW/SW Step Header그룹명 변경을 시도했다가 모두 원복해 Viewer처럼 SW 하위 독립 그룹SW/Step Header(Story IDsw-step-header--*,.storybook/preview.tsx정렬 변경 없음)로 유지. 숨김 검증 Story 8개·SW/Viewer위치·컴포넌트·CSS·Props 변경 없음. - 기존
package-lock.json수정과 미추적.claude/는 범위 밖(보존).
2026-10-28 — Command Search 예제
- 작업 브랜치:
codex/command-framework-options. - 범위: STORYBOOK_ONLY.
components-search-date-command--all의 Search와 같은 Basic 예제를 사용하는 verification Story. - 사용자 지정 순서: Next.js → SvelteKit → Remix → Astro. Remix 비활성 상태 유지.
- Combobox와 동일한 내부 값(
next,sveltekit,remix,astro) 및 표시명 검색 키워드 적용. Nuxt는 추가하지 않음. - 기존
package-lock.json수정 및 미추적.claude/는 이 작업 범위 밖. - 검증: TypeScript 검사 및 diff 검사 통과. Guard는 기존 SW CSS 경로 미해결로 NOT VERIFIED. 브라우저 확인 미수행.
- 사용자 승인(2026-10-28)에 따라 위 작업 브랜치의 관련 파일만 Commit·Push한다. main 병합·운영 배포는 별도 지시 대상이다.