shkim4
ed7e8790ec
- CENTER plain page layout and shorter reference demo notes (spec values moved to the CENTER README); chart specimen descriptions trimmed - Org chart page names and previews; SW width rows follow the 30px frame margin (1980 / 1065 / 727px) and the SW tests match the current layout - Story inventory regenerated and WORKING_CONTEXT updated
374 lines
89 KiB
Markdown
374 lines
89 KiB
Markdown
# Working Context
|
||
|
||
## 2026-11-13 — 접기·펼치기 대표 Story 정렬 (미커밋)
|
||
|
||
- Variants → States → Collapsible · States → Content · Usage 순서로 배치했다. 공통 StateBoard의 24px 열 간격과 라벨 스타일을 재사용하고 대표 페이지의 섹션 간격만 24px로 맞췄다. 긴 예제 2개와 Button trigger는 마지막 섹션에 배치했다. 공개 컴포넌트와 별도 검증 Story는 그대로다.
|
||
- Chrome 6027에서 1920/1440/1024/760/390px 기준 3/3/2/1/1열, PC 열 시작선 일치, 긴 문단·영문 문자열 전체 표시 및 가로 스크롤 없음 확인. 클릭·키보드·Disabled·ARIA 연결, Story ID 10개, `tsc -b`와 관련 테스트 통과.
|
||
|
||
## 2026-11-13 — Combobox Usage 그룹 제목 제거 (미커밋)
|
||
|
||
- 대표 Story의 `Long option`·`Select / Combobox` 제목과 래퍼를 제거했다. 개별 라벨 5개, 기존 그리드·들여쓰기·Story ID를 유지했다. Chrome 6027에서 1440px 입력 3개 상단 일치, 1024/760/390px 기존 2/1/1열 및 가로 스크롤 없음 확인. Select 선택과 비활성 옵션, Combobox 검색·선택·포커스 복귀, `tsc -b`, 컴포넌트 테스트 9건 통과.
|
||
|
||
## 2026-11-13 — 날짜 선택: PC 열 정렬 및 반응형 정리 (미커밋)
|
||
|
||
- DatePicker 대표 Story 전용 4열 기준으로 Sizes·States·Usage와 Calendar의 시작선을 맞췄다. 섹션 간 24px, 열 간 16px. Usage 제목은 중복 라벨을 대신하며 입력창과 팝업의 접근성 이름으로 연결했다.
|
||
- Calendar의 Variants/States 섹션과 기존 Story ID는 유지했다. Two months는 아래 왼쪽에 배치하며, 넓은 화면에서는 기존 544px 너비, 좁은 화면에서는 기존 월 줄바꿈을 유지한다.
|
||
- Chrome 6027: 1920/1440에서 4열 기준선 일치, 1024에서 입력·달력 첫 행 2열, 760에서 입력 2열·달력 1열, 390에서 모두 1열. 전체 폭에서 가로 스크롤 없음. 1920×1080에서는 공통 열을 적용한 최종 콘텐츠 높이가 1134px로, Two months 하단까지 약 30px 스크롤 필요. 날짜 선택·비활성 조건·포커스 복귀·Story ID 확인, 타입 검사와 관련 테스트 통과.
|
||
|
||
## 2026-11-13 — 조직도 › 개요 → `가족사 현황`: 명칭 통일·로고 카드 테두리 제거 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- 메뉴: `org-chart-p1.stories.tsx` title `조직도/가족사 현황`, Story name `가족사 현황`, `.storybook/preview.tsx` storySort 항목도 같은 이름(위치 첫 번째 유지). Story ID `orgchart--logo-personnel-summary`(`__id`)·export명 불변이라 기존 verify 스크립트·링크 영향 없음.
|
||
- 텍스트(`org-chart-page-previews.tsx`): 페이지 제목 `가족사 현황`, 섹션 `가족사 로고`·`가족사별 인원 현황`. `조직·직위별 인원 현황` 유지. 패키지 내부 문구(`logo-legend.ts`의 h2는 이 페이지에서 제거됨, `affiliation-bar` aria-label, 직원 상세 Dialog `관계사` 항목)는 공용 Core라 미변경.
|
||
- 테두리: `core-component-preview.tsx`의 `hideLogoHeading` 분기(사용처는 이 페이지 하나)에서 로고 `li`에 inline `border: 0`. padding 16px·로고 96×96·grid gap 16px 유지로 간격만으로 구분. 패키지 CSS·배경·그림자 미변경.
|
||
- 검증(6024 iframe, 1400·1024·760·390): 화면 텍스트 `관계사` 0, 로고 7개(순서 동일) border 0, 로고·회사명 중앙 정렬 오차 0, 열 6/5/3/1, 가로 Overflow 0. `tsc -b` 통과. 스크린샷은 pane 렌더 시간 초과로 미첨부. `.storybook/qa` 인벤토리(title·name) 재생성은 미실행.
|
||
|
||
## 2026-11-13 — 노선도 › 시설물 › 연계 시설물: 카드 배치 재구성 (POSITION | ACTUAL, 2열 카드) (미커밋)
|
||
|
||
- 범위: `src/center/center-stories.css`만(선택자 `.sb-center-linked-page` 범위). 패키지 Demo DOM·공개 API·SVG·Props·색상·다른 페이지·Story ID·메뉴 불변. 아래 "상단 안내·중복 명칭 제거" 기록의 숨김(안내·READY·카드 첫 이름)은 유지.
|
||
- 측정(17개 카드): POSITION 최대 240px(지방도 터널 분할), ACTUAL 최대 252px(교차로 계열) → 카드 내부 2열 240 + 24 + 252 = 516px, 카드 2열 516 × 2 + 24 = 1056px.
|
||
- 구조: 목록 `.linked-facility`를 container `sb-linked-list`로. 카드 그리드 기본 1열, ≥ 1056px 2열(gap 24, 홀수 마지막 카드 왼쪽). 카드 = 제목(14/20/700) + 패키지 `__variant` 2개를 열로: ≥ 516px POSITION | ACTUAL 좌우(subgrid로 라벨·기본·분할 행 정렬, 열 간 24), 미만 세로(블록 사이 24). 열 라벨 `POSITION` / `ACTUAL` 11px(사용자 A안 선택), 라벨 → 기본 8px, 기본 → 분할 16px(같은 행의 실사화 기본이 2px 더 높아 위치도 쪽 측정 18px). 카드 프레임 없음.
|
||
- 삭제: 기존 base `sb-linked-card` 좁은 카드 라벨 쌓기 규칙과 64px 라벨 열 규칙(연계 시설물 전용, 새 구조로 대체).
|
||
- 검증(6024 HMR, iframe): 1400(목록 1309) 카드 2열·내부 2열, 1024(933)·760(669) 카드 1열·내부 2열, 390(331) 카드 1열·내부 세로. 그룹 5개(5·3·3·3·3)·카드 17·figure 68·깨짐 0, 제목 중복 0, 안내·READY 미표시, 등급 제목 16px x=46(390: 28) → 카드 12px, 섹션·카드 간격 24, 행 정렬 불일치 0, figure 너비 불변(239·202·252·218), 로컬 스크롤 0, 문서 가로 Overflow 0. `tsc -b` 통과, `storybook-inventory.mjs` 1/1.
|
||
|
||
## 2026-11-13 — 노선도 › 시설물 › 연계 시설물: 상단 안내·중복 명칭 제거, 시작 위치·라벨 통일 (미커밋)
|
||
|
||
- 범위: `center-facility.stories.tsx`(Linked Story만 `sb-page-indent` 래퍼 추가), `center-stories.css`(선택자 `.sb-center-linked-page` 범위). 패키지 Demo·공개 API·SVG·Props·색상·토큰·다른 페이지·Story ID·메뉴 불변.
|
||
- CSS 숨김(실제 반복 표시만): 상단 안내 `.linked-facility__context`(문구 2개 + 회색 막대), 등급 제목 옆 `N READY 시설물 집합`(카드 개수 반복), 카드 첫 이름 `strong`(터널·교량·교차로는 한글 이름 반복, JC·IC는 그래픽에 표기). 카드 제목은 한글 이름 1회(14/20/700 primary).
|
||
- 정렬: 등급 제목·카드 시작 x = 터널 첫 제목(1400·1024·760: 46, 390: 28), 첫 제목 top도 터널과 동일. 카드 그리드의 자체 들여쓰기 제거.
|
||
- POSITION / ACTUAL: 다른 시설물 행 라벨과 동일(11px/700/.08em, 64px 열, 간격 16px). 좁은 카드 라벨 위로 쌓기 기준 365 → 331px(64 + 16 + 최대 252px 그래픽), 이 페이지 64px 규칙이 쌓기 규칙보다 우선하므로 scoped container 재정의 추가.
|
||
- 검증(6024 HMR, iframe 1400·1024·760·390): 안내·READY 미표시, 카드 제목 터널/교량/교차로/분기점/나들목 1회, 그룹 5개·카드 17개(5+3+3+3+3)·figure 68, 등급 제목 16/24/700 → 카드 12px, 섹션 24px, 카드 제목 → 그래픽 12px(760·390은 라벨이 위로 쌓여 41px, 기존 동작), 그리드 3/2/2/1열, figure 너비 불변, 이미지 깨짐 0, 로컬 스크롤 0, 문서 가로 Overflow 0. 1400 페이지 높이 3082 → 2838. `tsc -b` 통과, `storybook-inventory.mjs` 1/1.
|
||
|
||
## 2026-11-13 — 노선도 › 시설물: 교량·교차로·분기점·나들목·연계 노선·연계 시설물을 터널 레이아웃으로 통일 (미커밋)
|
||
|
||
- 범위: `src/center/center-facility.stories.tsx`, `src/center/center-stories.css`만. 패키지·dist·SVG·토큰·Story ID·메뉴명·순서·터널 화면 불변.
|
||
- 교량·교차로·분기점·나들목: 패키지 `FacilityReferenceDemo` 대신 공용 Story 컴포넌트 `FacilitySpecimens`(공개 API `LocalAssetFacility`·`FACILITY_CONFIGS`·`CompactFacilityConnection`, Demo와 같은 Props). Position Map | Actual / Detail 2열, 각 열 SEPARATED → SHORT/MEDIUM/LONG(ACTUAL SHORT/REF/LONG), 간략 적용 예제 하단 전체 너비(SOURCE 문구·bridge 구간 모양 유지). 상단 단독 위치도·실사 예제 = MEDIUM / ACTUAL REF 행(기본 이름·보조 문구 동일)이라 제거, Separated 예제는 각 열 첫 행으로 이동, `너비 동작` 제목 제거.
|
||
- 연계 노선: `RoadsideSpecimens`(공개 API `RoadsideFacilityTag`). 행 라벨을 다른 시설물과 같은 1줄 64px 라벨(SHORT/MEDIUM/LONG, ACTUAL …)로 공통화(사용자 요청), 열 보조 설명은 `위치도`/`실사화`만(사용자 요청으로 `콘텐츠 기반 너비`·`고정 양 끝 + 가변 중앙` 삭제). 분할은 실사화 첫 행, 2열에서 위치도 첫 행은 빈 행 `.sb-center-roadside__blank`, 1열에서는 숨기고 그룹 span 4. 위치도 태그는 `div`로 감쌌다 — 태그가 `span`이라 패키지 행 라벨 규칙(`.facility-reference__width-tests > div > span`, 11px)이 태그 글자에 적용되던 문제 방지.
|
||
- 연계 시설물: 패키지 Demo·카드 그대로. CSS만 — 등급 그룹 사이 28 → 24px, 그룹 제목 옆 설명 12/18 회색·간격 8px·왼쪽 정렬(기존 space-between 14px).
|
||
- CSS 전환 기준: 터널 1180px 블록을 `.sb-center-tunnel:not([data-sb-compare-at])`로 한정, 교량만 `data-sb-compare-at="1210"`(LONG 511px: 64+16+511 ×2 + 24 = 1206) 별도 블록. 연계 노선은 라벨 공통화로 64+16+450 → 1180px 사용(승인 시 1230px 안은 라벨 변경으로 불필요해져 제외). 빈 행 `display:none`은 패키지 `> div { display:grid }`보다 우선하도록 `.sb-center-roadside__position > ` 선택자.
|
||
- 검증(6024 HMR, 서버 재시작 없음, iframe 1400·1024·760·390): 7개 페이지 1400 2열·행 top 일치, 이하 1열(그룹 사이 24px, 겹침 없음), 제목 16/24/700 + 설명 12px 회색·간격 8px, 제목 → 첫 행 12px, 섹션 24px, 이미지 깨짐 0, figure 너비 변경 전과 동일, 390에서 stage 2개 로컬 스크롤(8px 규칙 유지), 문서 가로 Overflow 0. 1400 페이지 높이 교량 1299 → 900, 교차로·분기점·나들목 1046 → 900(뷰포트). `tsc -b` 통과, `packages/sw/tests/storybook-inventory.mjs` 1/1 통과. Storybook 전체 창(LNB 180px) 1400에서 교량은 콘텐츠 1210px 미만이면 1열.
|
||
|
||
## 2026-11-13 — 노선도 › 터널: `너비 동작` 제목 제거, 열 제목을 공통 섹션 타이틀로 (미커밋)
|
||
|
||
- `center-facility.stories.tsx`: `너비 동작 · CENTER만 수평 확장` 제목 행 삭제(stage는 `tunnel-reference__sample` 안에 유지). 열 제목을 `header > strong + span`으로 — `Position Map` + `위치도`, `Actual / Detail` + `실사화`.
|
||
- `center-stories.css`: 공통 예제 제목 행 규칙 3개의 `:is()` 목록에 `.sb-center-tunnel__width-group` 추가(16/24/700 + 12px 회색, 같은 줄, 간격 8px). 예전 열 라벨 규칙 삭제. 제목이 없어진 stage는 상단 padding 0, 열 제목 → 첫 행은 subgrid 16px − 4px = 12px.
|
||
- 검증(6024): 1400 두 제목 top·높이(24px) 동일, 4단계 행 정렬 유지. 1024·760·390 1열(그룹 사이 24px). 안내 문구 → 첫 제목 16px, 섹션 간 24px, 행 라벨 8개·figure 너비 불변, 390 stage 8px 스크롤바·끝까지 스크롤, 문서 가로 Overflow 0. `tsc -b` 통과.
|
||
|
||
## 2026-11-13 — 노선도 › 터널: 상단 영역 제거, 너비 동작 한 섹션으로 통합 (아래 "상단 3열" 기록을 대체, 미커밋)
|
||
|
||
- `center-facility.stories.tsx` `TunnelSpecimens`: 상단 Position Map / Actual / Separated 영역 삭제. `너비 동작` 각 열에 SEPARATED 행 추가 — 왼쪽 Position Map: SEPARATED → SHORT → MEDIUM → LONG, 오른쪽 Actual / Detail: SEPARATED → ACTUAL SHORT → ACTUAL REF → ACTUAL LONG. 삭제한 단독 위치도·실사 예제는 MEDIUM / ACTUAL REF와 같은 그래픽(대산2터널 L=750m). 간략 적용 예제는 하단 유지.
|
||
- `center-stories.css`: `.sb-center-tunnel__top`·`__stack`(3열 상단) 규칙 삭제, 그룹 subgrid 행 4 → 5. 1180px 2열/1열 전환·8px 스크롤바 규칙 유지.
|
||
- 검증(6024): 1400(콘텐츠 1324) 2열·4단계 행 위치 일치, 1024·760·390 1열(그룹 사이 24px). 섹션 2개(너비 동작·간략 적용 예제), 행 라벨 8개, 제목 → 그래픽 12px, 섹션 간 24px, figure 크기 불변(분할 197×93·199×95 등), 390에서 stage 8px 스크롤바·끝까지 스크롤, 문서 가로 Overflow 0. `tsc -b` 통과.
|
||
|
||
## 2026-11-13 — 노선도 › 터널: 상단 3열·너비 동작 2열 그룹 배치 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- `src/center/center-facility.stories.tsx`: `Tunnel`만 패키지 `TunnelReferenceDemo` 대신 Story의 `TunnelSpecimens`(공개 API `TunnelFacility`·`CompactFacilityConnection`, 데모와 같은 Props·문구)로 구성. 패키지 클래스(`tunnel-reference__sample`/`__stage`/`__width-tests`)를 재사용해 공통 제목 행·12px·8px 스크롤바가 그대로 적용. Story ID·이름·순서·`TunnelPlayground`·다른 시설물 페이지 불변.
|
||
- `src/center/center-stories.css` 끝에 `.sb-center-tunnel*` 규칙만 추가(container query, 기존 8px 스크롤바 규칙 보존): 상단 Position Map | Actual / Detail | Separated(분할 2개 세로 16px) 3열 ≥ 720px, 미만 1열. 너비 동작은 열 제목 `Position Map`/`Actual / Detail`(14/20/500 회색) + SHORT·MEDIUM·LONG | ACTUAL SHORT·REF·LONG, subgrid로 같은 길이 행 정렬, 2열 ≥ 1180px(행 최대 577px × 2 + 24), 미만 1열(그룹 사이 24px). 간략 적용 예제는 아래 전체 너비.
|
||
- 검증(6024): 1400(콘텐츠 1309) 3열·2열·행 정렬 일치, 1024(933) 3열·1열, 760·390·320 1열·1열. 문구·라벨 누락 0, 제목 → 그래픽 12px, 예제 간 24px, figure 크기 모든 폭 동일(210×93 … 497×95), 390·320에서 너비 동작·간략 예제 stage 8px 스크롤바 + 끝까지 스크롤, 문서 가로 Overflow 0. `tsc -b` 통과.
|
||
- 테스트: `verify-p9-4.mjs`는 실행하면 untracked 기준 파일 `test-results/org-chart-p9-4/browser.json`을 덮어쓰므로 실행하지 않고, 터널 비교 항목만 브라우저에서 재현. 터널 첫 예제 프레임·stage 스타일 ≠ OrgChart Department(투명·padding 12px 0 0 vs 카드형) — 2026-11-12 노선도 카드 프레임 제거(`--plain`) 이후의 기존 차이이며 이번 변경과 무관(같은 클래스·같은 규칙).
|
||
|
||
## 2026-11-13 — SW Viewer 로고·문서 메뉴 테스트 잔여 7건: 승인 규격 기대값 반영 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- `packages/sw/tests/viewer-logo-document-menu.browser.mjs`만 수정(SW 컴포넌트·Story·CSS·Props 불변). 7건 모두 2026-10-21~23 승인 변경 이전의 기대값이었다: 파일 열기 아이콘 = 실제 아이콘 1 + 외곽선 1 SVG(caf4c32), 아이콘 영역 16 × 16·클릭 영역(버튼) ≥ 34px(0840d76, 실측 104 × 50 / 아이콘만 37 × 50), 모든 sweep 폭에서 같은 규격; 좁은 헤더 hover = 면 없음(투명)·글자 #FFC600(caf4c32); sweep은 "More 전 아이콘 + 패널 토글이 전체 보기보다 먼저(2026-10-23) + 아이콘이 된 버튼은 좁아질수록 라벨 복귀 없음(More 이동 허용)", 항목 수 단조 감소 대신 More가 보이는 21개 폭(650~400)마다 More를 실제로 열어 8개 명령이 헤더·More 중 정확히 한 곳(패널 토글은 More 금지, 메뉴는 화면 안, Escape 닫힘, 페이지 넘침 없음), 파일명 길이와 무관하게 같은 전환 폭(아이콘 1040 / More 650, caf4c32의 Header 폭 기준).
|
||
- 결과: viewer-logo-document-menu 49/49(검사 1개 추가: ⑤를 순서·라벨 복귀 금지 두 검사로 분리), viewer 103/103, property-panel-comparison 59/59. 작업 중 새로 넣은 검사의 판정 오류 1건(More로 이동한 버튼을 라벨 복귀로 셈)은 라벨이 다시 보이는지로 정정.
|
||
|
||
## 2026-11-13 — 노선도 그래픽 내부 가로 스크롤 표시 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- 점검: 10개 페이지 × 1400·1024·760·390. 레이아웃 컨테이너 잘림 0(시설물 탐지는 `visibility:hidden; position:fixed` 측정용 span), 인라인 SVG viewBox 초과 0, 깨진 이미지 0. "잘려 보임"의 원인은 실제 크기 그래픽이 `overflow-x: auto` stage 안에서 넘치는데 스크롤바가 overlay(높이 0)라 스크롤 표시가 없던 것.
|
||
- 수정: `src/center/center-stories.css` 끝에만 규칙 추가. `.sb-center--plain` 안의 `.tunnel-reference__stage`·`.facility-reference__stage`·`.center-title-reference__stage`·`.cid-demo__stage`·`.linked-facility__variant`·`.csi-panel > div`에 `::-webkit-scrollbar` 높이 8px, Thumb는 HM Scroll Area 토큰(`--hm-scroll-area-thumb-background`, hover `…-hover-background`), 트랙 투명. 비 WebKit은 `@supports not selector(::-webkit-scrollbar)`로 `scrollbar-width: thin` + 같은 색. overflow 동작은 그대로라 넘칠 때만 표시. 패키지·dist·다른 메뉴 불변.
|
||
- 검증(6024, Chromium 기반 앱 브라우저): 넘치는 stage 44개 전부 스크롤바 8px, 넘치지 않는 stage 스크롤바 0, 프로그램 스크롤로 끝까지 이동 44/44, 사업명 760에서 실제 마우스 가로 스크롤로 끝(205/205px)까지 이동·그래픽 오른쪽 끝 표시 확인. 제목 → 그래픽 12px·예제 간 24px 유지, figure 크기 모든 폭에서 동일, 문서 가로 Overflow 0. 미검증: Firefox·Safari(표준 thin 스크롤바 경로)와 OS overlay 설정이 다른 실제 사용자 브라우저.
|
||
|
||
## 2026-11-13 — SW 테스트 잔여 2건: SW 범위 Story 집합 검사, 로고 메뉴 More 정책 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- `storybook-inventory.mjs`: 승인 Step Header Story 10개(`stepHeaderStoryIds`, adbb034)와 `swScopeIssues` 추가 — 제목이 `SW/`인 Story ID 집합이 "c8e5fbe 이후 유지된 SW/Header(승인 변경 반영) + 승인 추가 목록"과 정확히 같은지 검사(unexpected = 무단 추가·ID 변경, missing = 삭제·ID 변경). `property-panel-comparison.browser.mjs`: 전체 Story 수 공식(338 − 9 + 30)을 `swScope.ok`로 교체(그 1줄과 import만; 공식이 이 파일에 있어 함께 수정). SW 밖 Story 추가·삭제는 영향 없음, 태그(internal·verification) 검사는 기존 header 검사가 유지 — 메모리 시뮬레이션으로 SW 무단 추가·삭제·ID 변경·태그 제거 감지 확인.
|
||
- `viewer-logo-document-menu.browser.mjs`: 2026-10-26 More 정책(약 520px 미만에서만 More)에 맞춰 More를 여는 세 곳을 400px로(520 행을 제자리에서 400px로 줄임 / 헤더 400px, viewer.browser.mjs와 같은 방식), 860·760·520 기대를 "아이콘만, More 없음"으로, 항목 1회 보유 검사는 400px 축소 상태에서 수행 후 복원.
|
||
- 결과: property-panel-comparison 59/59(swScope 50 = 50), viewer 103/103, viewer-logo-document-menu 41/48(이전엔 1단계에서 중단). 남은 7건은 이번에 처음 실행된 검사의 옛 기대값: 파일 열기 아이콘 34px 기대 ↔ 현재 16px(3건), 좁은 헤더 hover 색(1건) — 2026-10-21 이후 Viewer Header 수정; sweep 3건 — 1050~1310px에서 패널 토글만 아이콘(전체 보기 라벨 유지, 2026-10-23 승인), 560px 미만 파일명 56px로 항목이 More에서 돌아옴(비단조), 파일명 폭 고정으로 길이와 무관(2026-10-26). 제품 코드 미변경, 판정 재정의는 별도 승인 필요.
|
||
|
||
## 2026-11-13 — SW 테스트 기존 실패 정리: 인벤토리 internal 태그·Dropdown 스크롤·로고 메뉴 뷰포트 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- 테스트 파일 3개만 수정(SW 컴포넌트·Story·CSS·Story ID 불변). `packages/sw/tests/storybook-inventory.mjs`: 승인 commit 2378663(2026-11-09)이 `sw-header--logo-slot`에 붙인 `internal` 태그를 `internalTaggedIds`로 기대값에 반영(`withApprovedEntryChanges`). `property-panel-comparison.browser.mjs`: "Dropdown follows the page scroll" 검사를 반복문 밖 별도 단계로 옮겨 1440 × 600(페이지가 스크롤되는 높이)에서 `behavior: "instant"`로 실행 후 크기·스크롤 복원, 판정 조건(이동 > 0, 필드 부착 1.5px 이내) 그대로. 원인: 3열 배치 이후 1440 × 900에서 페이지가 화면보다 짧고, `src/hm-theme.css`의 `html { scroll-behavior: smooth }`로 직후 scrollY가 0. `viewer-logo-document-menu.browser.mjs`: 화면 너비 페이지를 여는 두 곳을 1920 → 2500px(1920 행은 1980px 이상 페이지에서만 표시, 정책 유지).
|
||
- 결과: property-panel-comparison 58/59(이전 56/59, Dropdown 스크롤·인벤토리 태그 해결), viewer 103/103(회귀 없음). 남은 실패: ① 인벤토리 첫 검사의 전체 Story 수 조건(388 ≠ 338 − 9 + 30 = 359) — SW 변경만 반영하는 공식이라 2026-10-20 이후 추가된 비 SW Story(Chart·Selection Controls 등)를 세지 못함, 기존 문제·승인 범위 밖. ② viewer-logo-document-menu: 시간 초과는 해결됐지만 다음 단계가 520 행의 More(추가 도구)를 누르는데 2026-10-26 규칙(More는 약 520px 미만에서만, viewer.browser.mjs는 520 행을 400px로 줄여 검사)으로 520 행에 More가 없어 중단. 테스트 기대가 2026-10-21 규칙(860·760·520에서 More) 기준이라 판정 조건 갱신이 필요하며 이번에는 수정하지 않음. 이후 검사는 실행되지 못함. 정적 빌드가 필요한 테스트(dropdown-consolidation·overview·storybook-unused-removal)는 실행하지 않음.
|
||
|
||
## 2026-11-13 — 노선도 데모 설명 정리: 기술·제작 설명 제거, 규격은 문서 보존 (브랜치 `style/storybook-ui-refinements`, 미커밋, 패키지 수정 승인됨)
|
||
|
||
- 패키지 `packages/center-graphic/src/components`의 `*ReferenceDemo` 문자열만 수정(컴포넌트 API·Props·CSS·그래픽·`index.ts` 불변, CRLF 유지): `TunnelFacility.tsx`·`FacilityBatch.tsx`(로컬 SVG → 위치도/실사화, Separated 설명 제거, `Source 정의` 제거, 연계 노선 `재구성 Primitive`·`Source 작성 …`·`13 / 90 / 13` 제거, `태그 계약` → `태그`), `CenterInformationDisplay.tsx`(정의 목록 구조 설명·테이블 행 높이·강조형 1 겹침 설명 제거, `Source 팔레트` → `팔레트`, 동적 콘텐츠 → `한 줄 항목은 말줄임, 명시적 줄바꿈 유지`), `CenterSpatialInformation.tsx`(1·1b legend 제거, 2·3 legend는 사용 기준 문장만). 유지: `SOURCE_RECEIVED`/`SOURCE_PENDING` 설명, `KNOWN_DEVIATION`, `READY`, 너비 테스트 라벨, 4·5·6·7 사용 기준·미확정 표기, 노선·공간 상태·입력. `npm run build:center-graphic` 1회(dist는 Git 미추적).
|
||
- 문서: `docs/center-graphic/README.md` §4에 화면에서 뺀 수치를 코드와 대조해 추가(윤곽 3.6u, 그림자 Blur 6u 70%, Dark/White Outline 분류, 공사중 32u/32u·계획 45° 빗금, 사업 노선 #D21203·150%, 노선명 54u/9u, 번호 64u, 방면 50u·80% 2u·7점, 정보 테이블 26.116/34.364u(=26.116 + 8.248), 강조형 1 4u 겹침, 연계 노선 간격 19/14). `13 / 90 / 13`은 코드 미확인 Source 표기로 비확정 명시. §7 공통 레이아웃 문단 갱신.
|
||
- 검증(6024, 10개 페이지 × 1400·1024·760·390): 제거 대상 문구 23종 잔존 0, 필수 상태·비교 문구 누락 0, 제목 → 그래픽 12px, 노선·공간 h4 → 캔버스 12px(설명 있으면 4px), 안내 오른쪽 끝, 문서 가로 Overflow 0, 깨진 이미지 0. `tsc -b`·center-graphic `typecheck` 통과.
|
||
|
||
## 2026-11-13 — Storybook 미해결 사항: SW 화면 너비·390px 넘침, Input States, Selection Focus, 문서·주석 정합성 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- SW 화면 너비 4개 페이지(SW 헤더·뷰어·단계별 헤더·명령어바 › 화면 너비): 행 제목의 폭과 실제 폭이 같도록, Story 열보다 넓은 행은 숨기고(`data-sw-width-row`) 페이지의 가장 좁은 행(760 / 520 / 1100, `data-sw-width-min`)은 항상 표시하며 열이 더 좁으면 그 폭을 유지한 채 행 안에서 스크롤한다(`sw-stories.css` 컨테이너 `sw-story-rows`, `.sw-story-fit__scroll`). 최소 폭·overflow는 열이 좁을 때만 적용되어 넓은 화면의 열린 메뉴가 잘리지 않고 행을 제자리에서 줄이는 검사(viewer More)도 그대로 동작한다. 각 페이지의 너비 세트는 유지. 명령어바 화면 너비는 다른 세 페이지처럼 `sw-story-stack`(flex gap)으로 행 간격을 두고 형제 margin 규칙 2개를 삭제했다(`sw-footer-stories.css`).
|
||
- SW 명령어바(760)·뷰어 로고(520): Story 열이 그보다 좁으면 예제가 그 폭을 유지하고 섹션 안에서 스크롤(`.sw-story-fit`), 페이지 가로 넘침 없음. SW 설정창: 액자 최소 520px(이미 있던 스크롤 영역 안)로 390px에서도 340px 옵션 팝업이 액자 안에 들어간다. SW 컴포넌트 크기·최소 폭·API는 변경 없음.
|
||
- Input States: Disabled를 Focus·Validation과 같은 Medium(34px)으로. Readonly는 컴포넌트 규칙(텍스트만, 항상 Large 수치)이라 42px 유지.
|
||
- Selection Controls Focus: `.storybook/pseudo-states.ts`에 `:focus-visible` → `data-sb-focus` 복제를 추가(부정형 `:not(:focus-visible)` 규칙은 복제하지 않음). Radio Group(Option A)·Switch Focus 칸에 링 고정, Checkbox는 기존 `play` 실제 포커스 유지. 실제 Tab 포커스 링 동작 동일.
|
||
- 후속 수정(2026-11-13): 위 복제가 `:focus-visible:active` 같은 복합 규칙을 `[data-sb-focus][data-sb-active]`로만 만들어 Slider `Focus` 검증 Story의 `Focus + Drag`(실제 포커스 + `data-sb-active`)가 실패했다. 기존 복제본(`:focus-visible` 유지, hover/active만 교체)도 함께 만들도록 보완. 검증: Slider Focus play 통과, Selection Controls·Button·Input·Checkbox에서 복제 규칙 삭제 0·추가 9개(모두 기존 방식 복제본), Selection Controls 고정 포커스 링 동일, `tsc -b`·Storybook build 통과.
|
||
- 문서: 프로젝트-지침 §6(구분선·16px 제거, 좌우 최대 30px), combobox·dialog·dropdown-menu·toggle·sonner·navigation-menu·lnb·checkbox·radio-group·switch·input, chart README 높이. 주석: foundation.css·center-stories.css(1줄)·chart-story·story-board·Story 공통 문구의 "divider", tabs 28px, carousel 중복 주석, org-chart-expanded의 적용되지 않던 `margin-top: 24px`(계산값 0px) 삭제.
|
||
- SW 테스트: 인벤토리 기대 이름을 현재 Story 이름(속성창·화면 너비·설정창·로고·SW 명령어바)으로 갱신. property-panel-comparison 56/59(남은 실패: 인벤토리 2건 = `sw-header--logo-slot`의 `internal` 태그(258e0a4)가 승인 태그 목록에 없음, Dropdown 페이지 스크롤 1건 — 모두 기존), viewer 103/103. viewer-logo-document-menu는 1920px 화면에서 숨겨진 1920 행의 헤더를 기다리다 시간 초과(2026-10-23 이후 기존 문제).
|
||
|
||
## 2026-11-13 — 노선도 메뉴 전체에 사업명 페이지 레이아웃 공통 적용 (A안, 브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- Story: `center-facility.stories.tsx`(`page()` — 터널·교량·교차로·분기점·나들목·연계 노선), `center-information.stories.tsx`, `center-spatial.stories.tsx`에서 `StorySection title="개요"` 제거 → 공통 `sb-page-indent`로 기존 예제 들여쓰기 유지. 연계 시설물(원래 개요 없음, 들여쓰기 없음)·사업명은 불변. Story ID·이름·순서·Playground 불변.
|
||
- CSS(`center-stories.css`, `.sb-center--plain` 범위): 사업명 전용 제목 행 규칙을 공통 규칙 하나로 통합 — 터널·시설물·사업명·정보 데모 헤더(`header > strong|h3 + span`)를 한 행(flex-wrap, baseline, 간격 8px)으로, 제목 16/24/700 primary, 설명·사이즈 12/18 secondary. 노선·공간 `h4`도 16/24/700(긴 설명 legend/note는 제목 아래 14px 그대로). 연계 시설물 카드 라벨은 기존 14/500 유지. 배율 안내 `.center-representation__note`는 독립 행 오른쪽 끝(flex-end, 줄바꿈), 사업명만 숨기고 첫 제목 행에 표시(숨김 선택자 특이도 상향). 섹션 제거로 사용처가 없어진 `.sb-page-section-body > .sb-center--plain` 들여쓰기와 사업명 헤더 `> div` gap 규칙 삭제. 패키지 문구(Source·SOURCE_RECEIVED/PENDING·번호)는 그대로.
|
||
- 문서: `docs/center-graphic/README.md` §7에 공통 레이아웃 기준 한 단락.
|
||
- 검증(6024, 페이지 10개 × 1400·1024·760·390·320): `개요` 0, 안내 오른쪽 끝 = Inner 오른쪽 끝(사업명은 제목 행), 모든 예제 헤더 16/24/700 + 12px·8px, 제목 → 그래픽 12px, 노선·공간 h4 16px/700, 문서 가로 Overflow 0. 1400·1024는 전 헤더 한 줄, 760 정보 1개, 390·320은 긴 설명(정보·연계 노선 등)이 다음 줄로 줄바꿈. 교량 1024 예제 간 24px·열 간 24px. `tsc -b` 통과. 그래픽·stage 규칙은 미변경.
|
||
- 미해결: 안내 문구의 첫 제목 행 배치와 Source 문구 정리는 패키지 데모 공통화 작업에서 별도 검토.
|
||
|
||
## 2026-11-13 — 노선도 › 사업명: 배율 안내를 첫 예제 제목 행 오른쪽으로 이동 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- 아래 "`개요` 제거·우측 정렬" 기록의 후속. 패키지 `CenterRepresentation`의 독립 안내(`.center-representation__note`)는 이 페이지에서만 `display: none`(`.sb-center-title-page`). 같은 문구를 `center-title.stories.tsx`의 첫 예제 제목 행에 `.sb-center-title-note`로 렌더(문구는 `centerTargetResolution()` 기준 100% · 7680 / 75% · 3840, 패키지와 같은 규칙).
|
||
- `center-stories.css`: 이전 우측 정렬 규칙을 위 숨김 + `.sb-center-title-note { margin-left: auto; text-align: right }`로 교체. 줄바꿈되는 flex 행에서 "구성명 + 사이즈 | 안내" 양끝 정렬, 공간 부족 시 안내만 다음 줄 오른쪽으로 이동. 스타일은 사이즈와 같은 12px 회색.
|
||
- 검증(6024): 1400·1024·760·390 모두 안내가 첫 제목 행과 같은 줄, 오른쪽 끝 = Inner 오른쪽 끝(1355 / 979 / 730 / 374). 별도 안내 영역 없음(첫 제목 행이 페이지 상단 gutter에서 시작). 예제 5개 제목→그래픽 12px·간격 8px·예제 간 24px·그래픽 크기 불변. 320px 추가 확인: 제목 + 사이즈는 한 줄, 안내만 다음 줄 오른쪽. 문서 가로 Overflow 없음, `tsc -b` 통과. 패키지·dist 미수정.
|
||
|
||
## 2026-11-13 — 노선도 › 사업명: `개요` 타이틀 제거·배율 안내 우측 정렬 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- `src/center/center-title.stories.tsx`의 `Compositions`: `StorySection title="개요"` 제거. 예제는 공통 `sb-page-indent`(16px, ≤640px 12px) 안에 둬 기존 x 위치를 유지한다. `StoryPage className="sb-center-title-page"` 추가. Story ID·`Playground`·예제 5개 구성은 불변.
|
||
- `src/center/center-stories.css` 끝에 `.sb-center-title-page .center-representation__note` 규칙만 추가(`display:flex; justify-content:flex-end; text-align:right; overflow-wrap:anywhere`). 패키지 `CenterRepresentation`·dist·다른 노선도 페이지는 불변(클래스가 이 Story에만 있음).
|
||
- 검증(6024): 1400·1024·760·390 모두 H2 0개·`개요` 텍스트 없음. 안내 문구 오른쪽 끝 = Inner 오른쪽 끝(1355 / 979 / 730 / 374), 한 줄. 첫 예제 제목은 안내 문구 16px 아래(패키지 note margin), x = Inner + 16(390은 +12)로 이전과 같다. 예제 5개 한 줄·간격 8px·제목→그래픽 12px·예제 간 24px·그래픽 크기 불변(390의 긴 콘텐츠 설명 줄바꿈은 이전과 같음). 문서 가로 Overflow 없음. `tsc -b` 통과.
|
||
|
||
## 2026-11-13 — 노선도 › 사업명: Type·Source 문구 제거, 구성명 + 사이즈 한 줄 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- `src/center/center-title.stories.tsx`의 `Compositions`(Story ID `center-graphic-title--compositions` 유지)만 변경. 패키지 데모 `CenterTitleReferenceDemo` 대신 공개 API(`CenterTitle`, `CENTER_TITLE_COMPOSITIONS`)로 예제 5개를 Story에서 직접 구성한다. 제목 = 구성명(H3), 오른쪽 사이즈(`620 × 100` 등). 긴 콘텐츠는 제목 `노선구분 + 사업명 (긴 콘텐츠)` + 기존 설명 "같은 연결과 고정 외곽 지오메트리; 콘텐츠 기반 너비". `Type 1~4`·`Source 근거 뷰포트` 표시 제거. 패키지(`packages/center-graphic`)·dist·`Playground`·상단 `표시 배율 · 제작 대상` 안내는 불변.
|
||
- `src/center/center-stories.css` 끝에 `.sb-center--plain … header.sb-center-title-row` 규칙만 추가: 제목은 공통 섹션 제목(16/24/700 primary), 사이즈는 12/18 secondary, 간격 8px, 모든 폭에서 한 줄(공간 부족 시에만 줄바꿈 — 패키지의 ≤720px 세로 배치를 이 페이지에서만 덮음). 제목 → 그래픽 12px(기존 stage 상단 padding), 예제 간 24px(기존) 유지. 그래픽 영역 클래스 `.center-title-reference__stage` 재사용으로 배경·크기 불변.
|
||
- 검증(6024): 1400·1024·760에서 5개 모두 한 줄·간격 8px·제목→그래픽 12px·예제 간 24px, 그래픽 620×100 / 610×167 / 890×100 / 782×167 / 긴 콘텐츠 1695×100(기존처럼 stage 로컬 스크롤). 390에서 고정 사이즈 4개는 한 줄, 긴 콘텐츠 설명만 다음 줄로 넘어감(의도된 줄바꿈). 모든 폭에서 문서 가로 Overflow 없음, Type·Source 문구 0. `tsc -b` 통과.
|
||
|
||
## 2026-11-13 — Storybook 전체 점검 후속: P1 4건·중복 UI 요소 제거 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- 원칙(사용자 정정): 중복 정리는 문구 번역·재작성이 아니라 같은 정보를 반복하는 UI 요소 자체를 제거하는 것. 버튼·폼 Label·aria-label·필요한 H2/H3는 유지하고, 차트처럼 한 행에 놓인 예제는 정렬을 유지한다. 번역·`열기` 일괄 치환·Title Case·Invalid→Error·Usage/Default 명칭 변경은 원복했다.
|
||
- P1: Toggle Button Sizes 라벨 Default→Medium·글자 토글의 prop 값(`sm/default/lg`)→예시 문구 "알림"(`toggle-examples.tsx`), Collapsible 대표 화면 디버그 출력 제거(`collapsible-examples.tsx`), Combobox·Date Picker Sizes `Default`→`Large`(기본 크기가 실제 large), SW 설정창 패널 배치를 Story 열 폭에 따라 3/2/1열로(1076px 이상 기존 24/368/712, 700px 이상 2열, 미만 1열; `sw-viewer.stories.tsx`, 1024px 겹침 해소, 390px에서 340px 옵션 팝업은 프레임보다 7px 넓음).
|
||
- 중복 제거: 비활성 항목의 "(사용 불가)"(메뉴바·팝업 메뉴·컨텍스트 메뉴·명령어 검색), Breadcrumb "홈 (custom link)"→"홈", Toggle "Disabled off/on"→"Off/On", SW 뷰어 속성 "일반 정보 (General)"·"기하 속성 (Geometry)"의 괄호 영문, Date Picker Label "기본 형식 · " 접두어, 차트 설명 줄(H2 반복만 있는 Line 6·Area 곡선 6·Donut 4·Radar 4 전체 제거, Bar Horizontal "· 가로 막대"·Radial 내부 ID 접두어만 제거, 정보가 섞인 Pie·Area Stacked/Expanded는 정렬 때문에 유지), SW 속성창 비교 figcaption 4개(상태명은 figure `aria-label`).
|
||
- 기타: 라디오 그룹 aria-label이 내부 id(`sc-d`)로 읽히던 문제 → "옵션 선택", slider 소스 공백 오타, alert-dialog 주석 정정. 테스트 `packages/sw/tests/property-panel-comparison.browser.mjs`: figcaption 대신 figure aria-label도 읽고, 1열/3열 기준을 현재 CSS(727 / 1065px, 좌우 여백 30px)에 맞춤.
|
||
- Selection Controls H2("Selection Controls")와 Step Header H2는 섹션 구조(제목 위계)에 필요해 유지. Story ID 388개·Props·컴포넌트 불변. 문서: button.md·toggle.md·combobox.md·date-picker.md 해당 문장.
|
||
|
||
## 2026-11-13 — 이동 경로(Breadcrumb) Story: Custom 명칭·Variants 1/3열·Usage 전체 너비 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- `src/components/breadcrumb.stories.tsx`의 대표 `All`만 수정. 예제 이름 `Custom link · separator` → `Custom`(id `custom` 유지). Variants 배치를 `auto-fill`(최소 240px) → `grid-cols-1` + `min-[1000px]:grid-cols-3`(Accordion·Collapsible과 같은 1 → 3열 패턴, 2 + 1 줄 배치 제거). Usage(Long path)의 `max-w-[900px]` 제거 → 섹션 전체 너비, `BreadcrumbList` `flex-wrap`으로 자연 줄바꿈. 공통 `StorySection` / `StateBoard` 재사용, 페이지 전용 CSS 없음. Story ID·예제 수·verification Story·Breadcrumb 컴포넌트·Props·Theme·토큰 불변. `docs/components/breadcrumb.md` §9 대표 Story 설명 갱신.
|
||
- 검증(6027 임시 서버 `storybook-verify`): iframe 1400 = 3열(각 425px) / 1024 = 3열(각 300px), 760 / 390 = 1열. 세 예제 모두 제목 → Breadcrumb 12px, 시작 위치 같음, 섹션 간격 28px. Long path는 1400·1024에서 1줄, 760에서 2줄, 390에서 3줄이며 넘침·문서 가로 스크롤 없음. 마지막 경로 700·`rgb(33,33,33)` 유지. Ellipsis Dropdown은 열림(`문서`·`설정`) → Esc 닫힘 → 트리거로 Focus 복귀, 링크 href·`/` 구분자 유지, 콘솔 오류 없음. `tsc -b` 통과.
|
||
|
||
## 2026-11-13 — 탭 Story: Variants 2열·Behavior(Overflow) 분리·Usage 반응형 2열 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- `src/components/tabs.stories.tsx`의 대표 `All`만 재배치. Variants = Primary / Secondary 균등 2열, 새 H2 **Behavior** = 기존 Overflow 예제(20개 탭, 내용 불변)를 왼쪽 열에, Usage = 기존 두 예제(Card 흰 배경·페이지 배경·`max-w-lg`·입력 요소 불변) 균등 2열. `ThreeColumns` 제거, `TwoColumns`를 `@container` + `@min-[720px]` 2열(24px 간격)로 변경 — 기준은 섹션 본문 실제 너비(공통 board 들여쓰기 16px 제외). 공통 `StorySection` / `StateBoard` 재사용, 페이지 전용 CSS 없음. Story ID·`data-overview-state`·verification Story·Tabs 컴포넌트·Props·Theme·토큰 불변. meta 설명 문구와 `docs/components/tabs.md` 대표 Story 설명 갱신.
|
||
- 검증(6027 임시 서버 `storybook-verify`, 6024는 다른 세션 서버로 `storybook-stories.js` 404): iframe 1400(컨테이너 1309) / 1024(933) = 2열(각 642 / 454px, 제목·탭 시작점 동일), 760(685) / 390(346) = 1열, 문서 가로 스크롤 없음. 탭 클릭 선택·패널 전환(Primary·Secondary·Overflow), Overflow 다음 버튼 `scrollLeft` 증가·이전 버튼 활성화·선택 유지. `tsc -p tsconfig.app.json --noEmit` 통과.
|
||
|
||
## 2026-11-13 — 선택 컨트롤 상태 비교 매트릭스 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- `src/components/selection-controls.stories.tsx`만 재작성(+ `checkbox-examples.tsx`의 `Controlled` export). 반복 H2 6개("Checkbox · States" 등) → H2 `Selection Controls`(상태 매트릭스) + H2 `Variants`(Checkbox Indeterminate, Radio Group Vertical/Horizontal; Switch는 별도 Variant 없음).
|
||
- 매트릭스: 행 Default / Hover / Focus / Disabled / Validation, 열 State / Checkbox / Radio Group / Switch. Radio Disabled는 캡션 `항목`·`그룹`으로 구분, Switch Validation은 `—`(상태 없음). Radio Error 시안은 선택 없음(`defaultValue=""`, 사용자 요청 — Error 행에 초록 선택 표시 없음). 컴포넌트·Props·Theme CSS 불변, Hover는 기존 `data-sb-hover`, Focus는 기존처럼 Checkbox만 play에서 자동 Focus.
|
||
- 반응형: DOM 1회 렌더(컴포넌트 순서) + 컨테이너 쿼리(`@container`, 미리보기 Inner 실제 너비). Inner ≥ 720px이면 각 컴포넌트 블록이 `display: contents`로 4열 grid에 배치(열 `max-content` + 남는 폭 1fr 균등, 행 구분 `border-border` 1px, 셀 12px 상하·24px 열 간격). 미만이면 Checkbox → Radio Group → Switch, 각 Default → Validation 세로 그룹(상태명 12/16/400). 4열 콘텐츠 실측 합계 692px(State 92 + 232 + 217 + 151) → 여유 28px로 720px.
|
||
- 검증(6026, 6024는 기존 `/index.json` 500 지속): iframe 1400·1024 = 4열, 760·390 = 세로 그룹, 문서 가로 스크롤·잘림·화면 밖 요소 0. 인스턴스 Checkbox 9·RadioGroup 8·Switch 7(중복 렌더 없음), `data-overview-state` 19개, Hover 시각(테두리 색) 유지, Manager 1024 창(LNB 180)에서도 4열. `tsc -p tsconfig.app.json --noEmit` 통과.
|
||
- 남은 정리 후보: `*Sections`의 `titlePrefix`·`idPrefix`·`gridClassName`는 이제 사용처 없음(숨김 개별 페이지는 미사용) — 범위 밖이라 유지.
|
||
|
||
## 2026-11-13 — 통합 페이지 디자인 정합성: 버튼·Toggle Button 규칙 통일, 선택 컨트롤 공통 그리드 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- 버튼 페이지 Toggle Button 재구성(같은 날 후속, 아래 `flat` 기록을 대체): `flat`이면 `ButtonPageToggleSection` — 독립 H2 "Toggle Button" 한 섹션(버튼 열과 36px: 섹션 간격 28px + `pt-2`), 그룹 H3 Variants / States(Off / On, Disabled) · Groups(단독, 단일 선택, 다중 선택 — 3차: 버튼 페이지만 `groupSpecimens(idPrefix, true)`로 "연결 그룹 · " 접두어 생략, 숨김 Toggle 페이지 라벨 유지) · Sizes(Small/Default/Large). 버튼과 통일(같은 날 2차): 1400px 이상 같은 너비 3열(버튼 열과 같은 x), 미만 1열·그룹 간 24px. 각 행은 States 매트릭스 형식(왼쪽 라벨 14/20/500 → 8px → 컨트롤, 행 간 8px, subgrid로 그룹 안 컨트롤 시작선 정렬). `ToggleSections`에 `stacked` 옵션 — 버튼 페이지가 `MatrixFit` 안의 `ToggleButtonSection`에서 넘겨, 매트릭스가 세로 배치되면(390px) Toggle도 라벨 위 12/16/400 → 4px → 컨트롤, 행 간 12px로 함께 바뀐다. 반복 제목 `Toggle Button · …` 제거, 예시 ID(`toggle-offon` 등) 유지. 숨김 Toggle 페이지 경로(4섹션·StateBoard·Sizes 들여쓰기)는 그대로이며 `groupSpecimens`·`SizeRow`만 공유. 검증 1440/1400/1399/1100/1099/1024/768/390 가로 스크롤·잘림·줄바꿈 0, 상호작용 정상, `tsc -p tsconfig.app.json` 통과.
|
||
- (이전 기록) 버튼 페이지 Toggle Button 섹션: `ToggleSections`에 `flat` 옵션(버튼 페이지만). H3 그룹 라벨을 버튼 GroupBlock 규칙(들여쓰기 0, H3 → 예시 8px)으로 그리고 Sizes 들여쓰기도 뺀다. 1400px 이상에서는 Variants·States가 버튼 3열 트랙의 1·2열을 써서 단독/연결 그룹·Sizes와 함께 Brand / Standard Solid / Standard Outline 열에 맞는다(1000~1399px는 기존 324:234 비율 2열, 999px 이하 1열). 섹션 제목 `Toggle Button · 단독 · 연결 그룹` → `Toggle Button · 단독/연결 그룹`. 숨김 Toggle 페이지는 기존 StateBoard(16px·12px)·제목 그대로.
|
||
- 버튼 상태 행렬 세로 배치(좁은 화면)의 상태 이름만 12/16/400(`text-xs font-normal`, 보조색)으로 H3 "States"(14/20/500)와 구분. 공통 H2/H3 스타일은 불변.
|
||
- (이전 기록, 위 상태 매트릭스로 대체) 선택 컨트롤: `CheckboxSections`·`RadioGroupSections`·`SwitchSections`에 `gridClassName` 옵션. 통합 페이지만 공통 트랙(1000px 이상 4열, 미만은 최소 220px 자동 열 → 999px 3열·768px 2열·390px 1열)을 넘겨 모든 섹션의 예시 열이 맞는다. Radio Horizontal은 1000px 이상 2칸·미만 한 줄 전체를 써 한 줄 유지. 숨김 Checkbox(3열)·Radio Group(2/4/4열)·Switch(5열) 페이지는 그대로.
|
||
- 주의: Tailwind 임의값 class 바로 뒤에 `${…}`를 붙이면(공백 없이) 소스 스캔이 그 class를 놓친다. 이번 작업 중 Toggle Variants/States 2열이 사라졌다가 공백으로 분리해 복구.
|
||
- 검증(6026, 다른 세션 Storybook이 6025 사용 중): 버튼 1440/1400/1399/1024/768/390, 선택 컨트롤 1440/1024/1000/999/768/390 페이지·내부 가로 스크롤·잘림 0, 예시 수 불변(11/19), 상호작용·Focus·Disabled 정상, 숨김 페이지 레이아웃 불변, `tsc -p tsconfig.app.json` 통과. 인벤토리 재생성 결과 변화 없음(KEEP 73 / HIDE 315).
|
||
- 6024: 계속 `/index.json` 500(`center-spatial.stories.tsx`를 MDX 문서 단계에서 파싱한 캐시 오류). 다른 세션 서버라 재시작하지 않음 — 그 세션에서 재시작 필요.
|
||
|
||
## 2026-11-13 — Storybook 유사 컴포넌트 6개 그룹 통합·메뉴명 2건 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- 방식: 2026-11-12 대화상자·팝업 메뉴 통합과 같다. 흡수되는 컴포넌트의 예제를 `src/components/<name>-examples.tsx`(Storybook 전용)로 옮기고 `<Name>Sections`(섹션 묶음, `titlePrefix`/`title`·`idPrefix` 옵션) 하나로 대표 페이지와 기존 Story가 함께 쓴다. 흡수되는 쪽의 기존 대표 Story `All`은 `verification` 태그만 붙여 사이드바에서 숨기고 같은 화면·`play`·ID·직접 URL을 유지한다. Story 파일 이동·`title` 변경·Story 삭제 없음. 패키지 컴포넌트·Props·토큰 변경 없음.
|
||
- 사이드바 결과: `버튼`(Button + "Toggle Button · …" 4섹션), `선택 컨트롤`(신규 `Components/Form/Selection Controls` → `components-form-selection-controls--all`, "Checkbox · …"·"Radio Group · …"·"Switch · States"), `시트·드로어`(Sheet + "Drawer"), `툴팁·호버 카드`(Tooltip + "Hover Card", 같은 5열), `접기·펼치기`(Accordion + "Collapsible · …"), `날짜 선택`(Date Picker + "Calendar · …"). 숨김 대표 8개(인벤토리 기준, 처음 보고의 "9개"는 오기): checkbox·radio-group·switch·toggle·drawer·hover-card·collapsible·calendar의 `--all`. 호스트 페이지 섹션 제목은 그대로, 흡수 섹션만 컴포넌트명을 붙였다(단일 섹션은 컴포넌트명만 — "Alert Dialog" 선례). 합친 페이지의 `data-overview-state`는 접두어(`checkbox-` 등)로 중복을 피한다.
|
||
- 선택 컨트롤 `play`는 Checkbox Focus 예시 하나만 focus한다(한 번에 하나만 focus 가능). Radio Group·Switch Focus는 Tab 또는 각자의 숨김 대표 Story(로드 시 focus 유지)에서 확인.
|
||
- 버튼 상태 매트릭스: 매트릭스가 자기 열보다 넓으면(390px에서 420px Standard Solid) 세 Treatment가 함께 상태별 세로 배치(상태 이름 → 버튼 줄 wrap)로 바뀐다(`MatrixFitProvider`·`data-state-matrix="table|stacked"`, ResizeObserver로 표 실제 폭과 열 폭 비교). 1400px 이상 3열·미만 1열, 버튼 크기·상태·색상은 그대로.
|
||
- 메뉴명(`manager.js`만): `components-navigation-navigation-menu` `메뉴` → `내비게이션 메뉴`, `patterns-data-data-table` `테이블` → `데이터 테이블`(2026-11-12 `테이블` 결정을 이번 요청으로 대체). 통합 라벨: `components-overlay-sheet` → `시트·드로어`, `components-overlay-tooltip` → `툴팁·호버 카드`, `components-disclosure-accordion` → `접기·펼치기`, 신규 `components-form-selection-controls` → `선택 컨트롤`. 숨김 컴포넌트 라벨은 태그 필터용으로 유지. `preview.tsx` storySort Form에 `Selection Controls` 추가.
|
||
- 문서: `docs/components/` 13개(button·toggle·checkbox·radio-group·switch·sheet·drawer·tooltip·hover-card·accordion·collapsible·calendar·date-picker) 대표 Story 행. 인벤토리 재생성: 파일 89 → 90, Story 387 → 388, PRIMARY 80 → 73, 삭제된 ID 0.
|
||
- 검증: 6024는 다른 세션 서버가 `center-spatial.stories.tsx` acorn 파싱 오류로 index 500 상태여서(파일은 HEAD와 같고 tsc 통과) `.claude/launch.json`에 `storybook-verify`(6025)를 추가해 확인. 사이드바·숨김 URL 9개·1420/1400/1399/844/580/390px 6개 페이지 페이지/내부 가로 스크롤 없음, `tsc -p tsconfig.app.json` 통과.
|
||
|
||
## 2026-11-13 — 버튼 Story: Treatment별 3열 안에 Sizes·States 통합 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- 바로 아래 항목(Sizes 섹션 + Treatment별 상태 섹션)을 대체한다. `src/components/button.stories.tsx`의 `All`만 변경했고 `SizeColumns`는 `GroupBlock`으로 바꿨다. 패키지 Button·API·CSS, verification Story, 다른 Story는 변경 없다.
|
||
- 구조: `StorySectionGrid` 안에 Brand / Standard Solid / Standard Outline 공통 `StorySection`(H2 16/24/700, 제목 → 콘텐츠 12px, Border 없음)을 둔다. 각 섹션은 `GroupBlock` 두 개로 이루어진다. Sizes(H3 14/20/500 회색 → 8px → Small/Medium/Large)와 States(H3 → 8px → 기존 `StateMatrix`)이며 두 블록 사이는 24px다. 페이지 단위 Sizes / States 제목은 없다. 그룹은 섹션 가장자리에 둔다(들여쓰기 없음). 1400px 경계에서 Solid 매트릭스 420px가 1/3 열에 들어가게 하기 위해서다.
|
||
- 반응형: 미리보기(iframe) 폭 1400px 이상에서 같은 너비 3열, 미만은 1열이며 섹션 간격은 28px이다.
|
||
- 검증(6024, 미리보기 1420·1400·1399·844·580·390px): 1420에서 열 x 30 / 491 / 953, 너비 437px, 세 H2 상단 같음. 1400에서 3열(431px), 1399에서 1열로 전환. 모든 폭에서 H2 → Sizes 12px, H3 → 콘텐츠 8 / 8px, Sizes ↔ States 24px, 크기 행 높이 42px(줄바꿈 없음), 컬러(3 / 5 / 4)·상태(4)·버튼 수(12 / 20 / 16) 누락 없음, 페이지 가로 스크롤 0. 표 내부 스크롤은 390px의 Standard Solid(77px)만 있다(420px 매트릭스 > 343px 열, 버튼 크기·구조 유지 조건상 불가피). `docs/components/button.md` 갱신, `tsc -b` 통과.
|
||
|
||
## 2026-11-13 — 버튼 Story: Variants 제거·Sizes와 상태 비교를 Brand / Standard Solid / Standard Outline 3열로 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- `src/components/button.stories.tsx`의 대표 Story `All`만 변경했다. Variants 섹션과 그 전용 `GroupRows`, 비례 폭 `GroupColumns`를 제거했다. 패키지 Button, API, 스타일, verification Story(Roles·Sizes·Brand States·Standard States 등)는 변경 없다.
|
||
- Sizes: `SizeColumns`로 Brand / Standard Solid / Standard Outline(Outline Small/Medium/Large 추가, 기존 `size` API 지원) 같은 너비 3열을 미리보기 840px 이상에서, 미만은 1열로 둔다. 그룹명 H3(14/20/500 회색) → 버튼 8px, 버튼 간격 8px. 상태 열과 시작 위치를 맞추려고 그룹은 섹션 가장자리에 둔다(`data-sb-board` 들여쓰기 미사용).
|
||
- 상태 비교: "States" 제목을 지우고 `StorySectionGrid` 안에 Treatment별 공통 `StorySection`(제목 16/24/700, 제목 → 매트릭스 12px)을 둔다. 미리보기 1400px 이상에서 같은 너비 3열(Solid 매트릭스 420px 기준), 미만은 Brand → Solid → Outline 1열이다. 매트릭스 구조(행 Default/Hover/Pressed/Disabled × 색상), 버튼 수(12 / 20 / 16)는 그대로다.
|
||
- 검증(6024, 미리보기 1420·844·580·390px = 화면 1600·1024·760·390): 1600에서 Sizes 열과 상태 열이 x 30 / 491 / 953, 너비 437px로 일치하고 매트릭스 내부 스크롤 0이다. 1024에서는 Sizes 3열(열 240px, 행 높이 42px로 줄바꿈 없음)·상태 1열, 760에서는 둘 다 1열이며 내부 스크롤 0이다. 페이지 가로 스크롤은 모든 폭에서 0이다. 미해결: 390px에서 Standard Solid 매트릭스(420px)가 열(343px)보다 넓어 표 영역 안에서만 77px 가로 스크롤된다(기존 동작, 버튼 크기·구조 유지 조건상 불가피). `docs/components/button.md` Story 구성 설명을 갱신했다. `tsc -b` 통과. `.storybook/qa` 인벤토리는 재생성하지 않았다.
|
||
|
||
## 2026-11-13 — 조직도 › 개요 첫 섹션 제목 → 콘텐츠 25 → 12px (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- 원인: Storybook 미리보기 `src/org-chart/core-component-preview.tsx`가 만든 Shadow DOM에서 `hideLogoHeading`으로 패키지 로고 범례의 `h2`를 지우면, `ul.hm-orgchart-logo-list`의 브라우저 기본 `margin-top: 1em`(13px)이 섹션 제목 바로 아래 남았다. 패키지 CSS에는 이 margin 규칙이 없고, 패키지에는 공식 확장 지점(`::part`·slot·추가 스타일시트 옵션)이 없다.
|
||
- 수정: 같은 `hideLogoHeading` 분기에서 남은 로고 목록의 `style.marginTop = '0'`만 지정했다. 사용처는 `org-chart-page-previews.tsx:44`(개요 첫 섹션) 하나다. 패키지 CSS·API·토큰·다른 Story는 변경 없다. 아래쪽 기본 margin 13px은 다음 섹션의 28px과 상쇄되어 보이지 않으므로 그대로 둔다.
|
||
- 검증(6024, 1600·1024·760·390px): 개요 세 섹션 모두 제목 → 콘텐츠 12px, 섹션 사이 28px이다. 로고 7개, 목록 gap 16px, 열 수 7 / 4 / 2 / 1, 가로 스크롤 0. `tsc -b` 통과. 바로 아래 항목의 보류 B는 해결되었다.
|
||
|
||
## 2026-11-13 — Storybook 메뉴별 공통 스타일 정합성 점검·A/C 수정 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- 점검: 사이드바에 보이는 80개 Story(verification·internal 태그 제외)를 미리보기 폭 1420·390px에서 측정했다. 모두 공통 틀(`story-page.css`)을 쓰고, 77개는 좌우 30/16px·제목 → 콘텐츠 12px·섹션 사이 28px·제목 Border 0으로 일치한다. 공통 섹션이 없는 단일 미리보기 Story(SW Overview·속성창 비교·Viewer 콘텐츠 변형·확장 조직도·연계 시설물)는 고유 구조로 유지했다.
|
||
- A. SW › 뷰어 › 화면 너비: 숨김 콜백 기록 `<p hidden>`이 H1과 첫 블록 사이에 있어 공통 첫 블록 reset이 빠지고, 스택의 28px margin-top이 남았다(PC 52px / 모바일 44px 시작). `src/sw/sw-stories.css`에 `.sb-page > .sb-page-inner > .sb-page-a11y-title:first-child + [hidden] + .sw-story-stack { margin-top: 0; }`만 추가했다(공통 CSS 미변경). 이 구조는 이 Story에만 있다. 다른 Story는 모두 이미 시작 위치가 같았다. 결과: 1600·1024·760·390px에서 시작 24/17/16/16px(공통 gutter `clamp(16px, 2vw, 24px)`와 일치), 제목 → 콘텐츠 12px.
|
||
- C. 노선도 › 연계 시설물: `.sb-center--plain .linked-facility__group` gap 16 → 0. 도로 등급 제목 → 카드 격자 28 → 12px(헤더 padding 12px). 카드 들여쓰기 16px, 그룹 사이 28px, 열 수(1600 3열·1024 2열·760/390 1열), 그래픽은 유지된다. 가로 스크롤·넘침 0.
|
||
- 보류 B. 조직도 › 개요 › 관계사·회사 로고: 제목 → 콘텐츠 25px(+13px). 원인은 `@hm-design/org-chart`의 Shadow DOM 안 `.hm-orgchart-logo-list`(`packages/org-chart/src/styles/org-chart-content.css`)에 남은 브라우저 기본 `ul` margin(1em)이다. 패키지 CSS라 소비 프로젝트 영향을 검토한 뒤 결정하기로 하고 수정하지 않았다.
|
||
- 기존 문제(패키지 컴포넌트 최소 폭, 이번 변경과 무관): SW 하단 명령어바 전체·화면 너비 Story는 390px에서 가로 넘침 203/218px(`.hm-sw-footer__command` min-width 280px). SW Viewer 로고·화면 너비 Story는 390px에서 2px(`.hm-sw-viewer-header__actions`).
|
||
- `tsc -b` 통과.
|
||
|
||
## 2026-11-13 — 공통 섹션 제목 하단 Margin 0 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- `src/components/story-page.css`의 `.sb-page-section-header`: `margin-bottom` 16px → 0. `padding-bottom` 12px은 유지하고 Border는 없다. 그래서 섹션 제목(설명이 있으면 설명)에서 콘텐츠까지 28px → 12px이다. 4px 안은 사용자가 취소했다.
|
||
- `src/foundation/foundation.css`: 바로 아래 항목에서 넣은 Font Family·Font Weight 전용 `margin-bottom: 10px` 예외를 지워 공통 기준(12px)을 따르게 했다. Specimens 그룹 간격(H3 → 첫 구분선 8px, 그룹 사이 24px)과 행 좌우 12px은 그대로다.
|
||
- CENTER의 `.sb-center … > header`는 자체 margin 0·padding을 쓰는 Story 고유 구조라 변경하지 않았다. 다른 Story CSS에는 섹션 헤더 margin 재정의가 없다.
|
||
- 검증(6024, 미리보기 폭 1420·844·580·390px): 한맥 컬러·가족사 컬러·폰트·Button·Input·데이터 테이블은 모든 섹션 12px, 막대 차트는 11~12px이다. SW Header Responsive More도 헤더 하단과 본문 시작이 일치해 12px이다. 가로 스크롤 0. 예외로 SW Footer 전체 Story는 390px에서 기존 Footer 명령 영역(280px) 때문에 가로 넘침이 있다. 세로 Margin 변경과 무관하다. `tsc -b` 통과.
|
||
|
||
## 2026-11-13 — Storybook 콘텐츠 좌우 여백 60 → 30px·SW 기준점 재계산·폰트 섹션 상단 간격 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- `src/components/story-page.css`의 `.sb-page-inner`: 좌우 여백(각각)을 `clamp(16px, 16px + (100vw − 480px) × 11/72, 60px)`에서 `clamp(16px, 16px + (100vw − 480px) × 7/144, 30px)`로 바꿨다. 최대값만 절반이고 모바일 16px은 유지한다. 실측(미리보기 폭 기준)은 1420·844px에서 60 → 30px, 580px에서 약 21px, 390px에서 16px이다. LNB(180px)·manager CSS는 변경하지 않았다.
|
||
- SW Story 전용 기준점(Inner 좌우 60px 전제였음을 주석과 계산으로 확인): `sw-stories.css`의 1920 행 container 2039.98 → 1979.98px(1920 + 60), 속성창 비교 3열 1125 → 1065px(990 + 60 + 15), 1열 전환 786.98 → 726.98px(652 + 약 28 × 2 + 15 = 723). `sw-footer-stories.css`의 같은 1920 container 조건도 1979.98px. 관련 주석을 갱신했다. 패키지 SW 컴포넌트는 변경하지 않았다.
|
||
- `src/foundation/foundation.css`: Font Family·Font Weight 섹션 제목 아래 여백 16 → 10px(`.sb-page.hm-foundation .hm-typo-type-grid .sb-page-section-header`)으로, 제목에서 첫 행까지 28 → 22px이다. Specimens는 독립 열 유지가 확정되었다. 이미 그룹 제목 → 첫 구분선 8px, 그룹 사이 24px로 통일되어 있어 수정하지 않았다.
|
||
- 검증(6024): 폰트 Story를 1600·1024·760·390px에서 확인했다. 제목 → 첫 행 22/22px, 그룹 8/24px, 행 padding 12px, 구분선 유지, 섹션 Border 0, 가로 스크롤 0, 넘침은 화면 읽기용 H1뿐이다. 한맥 컬러·Button·Input·막대 차트·데이터 테이블의 4개 폭에서 여백 30/30/21/16px, 가로 스크롤 0, 렌더 오류 0이다(Button의 `sr-only` 3개는 기존). SW 속성창 비교는 1064px 2열 → 1065px 3열, 726px 1열 → 727px 2열이며 넘침 0이다. Header Responsive More는 1979px 숨김 → 1980px 1920 행 표시. Footer·Viewer는 세로 스크롤바 15px 때문에 1995px에서 표시(1990px 숨김)되며 이는 기존 container 기준 그대로다. Step Header Responsive는 1995px 표시, 가로 스크롤 0이다. `tsc -b` 통과.
|
||
|
||
## 2026-11-13 — Foundation 폰트 목록 행 좌우 12px 안쪽 여백 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- `src/foundation/foundation.css`에 `.hm-foundation .hm-typo-row { padding-inline: 12px; }` 한 줄만 추가했다. 이 클래스는 폰트 Story에서만 쓴다(Font Family·Font Weight·Specimens 모든 행).
|
||
- 행 구분선은 각 행의 `border-top`이라 시작점과 너비가 그대로이고, 안쪽 텍스트만 12px 들어간다. 섹션 제목·그룹 H3 위치, 세로 간격, 폰트·토큰 값, 컬럼 규칙(`min(240px, 40%)` / `1fr`, 440px container 전환)은 유지한다. 공통 섹션 제목 Border는 다시 넣지 않았다.
|
||
- 검증(6024, 미리보기 폭 1420·844·580·390px = 화면 1600·1024·760·390px): 14개 행 모두 padding 12px, 행 시작 x와 그룹 H3 x가 같고 텍스트는 +12px이다. 섹션 제목 위치는 변화 없다. 자식 요소가 좌우 12px 안쪽을 벗어나는 경우 0, 잘림 0, 가로 스크롤 0. 390px에서는 기존대로 1열(미리보기 → 정보)이다. `tsc -b` 통과.
|
||
|
||
## 2026-11-13 — Storybook LNB 조밀화·섹션 제목 구분선 제거·Default 컬러 구분 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- 모두 Storybook 표시 전용이며 패키지 CSS·토큰·Story 파일은 바꾸지 않았다. 신규 토큰도 없다.
|
||
- `.storybook/manager.css`(180px 매니저 사이드바): 좌우 여백 20 → 14px, 1뎁스·섹션 행 48 → 40px, 2뎁스 이상 42 → 36px, line-height 28 → 24px, 행 패딩 `8px 14px 8px 10px`(우측 32 → 14px), 아이콘·텍스트 간격 12 → 8px, 들여쓰기 32/44 → 26/36px(1뎁스 leaf 26px), 섹션 구분 간격 24 → 16px. 선택 상태 Radius 8 → 6px, 연결 곡선 `--hm-manager-join` 18 → 12px, 그룹 시작·끝 Radius·하단 여백 6px. 1뎁스 라벨은 chevron 유무와 관계없이 x=40에 정렬된다.
|
||
- `managerHead`가 서버 시작 시 `manager.css`를 읽으므로 6024를 재시작해야 반영된다. 이번 검증은 현재 파일 내용을 `#hm-manager-style`에 주입해 확인했다.
|
||
- `src/components/story-page.css`: 모든 Story 공통 섹션 제목(`.sb-page-section-header`)의 하단 구분선만 제거했다. 12px + 16px 간격은 유지한다. `src/center/center-stories.css`의 연계 시설물 그룹 제목(섹션 제목 모양)도 같은 기준으로 구분선을 제거했다.
|
||
- `src/foundation/foundation.css`: 한맥 컬러의 Default 칩 좌우에 2px 페이지 배경색(`--hm-sem-bg-content`) 경계를 바깥 그림자로 겹쳐 그린다. 칩 너비(1024px에서 모두 177px)·값·순서·텍스트는 같고, 줄 시작에서는 경계가 페이지 배경에 묻힌다. 가족사 컬러에는 Default가 없어 영향이 없다.
|
||
- 검증(6024): 1600(8칸)·1024(4칸)·760(4칸)·390(2칸)px 컬러 화면, 매니저 선택·펼침 그룹·Hover, 390px 모바일 메뉴 행 40px, Input Story의 섹션 제목 확인. `tsc -b` 통과.
|
||
- 후속 검증(6024 재기동 후): 6024는 이미 내려가 있어 `.claude/launch.json`의 `storybook` 구성으로 새로 띄웠다. 주입 없이 `#hm-manager-style`에 새 CSS가 들어갔다(join 12px, 콘텐츠 여백 `20px 0 20px 14px`). 행 높이는 섹션·1뎁스 40px, 2뎁스 36px, 그룹 끝 42px(36 + 하단 6px)이고 라벨 x는 섹션 36·1뎁스 40·2뎁스 50이다. 선택(입력창)은 36px, Radius `6px 0 0 6px`, 곡선 12px, 배경 `#F5F0E5`이다. Hover는 Black 10%이고, 내비게이션 그룹 펼침(시작 Radius 6px·끝 6px)과 접힘도 정상이다. CENTER `노선도/시설물 › 연계 시설물`(`--plain`)의 그룹 제목 5개는 하단 Border 0, padding 12px 유지, 가로 스크롤 0이다. 공통 섹션 제목을 쓰는 한맥 컬러·가족사 컬러·폰트·입력창·막대 차트·데이터 테이블은 Border 0이고, 제목 → 본문 28px(차트는 설명 포함 52px, 기존 구성)이며 렌더 오류와 가로 스크롤이 없다. SW Header·Footer Overview는 공통 섹션 제목을 쓰지 않는다. 추가 수정은 없다.
|
||
|
||
## 2026-11-12 — 노선도 배치·간격을 공통 Storybook 기준으로 정렬 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- 기준: Button·Badge 등이 쓰는 `story-page.css`(H2 → 12px + 구분선 → 16px, 섹션 28px, 들여쓰기 16px / 640px 이하 12px)와 `story-board.tsx`(H3 14/20/500 회색, 설명 14px 회색 4px 아래, 그래픽 12px 아래, 행·열 24px).
|
||
- 변경은 `src/center/center-stories.css`의 `.sb-center.sb-center--plain` 규칙에만 있다. 바로 아래 항목의 카드 제거 블록 뒤에 이어 붙였다. 조직도(`.sb-center`만 사용)·Overview(`plain` 아님)·공통 `story-page.css`·패키지 CSS·Story 파일은 변경 없음.
|
||
- 적용: `.sb-center` 위아래 8px과 연계 시설물 18px 여백 제거. `개요` 본문 안의 노선도 블록 16px(12px) 들여쓰기. 예제 제목은 500 회색, 설명은 12px → 14px. 공간 화면의 `h4`·`csi-legend`·`csi-note`도 같은 기준이며, 설명은 `-8px` 위쪽 여백으로 제목 아래 4px에 맞춘다. 설명 → 그래픽 16px → 12px. 예제 간격 32px → 24px.
|
||
- 정렬: 그래픽을 가운데에서 제목과 같은 왼쪽 기준선으로 옮겼다. 데모 stage의 `min-height`(터널·시설물 154px, 사업명 184px, 연계 변형 122px)는 카드 시절 빈 프레임 안에서 그래픽을 가운데에 두던 값이라, plain 화면에서만 0으로 두어 그래픽 높이를 따른다. 그래픽 자체의 크기·색·구성, 로컬 가로 스크롤, 760px 이하 1열은 그대로다. `tunnel/facility-reference__row`의 `space-evenly`는 `flex-start`로 바꿨다.
|
||
- 연계 시설물: 도로 등급 그룹 제목은 섹션 제목 모양(16/24/700, 12px + 구분선, 그룹 28px 간격, 헤더 → 격자 16px). 카드 격자는 16px(12px) 들여쓰기, `minmax(min(100%, 320px), 1fr)`를 써서 760px에서도 1열이다. 배율 안내·맥락 띠는 섹션 앞 블록이라 들여쓰지 않는다.
|
||
- 검증(6024): 보이는 노선도 Story 10개와 숨김 Overview를 1024·760·390px에서 확인했다. 페이지 가로 스크롤 0, 넘친 텍스트 0, 콘텐츠 시작 x는 Button과 같다(76 / 75 / 28). 정보·사업명·공간·터널 계열의 그래픽 내부 로컬 스크롤은 변경 전과 같은 기존 동작이다. 조직도 Expanded·Department Colors에는 `--plain`이 없다. `npm run typecheck` 통과.
|
||
|
||
## 2026-11-12 — 노선도 Story 샘플 카드 박스 제거 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- 대상: 노선도 Story 5개(시설물·노선·공간·사업명·정보·연계 시설물). 샘플 카드 프레임(배경·테두리·Radius), 카드 머리 띠(배경·하단 테두리), 연계 시설물 위치도/상세도 사이 가로선을 없앴다. 제목·설명 텍스트와 그래픽(시설물 SVG, 정보 카드, 사업명 박스, 노선명 배지, 범위 카드, 공간 단면 `#efefef` 캔버스)은 유지한다.
|
||
- 방식: `src/center/center-shared.tsx`의 `CenterFrame`에 `plain` 옵션을 두고 `withRepresentation`만 `sb-center--plain`을 붙인다. `src/center/center-stories.css`의 새 규칙은 모두 `.sb-center.sb-center--plain` 아래에만 있다. 조직도 Department Colors·Expanded가 `.sb-center`·`.tunnel-reference__sample`·`--sb-center-card-*`를 재사용하므로 기존 공통 카드 규칙과 변수는 그대로 둔다. Overview(검증용)는 `CenterFrame`을 직접 써서 기존 카드가 유지된다.
|
||
- 간격: 항목 32px, 2열·연계 카드 격자 24px, 제목↔설명 4px, 그래픽 위 16px(좌우·아래 0). 가운데 정렬·로컬 가로 스크롤·760px 이하 1열 전환은 기존 규칙 그대로. 패키지(`packages/center-graphic`) 변경 없음.
|
||
|
||
## 2026-11-12 — 사이드바 표시명 `팝업 메뉴`·`테이블` (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- `components-overlay-dropdown-menu` 표시명 `드롭다운·컨텍스트 메뉴` → `팝업 메뉴`(180px 사이드바 1줄). 화면 제목 "Dropdown Menu · Context Menu"·섹션·Story ID·정렬은 불변. 같은 이름을 쓰던 `docs/components/dropdown-menu.md`·`context-menu.md`와 Story 주석 3곳도 맞춤.
|
||
- `patterns-data-data-table` 표시명 `데이터 테이블` → `테이블`(manager.js만). `컴포넌트 > 데이터 표시 > 테이블`(Table 컴포넌트)과 그룹은 다르지만 같은 이름이다(사용자 결정).
|
||
- 인벤토리는 Story 이름이 아니라 manager 라벨만 바뀌어 재생성 불필요. manager.js 변경은 Storybook dev 서버 재시작 후 반영.
|
||
|
||
## 2026-11-12 — Storybook 대화상자·드롭다운/컨텍스트 메뉴 사이드바 통합, 데이터 테이블 메뉴명 (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- 방식: Story 파일 4개(`src/components/dialog`·`alert-dialog`·`dropdown-menu`·`context-menu.stories.tsx`)와 모든 Story ID 유지. 통합되는 쪽의 기존 대표 Story `All`(`components-overlay-alert-dialog--all`, `components-overlay-context-menu--all`)에 `verification` 태그만 붙여 사이드바에서 숨긴다(URL 직접 접근·검증 Story·`play` 유지).
|
||
- 공용 예제(Storybook 전용, 중복 구현 없음): `src/components/alert-dialog-examples.tsx`(`AlertDialogConfirmation`, `AlertDialogDestructive`), `src/components/context-menu-examples.tsx`(`ContextMenuFull`). 원래 Story 파일에서 옮겼고 두 Story 파일이 함께 import한다.
|
||
- 대화상자: Dialog 대표 화면에 "Alert Dialog" 섹션(로그아웃·삭제 트리거) 추가 → 트리거 8개. 사이드바 `대화상자` 하나.
|
||
- 드롭다운·컨텍스트 메뉴: Dropdown Menu 대표 화면 제목 "Dropdown Menu · Context Menu", 섹션 "Dropdown Menu"(트리거)·"Context Menu"(우클릭 영역). 사이드바 표시명 `드롭다운·컨텍스트 메뉴`(Navigation Menu의 `메뉴`와 구분, 180px 사이드바에서 2줄; 이후 `팝업 메뉴`로 변경, 위 항목). `manager.js`의 `components-overlay-alert-dialog`·`components-overlay-context-menu` 라벨은 태그 필터로 숨김 Story를 볼 때를 위해 유지.
|
||
- `patterns-data-data-table` 표시명 `테이블 패턴` → `데이터 테이블`(manager.js만).
|
||
- 문서: `docs/components/dialog.md`·`alert-dialog.md`·`dropdown-menu.md`·`context-menu.md`의 대표 Story 표와 §9. 인벤토리는 `node .storybook/qa/generate-inventory.mjs`로 재생성(PRIMARY 82 → 80, Story 수 387 불변).
|
||
- 검증 메모: 브라우저 창이 화면에 그려지지 않을 때 닫힘 animation이 늦게 끝나 overlay가 1초 이상 DOM에 남는다. 닫힘 판정은 `data-state`나 충분한 대기 후 DOM 제거로 확인한다.
|
||
|
||
## 2026-11-12 — Storybook 메뉴명 6건·사이드바/LNB 1뎁스 왼쪽 Padding 12px (브랜치 `style/storybook-ui-refinements`, 미커밋)
|
||
|
||
- 메뉴명(사이드바 표시명만, Story ID·export·title·본문 제목·정렬 순서 불변): `.storybook/manager.js` 라벨 4건(내비게이션 메뉴 → 메뉴, 데이터 테이블 → 테이블 패턴, 전체 메뉴 (GNB) → 상단 메뉴, 좌측 메뉴 (LNB) → 좌측 메뉴), Story `name` 2건(`sw-footer--full-footer` SW 하단 명령어바 → SW 명령어바, `center-graphic-facility--roadside` 휴게소 · 졸음쉼터 → 연계 노선). SW 정렬은 storySort가 Story 이름을 쓰므로 `.storybook/preview.tsx`의 `["SW 명령어바", "*"]`도 함께 변경. 본문 `StoryPageHeader` 제목은 그대로(Roadside는 `page()` 첫 인자, Footer는 별도 literal).
|
||
- Storybook 사이드바: `.storybook/manager.css` 기존 규칙 `#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid]))`의 padding을 `10px 32px 10px 12px`로(이전 왼쪽 18). 더 구체적인 기존 규칙은 유지: 2뎁스 이상 padding-block 7px, 하위 없는 1뎁스 leaf 왼쪽 32px.
|
||
- LNB: `--hm-lnb-item-padding-start` 18 → 12px(`packages/ui/src/theme/lnb.css`, 기준값 `src/theme/verification-baseline.json`, 문서 `docs/patterns/lnb.md`). 1뎁스 행 padding `10 32 10 12`(오른쪽 = inset-end 20 + 12). 2뎁스 글자 x 88·중첩 그룹 trigger 58·3뎁스 108은 불변. 2뎁스 링크 배경 시작(`--hm-lnb-subitem-surface-inset`)은 이 토큰으로 계산되어 x 68 → 62(1뎁스 그룹 글자 시작과 정렬 유지).
|
||
- Storybook은 `@hm-design/ui`를 `packages/ui/dist`로 읽으므로 LNB 반영에 `npm run build:ui`가 필요하다(dist는 gitignore). 소비 프로젝트는 dist 재빌드 + Submodule 갱신 후 반영.
|
||
- manager.js/manager.css 변경은 Storybook dev 서버 재시작 후 반영된다. 인벤토리는 `node .storybook/qa/generate-inventory.mjs`로 재생성(차이는 이름 2건뿐).
|
||
|
||
## 2026-11-12 — Foundation 한맥·가족사 컬러칩, 폰트 미니멀 타이포그래피 레이아웃 (브랜치 `style/storybook-ui-refinements`)
|
||
|
||
- 범위: `src/foundation/`(`color.stories.tsx`·`company-colors.stories.tsx`·`typography.stories.tsx`·`reference.tsx`·`foundation.css`)과 `docs/guidelines/brand-color-steps.md`. 토큰·HEX·`themes/*.json`·컴포넌트·패키지 공개 API·`reference-data.ts`·Story ID(`foundation-color--all`·`foundation-company-colors--all`·`foundation-typography--all`) 불변. 폰트 섹션 순서(Text Colors → Font Family → Font Weight → Typography Specimens) 불변.
|
||
- 공통 로직(`reference.tsx`): `colorHex()`(CSS 값 → HEX)와 `textTone()`(견본 글자색: `--hm-sem-fg-primary` → 흰색 `--hm-color-text-inverse` → 검정 `--hm-sem-palette-black` 중 배경 대비 4.5:1을 처음 충족하는 토큰, `data-text-tone`)을 한맥·가족사·Text Colors가 공유.
|
||
- 한맥 컬러: 3그룹 24칩을 연속형 컬러 띠로 표시(팔레트 섹션 폭 기준 container query 1040px 이상 8열, 520px 이상 4열, 미만 2열, 칩 간격 0, 줄 양 끝만 `--hm-radius-control-md`). 견본 120px·Padding 12 안에 단계명(14/700)·용도(Default `기본색` 12/500, Light 4 `보더 하이라이트용` 12/400) 왼쪽 위, HEX 12 오른쪽 아래. 어두운 글자 칩은 용도·HEX 500. 이전 Default 강조 테두리(`data-base`)·칩 외곽 박스·Light 4 구분선 제거. 24색 모두 4.5:1 이상(최저 브라운 Light 2 4.52), 검정 글자는 그린 Light 3·오렌지 Default만.
|
||
- 가족사 컬러: 회사 배치(3 → 2 → 1열, 2/2/3 줄)·`companyColorPresets` 데이터 유지. 회사마다 3칸 Grid(간격 12px)에 독립 칩(120px·Padding 12·Radius 4), 이름(메인·서브 N) 왼쪽 위·HEX 오른쪽 아래, 글자색은 `textTone()`. 메인 강조 테두리 없음(이름으로만 구분). 최저 대비 4.89.
|
||
- Text Colors: 가족사 컬러와 같은 개별 칩으로 변경. 행에 `data-text-colors`를 붙여 한맥·가족사 공통 견본 규칙(`:is([data-palette], [data-company-id], [data-text-colors])`: 120px·Padding 12·Radius 4, 이름 + 용도 12/400 왼쪽 위, HEX 12 오른쪽 아래)을 재사용하고(이름은 Text Colors만 14/500: 어두운 회색 위 흰 Bold가 퍼져 보여 사용자 결정, 한맥·가족사는 700 유지), 글자색은 공통 `textTone()`(fg-primary → 흰색 → 검정 중 4.5:1 첫 번째). 4개 칩 모두 흰색(대비 16.1 / 6.19 / 4.61 / 6.19). HEX는 공통 `colorHex()`로 통일(로컬 `toHex` 삭제). 그리드는 기존 4열·최소 150px 유지, 간격 12px.
|
||
- 공통 행 `.hm-typo-row`(Font Family 1행, Font Weight 3행, Specimens 10행): 정보(왼쪽) | 미리보기(오른쪽), 세로 중앙 정렬. 행 전환은 viewport가 아니라 자기 열 너비 기준(container query, `.hm-typo-rows`·`.hm-typo-group`): 440px 이상 정보 열 `min(240px, 40%)` + 24px, 미만 1열·미리보기 먼저(`order`). 1440px에서 Family·Specimens 왼쪽 열 미리보기 x=340, Weight·Specimens 오른쪽 열 x=1012로 일치(Specimens 열 간격 40px = 섹션 간격 24 + 들여쓰기 16).
|
||
- Font Family·Font Weight는 공통 `StorySectionGrid`(`.hm-typo-type-grid`)로 720px 이상 2열, 미만 1열(800px에서는 각 열 304px라 내부 1열). Font Family: Primary Typeface(12 보조)·Noto Sans KR(700) | `--hm-font-family-base` 미리보기(28/36) → CSS 변수(보조, 값에 대체 폰트 순서 포함; 별도 Fallback 문구는 사용자 요청으로 삭제). Font Weight: 이름+값·토큰 | 20/28 미리보기, 행 위·아래 12px, 행 사이에만 얇은 구분선.
|
||
- Typography Specimens: 표 2개(`.hm-typo-table`)를 컴포넌트 그룹(Page Header·Card·Label / Input·Button Standard) 목록으로 대체. 정보는 항목명(12/500)·계산값 `Size / Line / Weight · letter-spacing` 한 줄(모두 보조색), 샘플은 실제 크기(Primary). 구분선은 행마다 윗선 1줄(`--hm-sem-stroke-input-default`, 첫 줄이 그룹 제목 밑줄, 마지막 행 아래 없음), 그룹 제목 → 8px, 그룹 간 24px. 1100px 이상 텍스트/입력 2열. `data-typography-sample`(전체 라벨)·`data-typography-metrics` 유지. 그룹화로 표시 순서만 Page Header description이 Card title 앞으로 이동.
|
||
- 검증 메모: 값 표시(`useResolvedProperties`)는 `requestAnimationFrame`을 쓰므로 Storybook 미리보기 패널이 숨겨진 상태에서는 HEX·굵기 값·토큰 값이 비어 보인다(코드 회귀 아님).
|
||
|
||
## 2026-11-11 — Storybook 섹션 간격·정보 영역 들여쓰기 공통화, Foundation 폰트 위계 (main 기준, 미커밋)
|
||
|
||
- 공통 프레임 `src/components/story-page.css`: H2 16/24/700 → 12px → 구분선 → 16px → 콘텐츠(섹션 헤더 padding-bottom 8→12, margin-bottom 12→16), 섹션 사이 `--sb-page-section-gap` 24→28px. `StorySectionGrid`는 row gap만 이 변수를 따르고 column gap 24px은 유지(Chart 2열 미리보기 폭 불변). SW `sw-story-stack`·Footer 너비 행, Foundation Layout도 변수로 28px.
|
||
- 선택 들여쓰기 `.sb-page-indent`(`--sb-page-indent` 16px, 640px 이하 12px, `padding-left`): 문서 텍스트·사양 표 같은 정보 블록에만 붙인다. 실제 컴포넌트·Pattern·Chart·OrgChart·SW·CENTER 미리보기와 테두리 있는 카드/칩 Grid(한맥·가족사 컬러, Layout, Text Colors)는 들여쓰지 않는다. 현재 사용처는 Foundation/폰트의 Font Family·Font Weight·Specimens.
|
||
- `StateBoard` H3 라벨 14/20/500 보조색·행 간격 24px 유지(주석만 갱신). 좌우·상단 여백, 접근성 H1, Story ID 불변.
|
||
- Foundation/폰트(`typography.stories.tsx`, `foundation.css`): Text Colors 칩을 이름(14/700 Primary)·용도(14/400 Secondary)·HEX(12/18/400 Secondary) 3줄로 분리, Font Family 이름+대체 폰트 / CSS 변수 2줄, Font Weight CSS 변수 12px, Specimens 행 위·아래 12px·열 오른쪽 16px·고정폭 숫자. 실제 샘플 스펙(10개)은 불변. 전용 간격 덮어쓰기(`.hm-typo-page`)는 공통 규칙으로 대체해 제거.
|
||
- 기준 문서: `docs/guidelines/프로젝트-지침.md` §6 Storybook 페이지 프레임 항목.
|
||
- 하위 그룹 들여쓰기(같은 날 후속): `StateBoard`(`StorySection` 안)·Card `CardBoard`는 `data-sb-board`만 표시하고, `story-page.css`의 `.sb-page-section-body > :is([data-sb-board], :has([data-sb-board]))`가 섹션 본문 직계 블록에 한 번만 `--sb-page-indent`(16px, 640px 이하 12px)를 준다. Story 전용 Grid의 열마다 단일 보드를 둔 34개 Story의 열별 중복 들여쓰기(보이는 그룹 간격 40px)를 제거해 24px 복원. Input·Select·Toggle Sizes Grid는 `.sb-page-indent`(Input·Select의 Small/Medium/Large는 필드 Label #212121 유지). 전체 폭 Pattern 4개(GNB·LNB·Loading Screen·Page Header)는 `indent={false}`, Toggle Group(내부 검증·라벨 없음)과 단일 미리보기는 제외. 섹션 제목 X(1024/1440 60px, 390 16px) 불변, 첫 그룹 X 76px / 28px.
|
||
|
||
## 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 병합·운영 배포는 별도 지시 대상이다.
|