데이터 스탯 카드

엔티티(이미지·이름·설명)와 복수 지표를 한 카드에 담는 복합 표시 카드다. StatCard의 디자인 언어를 유지하되 헤더에 엔티티 정보를 얹고 지표를 가로로 배치한다. trend는 값 옆 인라인으로 표시한다.

상태

AirbnbTravel and tourism

$33.2k37%

Recurring Revenue

Engagement

기본

HubspotCRM Software

$50.2k45%

Recurring Revenue

Engagement

이미지 없음

Recurring Revenue

Engagement

entity.domain 으로 파비콘을 자동 조회한다. 실패하면 이름 첫 글자 폴백.

활용 방법

그리드 배치

여러 엔티티를 나란히 비교할 때 Grid와 조합한다.

Preview

AirbnbTravel and tourism

$33.2k37%

Recurring Revenue

Engagement

MailChimpEmail Marketing Company

$3.2k23%

Recurring Revenue

Engagement

tsx

<DataStatCard
  entity={{ name: "Airbnb", description: "Travel and tourism", domain: "airbnb.com" }}
  metrics={[
    { value: "33.2k", valuePrefix: "$", label: "Recurring Revenue", trend: { direction: "up", label: "37%" } },
    { value: 55, label: "Engagement", progress: 55 },
  ]}
/>

우상단 지표 (top-right)

position: "top-right" 를 주면 헤더 우상단에 작게 배치된다. 보조 집계 수치에 적합하다.

Preview

HubspotCRM Software

128건계정 수

$50.2k45%

Revenue

Engagement

tsx

<DataStatCard
  entity={{ name: "Hubspot", domain: "hubspot.com" }}
  metrics={[
    { value: "50.2k", valuePrefix: "$", label: "Revenue", trend: { direction: "up", label: "45%" } },
    { value: 75, label: "Engagement", progress: 75 },
    { value: 128, label: "계정 수", valueSuffix: "건", position: "top-right" },
  ]}
/>

속성

이름	타입	기본값	설명
entity	DataStatEntity	-	{ name, description?, image?, domain? }: 헤더 엔티티 정보
metrics	DataStatMetric[]	-	지표 목록(2~4개 권장). 가로 균등 배치
onClick	MouseEventHandler	-	클릭 핸들러
href	string	-	링크. onClick보다 우선
loading	boolean	false	skeleton 상태