docs(storybook): simplify Foundation Typography and Layout pages
Deploy Storybook / deploy (push) Successful in 53s

Typography: drop the page intro, section notes, the Font Stack details and
the per-specimen source path / size list that repeated the computed summary.
Layout: drop the intro, section notes, CSS source paths, the boundary and QA
preset notes, the current preview line and the Grid / Container note.
ReferencePage intro and ReferenceSection note become optional; Color keeps its text.
This commit is contained in:
shkim4 committed 2026-10-22 18:05:51 +09:00
1 parent f4ddd5ac4b
commit 625cdf0045
4 files changed
+18 -21

No files matched your search

+4 -4
View File
@@ -9,10 +9,10 @@ const weights = [
]
function TypographyReferencePage() {
const values = useResolvedProperties(typographyProperties)
return <ReferencePage title="Typography" intro="기존 HM 컴포넌트의 실제 구현 규격 · 별도 Heading / Body / Caption token 없음">
<ReferenceSection title="Font Family" note="Noto Sans KR → 맑은 고딕 → 시스템 sans-serif"><div className="hm-foundation-panel"><p>Noto Sans KR → 맑은 고딕 → 시스템 sans-serif</p><details><summary>구현 참고 · 전체 CSS Font Stack</summary><code>--hm-font-family-base</code><p>{values["--hm-font-family-base"]}</p><p>/fonts/NotoSansKR-variable.ttf · font-weight 100–900 asset</p></details></div></ReferenceSection>
<ReferenceSection title="Font Weight" note="400(Regular) · 500(Medium) · 700(Bold) 3단계"><div className="hm-foundation-grid">{weights.map(({ property, label }) => <article className="hm-foundation-card" key={property}><code>{property}</code><p>{values[property]} — {label}</p><p style={{ fontWeight: `var(${property})` }}>한맥 프로젝트<br />Hanmac Project<br />0123456789</p></article>)}</div></ReferenceSection>
<ReferenceSection title="Component Specimens" note="specimen의 computed style 기준 · 자간 미지정은 normal"><div className="hm-foundation-specimens">{typographyReferences.map(item => <article className="hm-foundation-panel" key={item.label}><h3>{item.label}</h3><p className="hm-foundation-note">packages/ui/src/theme/{item.source}</p><dl><dt>Size</dt><dd><code>{item.size}</code> · {values[item.size]}</dd><dt>Line Height</dt><dd><code>{item.line}</code> · {values[item.line]}</dd><dt>Weight</dt><dd>{item.weight ? <><code>{item.weight}</code> · {values[item.weight]}</> : "normal · 컴포넌트에서 별도 weight 지정 없음"}</dd></dl><Specimen {...item} /></article>)}</div></ReferenceSection>
return <ReferencePage title="Typography">
<ReferenceSection title="Font Family"><div className="hm-foundation-panel"><p>Noto Sans KR → 맑은 고딕 → 시스템 sans-serif</p></div></ReferenceSection>
<ReferenceSection title="Font Weight"><div className="hm-foundation-grid">{weights.map(({ property, label }) => <article className="hm-foundation-card" key={property}><code>{property}</code><p>{values[property]} — {label}</p><p style={{ fontWeight: `var(${property})` }}>한맥 프로젝트<br />Hanmac Project<br />0123456789</p></article>)}</div></ReferenceSection>
<ReferenceSection title="Component Specimens"><div className="hm-foundation-specimens">{typographyReferences.map(item => <article className="hm-foundation-panel" key={item.label}><h3>{item.label}</h3><Specimen {...item} /></article>)}</div></ReferenceSection>
</ReferencePage>
}
const meta = { title: "Foundation/Typography", parameters: { layout: "fullscreen" } } satisfies Meta