디자인 시스템을 다시 짠다는 것
색 한 톤을 바꾸려다 결국 토큰 레이어 전체를 다시 정리했습니다.
Component
Post Card
Stable리스트 페이지에서 글/노트 항목을 표시하는 단위.
01 Preview
실제 모습.
02 Rationale
왜 이렇게 만들었나.
- HeadingLevel을 prop으로 받습니다. 페이지마다 outline 위계가 다릅니다.
- Tags는 slot입니다. 카드가 칩의 종류를 강제하지 않습니다.
- Shadow와 raised surface로 카드가 떠 있음을 보입니다.
- 본문 max-width 안에서 너비가 가변합니다. 1200px과 720px 모두에서 자연스럽습니다.
03 Anatomy
어떻게 구성되는가.
- 01 Container — surface-raised, border-default, radius-lg, shadow-md
- 02 Title — 20px 700 (headingLevel prop으로 h2~h4)
- 03 Description — 14px 500 secondary
- 04 Footer — tags slot + date
04 Props
속성.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | 카드 제목 (필수) |
description | string | — | 한 줄 요약 (선택) |
date | string | — | 날짜 표시 (선택) |
headingLevel | "h2" | "h3" | "h4" | h3 | 문서 outline 위계 |
05 Usage
가져다 쓰기.
import PostCard from '@/components/PostCard.astro'; 06 Accessibility
접근성 체크리스트.
- headingLevel을 페이지 outline에 맞춰 설정
- 카드 전체가 링크라면 article > a 구조 + aria-labelledby
- date는 <time datetime> 사용
07 Decision
언제 쓰고, 언제 쓰지 않는가.
When to use
- 글 목록 리스트
- 관련 글 추천
- 검색 결과 표시
When not to
- 단일 hero/feature — 별도 컴포넌트 검토
- 데이터 행 — Table
- 액션 위주 — Button group
08 Related