← Design System

Component

Post Card

Stable

리스트 페이지에서 글/노트 항목을 표시하는 단위.

01 Preview

실제 모습.

디자인 시스템을 다시 짠다는 것

색 한 톤을 바꾸려다 결국 토큰 레이어 전체를 다시 정리했습니다.

design tokens +2
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

함께 보면 좋은.