컴포넌트
Avatar
사용자 이미지나 대체 내용을 표시합니다.
설치
pnpm dlx ply-ui add avatar공통 설치 설정을 먼저 적용합니다.
사용법
사용자 이미지가 있으면 Image에 src와 alt를 지정합니다. 이미지가 없거나 로딩에 실패하면 Fallback이 표시됩니다.
구성
| 구성 요소 | 역할 |
|---|---|
Root | 이미지와 대체 표시를 묶습니다. |
Image | 사용자 이미지입니다. src와 alt를 지정합니다. |
Fallback | 이미지가 없거나 불러오지 못했을 때 표시할 내용입니다. |
대체 표시
이미지가 없거나 불러오지 못하면 Fallback 내용을 표시합니다.
구현 코드
components/ui/avatar.tsx
"use client";
import type { ComponentProps } from "react";
import { Avatar as Primitive } from "@base-ui/react/avatar";
import { withClassName } from "../../lib/cx";
import "./avatar.css";
// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
function AvatarRoot({
className,
...props
}: ComponentProps<typeof Primitive.Root>) {
return (
<Primitive.Root
{...props}
className={withClassName("rbx-avatar", className)}
/>
);
}
function AvatarImage({
className,
...props
}: ComponentProps<typeof Primitive.Image>) {
return (
<Primitive.Image
{...props}
className={withClassName("rbx-avatar-image", className)}
/>
);
}
function AvatarFallback({
className,
...props
}: ComponentProps<typeof Primitive.Fallback>) {
return (
<Primitive.Fallback
{...props}
className={withClassName("rbx-avatar-fallback", className)}
/>
);
}
// Root/Portal 등 스타일 없는 파트와 제네릭 API는 원본을 그대로 보존합니다.
export const Avatar = {
...Primitive,
Root: AvatarRoot,
Image: AvatarImage,
Fallback: AvatarFallback,
};
components/ui/avatar.css
/* Avatar: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */
.rbx-avatar {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--rbx-color-shift-300);
overflow: hidden;
font-weight: 700;
color: var(--rbx-color-content-emphasis);
}
.rbx-avatar-image {
width: 100%;
height: 100%;
object-fit: cover;
}