shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity
Files
ed7e8790ec1965124e00888db2bc857533f8fdcc
HMDesign/WORKING_CONTEXT.md
T
shkim4 ed7e8790ec style(storybook): tidy CENTER, chart, org chart and SW story pages 
- 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
2026-11-13 17:58:01 +09:00

89 KiB
Raw Blame History

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-2123 승인 변경 이전의 기대값이었다: 파일 열기 아이콘 = 실제 아이콘 1 + 외곽선 1 SVG(caf4c32), 아이콘 영역 16 × 16·클릭 영역(버튼) ≥ 34px(0840d76, 실측 104 × 50 / 아이콘만 37 × 50), 모든 sweep 폭에서 같은 규격; 좁은 헤더 hover = 면 없음(투명)·글자 #FFC600(caf4c32); sweep은 "More 전 아이콘 + 패널 토글이 전체 보기보다 먼저(2026-10-23) + 아이콘이 된 버튼은 좁아질수록 라벨 복귀 없음(More 이동 허용)", 항목 수 단조 감소 대신 More가 보이는 21개 폭(650400)마다 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, 7601799 0 8px, 7601079 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 병합·운영 배포는 별도 지시 대상이다.
View Git Blame Copy Permalink