docs: property compare layout, Overview panel clamp, center-graphic shapes
Deploy Storybook / deploy (push) Successful in 53s

- sw-header-usage: 3-column Property Panel comparison and the Overview
  panel clamped to the preview Stage (no Stage scrollbar)
- center-graphic README: CompactFacilityConnection segmentShape and the
  AdministrativeLabel trailing letter-spacing fix
This commit is contained in:
shkim4 committed 2026-10-26 20:24:26 +09:00
1 parent 6b60096752
commit 99f99870f3
2 files changed
+5 -2

No files matched your search

+2 -2
View File
@@ -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종.
+3
View File
@@ -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