Badge 컴포넌트 만들기

태그

Dec 14, 2023

<html>

sup 태그 ⇒ 윗 첨자

이것으로 뱃지를 만든다!

sub 태그 ⇒ 아래첨자

⇒ 이 태그들을 자식으로 갖는 컨테이터 컴포넌트는 첨자를 포함해서 height가 늘어난다


const BadgeContainer = styled.div`
	positon: relative;
	display: inline-flex
`

const Badge = styled.sup`
	postion: absolute;
	top: 0;
	right: 0;
	transform: translate(50%, -50%); //컨테이너에서 우상향으로 살짝 벗어나도록 하기 위함
	...
`

const Badge = ({children, count}) => {
	...
	return (
		<BadgeContainer>
			{children}
			<Badge>{count}</Badge>
		</BadgeContainer>
	)
}


<Badge>
	<Image src="" />
</Badge>