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

목차

</aside>

볼륨 조절을 추가하려던 중, 생각해보니 프로그래스바와 볼륨 조절 bar가 거의 비슷하다는 걸 깨달았다. 일반적인 common 컴포넌트로 옮기고 재활용할 수 있지 않을까 싶었고, 그럴 경우 progress Bar보다는 Slider가 더 적절한 이름이 될 것 같아 이름을 변경하였다.

Common 폴더 컴포넌트

common 폴더의 컴포넌트는 재사용이 가능해야 하고 특정 도메인에 대한 지식이 없어야 한다. 다행히 기존 프로그래스바에도 특정 도메인에 대한 로직은 없었기 때문에, 이름만 수정해주는 선에서 도메인에 대한 지식을 뺄 수 있었다.

• progressBar ⇒ slider
• setFractionAndMove ⇒ setFraction
  • 기존에는 player에서 prop을 넘겨줄 때 seekTo까지 해주는 함수를 넘겨줘서, move까지 포함한 이름으로 지었으나 Slider는 특정 도메인에 대한 지식이 없어야 하므로 제거하고 더 일반적인 setFraction으로 변경
• progressBarBottom ⇒ bottom
  • 이전 이름을 sliderBottom으로 바꿔도 되겠지만, bottom이 해당 컴포넌트의 위치를 나타내기에 더 일반적이고 간단한 이름인 것 같아 변경

또한 커스텀해서 사용할 수 있도록 Prop을 추가했다.

  shouldHoverGrow?: boolean;
  shouldExtendWhenDrag?: boolean;
  color?: Color;

먼저 hover시 커지는 부분은 특정 사용처에선 레이아웃이 부자연스러울 수 있다. extend도 굳이 필요하지 않을 수 있다. 이를 should~로 시작하는 prop으로 받도록 한 뒤 분기처리를 해주었다.

const sliderWrapperStyle = (shouldExtendWhenDrag: boolean) =>
  css(
    {
      position: 'absolute',
      bottom: '0',
      width: '100%',
      height: '0.25rem',
      zIndex: '999',
      cursor: 'pointer'
    },
    shouldExtendWhenDrag
      ? {
          ':active': {
            height: '100%'
          }
        }
      : {}
  );
  
  const sliderStyle = (bottom: number, colorEmpty: string, shouldHoverGrow: boolean) =>
  css(
    {
      position: 'absolute',
      bottom: `${bottom}px`,
      width: '100%',
      height: '0.25rem',
      backgroundColor: colorEmpty,
      transition: 'transform 0.2s ease-in-out'
    },
    shouldHoverGrow
      ? {
          ':hover': {
            transform: `scaleY(${1.535})`
          },
          ':active': {
            transform: `scaleY(${1.535})`
          }
        }
      : {}
  );

또한 color도 외부에서 커스텀하고 싶을 수 있다. 그러므로

interface Color {
  empty: string;
  fill: string;
}

이 형태의 prop을 받도록 변경하였다.

이젠 볼륨바에서도 바로 가져다 쓸 수 있다!