데이터 모델
표시할 필드와 선택 필드의 기본값을 먼저 정의한다.
구조 배치
이미지, 이름, 설명, 행동 버튼이 좁은 화면에서도 순서를 유지하게 만든다.
상태 처리
팔로우 여부나 로딩 상태가 버튼 텍스트와 접근성 이름에 반영된다.
스트레스 확인
긴 이름, 누락된 아바타, 여러 링크, 작은 화면에서 깨짐을 본다.
avatar
시각적 식별
정사각 비율과 object-fit으로 카드 높이를 안정화
대체 텍스트 필요
name
주요 정보
긴 이름과 줄바꿈 정책을 정함
말줄임만으로 정보 손실
bio
보조 설명
빈 값, 긴 문장, 여러 줄 제한을 처리
카드 높이 변동 통제
actions
사용자 행동
팔로우, 메시지, 프로필 이동을 명확한 버튼으로 배치
disabled와 pending 상태