[React/Typescript] 가로세로 모두 드래그가 가능한 슬라이드 만들기

drag and drop 기능을 구현해서 당연하다는 듯이 라이브러리를 찾아 썼는데, 웬걸 - 

가로로 움직이는 슬라이드 구현을 하고 그 안에 보여지는 부분은 아래위로 스크롤이 되어야 한다. 

게다가 웹앱인지라 터치로 드래그까지 되야하는 상황이었다. 

처음에 구현했을 때는 siwper라는 리액트 라이브러리를 사용했고, 슬라이드 안쪽 부분에도 다른 드래그 라이브러리를 추가해서 진행했는데, 여러 가지 이유에서 제대로 구현을 할 수가 없었다. 

간단하게 사유를 이야기해보자면, 라이브러리까지 충돌을 한다. 간편하게 쓰자고 라이브러리 쓰는데 서로 충돌해서 난장판이 된다. 

충돌 안되는걸 찾았더니 가로 슬라이드 구현을 도운 라이브러리가 모든 마우스 이벤트를 다 뺏어가서 다른 라이브러리가 먹히지 않는 일도 발생했다. 결국은 하나하나 다 코드를 써야 하는 상황이 되었다. 

 

더 이상 라이브러리에게만 기댈 수 없는 상황이 왔다!!!!!!

 

🔦 구현해야하는 기능 

1. 가로 / 세로 마우스 드래그 & 터치 드래그 캐러셀이 되어야 한다. (이때, 가로 / 세로 스크롤이 적용되야 할 DOM은 서로 다르다)

2. 일정한 위치정도 넘어왔을 때 자연스럽게 다음 페이지로 넘어가야한다. 

3. 세로로 스크롤 할 때는 api로 다음 페이지 자료를 불러와야 한다. 

4. 모바일에서도 작동이 가능해야한다.

 

 

 

🛠️  어떻게 해결했나?!

제일 바깥쪽 슬라이드는 라이브러리를 쓰지 않고 슬라이드를 만들어서 진행을 했고, 

안쪽 슬라이드 페이지 쪽에도 드래그가 가능한 코드를 썼다가 너무 복잡해져서 draggable 라이브러리를 적용시켰다. 

원래는 바깥쪽 슬라이드가 모든 마우스 이벤트를 앗아갔던지라. 라이브러리는 안쪽 뷰에만 적용! 

하지만 문제는 이제 순수하게 코드를 어떻게 짜냐가 문제였다. 

한참을 검색을 하다가 정말 훌륭한 자료를 발견했다!!

정말 많은 도움을 받은 블로그다! https://velog.io/@bepyan/Drag-Carousel-%EB%BD%80%EA%B0%9C%EA%B8%B0

개발자님 감사해요 ㅠㅠㅠ 사람 하나 살리셨어요. 

 

 

 

📝 코드를 이해하기 위한 기본 지식

위에 올려놓은 참고자료를 보면 기능 구현은 가능합니다. 물론 쉽지 않아요. 저도 무작정 따라한 코드여서 이게 왜 이렇게 저게 왜 이런지에 대한 이해도가 상당히 떨어졌습니다. 그래서 현재 이 포스팅을 올리는 이유이기도 한!!! 코드를 이해하기 위한 사전 지식 노트를 정리해 봅니다. 

 

MouseEvent를 사용하기 위해서 위치를 산정 속성 정리

x, clientX	이벤트가 발생되는 엘리먼트 기준으로 위치 산정
pageX	페이지 다큐먼트를 기준으로 위치 산정
screenX	듀얼 모니터의 주 모니터를 기준으로 위치 산정

 

 

TouchEvent / MouseEvent

모바일과 PC 모두에서 사용이 가능해야 하기 때문에 event를 둘 다 적용시켜줘야 합니다, 

MouseEvent는 많이 들어본 이벤트이실 겁니다. 

다행히도 두 가지가 비슷한 속성을 가지고 있답니다 

MouseEvent	TouchEvent	속성 내용
mousedown	touchdown	(마우스) 클릭 이벤트
mousemove	touchmove	(마우스) 이동 이벤트
mouseup	touched	(마우스) 클릭 해제 이벤트

 

 

 

모바일인지 pc인지 구분을 하기 위해서는 미디어쿼리를 쓰자

window.matchMedia(분석할 미디어 쿼리를 넣어주면 된다).matches

 

예를 들면 window.matchMedia("(min-width:400px)"). matches

를 쓰면 뷰 포트 너비가 400픽셀 이상인 것들  아닌 것들 이렇게 조건부로 나눠서 코드를 쓸 수 있다.

 

이 두 가지를 구분하기 위한 분자가 특별하게 있는 것은 아니지만 hover와 pointer 기능으로 구분해볼 수 있다고합니다. 

 

1. Hover

Hover(호버) 기능은 기본 포인팅 장치로 웹상에서는 마우스로 표현이 되는데, none 이랑 hover 두가지 값이 지원됩니다. 

none은 주 포인팅 장치가 없는 경우, 마우스 같은거요. 터치스크린 + 마우스지원되는 장치 역시 none으로 표현됩니다. 

hover는 대표적으로 마우스같은 장치가 특정 엘리먼트 위로 호버 할 수 있는 경우를 말합니다. 

 

2. Pointer

마우스 포인팅 부분을 말한다고 하면 이해하기 쉬울 것 같습니다. 

coarse 정확도가 제한된 포인팅을 이야기합니다. 터치스크린 모션감지 센스 같은 느낌으로요

fine 정확한 포인팅 장치가 포함됩니다. 마우스, 혹은 터치패드와 같은 것들이 해당합니다, 

 

그래서 저의 경우에는 hover는 none 값에 pointer는 coarse 가 되면 모바일에서 사용하는 경우라고 보면 됩니다 

 

 

참고자료 

https://paperblock.tistory.com/164

CSS로 PC와 Mobile을 구분하는 방법 - Interaction Media Features

 

 

 

 

✨ react-indiana-drag-scroll 사용

react-indiana-drag-scroll

 

세로 스크롤만 들어가야하는 안쪽 view 페이지에 적용한 라이브러리! 

properties가 다양하게 있어서 필요한 것만 사용해서 쓰기 좋다.