ui: avatar 컴포넌트 생성

src/components/atoms/Avatar/Avatar.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Avatar } from ".";
+
+const meta = {
+  title: "Atom/Avatar",
+  component: Avatar,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Xsmall: Story = {
+  args: {
+    variant: "xsmall"
+  }
+};
+
+export const Small: Story = {
+  args: {
+    variant: "small"
+  }
+};
+
+export const Medium: Story = {
+  args: {
+    variant: "medium"
+  }
+};

src/components/atoms/Avatar/index.tsx

@@ -0,0 +1,64 @@
+import styled from "@emotion/styled";
+import ProfileImage from "@assets/image/ProfileImage";
+
+type AvatarVariant = 
+| "xsmall" 
+|  "small" 
+| "medium"
+
+
+type AvatarShapeType = {
+  [key in AvatarVariant]: {
+    size: number;
+    profileSize: number;
+  }
+}
+
+interface ButtonProps{
+  variant: AvatarVariant;
+}
+
+const AVATAR_SIZE_TYPE: AvatarShapeType = {
+  xsmall: {
+    size: 36,
+    profileSize: 28,
+  },
+  small: {
+    size: 48,
+    profileSize: 38,
+  },
+  medium: {
+    size: 60,
+    profileSize: 45,
+  }
+}
+
+
+export const Avatar = ({
+  variant
+}: ButtonProps) => {
+  return (
+    <Wrapper>
+      <AvatarCircle variant={variant}>
+        <ProfileImage
+          size={AVATAR_SIZE_TYPE[variant].profileSize}
+        />
+      </AvatarCircle>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div` 
+`
+
+const AvatarCircle = styled.div<{
+  variant: AvatarVariant;
+}>`
+  width: ${({ variant }) => `${AVATAR_SIZE_TYPE[variant].size}px`};
+  height: ${({ variant }) => `${AVATAR_SIZE_TYPE[variant].size}px`};
+  background-color: #D4B2FF;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`