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:
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 />
|
||||
|
||||
Reference in new issue
Block a user