[DragNDrop] 드래깅 도중 hover 가상 선택자 문제

안녕하세요, 개발자 Sean입니다. 

오늘은 드래그 앤 드롭 작업도중 이상한 문제가 발생해 원인과 해결방법에 대해 기록하려고 합니다. 

 

드래그 앤 드롭 컴포넌트에 :hover 가상 선택자로 스타일 변경 코드를 적용하고 드래그 앤 드롭으로 순서를 변경하는 컴포넌트를 만들었습니다. 그런데 아래 사진과 같이 순서가 바뀌고 기존에 선택했던 칸에 새 컴포넌트가 들어가면 :hover 가상 선택자가 발동하는 현상이 나타났습니다. 

문득 마우스의 포지션 변화가 없어 이런 문제가 발생하는지 궁금해 아래와 같이 현재 커서의 위치를 로그로 찍어보았습니다. 

useEffect(() => {
    const handleMouseMove = (event) => {
      setMousePos({ x: event.clientX, y: event.clientY });
    };

    window.addEventListener('mousemove', handleMouseMove);

    return () => {
      window.removeEventListener(
        'mousemove',
        handleMouseMove
      );
    };
  }, []);

역시 드래그앤드랍을 하는 동안 마우스커서 위치에 변화가 나타나고 있지 않습니다. 

 

추측이 맞다면, 드래깅 때 보이는 마우스 커서는 진짜 마우스 커서가 아니며 메모리상 실제 마우스는 드래그 앤 드롭을 발동한 그 자리에 머물러 있는 상태입니다. 따라서 다른 컴포넌트가 들어와도 :hover 이벤트가 발생하는 것입니다. 

예상치 못했던 문제라 문제해결에 많은 시간이 남아있지 않은 상황이었습니다.

 

따라서 현실적으로 가장 빨리 문제를 해결할 수 있는 방법은 :hover 가상 선택자가 드래그앤드랍에서 드래그를 하는 컴포넌트일 경우에만 효과를 적용시키는 것이었습니다. 

 

따라서 아래와 같이 스타일 코드를 변경했습니다. 

 

  ${props => props.isHovering ? 
    `&:hover {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    background-color: white;
    border-radius: 8px;
    transform: scale(1.015);
    color: black;
    }`
  :
  ''
  }