Progressbar 만들기(with React, emotion)

 

 

CSS

부모 div는 width 100%으로하고 자식 div는 width에 변화를 주어서 progressbar를 만들려했다.

<div>
	<div><div>
<div>

progress: (percentage?: number) => css`
		width: 100%;
		height: 4px;
		background-color: ${theme.color.button_disabled};
		& > div {
			height: 4px;
			width: ${percentage}%;
			background-color: ${theme.color.main_blue};
		}
	`,

 

로직

프로젝트에서 11번 버튼을 누르면 100%가 채워져야 했다.

const [percentage, setPercentage] = useState(100 / 12);
    
const handleProgress = () => {
	if (percentage < 99) setPercentage(percentage + 100 / 12);
};

 

퍼센티지가 0부터 시작하기를 원하지 않아서 초기값으로 100/12를 주었고 버튼을 누를때마다 100/12를 더하도록 만들었다.

이렇게 다 더해지니 99.999999가 되어서 99보다 작다면 더 해지도록 if문을 추가하였다.