profile card

카드 컴포넌트는 데이터, 표시, 액션을 분리하면 재사용하기 쉽다

프로필 카드 하나에도 props 계약, 조건부 표시, 사용자 액션의 경계가 들어 있습니다.

data

데이터 props

이름, 이미지, 직무, 소개처럼 화면에 필요한 최소 데이터만 받습니다.

view

표시 규칙

이미지가 없을 때 fallback, 긴 소개의 줄 수, 빈 필드 처리를 정합니다.

action

액션

follow, message, profile link처럼 바깥에서 주입되는 이벤트를 연결합니다.

variant

변형

compact, detailed, selected 상태는 같은 구조 안에서 옵션으로 관리합니다.