[TIL][24.01.30] drag and drop 클래스 에러 해결

기존에 drag and drop 작업이 잘 되고 있었는데, 브라우저 자체에서 드래그 중에 드래그 방지로 마우스 모양이 블락 표시 됐다.

작업 중엔 그렇게 거슬리지 않았고, 오히려 옮겨지거나 옮기는 객체를 css만 주면 되겠다 생각했었다.

근데 유저 피드백을 받았는데 유저 피드백 중에 그 마우스 모양 떄문에 제대로 옮겨지지만 안옮겨진 것 같은 기분이 든다는 피드백을 받았다.

 

여러가지를 찾아보다가 결국은 브라우저에서 막는거기 떄문에 e.preventDefault(); 를 넣으면 바로 해결이 된다..

 

다만 여기서 문제되는 사항은 기존에 되던 기능인 줬던 클래스가 안빠지는 문제!

  // 드래그 중인 요소 위로 이동할 때 스타일 변경
  const handleDragOver = (e: React.DragEvent<HTMLButtonElement>) => {
    e.preventDefault();
    setIsDragging(true);
  };

 

 

분명 커서를 땠을 때 빼는 코드는 그대론데 안빠진다...

 

근데 같은 팀원의 짧은 도움으로 쉽게 해결..

  useEffect(() => {
    setIsDragging(false);
  }, [idx]);

 

어차피 이벤트 이뤄지는게 드래그 idx 바뀔 때 이뤄지는거니까 idx를 받아서 강제로 false로 만들면 된다...

 

와ㅓ 이렇게 쉬운데 왜 전혀 생각이 안났는지.

해결 했다는 기쁨보다 생각 못한 나 자신에게 화가 안나는 시간이었다...