예전부터 개인적으로 해보고 싶은게 생겨서 스포티파이API를 활동한 음악서비스를 만들어볼 예정이다.

하지만 내가 원하는 기능까지 도달하려면... 좀 순차적으로 구현해나갈 필요가 있어서 일단 기본적인 음악 재생바 컴포넌트부터 만들어보기로 했다.
(input태그로 구현하는 방법도 있다고함)

선형 음악 재생바에 필요한 기능

1. 클릭시 바로 이동이 가능해야함
2. 드래그시 이동이 가능해야함

일단 2가지를 구현하고 추후 추가할 예정

1. 클릭시 클릭한 곳으로 이동 시키기

코드 및 관련정보

export default function BasicPlaySlider() {
  const [slideX, setSlideX] = useState(0);

  // click시 이동
  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
    const sliderWidth = e.currentTarget.clientWidth;
    const offsetX = e.clientX - e.currentTarget.getBoundingClientRect().left;
    const newX = (offsetX / sliderWidth) * 100;
    setSlideX(newX);
  };

  return (
    <div css={basicplaySliderWrapperCSS}>
      <div css={basicplaySlideWrapperCSS} onMouseDown={handleMouseDown}>
        <div css={[grabCircleCSS, { left: `${slideX}%` }]}></div>
      </div>
      // 값 확인을 위해 임의로 삽입
      <div>{Math.round(slideX)}</div>
    </div>
  );
}

• target: 이벤트가 발생한 실제요소
• currentTarget : 이벤트핸들러가 실행되고 있는 DOM요소(내부 원이 움직여도 여기서 currentTarget은 sliderwrapper임)
• clientX : 현재 브라우저를 기준으로 가로 길이

구현 방법

가장 먼저 css position(relative/absolute)을 통해 이동시킬 원을 바의 처음자리에 위치시킴

그 후,
1. currentTarget을 활용해서 바의 너비를 계산
2. 사용자가 클릭한 x좌표(clientX)와 해당 event가 붙은 currentTarget에 div요소와 왼쪽 경계 사이의 거리의 차를 계산
3. 해당 slideX좌표의 비율을 바에 맞춰 계산해서 업데이트
4. left로 slideX만큼 원을 이동

이제 해당 위치를 클릭하면 옮겨진다
+transition을 사용하면 딱.딱.움직여지기보단 스무스하게 옮겨지긴하는데.. 필요할지는 고민이 필요한 부분인듯함

참고 링크

1번 관련
https://velog.io/@ony_/좌표-위치-clientX-offsetX-pageX-screenX-scrollY-pageYOffset-의-차이점
https://webisfree.com/2020-09-21/[자바스크립트]-엘리먼트의-페이지-위치-알아내기-getboundingclientrect