React Progress Bar / 게이지바 만들기

전체 비율에 대비하여 Progress Bar를 만드는 것은 정말 간단하다.

다음과 같이 maxNum(최대치)와 적용할 num을 이용하여 다음과 같이 maxNum에서의 num 비율을 나타내는 변수를 만들고,

const dealt = Math.floor((num / maxNum) * 100);
//소수점 버리기

styled-component에서 해당 비율만큼 박스크기를 차지하게 하면 된다!!

const Progress = styled.div`
  width: 60px;
  height: 10px;
  background-color: white;
`;
const Dealt = styled.div<{ dealt: number }>`
  background-color: ${(props) => props.theme.redColr};
  width: ${(props) => props.dealt + "%"};
  height: 100%;
`;
.......
	<Progress>
    	<Dealt />
    </Progress>