[CHAM] 드래그 슬라이드 만들기

처음엔 그냥 swiper에서 긁어올까 생각도 했지만 나중엔 긁어다 쓰더라도 한번은 직접 만들어보고자 직접 만들었다.

슬라이드 또한 재사용성이 가능하도록 슬라이드와 내용물을 따로 컴포넌트화 시켰다.

 

드래그 단계화

드래그를 하는데 우선 3가지 단계로 나누었다.

 1 : MouseDown

 2 : MouseMove

 3 : MouseUp

 

1. MouseDown

index와 left는 state값으로 관리하여 값이 바뀔때마다 rerender 시켜주었다.

먼저 MouseDown으로 드래그를 시작한다는 것을 표시했다.

MouseUp을 했을때 transition을 주고 싶어서 MouseDown과 MouseUp의 transition속성을 따로 관리했다.

const [index, setIndex] = useState(0);
const [left, setLeft] = useState(0);
const slideWrapper = useRef(null);
let posX = 0;
let setDrag = false;
let setMove = 0;
const dragStart = (e) => {
    // 마우스 드래그 할때 오류뜰때 있는데 잡기 위함
    e.preventDefault();
    posX = e.clientX;
    setDrag = true;
    slideWrapper.current.style.transition = "0s";
};

2. MouseMove

드래그 할때는 마우스가 움직인 거리와 똑같이 움직이게끔 설정했다.

const drag = (e) => {
    e.preventDefault();
    if (setDrag === true) {
      setMove = e.clientX - posX;
      slideWrapper.current.style.left = left + setMove + "px";
    }
};

3. MouseUp

const dragEnd = (e) => {
    e.preventDefault();
    slideWrapper.current.style.transition = "1s";

    if (Math.abs(posX - e.clientX) > 200 && setDrag) {
      if (posX > e.clientX && index < length - 1) {
        setIndex((state) => state + 1);
      }
      if (posX < e.clientX && index > 0) {
        setIndex((state) => state - 1);
      }
      if (index === 0) {
        slideWrapper.current.style.left =
          -slideWrapper.current.children[0].getBoundingClientRect().width *
            index +
          "px";
      }
      if (index === +length - 1) {
        slideWrapper.current.style.left =
          -slideWrapper.current.children[0].getBoundingClientRect().width *
            index +
          "px";
      }
    } else {
      slideWrapper.current.style.left =
        -slideWrapper.current.children[0].getBoundingClientRect().width *
          index +
        "px";
    }
    setDrag = false;
  };

슬라이드 안의 내용물 컴포넌트의 width값을 불러오기 위해 getBoundingClientRect 함수를 사용했다.

마우스가 일정범위 움직이지 않으면 넘어가지 않게끔 설정했고 마우스를 놓면 transition 효과를 주기 위해

따로 transition을 넣었다.