[#418] Avatar 컴포넌트

src/stories/Base/Avatar.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import Avatar from '@/ui/Base/Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Base/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithSrc: Story = {
+  args: { src: '/icons/logo.svg', name: 'dadok', size: 'large' },
+};

src/ui/Base/Avatar.tsx

@@ -0,0 +1,48 @@
+import Image from 'next/image';
+
+import { IconAvatar } from '@public/icons';
+
+type AvatarSize = 'small' | 'medium' | 'large';
+
+interface AvatarProps {
+  name?: string;
+  src?: string;
+  size?: AvatarSize;
+}
+
+const getSizeClasses = (size: AvatarSize) => {
+  switch (size) {
+    case 'small': {
+      return 'w-[2rem] h-[2rem]';
+    }
+    case 'medium': {
+      return 'w-[3.2rem] h-[3.2rem]';
+    }
+    case 'large': {
+      return 'w-[7rem] h-[7rem]';
+    }
+  }
+};
+
+const Avatar = ({ name, src, size = 'medium' }: AvatarProps) => {
+  const sizeClass = getSizeClasses(size);
+
+  return (
+    <span
+      className={`relative inline-block rounded-full bg-white ${sizeClass}`}
+    >
+      {src ? (
+        <Image
+          alt={name || 'avatar'}
+          src={src}
+          fill
+          className={`rounded-full object-cover ${sizeClass}`}
+        />
+      ) : (
+        <IconAvatar />
+      )}
+    </span>
+  );
+};
+
+export default Avatar;