1. 모바일 웹

slider를 구현하는데 pc버전에서는 그냥 버튼으로 이미지 이동시키면 되지만 모바일 버전에서는 터치가 필요할 때도 생김.
그래서 모바일에서는 touch event를 이용해서 구현하기로 함.

2. 구현 내용

<SCContainer onTouchStart={
  (e) => setTouchPosition(
    { 
      x: e.changedTouches[0].pageX, 
      y: e.changedTouches[0].pageY
    })} 
  onTouchEnd={touchEnd}>

  // ...

</SCContainer>

우선 onTouchStart로 화면에 터치되는 순간의 x좌표와 y좌표를 상태값으로 저장.
( e.changedTouches[0].pageX, e.changedTouches[0].pageY 이 두 가지로 x좌표와 y좌표를 구할 수 있음. )

그리고 touchEnd 이벤트는 아래처럼 구현했다.

const touchEnd = (e) => {
  const distanceX = Math.abs(touchPosition.x - e.changedTouches[0].pageX);
  const distanceY = Math.abs(touchPosition.y - e.changedTouches[0].pageY);

  if((distanceY + distanceX > 30) && (distanceX > distanceY)) {
    if(touchPosition.x - e.changedTouches[0].pageX < 0 && touchActive) {
      setXPosition(xPosition + window.innerWidth)
    }
    else if(touchPosition.x - e.changedTouches[0].pageX > 0 && touchActive) {
      setXPosition(xPosition - window.innerWidth)
    }
  }
}

onTouchEnd는 화면에서 손을 뗄 때 발생하는 이벤트.
터치할 때 저장한 상태값과 손을 뗄 때 좌표값을 비교해서 총 이동거리가 30보다 크고, 수평이동이 더 긴 경우에 슬라이더가 움직이게 했다.
setXPosition은 슬라이더 이미지 이동한 위치 상태값이다.
(구글 검색한 내용을 참고했다)