[CHAM] 드래그 슬라이드 만들기
·
개인프로젝트/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); ..