ui: Avatar 초기 프로필 이미지 관련 수정

Team-TIFY · Jul 23, 2023 · 7d9cbf5 · 7d9cbf5
1 parent ae3ae1d
commit 7d9cbf5
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 37 deletions.
diff --git a/src/assets/image/ProfileImage.tsx b/src/assets/image/ProfileImage.tsx
diff --git a/src/assets/image/kitty_profile.svg b/src/assets/image/kitty_profile.svg
diff --git a/src/assets/image/monkey_profile.svg b/src/assets/image/monkey_profile.svg
diff --git a/src/components/atoms/Avatar/Avatar.stories.ts b/src/components/atoms/Avatar/Avatar.stories.ts
@@ -13,20 +13,23 @@ type Story = StoryObj<typeof meta>;
 export const Xsmall: Story = {
   args: {
     variant: "xsmall",
-    color: "purple"
+    color: "purple",
+    imageUrl: "kitty",
   }
 };
 
 export const Small: Story = {
   args: {
     variant: "small",
-    color: "purple"
+    color: "purple",
+        imageUrl: "kitty",
   }
 };
 
 export const Medium: Story = {
   args: {
     variant: "medium",
-    color: "purple"
+    color: "purple",
+        imageUrl: "kitty",
   }
 };
diff --git a/src/components/atoms/Avatar/index.tsx b/src/components/atoms/Avatar/index.tsx
@@ -1,15 +1,13 @@
 import styled from "@emotion/styled";
-import ProfileImage from "@assets/image/ProfileImage";
 import { theme } from '@styles/theme';
+import Kitty from "../../../assets/image/kitty_profile.svg";
+import Monkey from "../../../assets/image/monkey_profile.svg"
 
-type AvatarVariant = 
-| "xsmall" 
-|  "small" 
-| "medium"
+type AvatarVariant = "xsmall" | "small" | "medium";
 
-type ColorVariant = 
-| "purple"
-| "light"
+type ColorVariant = "purple" | "light";
+
+type ProfileVariant = "kitty" | "monkey";
 
 type AvatarShapeType = {
   [key in AvatarVariant]: {
@@ -24,11 +22,19 @@ type AvatarColorType = {
   }
 }
 
+type ProfileImgType = {
+  [key in ProfileVariant]: {
+    imageUrl: string;
+  }
+}
+
 interface AvatarProps{
   variant: AvatarVariant;
   color: ColorVariant;
+  imageUrl: ProfileVariant;
 }
 
+
 const AVATAR_SIZE_TYPE: AvatarShapeType = {
   xsmall: {
     size: 36,
@@ -53,16 +59,24 @@ const AVATAR_COLOR_TYPE: AvatarColorType = {
   }
 }
 
+const PROFILE_IMAGE_TYPE: ProfileImgType = {
+  kitty: {
+    imageUrl: Kitty,
+  },
+  monkey: {
+    imageUrl: Monkey,
+  },
+}
 
 export const Avatar = ({
   variant,
-  color
-}: AvatarProps) => {
+  color,
+  imageUrl
+}: AvatarProps,) => {
   return (
     <Wrapper>
       <AvatarCircle variant={variant} color={color}>
-        <ProfileImage
-          size={AVATAR_SIZE_TYPE[variant].profileSize}
+        <ProfileImages  variant={variant} imageUrl={imageUrl}
         />
       </AvatarCircle>
     </Wrapper>
@@ -83,4 +97,14 @@ const AvatarCircle = styled.div<{
   display: flex;
   justify-content: center;
   align-items: center;
+`
+
+const ProfileImages = styled.image<{
+  variant: AvatarVariant;
+  imageUrl: ProfileVariant;
+}>`
+  width: ${({ variant }) => `${AVATAR_SIZE_TYPE[variant].profileSize}px`};
+  height: ${({ variant }) => `${AVATAR_SIZE_TYPE[variant].profileSize}px`};
+  background-image: url(${({ imageUrl }) => `${PROFILE_IMAGE_TYPE[imageUrl].imageUrl}`});
+  background-size: cover;
 `