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 = {username}; + } 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 ( + + {avatar[image]} + + ); +}; + +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",