diff --git a/docs/center-graphic/README.md b/docs/center-graphic/README.md index 1be453f..b6c549b 100644 --- a/docs/center-graphic/README.md +++ b/docs/center-graphic/README.md @@ -40,8 +40,8 @@ CENTER 도메인(제목 · 정보 표기 · 노선/공간 · 시설물)의 현 | 배율 | `CenterRepresentation` | 제작 대상 7680×2160 = 1.00, 3840×2160 = 0.75 (`CONFIRMED_BY_DESIGN` 배율 쌍). 다른 크기는 `PREVIEW_ONLY` 1.00 | | 제목 | `CenterTitle` | 유형 1–4 (`projectName`, `projectNameRoute`, `routeProjectName`, `routeProjectNameRoute`). HTML 텍스트 + CSS, Source SVG 미사용 | | 정보 | `CenterInformationBox`(list / definition), `CenterInformationTable`, `CenterInformationEmphasis` | 팔레트 5종 `CENTER_INFORMATION_PALETTES`. chevron / arrow는 인라인 벡터 | -| 노선/공간 | `RouteLine`, `ProjectRoute`, `RouteNameBadge`, `RouteNumberBadge`, `DirectionBadge`, `AdministrativeLabel`, `NorthArrow`, `BoundaryLine`, `ProjectExtent` | 노선 분류 7종 `ROUTE_CLASSES`, 상태 `existing` / `underConstruction` / `planned`. SVG asset을 불러오지 않고 규칙으로 그림 | -| 시설물 | `TunnelFacility`, `LocalAssetFacility` + `FACILITY_CONFIGS`(bridge · intersection · junction · interchange), `RoadsideFacilityTag`, `CompactFacilityConnection` | 승인 SVG 128개를 **바이트 그대로** 사용. 좌·중·우 조각 중 중앙만 가로로 확장 | +| 노선/공간 | `RouteLine`, `ProjectRoute`, `RouteNameBadge`, `RouteNumberBadge`, `DirectionBadge`, `AdministrativeLabel`, `NorthArrow`, `BoundaryLine`, `ProjectExtent` | 노선 분류 7종 `ROUTE_CLASSES`, 상태 `existing` / `underConstruction` / `planned`. SVG asset을 불러오지 않고 규칙으로 그림. `AdministrativeLabel` 기본형은 마지막 글자 뒤 글자 간격을 상자 폭에서 빼므로 가운데 정렬하면 글자 기준으로 가운데에 놓임(2026-10-26) | +| 시설물 | `TunnelFacility`, `LocalAssetFacility` + `FACILITY_CONFIGS`(bridge · intersection · junction · interchange), `RoadsideFacilityTag`, `CompactFacilityConnection` | 승인 SVG 128개를 **바이트 그대로** 사용. 좌·중·우 조각 중 중앙만 가로로 확장. `CompactFacilityConnection`(간략 적용 예제)의 선택 속성 `segmentShape`(2026-10-26, `routeMode="inline"`일 때): `"tunnel"`은 노선 30% 길이의 둥근 끝 구간 + 흰 테두리 + 양 끝 원형 점, `"bridge"`는 30% 직사각형 구간 + 흰 끝선 + 양 끝 사각형(끝 표시 #400500, 노선 두께의 40%). 지정하지 않으면 가운데 12px 띠 | 구현하지 않은 것: 표시 배율 HOLD(Q2b·Q3) 화면, 통합 배치(`IntegratedPlacementScene`, `PREVIEW_ONLY`), `CenterCompositions` · Facility `Assets` Story, POI/Terrain Symbol(`symbol.md`, 구현 없음), 후보(Candidate) SVG 64종. diff --git a/docs/sw/sw-header-usage.md b/docs/sw/sw-header-usage.md index 9f55817..24b5c4c 100644 --- a/docs/sw/sw-header-usage.md +++ b/docs/sw/sw-header-usage.md @@ -637,6 +637,9 @@ const data = { Storybook: `Property Panel · 선택 없음 / 전체 선택 / 원 1개 / 모두 펼침` 개별 Story와 `Property Panel · 4개 비교`(디자인 검증용, 실측 크기 표시, 좁으면 줄바꿈). 실제 Header는 현재 선택에 맞는 패널 하나만 표시합니다. +- **4개 비교 배치(2026-10-26):** 화면 폭 1080px 이상은 3열입니다. 짧은 패널(선택 없음·전체 선택)은 1열에 위아래로 쌓고, 긴 패널(원 1개·모두 펼침)은 2·3열에 나란히 둡니다. 그보다 좁으면 2열 × 2행, 720px 미만은 1열입니다. 패널은 항상 원래 크기(314px 폭)이고 가로 스크롤은 만들지 않습니다. +- **Overview 미리보기(2026-10-26):** 속성창을 열어도 16:9 미리보기 영역에 스크롤바가 생기지 않습니다. 속성창 높이는 미리보기 영역 안으로 제한되고(Story가 넘기는 `--sw-preview-stage-height` 기준), 넘치는 내용은 패널 본문 안에서 스크롤됩니다. 실제 제품이 화면 높이에 맞춰 패널을 줄이는 것과 같은 방식이며, Storybook 배치 전용 예외라 패키지 CSS는 바꾸지 않았습니다. + ### 형상 영역 Slot — `shapeContent` ```tsx