Avatar - OLUN. Design System

구성: Avatar root 안에 AvatarImage와 AvatarFallback을 함께 배치합니다.
fallback: 이미지가 없거나 로드에 실패하면 fallback glyph를 표시합니다.
name: AvatarFallback name은 전체 이름에서 첫 grapheme을 추출합니다. children이 있으면 children을 우선합니다.
size: sm은 32px, md는 36px, lg는 44px 크기입니다.
alt: 이미지가 실제 인물을 식별하면 이름을 alt에 넣고, 장식이면 빈 alt를 사용합니다.

이미지

AvatarImage와 fallback initials

김

코드 보기tsx

import { Avatar, AvatarImage, AvatarFallback } from "@olundot/ui";

const avatarImageSrc =
  "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><rect width='80' height='80' fill='%23dfe8f1'/><circle cx='40' cy='30' r='16' fill='%235a8210'/><path d='M16 72c4-18 44-18 48 0' fill='%235a8210'/></svg>";

export function AvatarImageExample() {
  return (
    <Avatar>
      <AvatarImage src={avatarImageSrc} alt="김지수" />
      <AvatarFallback name="김지수" />
    </Avatar>
  );
}

이니셜

이미지 없이 fallback만 사용

김이박

코드 보기tsx

import { Avatar, AvatarFallback } from "@olundot/ui";

export function AvatarFallbackOnly() {
  return (
    <div style={{ display: "flex", gap: "8px" }}>
      <Avatar><AvatarFallback name="김지수" /></Avatar>
      <Avatar><AvatarFallback name="이민준" /></Avatar>
      <Avatar><AvatarFallback name="박서연" /></Avatar>
    </div>
  );
}

크기

sm, md, lg size

SMMDLG

코드 보기tsx

import { Avatar, AvatarFallback } from "@olundot/ui";

export function AvatarSizes() {
  return (
    <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
      <Avatar size="sm"><AvatarFallback>SM</AvatarFallback></Avatar>
      <Avatar size="md"><AvatarFallback>MD</AvatarFallback></Avatar>
      <Avatar size="lg"><AvatarFallback>LG</AvatarFallback></Avatar>
    </div>
  );
}

이미지 실패

이미지 로드 실패 시 fallback 표시

이

코드 보기tsx

import { Avatar, AvatarImage, AvatarFallback } from "@olundot/ui";

export function AvatarMissingImage() {
  return (
    <Avatar>
      <AvatarImage src="/missing-avatar.png" alt="이민준" />
      <AvatarFallback name="이민준" />
    </Avatar>
  );
}