Patterns
ArticleCard
매거진 아티클 카드 — 썸네일 + 카테고리 · 제목 · 발췌 · 메타.
import { ArticleCard } from '@coldsurfers/surf-ui/cards'TAPE
여름의 리버브
테이프 딜레이가 남긴 잔향만 모아 들었다.
7.15 · 24분
MIND
공연장에서 혼자 서 있기
같이 갈 사람이 없어서 못 간 공연 목록.
7.11
import { ArticleCard } from '@coldsurfers/surf-ui/cards'export default function Example() { return ( <div style={{ width: '100%', display: 'grid', gap: 20, gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', }} > <ArticleCard tone="forest" category="TAPE" title="여름의 리버브" excerpt="테이프 딜레이가 남긴 잔향만 모아 들었다." meta="7.15 · 24분" /> <ArticleCard tone="plum" category="MIND" title="공연장에서 혼자 서 있기" excerpt="같이 갈 사람이 없어서 못 간 공연 목록." meta="7.11" /> </div> )}CoverBlock 과 Eyebrow 를 안에서 조립합니다 — 소비처가 그 둘을 따로 import 하지 않습니다.
thumbnailUrl 이 없으면 tone 색면만 노출합니다. 없는 이미지를 회색 박스로 흉내 내지 않는 건
데이터 정직성 쪽 결정입니다 — 색면은 그 자체로 카드의 표지입니다.
폭은 소비처가 정합니다. 카드는 width: 100% 라 그리드 칸을 그대로 채웁니다.
클릭은 소비처가 감싼다
라우터를 물지 않습니다. next/link 든 react-router 든 카드 바깥에서 감쌉니다.
<Link href={`/magazine/${post.slug}`}>
<ArticleCard {...post} />
</Link>Props
Prop
Type
그 밖의 HTMLAttributes<HTMLElement> 속성은 루트 엘리먼트로 그대로 통과한다.