ProgressBar를 <progress> 태그로 만들기

 

아래의 정체성 버튼을 누르면 상단의 프로그래스바가 채워지는 페이지를 만들었다.

팀원이 프로그래스바를 컴포넌트로 만들지말고 <progress> 태그가 있으니 이걸 이용해서 만들어보라고 조언해주어서 변경을 해보았다.

 

기존의 코드

totalClicksNeeded -> 전체 클릭 수

currentClicks -> 현재의 클릭 수

 

전체 클릭 수를 현재 클릭 수로 나뉘고 100을 곱해서 현재의 %를 구하였다.

const calculateProgress = () => {
	return (currentClicks / totalClicksNeeded) * 100;
};

 

%를 width로 보내서 %만큼 width가 채워지게 만들었다.

& > div {
		height: 4px;
		width: ${calculateProgress}%;
		background-color: ${theme.color.main_blue};
	}

 

전체코드

import { css } from "@emotion/react";

import { theme } from "@/styles/theme";

interface ProgressProps {
	totalClicksNeeded: number;
	currentClicks: number;
}

function Progressbar({ totalClicksNeeded, currentClicks }: ProgressProps) {
	// 클릭 필요 수와 현재 클릭 수를 비교해서 %로 보여주는 함수
	const calculateProgress = () => {
		return (currentClicks / totalClicksNeeded) * 100;
	};

	return (
		<div css={progressbarStyle(calculateProgress())}>
			<div />
		</div>
	);
}

export default Progressbar;

const progressbarStyle = (calculateProgress: number) => css`
	width: 100%;
	height: 4px;
	background-color: ${theme.color.button_disabled};
	& > div {
		height: 4px;
		width: ${calculateProgress}%;
		background-color: ${theme.color.main_blue};
	}
`;

 

 

새로운 코드

max -> 전체 클릭 수

value -> 현재 클릭 수

이러면 기본 css로 만들어진다. 

엄청 길었던 코드가 확 짧아졌다.

<progress css={chattingPageStyle.progress} value={progress + 1} max={11} />

 

 

다만 css넣는 방식이 좀 생소했다.

::-webkit-progress-bar 이 부분은 전체 progress바 부분이고

::-webkit-progress-value 이 부분은 채워지는 바 부분이다.

이걸 넣어야 적용이 된다.

progress: css`
		position: fixed;
		width: 360px;
		appearance: none;
		::-webkit-progress-bar {
			background: white;
			height: 4px;
			overflow: hidden;
		}
		::-webkit-progress-value {
			background: ${theme.color.main_blue};
		}
	`,