feat(phase-1.5): design.md 비주얼 계약을 Home·목업·Prism·HeroVisual에 적용한다

[gitgitWi]

스택: base feat/phase-1-scaffold ← head feat/phase-1.5-visual — Phase 1(#56)이 먼저 머지돼야 이 디프가 맞다.

왜

Phase 1 스캐폴드는 paper #FAFAF8·sage #3F6B5A 자리 토큰과 껍데기 Home만 갖고 있다. Phase 2 콘텐츠 이식 전에 docs/conventions/design.md 계약(따뜻한 캔버스·민트 액센트·손글씨 디스플레이·Prism Vitesse Light)을 실제 페이지에 고정해야 이후 MDX·Collections가 같은 레이아웃 위에 올라간다.

흐름

flowchart TD
  subgraph ASIS["AS-IS"]
    A1["Phase 1 토큰·Home 껍데기"] --> A2["design.md와 시각 불일치"]
    A2 --> A3["Phase 2 레이아웃 재작업 위험"]
  end
  subgraph TOBE["TO-BE"]
    B1["design.md StyleX·Prism·폰트"] --> B2["Home·mock article·wiki"]
    B2 -->|"성공"| B3["Phase 2는 콘텐츠만 이식"]
    B2 -->|"한계"| B4["한글 웹폰트 용량은 perf를 깎을 수 있음"]
  end
  style A3 fill:#ffebee,stroke:#c62828,color:#c62828
  style B3 fill:#e8f5e9,stroke:#2e7d32,color:#2e7d32
  style B4 fill:#fff3e0,stroke:#e65100,color:#e65100

Loading

효과

flowchart LR
  P["이 PR"] --> U["사용자: Home·목업 기사·위키가 design.md 톤으로 보인다"]
  P --> Q["품질: Prism language-*·copy·Three Home-only client visible·a11y 100"]

Loading

범위

flowchart TD
  subgraph IN["이번 PR"]
    I1["토큰·Noto KR·Prism AA·CodeBlock·HeroCanvas island·Home·mock·Storybook"]
  end
  subgraph NEXT["후속"]
    N1["MDX Collections·실 기사 — phase-2 PLAN"]
    N2["colorway 다중 테마 — phase-2"]
  end
  subgraph OUT["제외"]
    X1["Pagefind·다크모드·Quiz — SPEC 비목표"]
    X2["기사 본문 Three — Home 히어로만"]
  end

Loading

검증

$ bun run check
Result (80 files):
- 0 errors
- 0 warnings
- 0 hints

$ bunx oxfmt --check .
All matched files use the correct format.

$ bunx oxlint .
(출력 없음, exit 0)

$ bunx vitest run
 Test Files  1 passed (1)
      Tests  4 passed (4)

$ bun run lint:stylex
(exit 0)

$ bun run build
9 page(s) built in 652ms
Complete!

$ bun run build-storybook
Storybook build completed successfully

$ bunx lighthouse :4321 / 와 /articles/mock --only-categories=accessibility --preset=desktop
Home a11y: 100
mock article a11y: 100

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.