antd(ant-design)의 Modal을 드래그 가능하도록 코드를 변경하고 있었는데요. 관련 예제를 참고해서 드래그 기능을 만들다보니 node_module에 Draggable 모듈을 추가해야 했습니다. 아래 코드는 Modal 안에 추가해야 합니다.

        modalRender={(modal) => (
          <Draggable
            disabled={disabled}
            bounds={bounds}
            onStart={(event, uiData) => onStart(event, uiData)}
          >
            <div ref={draggleRef}>{modal}</div>
          </Draggable>
        )}

드래그 관련 함수를 추가하고...

  const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();
    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };

상태를 관리할 setState를 3개 추가합니다.

  const [disabled, setDisabled] = useState(true);
  const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });
  const draggleRef = useRef<HTMLDivElement>(null);

그리고, package.json의 dependencies에 "react-draggable": "4.4.5" 참조를 추가하세요. 그리고, 터미널에서 npm install 후 동작을 확인 해보면 정상적으로 모달을 드래그할 수 있습니다.

개발자에게 후원하기

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~