ui: avatar 컴포넌트 수정

Team-TIFY · Jul 20, 2023 · ae3ae1d · ae3ae1d
1 parent 8ea0608
commit ae3ae1d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 8 deletions.
diff --git a/src/components/atoms/Avatar/Avatar.stories.ts b/src/components/atoms/Avatar/Avatar.stories.ts
@@ -12,18 +12,21 @@ type Story = StoryObj<typeof meta>;
 
 export const Xsmall: Story = {
   args: {
-    variant: "xsmall"
+    variant: "xsmall",
+    color: "purple"
   }
 };
 
 export const Small: Story = {
   args: {
-    variant: "small"
+    variant: "small",
+    color: "purple"
   }
 };
 
 export const Medium: Story = {
   args: {
-    variant: "medium"
+    variant: "medium",
+    color: "purple"
   }
 };
diff --git a/src/components/atoms/Avatar/index.tsx b/src/components/atoms/Avatar/index.tsx
@@ -1,11 +1,15 @@
 import styled from "@emotion/styled";
 import ProfileImage from "@assets/image/ProfileImage";
+import { theme } from '@styles/theme';
 
 type AvatarVariant = 
 | "xsmall" 
 |  "small" 
 | "medium"
 
+type ColorVariant = 
+| "purple"
+| "light"
 
 type AvatarShapeType = {
   [key in AvatarVariant]: {
@@ -14,8 +18,15 @@ type AvatarShapeType = {
   }
 }
 
-interface ButtonProps{
+type AvatarColorType = {
+  [key in ColorVariant]: {
+    color: string;
+  }
+}
+
+interface AvatarProps{
   variant: AvatarVariant;
+  color: ColorVariant;
 }
 
 const AVATAR_SIZE_TYPE: AvatarShapeType = {
@@ -33,13 +44,23 @@ const AVATAR_SIZE_TYPE: AvatarShapeType = {
   }
 }
 
+const AVATAR_COLOR_TYPE: AvatarColorType = {
+  purple: {
+    color: "#D4B2FF"
+  },
+  light: {
+    color: `${theme.palette.purple_100}`
+  }
+}
+
 
 export const Avatar = ({
-  variant
-}: ButtonProps) => {
+  variant,
+  color
+}: AvatarProps) => {
   return (
     <Wrapper>
-      <AvatarCircle variant={variant}>
+      <AvatarCircle variant={variant} color={color}>
         <ProfileImage
           size={AVATAR_SIZE_TYPE[variant].profileSize}
         />
@@ -53,10 +74,11 @@ const Wrapper = styled.div`
 
 const AvatarCircle = styled.div<{
   variant: AvatarVariant;
+  color: ColorVariant;
 }>`
   width: ${({ variant }) => `${AVATAR_SIZE_TYPE[variant].size}px`};
   height: ${({ variant }) => `${AVATAR_SIZE_TYPE[variant].size}px`};
-  background-color: #D4B2FF;
+  background-color: ${({color})=> `${AVATAR_COLOR_TYPE[color].color}`};
   border-radius: 50%;
   display: flex;
   justify-content: center;