리액트 자체에서 슬라이드 기능이 필요해서 직접 커스텀해서 만들었다.
아래 코드만 있으면 드래그 기능을 쉽게 만들수 있다.
draggable
onDragStart={onDragStart}
onDrag={onDrag}기능을 줘서 만들었는데 드래그 버그를 직면하게 되었다.
버그
두개 똑같은 컴포넌트의 슬라이더를 적용했는데 위에는 되었는데 아래는 안되는게 문제가 있었다. 
파악
이리 저리 여러번 만져본 결과 아래와 같은 행동의 결과를 얻을수 있었다.
- 스크롤을 조금 내리면 드래그가 작동되었다. (가설: 스크롤이 맨위로 되어 있을때 작동하지 않는다)
- 높이 1000px이하에서 작동되지 않음 (가설: 윈도우 창의 높이에서 버그가 일어 난다 )
- 조절기 아래 부분을 눌렀을때 작동이 된다 (CSS 문제인가 ? )
위와 같은 행동 분석을 하여서 검색을 하여서 drag버그를 검색하게 되었다.
스크롤 맨위 일때 드래그 버그 , 높이 ~~에서 드래그 버그 등으로 여러방면으로 찾아봤지만 내가 접한 문제를 경험한 사례들은 없었다.
조금더 찾아보자..
디버그도 돌려보면서 코드에서 에러가 나는지 확인을 했지만 onDragStart 에서 콘솔이 찍혔지만 onDrag함수는 반응하지 않았다.
이유가 뭘까 하면서 여러방면으로 고민해본 결과 답을 찾을수 있었다.
문제점
나는 팝업 상태에서 드래그를 사용했는데 메인 위에 팝업을 띄웠었다. 하단의 메인에는 iframe 코드가 있었던게 문제였다.
iframe 위에서는 드래그가 작동하지 않았다.
내가 위에 올린 gif 에서도 보인다. 뒤에 차트 분석표가 있는데 차트 분석표 영역이 아닌곳에서는 drag가 정상 작동한다.
해결 방안
-
react portal
처음 해결 방안으로 react- portal로 다른 부모에서 팝업을 등장시키는 것을 생각했었다.
리액트 포탈로 다른 루트를 만들어서 팝업을 실행시켜봤지만 문제는 해결되지 않았다. -
css 조절
iframe에서 드래그 라고 검색해보니 이러한 문제들을 겪은 분들의 사례를 만날수 있었다.
결과적으로 해결한 방법으로는 CSS에서 “pointer-events-none“ 옵션을 주는 것이었다.
테스트 한 결과 모달이 켜져있을때 iframe 코드에 해당 CSS를 적용하니 드래그가 정상적으로 작동하는 것을 확인하였다!
수정
모달의 켜질때 모달의 상태값을 전달 받아서 ifame의 css 를 적용하면서 문제를 해결시킬수 있었다.
간단한 문제였는데 원인을 찾는데 시간이 조금 많이 소요되었다. 처음에는 무슨 문제인지 답답했지만 해결해서 다행이다 ㅎㅎ
