diff --git a/src/_shared/icons/avatar.tsx b/src/_shared/icons/avatar.tsx
new file mode 100644
index 0000000..14b6091
--- /dev/null
+++ b/src/_shared/icons/avatar.tsx
@@ -0,0 +1,34 @@
+interface IBasicProps {
+ [key: string]: JSX.Element;
+}
+
+const avatar: IBasicProps = {
+ user: (
+ <>
+
+
+
+
+
+
+
+
+
+
+ >
+ ),
+};
+
+export default avatar;
diff --git a/src/_shared/icons/index.ts b/src/_shared/icons/index.ts
index 14f2429..750ed86 100644
--- a/src/_shared/icons/index.ts
+++ b/src/_shared/icons/index.ts
@@ -1,2 +1,3 @@
export { default as social } from "./social";
export { default as icons } from "./basic";
+export { default as avatar } from "./avatar";
diff --git a/src/assets/default.svg b/src/assets/default.svg
new file mode 100644
index 0000000..b0a118c
--- /dev/null
+++ b/src/assets/default.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/puppy.jpg b/src/assets/puppy.jpg
new file mode 100644
index 0000000..6a9220f
Binary files /dev/null and b/src/assets/puppy.jpg differ
diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
new file mode 100644
index 0000000..af81968
--- /dev/null
+++ b/src/components/Avatar/Avatar.stories.tsx
@@ -0,0 +1,106 @@
+import styled from "styled-components";
+import Avatar from "./Avatar";
+import Typography from "@/foundations/Typography/Typography";
+import Background from "@/foundations/Background";
+
+export default {
+ title: "Components/Avatar",
+ component: Avatar,
+};
+
+export const AllTypes = () => (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+);
+
+const TypeBox = styled.div`
+ display: flex;
+ flex-direction: row;
+ gap: 1rem;
+ padding: 1rem;
+ align-items: center;
+`;
+
+const AvatarBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+`;
diff --git a/src/components/Avatar/Avatar.styled.tsx b/src/components/Avatar/Avatar.styled.tsx
new file mode 100644
index 0000000..e5a3933
--- /dev/null
+++ b/src/components/Avatar/Avatar.styled.tsx
@@ -0,0 +1,77 @@
+import { colors } from "@/_shared/colors";
+import loadings from "@/_shared/animations/loadings";
+import styled, { css } from "styled-components";
+
+interface IObjectProps {
+ [key: string]: string;
+}
+
+interface IAvatarProps {
+ size: string;
+ isloading?: string;
+ theme: string;
+}
+
+const fontSize: IObjectProps = {
+ extraLarge: "3rem",
+ large: "1.25rem",
+ medium: "0.875rem",
+ small: "0.625rem",
+};
+
+const sizeNum: IObjectProps = {
+ extraLarge: "100px",
+ large: "40px",
+ medium: "28px",
+ small: "20px",
+};
+
+export const Image = styled.figure`
+ display: inline-block;
+ object-fit: cover;
+
+ height: ${(props) => sizeNum[props.size]};
+ width: ${(props) => sizeNum[props.size]};
+ min-width: ${(props) => sizeNum[props.size]};
+ margin: 0;
+ border-radius: 50%;
+
+ background-color: ${colors.gray100};
+
+ line-height: ${(props) => sizeNum[props.size]};
+ user-select: none;
+ text-transform: uppercase;
+ user-select: none;
+
+ img {
+ width: 100%;
+ height: auto;
+ display: block;
+ object-fit: cover;
+ border-radius: 50%;
+ }
+
+ svg {
+ position: relative;
+ height: 100%;
+ width: 100%;
+ vertical-align: top;
+ }
+
+ ${(props) =>
+ props.isloading === "true"
+ ? css`
+ backdrop-filter: blur(4px);
+ cursor: progress;
+ ${props.theme === "dark" ? loadings.dark : loadings.light}
+ `
+ : null}
+`;
+
+export const Initial = styled.div`
+ text-align: center;
+ color: ${colors.gray800};
+ user-select: none;
+ font-size: ${(props) => fontSize[props.size]};
+ line-height: "100px";
+`;
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
new file mode 100644
index 0000000..91f28ef
--- /dev/null
+++ b/src/components/Avatar/Avatar.tsx
@@ -0,0 +1,30 @@
+import { Image, Initial } from "./Avatar.styled";
+import AvatarBase from "./AvatarBase";
+
+interface Avatar {
+ size: string;
+ isloading?: string;
+ theme: string;
+ username?: string;
+ src?: string;
+}
+
+const Avatar = ({ size, isloading, theme, src, username }: Avatar) => {
+ let avatarFigure = ;
+ if (isloading === "true") {
+ avatarFigure = <>>;
+ } else if (src) {
+ avatarFigure = ;
+ } else if (username) {
+ avatarFigure = {username.substring(0, 1)};
+ }
+ return (
+ <>
+
+ {avatarFigure}
+
+ >
+ );
+};
+
+export default Avatar;
diff --git a/src/components/Avatar/AvatarBase.tsx b/src/components/Avatar/AvatarBase.tsx
new file mode 100644
index 0000000..87b320f
--- /dev/null
+++ b/src/components/Avatar/AvatarBase.tsx
@@ -0,0 +1,21 @@
+import { avatar } from "@/_shared/icons";
+
+interface IAvatarBaseProps {
+ image: string;
+}
+
+const AvatarBase = ({ image }: IAvatarBaseProps) => {
+ return (
+
+ );
+};
+
+export default AvatarBase;
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
index a3f49b4..055cec2 100644
--- a/src/components/Input/Input.stories.tsx
+++ b/src/components/Input/Input.stories.tsx
@@ -17,6 +17,7 @@ export const AllTypes = () => (
status="default"
placeholder="닉네임 입력 (15자 이내)"
theme="dark"
+ handleChange={() => console.log("handleChange")}
/>
(
theme="dark"
placeholder="닉네임 입력 (15자 이내)"
message="This is a hint text to help user."
+ handleChange={() => console.log("handleChange")}
/>
(
theme="dark"
placeholder="닉네임 입력 (15자 이내)"
message="This is error message."
+ handleChange={() => console.log("handleChange")}
/>
(
placeholder="이메일"
message="가입한 이메일 주소를 입력해주세요."
icon="email"
+ handleChange={() => console.log("handleChange")}
/>
(
icon="isDarkCancel"
icondirection="right"
message="15자 이내로 입력해주세요."
+ handleChange={() => console.log("handleChange")}
/>
-
+ console.log("handleChange")}
+ />
console.log("handleChange")}
/>
console.log("handleChange")}
/>
(
placeholder="이메일"
message="가입한 이메일 주소를 입력해주세요."
icon="email"
+ handleChange={() => console.log("handleChange")}
/>
(
icon="isWhiteCancel"
icondirection="right"
message="15자 이내로 입력해주세요."
+ handleChange={() => console.log("handleChange")}
/>
diff --git a/src/foundations/Color/Color.stories.tsx b/src/foundations/Color/Color.stories.tsx
index 28ef234..4ae0ef7 100644
--- a/src/foundations/Color/Color.stories.tsx
+++ b/src/foundations/Color/Color.stories.tsx
@@ -1,6 +1,5 @@
import styled from "styled-components";
import { colors } from "@/_shared/colors";
-import { fontSize } from "@/_shared/typography";
export default {
title: "Foundations/Color",