HMDesign/docs/center-graphic

Center Graphic (@hm-design/center-graphic)

CENTER 도메인(제목 · 정보 표기 · 노선/공간 · 시설물)의 현재 HM 구현 기준 문서. UI 컴포넌트 문서(docs/components/)와 별개이며 UI 규격을 근거로 쓰지 않는다. 공통 원칙은 docs/guidelines/프로젝트-지침.md §5.1을 따른다.

1. 상태

항목	내용
구현 상태	ui-viz CENTER Web Reference 구현을 TypeScript 패키지로 이식 (Title · Information · Spatial · Facility). 규격을 새로 만들거나 재해석하지 않았다
기준일	2026-10-02
패키지	packages/center-graphic (@hm-design/center-graphic, private: false, compiled dist JS·타입·CSS export)
Storybook	최상위 그룹 Center Graphic (src/center/*.stories.tsx). UI는 기존 Components 유지
의존	@hm-design/ui에 의존하지 않음. peer는 react, react-dom뿐

2. 원본 근거

현재 Source of Truth는 이 문서, packages/center-graphic/src/와 src/center/의 대표 Story다. 아래 표는 초기 이식 당시 외부 ui_viz Reference의 출처 목록이며 ZIP 내부 경로가 아니다. 외부 자료는 ZIP에 포함되지 않고 실행에 필요하지 않으며 제공된 경우에만 참고한다.

파일	역할
docs/governance/center-domain.md (§0.1, §1, §2.4, §5)	CENTER 색인, 상태 어휘, 미결(TBD/HOLD) registry
docs/usage/center-usage.md	CENTER 구성과 사용 순서, 승인 asset 위치
docs/visualization/README.md	visualization owner 문서 목록
docs/foundation/center-typography.md (family, 폰트 fallback 부분)	글꼴 Noto Sans KR
implementations/web/center/components/*.jsx, *.css	Web Reference 구현 (이식 원본)
implementations/web/assets/center/facility/	Reference가 불러오는 runtime SVG 128개
assets/center/source/facility/	승인 Canonical Asset 128개 (runtime 사본과 바이트 비교용)
implementations/web/storybook/center/*.stories.jsx, center-shared.jsx	Story 구성 참고

외부 Reference가 제공된 경우의 참고 우선순위: owner 문서의 명시적 상태(CONFIRMED_CANONICAL / CONFIRMED_BY_DESIGN → PLATFORM_MAPPING → Candidate/TBD/HOLD) → 승인 asset → Web Reference 구현. docs/visualization/*.md는 이름에 center-가 없어도 CENTER owner 문서다.

읽지 않은 것(검증 한계): owner 문서(route.md, facility.md, spatial-map.md, spatial-section.md, center-title.md, center-information-*.md, center-scale.md, center-color.md 등)의 본문 전체와 _local/, generated/, verification/. 이식은 Web Reference 구현의 동작·값을 그대로 가져온 것이며, 구현 값이 owner 문서의 각 절과 일치하는지를 절 단위로 다시 대조하지는 않았다.

문서 간 충돌: 읽은 범위에서 값 충돌은 발견하지 못했다. Reference 코드 주석이 말하는 KNOWN_DEVIATION(예: 구도·면도·이도 윤곽, 고속도로 노선명 높이)은 원본 그대로 보존된다.

3. 구현 목록

영역	컴포넌트	비고
배율	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을 불러오지 않고 규칙으로 그림. 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종.

4. 규격

초기 수치와 규칙의 출처는 외부 ui-viz owner 문서다. 현재 HM 구현·검토는 포함된 코드·대표 Story와 이 문서를 기준으로 하며 외부 자료 접근을 전제로 하지 않는다. 구현에서 확인한 값:

• 시설물 총 너비(기준 이름): 터널 위치도 210 · 실사화 220 (Source reference total과 일치).
• 노선: 중심선 18u, 윤곽 중심선의 20%, 그림자 층 순서 Shadow → Outline → Primary Stroke(CONFIRMED).
  • (2026-11-13, Storybook 데모 설명에서 옮김 · CenterSpatialInformation.css/.tsx와 대조) 윤곽 3.6u. 그림자 X0 Y0 Blur 6u, Opacity 70%. 윤곽색은 지방도 · 구도·면도·이도가 Dark Outline(#000 / 30%), 나머지 분류는 White Outline. 상태 표현: 공사중 = 중심선에 흰 블록 32u / 간격 32u, 계획 = 45° 흰 빗금(+ 흰 워시).
  • 사업 노선: 중심선 #D21203, 끝 원형 표시 = 선 두께의 150%(18u 선에서 27u), 노선과 같은 윤곽·그림자.
  • 노선명 배지: 높이 54u, 좌우 padding 9u + 텍스트 너비. 노선번호 기호: 기본 64u. 방면 배지: 높이 50u의 완전히 둥근 캡슐, 흰색 80% 안쪽 윤곽 2u, 7점 화살표 다각형, 콘텐츠 기반 너비.
• 정보(CenterInformationDisplay.css와 대조): 테이블형 행 높이 = 기본값 + 추가 행마다 26.116u + 추가 항목마다 34.364u(줄 높이 26.116u + 항목 간격 8.248u). 강조형 1의 패널은 카드 뒤로 4u 겹쳐 배치된다.
• 휴게소·졸음쉼터 실사화 분리형: 예제 간격 19 / 14(ROADSIDE_ACTUAL_CONFIG.gaps). 데모 설명에 있던 조각 구조 13 / 90 / 13은 코드에서 확인하지 못한 Source 표기 값이며 확정값이 아니다.
• 글꼴: Noto Sans KR(Canonical). 폰트 파일 배포와 fallback 순서는 PLATFORM_MAPPING/TBD이며 이 패키지는 폰트를 포함하지 않는다.
• 상태: 노선만 상태(기본/공사중/계획)를 가진다. Facility는 정적이며 Selected/Hover가 없다.

5. Public API

import { CenterRepresentation, CenterTitle, CenterInformationBox, RouteLine, TunnelFacility, LocalAssetFacility, FACILITY_CONFIGS } from "@hm-design/center-graphic"
// Storybook 검수용 demo 페이지 (컴포넌트 API 아님)
import { CenterTitleReferenceDemo } from "@hm-design/center-graphic/reference"

전체 export 목록은 packages/center-graphic/src/index.ts. Reference 코드의 className 등 기존 prop은 그대로이며 타입만 추가했다(CenterTitleComposition, RouteClassKey, FacilityConfig 등).

6. Token / Style

• CENTER 전용 token은 별도 파일 없이 각 컴포넌트 CSS 안에 있다(--cid-*, --csi-*, --tunnel-* 등). UI의 --hm-* token을 쓰지 않는다.
• CSS는 컴포넌트가 import하므로 별도 theme.css entry를 만들지 않았다.
• --center-font-family: Reference CSS가 UI 쪽 --font-family-base를 참조하던 두 곳을 CENTER 전용 변수로 바꿨다(기본값 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif — Title이 이미 쓰던 체인, FNT-03 승인 fallback). 독립성을 위한 유일한 CSS 변경이다.
• Reference demo 프레임(.cid-demo__*, .center-title-reference__*, .center-representation__note)은 --color-fg-secondary 등 외부 token을 읽는다. 그래픽 자체는 쓰지 않으며, Storybook은 src/center/center-stories.css에서 값을 공급한다.

7. Storybook

Center Graphic 그룹(기본 sidebar): Title, Information, Spatial, Facility(터널 · 교량 · 교차로 · 분기점 · 나들목 · 휴게소·졸음쉼터 · 연계 시설물), verification 숨김: Overview(배율 규칙·상태 표, 직접 URL center-graphic-overview--overview 유지), Title Playground, Facility 직접 테스트 (터널). 제작 대상 해상도는 주소 ?centerResolution=3840x2160으로 지정한다.

공통 페이지 레이아웃(2026-11-13, src/center/center-stories.css의 .sb-center--plain 범위): 별도 개요 섹션 제목 없이 예제를 한 번 들여쓰고(sb-page-indent), 예제 제목 16/24/700 · 설명(또는 사이즈) 12px 회색을 8px 간격의 한 행에 둔다(공간 부족 시 줄바꿈). 제목 → 그래픽 12px, 예제 사이 24px. 표시 배율 안내는 콘텐츠 오른쪽 끝 정렬이며, 사업명 페이지만 첫 예제 제목 행 오른쪽에 둔다. 데모 설명은 구성명·사용 기준·비교에 필요한 짧은 정보와 상태 표기(SOURCE_RECEIVED/SOURCE_PENDING, KNOWN_DEVIATION, READY, 너비 테스트 라벨)만 두고, 제작 수치·SVG 로딩·Source 작성 방식 설명은 화면에서 뺐다(필요한 수치는 §4, 2026-11-13). 예외: 연계 시설물 그룹·카드 구성, 노선·공간의 제목 아래 긴 설명.

8. 미확정 / 보류 (원본 기준)

center-domain.md §5 registry를 따른다: 표시 배율 Q2b·Q3 HOLD, Facility §12.24 OWNER_REVIEW, Information 일부 TBD/Candidate, Title Resolution B TBD, 전체 layer order·collision TBD, 철도 윤곽 두께·line join TBD, symbol.md 정확한 기하·팔레트 TBD, 폰트 binary 승인 TBD. Storybook Overview에 상태 표가 있다. 이 구현은 위 항목을 확정하지 않는다.

9. 관련 파일

packages/center-graphic/src/index.ts, reference.ts, env.d.ts
packages/center-graphic/src/components/*.tsx, *.css   (7개 컴포넌트)
packages/center-graphic/src/assets/facility/          (SVG 128)
src/center/*.stories.tsx, center-shared.tsx, center-stories.css

10. 검증 상태

• TypeScript: 루트 npm run typecheck(두 패키지 포함) 통과. npm run build 통과(루트 Demo는 center-graphic을 import하지 않는다).
• Storybook: 11개 Center story가 렌더되고 오류 없음. 11개 story의 img 전부 로드(깨진 이미지 0). 터널 기준 이름의 총 너비가 위치도 210 · 실사화 220으로 reference total과 일치. Title 유형 1–2, Spatial 노선 영역, Facility 터널 화면을 눈으로 확인.
• 승인 asset 바이트 일치: 패키지의 SVG 128개(batch 122 + 터널 6) 전부가 assets/center/source/facility/ 승인 원본과 바이트 동일(상이 0, 누락 0).
• 미확인: 원본 Storybook과의 픽셀 단위 비교, owner 문서 절 단위 대조, 3840×2160(0.75) 화면, 교량·교차로·분기점·나들목·휴게소·연계 시설물·Information 화면의 눈 확인(렌더 오류와 이미지 로드만 확인), 접근성/긴 label 추가 검증.

내부 테스트 사용 범위 / License

CENTER Graphic은 현재 내부 테스트/검토 목적 범위에서 제공합니다. CENTER 자체 License는 미확정이며 외부 공개 또는 사외 배포 전 별도 License 확정이 필요합니다. 특정 오픈소스 License를 부여하지 않습니다.