User Avatar

사용자용 컴포넌트서비스를 쓰는 일반 사용자가 보는 화면에 쓰입니다.

프로필 이미지 또는 이니셜로 사용자를 나타내는 아바타입니다.

사용자를 작은 동그라미 하나로 나타내는 컴포넌트입니다. 프로필 이미지가 있으면 이미지를, 없으면 이름의 첫 글자(이니셜)를 보여 줍니다. shadcn/ui의 Avatar를 그대로 감싼 것이라 기본 동작과 스타일은 shadcn을 따릅니다.

Where it is used

UserMenu: 로그인 후 오른쪽 위 계정 버튼과 메뉴 머리말
/me 내 정보 화면의 큰 프로필
내 서비스의 댓글, 작성자 표시, 멤버 목록 등 어디든 사용자를 표시할 곳

Preview

김이JD

tsx

<UserAvatar user={user} />
<UserAvatar user={user} size="lg" />

Sizes

김김김김

tsx

<UserAvatar user={user} size="sm" />  // 28px
<UserAvatar user={user} size="md" />  // 36px (기본)
<UserAvatar user={user} size="lg" />  // 48px
<UserAvatar user={user} size="xl" />  // 80px

Image and fallback

상황	보이는 것
`avatar_url`	있으면 그 이미지를 보여 줍니다.
이미지 주소가 없거나 불러오지 못함	이니셜로 자동 대체됩니다.
한글 이름 (예: 김관리)	첫 글자 → 김
영문 이름 두 단어 이상 (Jane Doe)	단어 앞글자 두 개 → JD
영문 이름 한 단어 (Jane)	첫 글자 → J
이름이 비어 있음	?

킷에는 이미지 업로드 기능이 없습니다. 서버가 User.avatar_url에 이미지 주소를 담아 주면 표시만 합니다. 업로드가 필요하면 파일 저장소와 업로드 API를 서비스에서 추가하세요.

Props

Prop	Type	설명
`user`필수	`Pick<User, 'name' \| 'avatar_url'>`	표시할 사용자. name과 avatar_url만 읽습니다.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	크기. 기본은 md.
`className`	`string`	추가 클래스. 테두리나 그림자를 더할 때 씁니다.

Customization

크기 추가: UserAvatar.tsx의 sizes 객체에 항목을 더합니다.
이니셜 규칙: 같은 파일의 initialsOf 함수를 고치면 됩니다.
배경색: 이니셜 배경은 bg-muted 토큰이라 Theming에서 바꾼 색을 따릅니다.
저수준 컴포넌트: 더 많은 제어가 필요하면 components/ui/avatar.tsx의 shadcn Avatar를 직접 쓰세요.

tsx

// 테두리를 더한 아바타
<UserAvatar user={user} className="ring-2 ring-brand/30" />

Accessibility

이미지에는 alt="이름 프로필"이 자동으로 들어갑니다.
이니셜은 텍스트라 스크린리더가 읽을 수 있습니다. 이름을 함께 보여 주는 곳(메뉴 등)에서는 중복 낭독이 없도록 주변 텍스트를 확인하세요.