<aside> <img src="/icons/bookmark_purple.svg" alt="/icons/bookmark_purple.svg" width="40px" />

목차

</aside>

이 문서에선 추후 Slider로 이름이 바뀔 ProgressBar를 구현하는 과정을 기록했습니다. 구현하는 시점이 아니라 어느정도 구현을 한 시점에서 기록용으로 작성하는 문서라 빠진 부분이 있을 수도 있습니다.

Props

interface ProgressBarProps {
  fraction: number;
  setFraction: (newFraction: number) => void;
  bottom: number;
}

가장 처음 props는 다음과 같이 구성했다. fraction과 setFraction을 내부에서 관리하는 게 아니라 외부에서 주입받도록 한 이유는 슬라이더가 조절하는 값의 도메인은 매번 다르고, 그러기 때문에 setFraction이라는 함수를 외부에서 커스텀하고 싶을 수 있기 때문이다.

⇒ 실제로 플레이어를 커스텀 할 때, setFraction을 해줄 뿐만 아니라 seekTo까지 호출해주어야 해서 setFractionAndMove 이라는 함수를 넘겨주도록 했다. 이런 경우 내부에서 관리한다면 연속적이어야 하는 동작을 추가하기 어려우므로 외부에서 관리하도록 했다.

레이아웃

플레이어의 프로그래스바 혹은 seekBar는 빈 부분과 꽉찬 부분으로 나뉜다. 따라서 레이아웃을

      <div css={progressWrapperStyle}>
        <div css={progressBarStyle}></div>
        <div css={progressBarFillStyle)}></div>
      </div>

와 같이 나타낼 수 있다.

이벤트 리스너

프로그래스바는

• 클릭 시: 해당 위치로 바로 이동
• 드래그 시: 실시간으로 fill 부분의 비율이 변하다가, 마우스를 떼거나 마우스가 다른 곳으로 벗어났을 때 최종적으로 확정

되어야 한다.

해당 이벤트를