Avatar

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

개요

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

주요 특징:

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

사용 사례:

iCignal 사용자 프로필
리포트 작성자 표시
팀 멤버 목록
협업 사용자 표시

설치


npx @vortex/cli add avatar --package icignal

기본 사용법


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

iCignal 브랜딩

iCignal 특화 사용 가이드

리포트 작성자 표시:


<div className="flex items-center gap-sm">
  <Avatar src="/user.jpg" alt="분석가" />
  <div>
    <p className="font-semibold">김분석</p>
    <p className="text-sm text-gray-500">데이터 분석팀</p>
  </div>
</div>

협업 멤버 표시:


<AvatarGroup max={3}>
  <Avatar src="/user1.jpg" alt="김분석" />
  <Avatar src="/user2.jpg" alt="이리포트" />
  <Avatar src="/user3.jpg" alt="박대시보드" />
  <Avatar src="/user4.jpg" alt="최통계" />
</AvatarGroup>

Foundation과의 차이점

속성	Foundation	iCignal
기본 색상	중립적 회색	iCignal Blue 계열
사용 맥락	범용	iCignal 제품 사용자
테마	중립적	iCignal 브랜드 컬러

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: iCignal 리포트 작성자 카드


import "@vortex/ui-icignal/theme";
import { Avatar } from "@vortex/ui-icignal";
 
export default function ReportAuthor() {
  return (
    <Card>
      <CardHeader className="flex items-center gap-md">
        <Avatar src="/analyst.jpg" alt="김분석 분석가" size="lg" />
        <div>
          <h3 className="font-semibold">월간 분석 리포트</h3>
          <p className="text-sm text-gray-500">작성자: 김분석 | 2024.01.15</p>
        </div>
      </CardHeader>
    </Card>
  );
}

예제 2: iCignal 협업 팀 표시


import "@vortex/ui-icignal/theme";
import { Avatar, AvatarGroup } from "@vortex/ui-icignal";
 
export default function CollaborationTeam() {
  return (
    <div className="flex items-center gap-md">
      <span className="text-sm text-gray-600">협업 중:</span>
      <AvatarGroup max={4}>
        <Avatar src="/user1.jpg" alt="김분석" />
        <Avatar src="/user2.jpg" alt="이리포트" />
        <Avatar src="/user3.jpg" alt="박대시보드" />
        <Avatar src="/user4.jpg" alt="최통계" />
        <Avatar src="/user5.jpg" alt="정데이터" />
      </AvatarGroup>
    </div>
  );
}