Files
HMDesign/WORKING_CONTEXT.md
shkim4 c7926aeffd fix(sw): square the multi step header process ends
- 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
2026-11-05 17:31:38 +09:00

8.8 KiB
Raw Permalink Blame History

Working Context

2026-11-05 — Step Header 프로세스 영역 양 끝 직각

  • 사용자 결정: SWProcessHeader appearance="multi"만 프로세스 영역(파일명 옆·창 영역 옆) 위 모서리를 직각으로(default는 Strana 6px·덮개 5px 유지 — 처음 두 타입 모두로 들었다가 사용자 정정). sw-process-header.css multi 블록에 바탕 ::before·양 끝 덮개 border-radius: 0 1줄. 단계 탭 캡슐·화살표·사다리꼴 면·색·높이 변경 없음. 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.md 5단계 "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), Story SW/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.ts Export 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__icon class를 hoverIcon이 있을 때만 부여(SWTool.tsx), SWProcessHeader 범위 보완 CSS 삭제. SWHeader tools도 함께 해결, 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 ID sw-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 병합·운영 배포는 별도 지시 대상이다.