From 625cdf00459854d22b875bd10ee3c6574d21c36d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=88=98=ED=98=84?= Date: Thu, 22 Oct 2026 18:05:51 +0900 Subject: [PATCH] docs(storybook): simplify Foundation Typography and Layout pages 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. --- src/foundation/layout.stories.tsx | 15 ++++++--------- src/foundation/reference-data.ts | 12 ++++++------ src/foundation/reference.tsx | 4 ++-- src/foundation/typography.stories.tsx | 8 ++++---- 4 files changed, 18 insertions(+), 21 deletions(-) diff --git a/src/foundation/layout.stories.tsx b/src/foundation/layout.stories.tsx index 2b36243..d185bbb 100644 --- a/src/foundation/layout.stories.tsx +++ b/src/foundation/layout.stories.tsx @@ -1,18 +1,15 @@ -import { useEffect, useState } from "react" import type { Meta, StoryObj } from "@storybook/react-vite" import { layoutProperties, radiusReferences, spacingReferences } from "./reference-data" import { ReferencePage, ReferenceSection, useResolvedProperties } from "./reference" function LayoutReferencePage() { const values = useResolvedProperties(layoutProperties) - const [desktop, setDesktop] = useState(() => matchMedia("(min-width: 1024px)").matches) - useEffect(() => { const media = matchMedia("(min-width: 1024px)"); const update = () => setDesktop(media.matches); media.addEventListener("change", update); return () => media.removeEventListener("change", update) }, []) - return -

≥ 1024px · Desktop

Desktop Navigation · LNB 표시 · GNB desktop menu

≤ 1023px · Mobile

Mobile Navigation · LNB 숨김 · GNB mobile menu

현재 preview: {desktop ? "Desktop" : "Mobile"} · GNB 높이 {values["--hm-gnb-height"]} · LNB track {values["--hm-lnb-width"]}

CSS는 min-width: 1024px / max-width: 1023px, GNB JS는 min-width: 1024px를 사용합니다. 표시는 기존 정수 QA 경계를 따릅니다.

 -

1280 × 900

HM Desktop · QA reference

390 × 844

HM Mobile · QA reference

Boundary QA presets: 1024 × 900 / 1023 × 900

 -
{spacingReferences.map(([property, name, source]) =>

{name}

{property}

{values[property]}

)}
 -
{radiusReferences.map(property =>
{property}

{values[property]}

)}
 -
Dashboard content

가용 폭을 사용하며 긴 텍스트는 내부에서 줄바꿈합니다.

다음 섹션 · gap: {values["--hm-dashboard-gap"]}

Grid / Container: NOT_FORMALLY_DEFINED · 공용 column 수 / max-width token은 FOLLOW_UP. src/hm-theme.css의 .hm-container는 앱 데모의 로컬 사용 규칙입니다.

 + return +

≥ 1024px · Desktop

Desktop Navigation · LNB 표시 · GNB desktop menu

≤ 1023px · Mobile

Mobile Navigation · LNB 숨김 · GNB mobile menu

 +

1280 × 900

HM Desktop · QA reference

390 × 844

HM Mobile · QA reference

 +
{spacingReferences.map(([property, name, responsive]) =>

{name}

{property}

{values[property]}

)}
 +
{radiusReferences.map(property =>
{property}

{values[property]}

)}
 +
Dashboard content

가용 폭을 사용하며 긴 텍스트는 내부에서 줄바꿈합니다.

다음 섹션 · gap: {values["--hm-dashboard-gap"]}
 } const meta = { title: "Foundation/Layout", parameters: { layout: "fullscreen" } } satisfies Meta diff --git a/src/foundation/reference-data.ts b/src/foundation/reference-data.ts index 8af0126..d180236 100644 --- a/src/foundation/reference-data.ts +++ b/src/foundation/reference-data.ts @@ -54,12 +54,12 @@ export const typographyReferences = [ ] export const typographyProperties = ["--hm-font-family-base", "--hm-font-weight-medium", "--hm-font-weight-bold", "--hm-card-title-font-weight", "--hm-input-font-weight", ...typographyReferences.flatMap(item => [item.size, item.line, ...(item.weight ? [item.weight] : [])])] export const spacingReferences = [ - ["--hm-dashboard-padding", "Dashboard 외곽 여백", "dashboard-layout.css · Desktop 34px / Mobile 20px"], - ["--hm-dashboard-gap", "Dashboard 섹션 사이", "dashboard-layout.css"], - ["--hm-card-padding", "Card 안쪽 여백", "card.css"], - ["--hm-page-header-margin-bottom", "Page Header → 첫 콘텐츠", "page-header.css"], - ["--hm-gnb-join", "GNB → 콘텐츠 연결", "gnb.css"], - ["--hm-lnb-join", "LNB → 콘텐츠 연결", "lnb.css"], + ["--hm-dashboard-padding", "Dashboard 외곽 여백", "Desktop 34px / Mobile 20px"], + ["--hm-dashboard-gap", "Dashboard 섹션 사이", ""], + ["--hm-card-padding", "Card 안쪽 여백", ""], + ["--hm-page-header-margin-bottom", "Page Header → 첫 콘텐츠", ""], + ["--hm-gnb-join", "GNB → 콘텐츠 연결", ""], + ["--hm-lnb-join", "LNB → 콘텐츠 연결", ""], ] as const export const radiusReferences = ["--hm-radius-control-md", "--hm-radius-button", "--hm-radius-input", "--hm-radius-select", "--hm-radius-container"] export const layoutProperties = [...spacingReferences.map(([property]) => property), ...radiusReferences, "--hm-gnb-height", "--hm-lnb-width"] diff --git a/src/foundation/reference.tsx b/src/foundation/reference.tsx index 068a8a0..972690a 100644 --- a/src/foundation/reference.tsx +++ b/src/foundation/reference.tsx @@ -24,10 +24,10 @@ export function useResolvedProperties(properties: readonly string[]) { } // The page frame, title and sections are the common Story page (src/components/story-page.tsx); .hm-foundation styles the reference content. -export function ReferencePage({ title, intro, children }: { title: string; intro: string; children: ReactNode }) { +export function ReferencePage({ title, intro, children }: { title: string; intro?: string; children: ReactNode }) { return {children} } -export function ReferenceSection({ title, note, children, id }: { title: string; note: string; children: ReactNode; id?: string }) { +export function ReferenceSection({ title, note, children, id }: { title: string; note?: string; children: ReactNode; id?: string }) { return {children} } export function Specimen({ label, size, line, weight }: { label: string; size: string; line: string; weight?: string }) { diff --git a/src/foundation/typography.stories.tsx b/src/foundation/typography.stories.tsx index afe7507..d94eeb0 100644 --- a/src/foundation/typography.stories.tsx +++ b/src/foundation/typography.stories.tsx @@ -9,10 +9,10 @@ const weights = [ ] function TypographyReferencePage() { const values = useResolvedProperties(typographyProperties) - return -

Noto Sans KR → 맑은 고딕 → 시스템 sans-serif

구현 참고 · 전체 CSS Font Stack--hm-font-family-base

{values["--hm-font-family-base"]}

/fonts/NotoSansKR-variable.ttf · font-weight 100–900 asset

 -
{weights.map(({ property, label }) =>
{property}

{values[property]} — {label}

한맥 프로젝트
Hanmac Project
0123456789

)}
 -
{typographyReferences.map(item =>

{item.label}

packages/ui/src/theme/{item.source}

Size
{item.size} · {values[item.size]}
Line Height
{item.line} · {values[item.line]}
Weight
{item.weight ? <>{item.weight} · {values[item.weight]} : "normal · 컴포넌트에서 별도 weight 지정 없음"}
)}
 + return +

Noto Sans KR → 맑은 고딕 → 시스템 sans-serif

 +
{weights.map(({ property, label }) =>
{property}

{values[property]} — {label}

한맥 프로젝트
Hanmac Project
0123456789

)}
 +
{typographyReferences.map(item =>

{item.label}

)}
 } const meta = { title: "Foundation/Typography", parameters: { layout: "fullscreen" } } satisfies Meta