Patterns
ExpertCard
전문가 프로필, 전문 분야, 활동 통계를 표시하는 카드 컴포넌트입니다.
ExpertCard
전문가 네트워크의 핵심 컴포넌트로, 프로필 정보와 전문 분야, 인증 상태, 활동 통계를 한눈에 보여줍니다.
Examples
김
김현수
Senior Analyst · SPI Research
오피스리테일리츠분석
42
Articles
92
Insight Score
박
박지영
Head of Research · JLL Korea
호텔리조트
95
Articles
98
Insight Score
import { ExpertCard } from "@seoulpi/ui/expert-card";
function Example() {
return (
<ExpertCard
name="김현수"
title="Senior Analyst"
organization="SPI Research"
isVerified
specialties={["오피스", "리테일"]}
articleCount={42}
insightScore={92}
/>
);
}Variants
- Default: 아바타, 인증 뱃지, 전문 분야 태그, 활동 통계를 모두 포함한 전체 프로필 카드
- Compact: 피드 내부에서 사용하는 인라인 레이아웃 (아바타 + 이름 + 직함만 표시)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | 전문가 이름 |
title | string | — | 직함 |
organization | string | — | 소속 기관 |
avatarUrl | string | — | 아바타 이미지 URL |
specialties | string[] | [] | 전문 분야 태그 목록 |
articleCount | number | — | 작성 아티클 수 |
insightScore | number | — | 인사이트 점수 |
isVerified | boolean | false | 공식 인증 여부 |
variant | "default" | "compact" | "default" | 레이아웃 변형 |
Usage Notes
isVerified뱃지는 플랫폼에서 공식 인증된 전문가에게만 부여하세요.specialties는 3개 이내로 제한하면 시각적으로 가장 깔끔합니다.