Patterns
ArticleCard
아티클, 팟캐스트, 영상 콘텐츠의 미리보기 카드 컴포넌트입니다.
ArticleCard
콘텐츠 피드에서 아티클/팟캐스트/영상의 진입점 역할을 하는 카드입니다. 저자 정보, 카테고리, 읽기 시간까지 한눈에 파악할 수 있습니다.
Examples
Article오피스
2026 서울 오피스 시장 전망: 공실률과 임대료 동향 분석
강남, 여의도, 도심 3대 권역의 오피스 시장 주요 지표를 종합했습니다.
김
김현수
2026.03.04 · 8 min read
Podcast리츠
SPI Talks: 리츠 투자, 지금이 적기인가?
리츠 시장의 현재와 미래를 전문가 패널과 함께 심층 토론합니다.
박
박지영
2026.02.28 · 32 min
import { ArticleCard } from "@seoulpi/ui/article-card";
function Example() {
return (
<ArticleCard
title="2026 서울 오피스 시장 전망"
excerpt="강남, 여의도, 도심 3대 권역의 주요 지표를 종합했습니다."
author={{ name: "김현수" }}
publishedAt="2026.03.04"
readTime="8 min read"
category="오피스"
/>
);
}Variants
- Vertical: 썸네일이 상단에 위치하는 그리드 뷰 레이아웃 (기본값)
- Horizontal: 썸네일이 좌측에 위치하는 리스트 뷰 레이아웃
Content Types
- Article: 텍스트 기반 아티클 (📄)
- Podcast: 오디오 콘텐츠 (🎧)
- Video: 영상 콘텐츠 (▶️)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | 콘텐츠 제목 |
excerpt | string | — | 발췌 요약 |
author | { name, avatarUrl? } | — | 저자 정보 |
publishedAt | string | — | 발행일 |
readTime | string | — | 읽기 소요 시간 |
category | string | — | 카테고리 |
tags | string[] | [] | 태그 목록 |
contentType | "article" | "podcast" | "video" | "article" | 콘텐츠 유형 |
isPremium | boolean | false | 프리미엄 잠금 여부 |
variant | "horizontal" | "vertical" | "vertical" | 레이아웃 변형 |