프로젝트를 진행하면서 꽤 긴 시간을 사용했던 드래그 슬라이드에 대해서 정리해보고자 한다. 배워가는 단계에서 작성한 코드이기 때문에 구현에 초점을 맞췄다는 점을 짚고 넘어갔으면 한다.

드래그 슬라이드

위의 모습처럼 마우스를 통해 드래그를 했을 때 좌우로 움직이는 슬라이드이다. 단순히 onDrag 이벤트를 사용하면 되는 것이 아닌가 싶을 수 있지만 drag 이벤트를 사용하는 경우에 잔상이 생겨서 원하는 결과물과는 달랐다. onDrag 이벤트를 사용하면서 잔상을 없애는 방법을 여러가지 찾아봤지만 드래그를 제한하는 방법들이 대부분이었다. 그래서 아예 방향을 틀어서 mouse 관련 이벤트를 통해서 이를 구현했다.

1. 마우스 클릭 관련 이벤트

const handleScroll = (e, scroll) => {
    switch (scroll) {
      case 'start': // 마우스 버튼 누르는 경우
        setOriginX(e.clientX);
        setIsScroll(true);
        break;
      case 'end': // 마우스를 버튼 누르기 중단
        setAfterX(position);
        setIsScroll(false);
        break;
      case 'leave': // 마우스가 영역을 벗어난 경우
        setIsScroll(false);
        break;
      default:
        break;
    }
  };

먼저 드래그를 하고 있는 상태를 확인하기 위해서 onMouseDown 과 onMouseUp 이벤트를 사용했다. 이 때 여러 개의 함수를 만들기 보다는 스크롤 여부를 추적하는 한 개의 함수를 사용하기를 원했고 switch 문을 통해서 이를 작성했다.

여기서 originX 는 드래그를 시작하는 지점의 위치를 저장할 변수이고 afterX 는 드래그를 중단한 경우에 마지막 위치를 저장할 변수이다. 이를 통해서 중간에 드래그를 멈췄다가 다시 시작하는 경우에 초기화 되지 않도록 했다.

2. 스크롤 관련

const handleSlide = e => {
    const newPosition = e.clientX - originX + afterX;
    const hiddenLength = e.currentTarget.offsetWidth - 166 * BOOKS.length;
    if (isScroll === false) {
      return;
    }

    newPosition < 10 && newPosition > hiddenLength && setPosition(newPosition);
  };

이제 마우스가 움직일 때 따라서 드래그 될 수 있도록 onMouseMove 이벤트를 이용해서 위치를 변동할 수 있도록 했다. 이 때, 좌우 스크롤의 경우에 빈 공간을 보여주지 않도록 제한사항을 두도록 했다.

구현 화면

이를 구현하는데 꽤 많은 시간을 썼다. 특히, 초기화 되는 부분에서 애를 많이 썼던 것 같다. 구현 방법을 구상하고 이를 코드로 옮기는데 얼마나 부족한지 많이 깨닫게 된 기능이었다. 누군가가 비슷한 기능을 만들 때 조금은 도움이 됐으면 하는 마음으로 코드를 남겨본다.