From 51d471e5527acdb8cb50a2c253e9861e6f3f2d22 Mon Sep 17 00:00:00 2001
From: kyuran kim <57716832+gxxrxn@users.noreply.github.com>
Date: Wed, 1 Nov 2023 20:09:08 +0900
Subject: [PATCH] =?UTF-8?q?[#418]=20Avatar=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20(#420)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: avatar 컴포넌트 작성

- avatar.svg width, height 속성 제거

* feat: avatar 스토리 작성

* fix: avatar medium size 크기 수정
---
 public/icons/avatar.svg             |  2 +-
 src/stories/Base/Avatar.stories.tsx | 21 +++++++++++++
 src/ui/Base/Avatar.tsx              | 48 +++++++++++++++++++++++++++++
 3 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 src/stories/Base/Avatar.stories.tsx
 create mode 100644 src/ui/Base/Avatar.tsx

diff --git a/public/icons/avatar.svg b/public/icons/avatar.svg
index df83e98d..766d6d8a 100644
--- a/public/icons/avatar.svg
+++ b/public/icons/avatar.svg
@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="20" height="20" rx="10" fill="#D9D9D9"/>
 <mask id="mask0_1559_6424" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
 <circle cx="10" cy="10" r="10" fill="#D9D9D9"/>
diff --git a/src/stories/Base/Avatar.stories.tsx b/src/stories/Base/Avatar.stories.tsx
new file mode 100644
index 00000000..deaff4d9
--- /dev/null
+++ b/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' },
+};
diff --git a/src/ui/Base/Avatar.tsx b/src/ui/Base/Avatar.tsx
new file mode 100644
index 00000000..8125a1d5
--- /dev/null
+++ b/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;