[Next.js+NextUI] ProgressBar(가로 그래프)로 진행 정도를 표현하기

이번에는 NextUI를 이용해 손쉽게 ProgressBar를 만들어볼 것이다.

아래 이미지는 결과물이다. 

 

일단은 NextUI의 문서를 한 번 확인해보자. 

https://nextui.org/docs/components/progress

Progress | NextUI - Beautiful, fast and modern React UI Library

위의 문서를 보았듯이 Progress를 import 시켜서 props에 값을 넣어주면 된다.

확인해본 결과, 당연하게도 Progress의 value값은 0~100이다. 

물론 그 이상의 값을 넣더라도 Progress의 Bar가 꽉꽉 채워지기는 한다.

 

그러면, Progres의 value값을 진행 정도에 맞게 설정하려면 어떻게 해야할까?

대한민국의 기초 교육은 대단해서 우리는 손쉽게 구할 수 있다. 

단순하게 Math.ceil((현재 지출의 합계)/(목표 지출))*100을 하면 어느 정도 사용 되었는지, Progress Bar에 표현할 수 있다.

 

아래는 내가 작성해본 코드이다. 

 

import { Progress, Container, Text, Spacer } from "@nextui-org/react";
import { memo } from "react";

const TodayGraphBar = ({ usedMoney, goal }) => {

  const handleVarValue = () => {
    if (goal === 0 || goal === "0" || goal === "") {
      return 0;
    } else {
      const intGoal = parseInt(goal);
      return (usedMoney/intGoal)*100;
    }
  }

  return (
    <Container>
      <Progress color="primary" value={handleVarValue()} />
      <Spacer y={0.3} />
      <Text size={"$xs"} align="center">
        목표량의 {Math.ceil(handleVarValue())}%를 사용하셨습니다.
      </Text>
    </Container>
  );
}

export default memo(TodayGraphBar);

뜬끔없는 소리지만.. javascript를 쓰다 보니 왜 typescript가 필요한지 계속 느끼게 된다.

이거 타입 일일히 신경 써야 하는 거 은근 사람 미치게 한다. ㄷㄷ;; 

일단은 이번 프로젝트 까지만 javascript 쓰고, 다음 프로젝트에서는 typescript 써야겠다..

왜 typescript를 써야하는지 경험으로 절실히 느낄 수 있는 것도 참 좋은 것 같다 ㅋㅋㅋㅋㅋ