[#51] ✨ 공통 컴포넌트 Avatar 개발 (#89)

* [#51] 💄 remove default width, height props in avatar svg

* [#51] ✨ add Avatart component

* [#51] ✅ add Avatar stories

Author: KingNono1030

src/assets/icons/ic-avatar.svg

@@ -0,0 +1,47 @@
+import Image from 'next/image'
+
+import { IcAvatar } from '@/assets/IconList'
+import clsx from 'clsx'
+
+type AvatarSize = 24 | 48 | 60 | 180
+
+interface AvatarProps {
+  image?: string | null
+  size?: AvatarSize
+  alt?: string
+  className?: string
+}
+
+const baseStyle =
+  'relative flex items-center justify-center overflow-hidden rounded-full bg-gray-200'
+
+const styleBySize: Record<AvatarSize, string> = {
+  24: 'w-24 h-24',
+  48: 'w-44 h-44',
+  60: 'w-60 h-60',
+  180: 'w-180 h-180',
+}
+
+export const Avatar = ({
+  image = null,
+  size = 48,
+  alt = 'username',
+  className = '',
+}: AvatarProps): JSX.Element => {
+  const avatarStyle = clsx(baseStyle, styleBySize[size], className)
+
+  return (
+    <div className={avatarStyle} role='img'>
+      {image ? (
+        <Image
+          src={image}
+          alt={`${alt} 아바타`}
+          fill
+          className='object-cover'
+        />
+      ) : (
+        <IcAvatar />
+      )}
+    </div>
+  )
+}

src/components/common/avatar/Avatar.tsx

@@ -0,0 +1,3 @@
+import { Avatar } from './Avatar'
+
+export { Avatar }

src/components/common/avatar/index.ts

@@ -0,0 +1,64 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Avatar } from '@/components/common/avatar'
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Common/Avatar/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: [24, 48, 60, 180],
+      description: 'Avatar size in pixels',
+    },
+    image: {
+      control: 'text',
+      description: 'URL of the avatar image',
+    },
+    alt: {
+      control: 'text',
+      description: 'Alt text for the avatar image',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes for custom styling',
+    },
+  },
+  args: {
+    alt: 'User Avatar',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Avatar>
+
+export const Default: Story = {
+  args: {
+    size: 48,
+    image: null,
+  },
+}
+
+export const WithImage: Story = {
+  args: {
+    size: 48,
+    image: 'https://picsum.photos/250/250',
+  },
+}
+
+export const LargeAvatar: Story = {
+  args: {
+    size: 180,
+    image: 'https://picsum.photos/250/250',
+  },
+}
+
+export const SmallAvatar: Story = {
+  args: {
+    size: 24,
+    image: null,
+  },
+}