display grid, flex wrap 구조에서의 DnD

Drag and Drop 기능을 만들 때 react-beautiful-dnd를 사용하곤 했는데
display가 grid 혹은 flex wrap 상황에서 원하는 동작을 이끌어내기 어렵다는 한계가 있었다.

찾아보니 dnd kit은 위와 같은 상황에서도 부드러운 Drag and Drop을 지원해서 이를 사용하기로 했다.

전체적인 구성은 예시를 참고하여 구현했다.

나의 경우에는 상단 페이지 이동 네비게이션 바 메뉴 탭에 Drag and Drop을 사용하려고 했기 때문에
메뉴의 위치를 바꾸려고 Drag를 하면 페이지가 이동되는 현상이 있었다.

이를 dnd kit에서 제공하는 useSensor의 activationConstraint를 통해 제어할 수 있었다.

  const mouseSensor = useSensor(MouseSensor, { 
    activationConstraint: { distance: 10 } 
  });

  const touchSensor = useSensor(TouchSensor, {
	activationConstraint: { distance: 10 } 
  });

이렇게 되면 단순 클릭만으로는 Drag and Drop이 활성화 되지 않고 10px만큼 이동해야 활성화 되기 때문에
네비게이션 메뉴에서 사용자의 Drag와 페이지 이동을 위한 클릭을 구분할 수 있다.