[제안] Avatar 컴포넌트가 생각한대로 동작하지 않습니다.

[codeisneverodd]

아래와 같이 Avatar를 사용하였을 때

const MyPage = () => {
	return (
		<Wrapper>
			<Avatar src="https://picsum.photos/200" alt="avatar" size={10.5} />
		</Wrapper>
	)
}

export default MyPage

const Wrapper = styled.div`
	width: 100%;
	height: 100%;
	background-color: ${themeColors.labelBackground};
`

다음과 같은 결과가 나오게 됩니다.

외부에서 지정한 Wrapper의 크기를 따라게되는데, 저는 Avatar에 전달한 size가 AvatarWrapper가 아닌 Image의 크기를 고정시켜서 그렇다고 생각합니다!

const Image = styled.img`
	width: ${({ size }) => `${size}rem`};
	height: ${({ size }) => `${size}rem`};
`
const Avatar = ({ src, size = 2, alt, ...props }) => {
	return (
		<AvatarWrapper {...props}>
			<Image size={size} src={src} alt={alt} />
		</AvatarWrapper>
	)
}

Image가 아닌 AvatarWrapper의 크기를 고정시키고, backgroundImage 형태로 넣어주는 것은 어떨까요?

저는 styledComponent 이긴 하지만 아래와 같이 구현하여 사용하였습니다

const Avatar = styled.div`
	width: ${props => props.size}rem;
	height: ${props => props.size}rem;
	background: no-repeat top center url('${props => props.src}');
	background-size: cover;
	border-radius: 50%;
`

결과