79 lines
13 KiB
Markdown
79 lines
13 KiB
Markdown
# Working Context
|
||
|
||
## 2026-11-11 — Admin 텍스트 컬러 위계·Foundation Gray (브랜치 `style/admin-text-gray-hierarchy`, 미커밋)
|
||
|
||
- Theme: `themes/default.json`에 `color.palette.gray-900|800|700|600|500`(#212121·#424242·#616161·#757575·#9E9E9E) 추가, `color.fg.primary|secondary|placeholder` 기본값을 #212121 / #616161 / #757575로 변경. 템플릿 텍스트 alias만 Gray를 가리키고 브랜드 Primitive 값은 불변. `contract.ts` 공개 키 5개 추가(기존 키 불변). 생성물은 `generate:theme-defaults`.
|
||
- Web: Combobox·Date Picker Placeholder를 공통 `--hm-sem-fg-placeholder`로 통일, 투명 면 readonly Input Placeholder는 `fg-secondary`. 테이블 헤더 Green·Disabled opacity 유지.
|
||
- Chart: Cartesian 축 눈금 selector가 Recharts 3.8 DOM에 맞지 않아 #666이던 기존 결함 수정, Radar 기본 축 이름(#808080)도 `--hm-chart-axis-text`에 연결. 포인트 값 Label(시리즈색) 대비 미달은 README에 후속 항목으로만 기록.
|
||
- OrgChart: `--hm-orgchart-resolved-fg-*` 기본값 #212121 / #616161, 카드 직위 #797979 → fg-secondary, 이름·툴팁·Workdesk 요약 하드코딩 → `resolved-fg-primary`. 브랜드 블루·Role tag·회사색·상태 회색 유지. 승인 기록 `docs/org-chart/design-approval.md` §8.
|
||
- 보류: 비readOnly 상태 그룹 제목(15px Bold, 회색 Gradient)은 글자색만으로 4.5:1 불가 — 배경 또는 크기 결정 필요.
|
||
|
||
## 2026-11-11 — SW 크기 규격 문서 정합성·기존 토큰 연결 (브랜치 `style/sw-size-spec-docs-2026-11-11`, 미커밋)
|
||
|
||
- `packages/sw/ai/DESIGN_RULES.md`: §1 필드 안쪽 여백을 필드별·폭별로 정정(레이어·색상 왼쪽 12, 760~1799 `0 8px`, 760~1079 `0 6px`)하고 속성보기 행 추가. §11 뷰어 Header 굵기 정정(기본 500, 파일명·버튼 라벨·탭 700). §13 좌표 글자 토큰 표기. §16 SW 크기 체계 요약(글자·아이콘·높이·여백·반응형 색인, 새 규격 아님) 추가.
|
||
- CSS(계산값 불변): `.hm-sw-header__properties` 높이 `38px` → `var(--hm-sw-header-field-height)`, `.hm-sw-footer__status` 글자 `12px` → `var(--hm-sw-header-label-size)`. 토큰을 재정의하면 속성보기 상자가 필드와 같은 높이로 따라가며(캡션·행 19px 고정), Footer 좌표 글자가 Header 라벨 크기를 따름.
|
||
- 보류(별도 결정): Popup 값 상자 28px 토큰, 일반 모드 Disabled 투명도 토큰, Step Header 좁은 폭 단계명, Footer 칸 비율, 760 미만 Responsive 예시, pill/인쇄 class 분리, 말줄임 `title`.
|
||
|
||
## 2026-11-11 — SW 공통 안내 문구를 H1 아래로 이동 (미커밋)
|
||
|
||
- `withSWNotice`(src/sw/sw-story-notice.tsx)는 `StoryNoticeContext`로 문구만 전달하고, 공통 `StoryPageHeader`가 H1 바로 아래(설명 앞)에 `StoryNotice`를 렌더링. 별도 페이지 프레임(`.sb-page-notice`)은 제거.
|
||
- 안내 문구: H1 아래 8px, Page Header description 글꼴·보조색, 아이콘 14px(텍스트와 6px, 첫 줄 세로 중앙), 박스 없음. 첫 섹션까지는 header margin 24px. Context 제공자가 없는 Web/Chart/OrgChart 등은 렌더 결과 변화 없음.
|
||
|
||
## 2026-11-11 — Storybook 페이지 위계·여백 공통화 (ff55a80)
|
||
|
||
- 공통 프레임 `src/components/story-page.css`: 위·아래 여백 16–24px, H1 28/36/700 margin 0, 설명 Page Header description 토큰(8px·보조색), 제목→첫 내용·섹션 사이 24px(`--sb-page-section-gap`, header margin이 다음 블록 margin과 상쇄), H2 16/24/700(`--sb-page-section-title-*` = dialog body 토큰), 섹션 제목 구분선 8 + 12px. 좌우 여백·SW 기준 폭(2040/1125/787)은 그대로.
|
||
- `StorySectionGrid`(story-page.tsx) 추가: 나란히 놓인 섹션의 row gap을 grid가 소유. Chart 7개·Toggle이 사용. `StateBoard` 라벨 구분선 제거, 행 간격 40 → 24px.
|
||
- Button `compactPage`·Tabs `py-4!` 덮어쓰기 제거, Foundation Layout 중복 규칙 제거, 폰트 Weight 카드 박스 제거.
|
||
- Chart 섹션명을 카드 제목과 겹치지 않는 변형명(Basic·Label·Solid 등)으로 통일, SW 제목 2개(`SW Popup — 속성창`, `SW Viewer — 설정창`) 사이드바 기준으로 정리. SW Story 전용 묶음(`sw-story-stack` 섹션 묶음, Footer 너비 행)은 공통 섹션 간격을 쓰도록 조정 — SW 컴포넌트 CSS는 변경 없음.
|
||
- 기준 문서: `docs/guidelines/프로젝트-지침.md` §6.3 Storybook 페이지 프레임 항목.
|
||
|
||
## 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 병합·운영 배포는 별도 지시 대상이다.
|