개인프로젝트

<progress> 태그

이전에 만들어둔 todo 앱을 typescript 와 쿼리를 이용해서 다시 만드는 개인 프로젝트를 진행 하던 중 progress 태그 라는 것을 새로 알게 되어서 기록해둔다.

사용법

코드 적용

기본적으로 html 태그이기 때문에 html 태그처럼 사용하면 된다.
리액트 어플리케이션에서 사용할 경우 jsx 리턴문 안에 평범하게 적어주면 프로그레스 바를 바로 생성할 수 있다.

return (
    <>
      {totalCount === 0 ? (
        <StWrapperDiv>
          <NoTodo />
        </StWrapperDiv>
      ) : (
        <>
          <StCategoryName>진행도😼</StCategoryName>
        🎇<StProgressBar value={progressRatio} />
          <StTodoWrapper>
            <StCategoryName>진행중인 ToDo!🤔</StCategoryName>
            {undoneItems.map((todo) => {
              return <TodoCard item={todo} isDone={todo.isDone} />;
            })}
          </StTodoWrapper>
          <StTodoWrapper>
            <StCategoryName>완료된 ToDo!🥳</StCategoryName>
            {doneItems.map((todo) => {
              return <TodoCard item={todo} isDone={todo.isDone} />;
            })}
          </StTodoWrapper>
        </>
      )}
    </>
  );
};

위 예시에서 🎇 이모지 달려있는 줄이 바로 progress 태그가 사용된 부분. styled-components를 사용했기에 형태만 약간 다르다.

progress 는 value를 가지는데 따로 설정할 수도 있지만 기본적으로 0에서 1 사이의 값이며 0이면 0%, 1이면 100%를 의미한다. 그리고 이 value에 원하는 값을 줘서 원하는 진행도를 나타낼 수 있다.

위 예시에서는 value로 progressRatio를 전달하는데 progressRatio는 아래와 같은 간단한 코드로 만들어진다

const progressRatio = (doneCount / totalCount).toFixed(2);

완료된 todo 의 수를 전체 todo 의 수로 나눈 다음에 toFixed(2)로 소수점 둘째 자리까지만 저장한것.

스타일링

const StProgressBar = styled.progress`
  width: 100%;
  height: 30px;
  margin-bottom: 20px;
  padding: 5px;
  appearance: none;
  &::-webkit-progress-bar {
    background-color: #eee;
    border-radius: 10px;
  }

  &::-webkit-progress-value {
    background-color: #0d60bf;
    border-radius: 10px;
  }
`;

위 예시에서처럼 width와 height로 크기를 마음대로 조절 할 수 있고, padding 이나 margin 도 원하는 대로 줄 수 있다.
appearance:none 은 기본 제공되는 스타일을 사용하지 않고 커스텀 스타일을 사용하기 위한 코드.
커스텀 스타일은 그 아래에 적용하고 있는 모습이다.

적용 모습

제대로 적용이 되면 위 처럼 진행도를 나타낼 수 있게 된다. 현재 todo는 5개가 있고 그중 2개가 완료이므로 40% 의 진행도를 나타내고 있다.

bar 안에 숫자로 40% 같은걸 직접 표시할 수 있다면 좋겠지만 아직까지 그런 방법은 찾지 못했다.

진행도를 나타내는 원형 인디케이터나 프로그레스 바 형태의 인디케이터를 구현해주는 서드파티 라이브러리도 다수 있는 것으로 확인하였지만 별도의 라이브러리 설치 없이 간단한 진행도를 나타내는 목적이라면 내장되어 있는 progress 태그를 활용하는 것도 좋은 선택인것 같다.

여담으로 value를 설정해주지 않으면 인디케이터가 좌우로 왕복운동하는 재미있는 모습으로 나타난다.