30 lines
1005 B
TypeScript
30 lines
1005 B
TypeScript
|
export function UserAvatar({ src, alt, width = 120, height = 120, className }: { src?: string | null; alt?: string; width?: number; height?: number; className?: string }) {
|
||
|
|
if (src) {
|
||
|
|
return (
|
||
|
|
<img
|
||
|
|
src={src}
|
||
|
|
alt={alt || "프로필"}
|
||
|
|
width={width}
|
||
|
|
height={height}
|
||
|
|
className={className || "rounded-full object-cover"}
|
||
|
|
style={{ width, height }}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 프로필 이미지가 없을 때 표시할 기본 아바타 SVG
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={className || "rounded-full bg-[#E0E0E0] flex items-center justify-center overflow-hidden"}
|
||
|
|
style={{ width, height }}
|
||
|
|
>
|
||
|
|
<svg width={width} height={height} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="120" height="120" rx="60" fill="#E0E0E0"/>
|
||
|
|
<circle cx="60" cy="40" r="20" fill="white"/>
|
||
|
|
<path d="M30 100C30 80 45 70 60 70C75 70 90 80 90 100" fill="white"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|