Avatar

사용자 프로필 이미지를 표시하는 아바타 컴포넌트입니다.

개요

Avatar는 사용자를 시각적으로 나타내는 컴포넌트로, 프로필 이미지 또는 이니셜을 표시합니다. Cals Avatar는 Cals 제품의 사용자 인터페이스에 최적화되어 있습니다.

주요 특징:

이미지 아바타
이니셜 아바타
4가지 Size (sm, md, lg, xl)
Fallback 처리
아바타 그룹 지원

사용 사례:

Cals 고객 프로필
예약 담당자 표시
서비스 제공자 목록
협업 사용자 표시

설치


npx @vortex/cli add avatar --package cals

기본 사용법


import "@vortex/ui-cals/theme";
import { Avatar } from "@vortex/ui-cals";
 
export default function Example() {
  return <Avatar src="/avatar.jpg" alt="Customer Name" />;
}

🆕 Cals 브랜딩

Cals 특화 사용 가이드

예약 고객 표시:


<div className="flex items-center gap-sm">
  <Avatar src="/customer.jpg" alt="고객" />
  <div>
    <p className="font-semibold">김예약</p>
    <p className="text-sm text-gray-500">010-1234-5678</p>
  </div>
</div>

서비스 제공자 목록:


<AvatarGroup max={3}>
  <Avatar src="/stylist1.jpg" alt="디자이너 A" />
  <Avatar src="/stylist2.jpg" alt="디자이너 B" />
  <Avatar src="/stylist3.jpg" alt="디자이너 C" />
  <Avatar src="/stylist4.jpg" alt="디자이너 D" />
</AvatarGroup>

예약 상태별 아바타

예약 상태에 따라 아바타에 Badge를 결합하여 사용할 수 있습니다:


<div className="relative">
  <Avatar src="/customer.jpg" alt="김예약" />
  <Badge variant="confirmed" className="absolute -bottom-1 -right-1">
    확정
  </Badge>
</div>

예약 상태별 아바타 보더:


{
  /* 예약 확정 - Confirmed Blue */
}
<Avatar
  src="/customer.jpg"
  alt="김예약"
  className="border-2 border-blue-500"
/>;
 
{
  /* 승인 대기 - Pending Orange */
}
<Avatar
  src="/customer.jpg"
  alt="이고객"
  className="border-2 border-orange-500"
/>;
 
{
  /* 서비스 완료 - Completed Purple */
}
<Avatar
  src="/customer.jpg"
  alt="박서비스"
  className="border-2 border-purple-500"
/>;

🆕 Foundation/iCignal과의 차이점

속성	Foundation	iCignal	Cals
기본 색상	중립적 회색	iCignal Blue 계열	Cals Pink 계열
사용 맥락	범용	iCignal 제품 사용자	Cals 고객/서비스 제공자
테마	중립적	iCignal 브랜드 컬러	Cals 브랜드 컬러
예약 상태	없음	없음	5가지 상태 Badge 결합

Props API

| Prop | Type | Default | Description | | --------- | ------- | ------- | --------------------------------- | ---- | ---- | ----------- | | src | string | - | 이미지 URL | | alt | string | - | 대체 텍스트 (필수) | | size | ‘sm’ \ | ‘md’ \ | ‘lg’ \ | ‘xl’ | ‘md’ | 아바타 크기 | | fallback | string | - | 이미지 로딩 실패 시 표시할 텍스트 | | className | string | - | 추가 CSS 클래스 |

접근성

Avatar 컴포넌트는 WCAG 2.1 AA 기준을 준수합니다.

ARIA 속성:

`alt` 속성 필수 (스크린 리더)
`role=“img”` (자동 적용)

예제

예제 1: Cals 예약 고객 카드


import "@vortex/ui-cals/theme";
import { Avatar } from "@vortex/ui-cals";
 
export default function BookingCustomer() {
  return (
    <Card>
      <CardHeader className="flex items-center gap-md">
        <Avatar src="/customer.jpg" alt="김예약 고객님" size="lg" />
        <div>
          <h3 className="font-semibold">헤어컷 + 펌 예약</h3>
          <p className="text-sm text-gray-500">
            고객: 김예약 | 2024-01-15 10:00
          </p>
        </div>
      </CardHeader>
    </Card>
  );
}

예제 2: Cals 서비스 제공자 팀


import "@vortex/ui-cals/theme";
import { Avatar, AvatarGroup } from "@vortex/ui-cals";
 
export default function ServiceTeam() {
  return (
    <div className="flex items-center gap-md">
      <span className="text-sm text-gray-600">서비스 제공자:</span>
      <AvatarGroup max={4}>
        <Avatar src="/stylist1.jpg" alt="디자이너 A" />
        <Avatar src="/stylist2.jpg" alt="디자이너 B" />
        <Avatar src="/stylist3.jpg" alt="디자이너 C" />
        <Avatar src="/stylist4.jpg" alt="디자이너 D" />
        <Avatar src="/stylist5.jpg" alt="디자이너 E" />
      </AvatarGroup>
    </div>
  );
}

예제 3: 예약 상태별 아바타


import "@vortex/ui-cals/theme";
import { Avatar, Badge } from "@vortex/ui-cals";
 
export default function BookingStatusAvatars() {
  return (
    <div className="flex gap-md">
      {/* 예약 확정 */}
      <div className="relative">
        <Avatar
          src="/customer1.jpg"
          alt="김확정"
          className="border-2 border-blue-500"
        />
        <Badge
          variant="confirmed"
          className="absolute -bottom-1 -right-1 text-xs"
        >
          확정
        </Badge>
      </div>
 
      {/* 승인 대기 */}
      <div className="relative">
        <Avatar
          src="/customer2.jpg"
          alt="이대기"
          className="border-2 border-orange-500"
        />
        <Badge
          variant="pending"
          className="absolute -bottom-1 -right-1 text-xs"
        >
          대기
        </Badge>
      </div>
 
      {/* 서비스 완료 */}
      <div className="relative">
        <Avatar
          src="/customer3.jpg"
          alt="박완료"
          className="border-2 border-purple-500"
        />
        <Badge
          variant="completed"
          className="absolute -bottom-1 -right-1 text-xs"
        >
          완료
        </Badge>
      </div>
    </div>
  );
}