[TIL] progress bar 컴포넌트 구현하기

📝 문제

상단 이미지처럼 평균 가동률이 50%일경우, 100%를 기준으로 gage가 50%만큼(이미지 상에서는 반올림해서 8개의 칸) 채워지도록 구현해야합니다. 하지만 기준이 100%로 고정되어 있는것이 아니며 6이 기준이되고 3이 데이터로 들어올 경우에도 똑같이 50%가 채워지도록 구현되어야 합니다.

---

✅ 해결방법

일단, 기준이 되는 값과 채워져야하는 gage의 상태를 갖는 객체를 만듭니다.

export const barGageFormat = [
  {
    baseLine: 100, // 기준이 되는 값 => 100%
    state: [
      false, // 채워지는 칸들(총 15개)을 배열로 정하고 기본값은 false로 지정한다.
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
    ],
  }
];

---

그 후, ProgressBar와 Gage 두개의 컴포넌트를 작성했습니다. ProgressBar는 data를 props로 전달받는 역할을 하고, Gage는 15개의 칸이 되는 역할을 합니다.

채워져야 할 gage의 개수를 구하는 barGagePercent함수를 작성합니다. 이때 함수에서 gage의 개수만큼 state의 false값을 true로 바꾼뒤 컴포넌트를 반환하도록 했으며, boolean값을 컴포넌트의 props로 내려주도록 했습니다.

ProgressBar.jsx

import Gage from './Gage';
import { barGageFormat } from './status';

const ProgressBar = props => {
  const { data } => props;
  
  const barGagePercent = baseLine => {
    // 값이 소수로 떨어질경우 반올림
    const gage = Math.round((data * 15) / baseLine); 
    const progressedGage = barGageFormat.state.map((item, idx) => {
      // gage가 8일경우 state배열에서 인덱스가 1~8인 false값을 true로 바꾼다.
      idx < gage ? (item = true) : (item = false);

      return <Gage key={idx} act={item} />;
    });

    return progressedGage;
  };
  
  return (
    {barGagePercent(barGageFormat.baseLine)}
  );
}
    
export default ProgressBar;

Gage 컴포넌트에서는 props로 전달받은 boolean값과 styled-component를 활용하여 true일 경우 background를 mint색으로 변경하여 채워진 것 처럼 보이도록 구현하였습니다.

Gage.jsx

import styled from 'styled-components';

const Gage = props => {
  const { act } = props;

  return <Item act={act} />;
};

const Item = styled.div`
  display: inline-block;
  width: 7px;
  height: 45px;
  background: ${({ theme, act }) =>
  act === true ? theme.colors.mint : theme.colors.levelGray[1]};
  box-shadow: ${({ act }) => (act === true ? '0 0 5px #00e5e0' : 'none')};
`;

export default Gage;