재사용 가능한 ProfileCard 경계

카드 데이터와 표현 책임을 컴포넌트 경계로 묶고 목록 배치는 부모에 남기면 같은 카드를 여러 화면에서 재사용할 수 있습니다.

<ProfileCard profile={item} />한 사람의 데이터만 받아 한 장의 카드 UI를 책임지는 재사용 단위입니다.

계약

Profile props

id, name, role, imageUrl처럼 카드가 실제로 필요한 필드만 받습니다.

표현

이미지·이름·역할·소개를 의미 있는 요소로 묶고 빈 이미지 대체값을 둡니다.

배열 map과 key, 반응형 grid는 여러 카드를 소유하는 부모가 담당합니다.

스타일

카드 내부 스타일을 지역화하고 선택·비활성처럼 값에 따른 상태만 조건부 클래스로 나눕니다.

핵심카드 하나의 모양과 데이터 계약은 자식에, 반복과 배치 규칙은 부모에 두는 책임 분리가 핵심입니다.