연동 카드

서드파티 서비스 연결 상태를 보여주는 카드다. 로고(파비콘)·이름·설명·제공자 뱃지와 Connect/Connected 버튼을 하나의 카드로 묶는다. 연결·해제 핸들러는 호출자가 주입하고, 카드는 현재 상태만 표시한다.

상태

HubSpotby HubSpot, Inc.

CRM and marketing platform

미연결

HubSpotby HubSpot, Inc.

CRM and marketing platform

연결됨

Custom Serviceby Duolabs

사내 자체 서비스

이미지 없음 (이름 폴백)

connected prop 으로 버튼 상태가 바뀐다. domain 을 주면 구글 파비콘 서비스로 로고를 자동 조회한다.

활용 방법

그리드 배치

여러 서비스를 나란히 보여줄 때 Grid와 조합한다.

Preview

HubSpotby HubSpot, Inc.

CRM and marketing platform

Mailchimpby Intuit Mailchimp

Email marketing platform

Slackby Salesforce

Business messaging and collaboration

Notionby Notion Labs

All-in-one workspace

tsx

<Grid columns={2} gap="sm">
  <IntegrationCard
    name="HubSpot"
    description="CRM and marketing platform"
    domain="hubspot.com"
    provider="HubSpot, Inc."
    verified
    connected={false}
  />
  <IntegrationCard
    name="Mailchimp"
    description="Email marketing platform"
    domain="mailchimp.com"
    provider="Intuit Mailchimp"
    connected
  />
</Grid>

로딩

데이터를 불러오는 동안 loading을 주면 로고·버튼·이름이 skeleton으로 대체된다.

Preview

tsx

<IntegrationCard name="HubSpot" connected={false} loading />

언제 쓰지 않나

· 서비스 목록 선택(체크박스) → Checkbox + DataGrid 조합.
· 연결 상태 외에 추가 설정(API 키 입력 등)이 필요한 경우 → IntegrationCard는 진입점만 담당, 설정 UI는 별도 모달·페이지로.

속성

이름	타입	기본값	설명
name	string	-	서비스 이름: 필수. 이미지 실패 시 첫 글자 폴백으로도 사용
description	string	-	서비스 한 줄 설명
image	string	-	로고 이미지 URL 직접 지정
domain	string	-	도메인으로 구글 파비콘 자동 조회 (hubspot.com 등)
provider	string	-	"by ___" 형태로 제공자 이름을 표시
verified	boolean	false	제공자 옆에 verified 아이콘 표시
connected	boolean	false	연결 상태. true면 버튼이 Connected 스타일로
onConnect	MouseEventHandler	-	Connect/Connected 버튼 클릭 핸들러
onDisconnect	MouseEventHandler	-	Connected 상태일 때 별도 해제 핸들러. 없으면 onConnect 재사용
loading	boolean	false	skeleton 상태: 로고·버튼·이름이 pulse