react-draggable 키와 마우스 조작으로 이동 설정

react-draggable 사용 시 따로 일정 키나 마우스 조작 시 안 움직이게 하는 옵션은 없는 것 같아서 한 조치.

onst [isShiftPressed, setIsShiftPressed] = useState(false);

  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === 'Shift') {
        setIsShiftPressed(true);
      }
    };

    const handleKeyUp = (event) => {
      if (event.key === 'Shift') {
        setIsShiftPressed(false);
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    document.addEventListener('keyup', handleKeyUp);

    return () => {
      document.removeEventListener('keydown', handleKeyDown);
      document.removeEventListener('keyup', handleKeyUp);
    };
  }, []);

// return 부분

		<Draggable
        scale={imgSize.scale}
        onDrag={(e, ui) => handleDrag(e, ui)}
        position={deltaPosition}
        disabled={drawState.drawingPad || isShiftPressed}
        enableUserSelectHack={false}
        onStart={() => { document.body.classList.add('dragging'); }}
        onStop={() => { document.body.classList.remove('dragging'); }}
        // onMouseDown={handleKeyDown}
        // onMouseUp={handleKeyUp}
      >

addEventListener를 이용하여 아예 shift 자체의 입력이 들어가버리면 state 변화를 줘서 draggable이 움직이지 못하게 만듬.

좋은 방법인지는 모르겠으나 요즘 react-draggable은 많이 쓰는 것 같지 않아서..