diff --git a/src/assets/image/ProfileImage.tsx b/src/assets/image/ProfileImage.tsx
deleted file mode 100644
index b09f05c5..00000000
--- a/src/assets/image/ProfileImage.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-interface ProfileProps{
- size: number
-}
-
-function ProfileImage({size}:ProfileProps) {
- return (
- <>
-
-
-
- )
-}
-
-export default ProfileImage;
\ No newline at end of file
diff --git a/src/assets/image/kitty_profile.svg b/src/assets/image/kitty_profile.svg
new file mode 100644
index 00000000..3bbc687e
--- /dev/null
+++ b/src/assets/image/kitty_profile.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/image/monkey_profile.svg b/src/assets/image/monkey_profile.svg
new file mode 100644
index 00000000..b32dee80
--- /dev/null
+++ b/src/assets/image/monkey_profile.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/components/atoms/Avatar/Avatar.stories.ts b/src/components/atoms/Avatar/Avatar.stories.ts
index c9c8b2d3..03d6023f 100644
--- a/src/components/atoms/Avatar/Avatar.stories.ts
+++ b/src/components/atoms/Avatar/Avatar.stories.ts
@@ -13,20 +13,23 @@ type Story = StoryObj;
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",
}
};
\ No newline at end of file
diff --git a/src/components/atoms/Avatar/index.tsx b/src/components/atoms/Avatar/index.tsx
index 82008a75..0d6ae4e6 100644
--- 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 (
-
@@ -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;
`
\ No newline at end of file