Avatar

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

기본 사용법

import { Avatar } from '@aift/ui/Avatar';
import { Icon, COMMON_ICON_NAMES, iconsMap } from '@aift/ui/ragllm-icons';

export default function Preview() {
  return (
    <div className="flex items-center gap-4">
      <Avatar size="medium" src="https://i.pravatar.cc/300" title="이미지" />
      <Avatar size="medium" title="아이콘">
        <Icon
          name={COMMON_ICON_NAMES.USER}
          iconsMap={iconsMap}
          size={24}
          className="size-6 text-white"
        />
      </Avatar>
    </div>
  );
}

import { Avatar } from '@aift/ui/Avatar';import { Icon, COMMON_ICON_NAMES, iconsMap } from '@aift/ui/ragllm-icons';export default function Preview() {  return (    <div className="flex items-center gap-4">      <Avatar size="medium" src="https://i.pravatar.cc/300" title="이미지" />      <Avatar size="medium" title="아이콘">        <Icon          name={COMMON_ICON_NAMES.USER}          iconsMap={iconsMap}          size={24}          className="size-6 text-white"        />      </Avatar>    </div>  );}

Size

Avatar의 크기를 설정할 수 있습니다.

import { Avatar } from '@aift/ui/Avatar';

export default function Sizes() {
  return (
    <div className="flex items-center gap-4">
      <Avatar size="xsmall" title="xsmall">
        AB
      </Avatar>
      <Avatar size="small" title="small">
        CD
      </Avatar>
      <Avatar size="medium" title="medium">
        EF
      </Avatar>
      <Avatar size="large" title="large">
        GH
      </Avatar>
    </div>
  );
}

import { Avatar } from '@aift/ui/Avatar';export default function Sizes() {  return (    <div className="flex items-center gap-4">      <Avatar size="xsmall" title="xsmall">        AB      </Avatar>      <Avatar size="small" title="small">        CD      </Avatar>      <Avatar size="medium" title="medium">        EF      </Avatar>      <Avatar size="large" title="large">        GH      </Avatar>    </div>  );}

Icon

Avatar의 아이콘을 설정할 수 있습니다.

import { Avatar } from '@aift/ui/Avatar';
import { Icon, COMMON_ICON_NAMES, iconsMap } from '@aift/ui/ragllm-icons';

export default function AvatarIcon() {
  return (
    <div className="flex items-center gap-4">
      <Avatar size="medium" title="아이콘">
        <Icon
          name={COMMON_ICON_NAMES.USER}
          iconsMap={iconsMap}
          size={24}
          className="size-6 text-white"
        />
      </Avatar>
    </div>
  );
}

import { Avatar } from '@aift/ui/Avatar';import { Icon, COMMON_ICON_NAMES, iconsMap } from '@aift/ui/ragllm-icons';export default function AvatarIcon() {  return (    <div className="flex items-center gap-4">      <Avatar size="medium" title="아이콘">        <Icon          name={COMMON_ICON_NAMES.USER}          iconsMap={iconsMap}          size={24}          className="size-6 text-white"        />      </Avatar>    </div>  );}

Image

Avatar의 이미지를 설정할 수 있습니다.

import { Avatar } from '@aift/ui/Avatar';

export default function AvatarImage() {
  return (
    <div className="flex items-center gap-4">
      <Avatar size="medium" src="https://i.pravatar.cc/300" title="이미지" />
    </div>
  );
}

import { Avatar } from '@aift/ui/Avatar';export default function AvatarImage() {  return (    <div className="flex items-center gap-4">      <Avatar size="medium" src="https://i.pravatar.cc/300" title="이미지" />    </div>  );}

Group

Avatar의 그룹을 설정할 수 있습니다.

import { AvatarGroup } from '@aift/ui/Avatar';
import { Icon, COMMON_ICON_NAMES, iconsMap } from '@aift/ui/ragllm-icons';

export default function AvatarImage() {
  return (
    <div className="flex items-center gap-4">
      <AvatarGroup
        size="small"
        count={3}
        defaultAvatar={
          <Icon
            name={COMMON_ICON_NAMES.USER_6}
            iconsMap={iconsMap}
            size={20}
            className="text-white"
          />
        }
      />
      <AvatarGroup
        size="xsmall"
        count={3}
        defaultAvatar={
          <Icon
            name={COMMON_ICON_NAMES.USER_6}
            iconsMap={iconsMap}
            size={15}
            className="text-white"
          />
        }
      />
    </div>
  );
}

import { AvatarGroup } from '@aift/ui/Avatar';import { Icon, COMMON_ICON_NAMES, iconsMap } from '@aift/ui/ragllm-icons';export default function AvatarImage() {  return (    <div className="flex items-center gap-4">      <AvatarGroup        size="small"        count={3}        defaultAvatar={          <Icon            name={COMMON_ICON_NAMES.USER_6}            iconsMap={iconsMap}            size={20}            className="text-white"          />        }      />      <AvatarGroup        size="xsmall"        count={3}        defaultAvatar={          <Icon            name={COMMON_ICON_NAMES.USER_6}            iconsMap={iconsMap}            size={15}            className="text-white"          />        }      />    </div>  );}

Button

Avatar의 버튼을 설정할 수 있습니다.

import { AvatarButton } from '@aift/ui/Avatar';
import { Icon, COMMON_ICON_NAMES, iconsMap } from '@aift/ui/ragllm-icons';

export default function AvatarButtonExample() {
  return (
    <div className="flex items-center gap-4">
        <AvatarButton  size="medium" onClick={() => console.log('clicked')}>
          <Icon name={COMMON_ICON_NAMES.USER} iconsMap={iconsMap} size={20} className="text-white" />
        </AvatarButton>
        <AvatarButton  size="medium" pushBadge={true} onClick={() => console.log('clicked')}>
          <Icon name={COMMON_ICON_NAMES.USER} iconsMap={iconsMap} size={20} className="text-white" />
        </AvatarButton>
    </div>
  );
}

import { AvatarButton } from '@aift/ui/Avatar';import { Icon, COMMON_ICON_NAMES, iconsMap } from '@aift/ui/ragllm-icons';export default function AvatarButtonExample() {  return (    <div className="flex items-center gap-4">        <AvatarButton  size="medium" onClick={() => console.log('clicked')}>          <Icon name={COMMON_ICON_NAMES.USER} iconsMap={iconsMap} size={20} className="text-white" />        </AvatarButton>        <AvatarButton  size="medium" pushBadge={true} onClick={() => console.log('clicked')}>          <Icon name={COMMON_ICON_NAMES.USER} iconsMap={iconsMap} size={20} className="text-white" />        </AvatarButton>    </div>  );}

Props

Prop	Type	Default	Description
size	`'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge'`	`'medium'`	아바타 크기
src	`string`	-	이미지 URL
alt	`string`	-	대체 텍스트
children	`ReactNode`	-	이미지가 없을 때 표시할 내용 (텍스트, 아이콘 등)
className	`string`	-	추가 CSS 클래스

Avatar

기본 사용법

Size

Icon

Image

Group

Button

Props

On this page