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
This commit is contained in:
shkim4 committed 2026-11-13 17:58:01 +09:00
1 parent bad2acfc49
commit ed7e8790ec
40 files changed
+1525 -333

No files matched your search

@@ -353,7 +353,6 @@ export function CenterInformationDisplayReferenceDemo() {
<div className="cid-demo">
<Block
title="박스형 · 정의 목록 (박스형 설명1)"
note="배지 + 그라데이션 레이블 칩 + 값 블록; 하위 불릿은 값 열 유지"
>
<CenterInformationBox
layout="definition"
@@ -370,7 +369,7 @@ export function CenterInformationDisplayReferenceDemo() {
/>
</Block>
<Block title="박스형 · 목록 — Source 팔레트 4종" note="지오메트리 동일; 팔레트만 다름">
<Block title="박스형 · 목록 — 팔레트 4종" note="지오메트리 동일; 팔레트만 다름">
{['navy', 'teal', 'orange', 'violet'].map((palette) => (
<CenterInformationBox
key={palette}
@@ -382,7 +381,7 @@ export function CenterInformationDisplayReferenceDemo() {
))}
</Block>
<Block title="테이블형" note="행 높이 = 기본값 + 추가 행마다 26.116 u + 추가 항목마다 34.364 u">
<Block title="테이블형">
<CenterInformationTable
title="사업효과"
width="643px"
@@ -401,7 +400,7 @@ export function CenterInformationDisplayReferenceDemo() {
/>
</Block>
<Block title="강조형 · 화살표 표시 (강조형 1)" note="패널은 카드 뒤에 4 u 겹침으로 배치되며 투명하게 사라짐">
<Block title="강조형 · 화살표 표시 (강조형 1)">
<CenterInformationEmphasis
title="사업목적"
arrow
@@ -429,7 +428,7 @@ export function CenterInformationDisplayReferenceDemo() {
/>
</Block>
<Block title="동적 콘텐츠 — 짧은 / 기준 / 긴 / 매우 긴" note="소유 단일행은 말줄임으로 클리핑; 명시적 줄바꿈 유지; 장문이 지오메트리를 늘리지 않음">
<Block title="동적 콘텐츠 — 짧은 / 기준 / 긴 / 매우 긴" note="한 줄 항목은 말줄임, 명시적 줄바꿈 유지">
{CONTENT_STATES.map((state) => (
<div className="cid-demo__state" key={state.key} data-content-test={state.key}>
<span className="cid-demo__tag">{state.label}</span>
@@ -452,11 +452,6 @@ export function CenterSpatialInformationReferenceDemo() {
<div className="csi csi-demo">
<Panel
id="csi-area-route" title="1. 노선 — 노선, 상태, 윤곽"
legend={
"중심선 18u, 윤곽은 중심선의 20% (3.6u), 그림자 X0 Y0 Blur 6u Opacity 70%. "
+ "지방도 · 구도 · 면도 · 이도는 Dark Outline (#000 / 30%), 나머지 분류는 White Outline 적용. "
+ "Source SVG를 로드하지 않음: 외피는 spread box-shadow, 공사중은 반복 파선 그라데이션, 계획은 45° 빗금 그라데이션."
}
note={
"KNOWN_DEVIATION — 구도,면도, 이도.svg는 흰색 윤곽으로 내보내며 명시된 Source 규칙과 시안 색상 견본에 모순"
+ "여기서는 명시된 규칙 구현"
@@ -479,7 +474,6 @@ export function CenterSpatialInformationReferenceDemo() {
<Panel
id="csi-area-project-route" title="1b. 사업 노선 — 사업노선과 끝 표시"
legend={"사업 노선 #D21203. 원형 표시 = 선의 150%인 원 (18u 선에서 27u), 노선 윤곽과 그림자 공유."}
>
<div className="csi-scale-50" style={{ padding: '10px 4px 4px' }}>
<ProjectRoute />
@@ -489,9 +483,7 @@ export function CenterSpatialInformationReferenceDemo() {
<Panel
id="csi-area-route-information" title="2. 노선 정보 표기 — 노선번호와 노선명 (동적 텍스트)"
legend={
'노선 식별에 필요한 경우 노선번호 또는 노선명을 선택하여 표기한다. '
+ "아래 문자열은 모두 실제 DOM 텍스트다. Source SVG에는 윤곽 글리프 경로로 기록되어 있지만 해당 지오메트리는 런타임에서 사용하지 않음. "
+ "노선명 너비 = padding 9u + 고유 텍스트 너비 (높이 54u 고정). 노선번호 기호는 배지 기본 64u로 고정."
'노선 식별에 필요한 경우 노선번호 또는 노선명을 선택하여 표기한다.'
}
note={
"KNOWN_DEVIATION — 고속도로 노선명.svg 높이는 48u이며 고속도로/특별시도 이름 표면 (#2E619A / #9729E5)은 선 색상과 다름"
@@ -530,8 +522,7 @@ export function CenterSpatialInformationReferenceDemo() {
<Panel
id="csi-area-direction" title="3. 방면 표기 — 방면 배지"
legend={
'노선의 진행 방향을 안내할 경우 화살표와 방면명을 조합한 배지형으로 표기한다. 노선 유형과 관계없이 동일한 형태로 적용한다. '
+ "완전히 둥근 50u 캡슐, 흰색 80%의 안쪽 윤곽 2u, 7점 화살표 다각형, 콘텐츠 기반 너비."
'노선의 진행 방향을 안내할 경우 화살표와 방면명을 조합한 배지형으로 표기한다. 노선 유형과 관계없이 동일한 형태로 적용한다.'
}
>
<div className="csi-scale-50" style={{ position: 'relative', padding: '4px 0 18px' }}>
@@ -422,8 +422,8 @@ function FacilityReferenceDemo({ config, alternateName }: { config: FacilityConf
return (
<div className="facility-reference" data-reference-facility={config.id}>
<div className="facility-reference__variant-grid">
<Sample title="Position Map" note="로컬 SVG · 위치도"><LocalAssetFacility config={config} /></Sample>
<Sample title="Actual / Detail" note="로컬 SVG · 실사화"><LocalAssetFacility config={config} variant="actualDetail" /></Sample>
<Sample title="Position Map" note="위치도"><LocalAssetFacility config={config} /></Sample>
<Sample title="Actual / Detail" note="실사화"><LocalAssetFacility config={config} variant="actualDetail" /></Sample>
</div>
{alternateName ? (
@@ -435,14 +435,14 @@ function FacilityReferenceDemo({ config, alternateName }: { config: FacilityConf
</Sample>
) : null}
<Sample title="Separated" note="Source 작성 부분 간격">
<Sample title="Separated">
<div className="facility-reference__row">
<LocalAssetFacility config={config} separated />
<LocalAssetFacility config={config} variant="actualDetail" separated />
</div>
</Sample>
<Sample title="너비 동작" note="Source 정의 가변 영역만 확장">
<Sample title="너비 동작" note="가변 영역만 확장">
<div className="facility-reference__width-tests">
{widthNames.map((name, index) => (
<div key={name}><span>{['SHORT', 'MEDIUM', 'LONG'][index]}</span><LocalAssetFacility config={config} name={name} /></div>
@@ -473,7 +473,7 @@ export function RoadsideReferenceDemo() {
return (
<div className="facility-reference roadside-reference" data-reference-facility="roadside">
<Sample title="Position Map" note="재구성 Primitive · 콘텐츠 기반 너비">
<Sample title="Position Map" note="콘텐츠 기반 너비">
<div className="roadside-tag-tests">
{tests.map((test) => (
<div key={test.size} className="roadside-tag-test" data-roadside-test={test.size.toLowerCase()}>
@@ -484,7 +484,7 @@ export function RoadsideReferenceDemo() {
</div>
</Sample>
<Sample title="Actual / Detail" note="Source 작성 그라데이션/filter 그래픽 · 고정 양 끝 + 가변 중앙">
<Sample title="Actual / Detail" note="고정 양 끝 + 가변 중앙">
<div className="roadside-tag-tests">
{tests.map((test) => (
<div key={test.size} className="roadside-tag-test" data-roadside-actual-test={test.size.toLowerCase()}>
@@ -495,11 +495,11 @@ export function RoadsideReferenceDemo() {
</div>
</Sample>
<Sample title="Actual / Detail · Separated" note="Source 작성 13 / 90 / 13 구조, 예제 간격 19 / 14">
<Sample title="Actual / Detail · Separated">
<RoadsideFacilityTag entity="drowsy-shelter" variant="actualDetail" separated />
</Sample>
<Sample title="연계 / 노선 맥락" note="노선 + 앵커 + 연결선 + 같은 시설물 태그 계약">
<Sample title="연계 / 노선 맥락" note="노선 + 앵커 + 연결선 + 시설물 태그">
<RoadsideAppliedExample />
</Sample>
</div>
@@ -178,15 +178,15 @@ export function TunnelReferenceDemo() {
return (
<div className="tunnel-reference">
<div className="tunnel-reference__variant-grid">
<TunnelSample title="Position Map" note="로컬 SVG · 위치도">
<TunnelSample title="Position Map" note="위치도">
<TunnelFacility variant="positionMap" />
</TunnelSample>
<TunnelSample title="Actual / Detail" note="로컬 SVG · 실사화">
<TunnelSample title="Actual / Detail" note="실사화">
<TunnelFacility variant="actualDetail" />
</TunnelSample>
</div>
<TunnelSample title="Separated" note="같은 개체 · Source 작성 부분 간격">
<TunnelSample title="Separated">
<div className="tunnel-reference__row">
<TunnelFacility variant="positionMap" separated />
<TunnelFacility variant="actualDetail" separated />