[React] AntDesign Modal을 Draggable로 만들기

AntDesign에서 Modal을 Draggable로 만들기 위해서는 react-draggable 모듈을 사용하면 간단히 구현이 가능합니다.

1. react-draggable 모듈을 설치합니다.
   > npm install react-draggable
2. AntDesign의 Modal과 Draggable을 조합하여 모달을 구성합니다.
   

   import { Button, Modal } from 'antd';
   import React, { useRef, useState } from 'react';
   import Draggable from 'react-draggable';
   
   const ModalSample: React.FC = () => {
     const draggleRef = useRef<HTMLDivElement>(null);
     const [visible, setVisible] = useState(false);
     const showModal = () => { setVisible(true); };
     const handleModalOk = (e: React.MouseEvent<HTMLElement>) => { setVisible(false); };
     const handleModalCancel = (e: React.MouseEvent<HTMLElement>) => { setVisible(false); };
   
     return (
       <>
         <Button onClick={showModal}>Modal 열기</Button>
         <Modal
           title='Draggable Modal'
           visible={visible}
           onOk={handleModalOk}
           onCancel={handleModalCancel}
           modalRender={modal => (
             <Draggable handle='.ant-modal-title'>
               <div ref={draggleRef}>{modal}</div>
             </Draggable>
           )}
         >
           <p>이제 모달을 드래그할 수 있습니다</p>
         </Modal>
       </>
     );
   };
   
   export default ModalSample;
   

3. 위 코드에서 <Draggable> 컴포넌트의 handle 속성을 지정하고 있습니다.
   handle 속성은 드래그 동작을 실행 시킬 엘리먼트를 지정하는 속성입니다. 이 속성에 모달 타이틀바 Class Name을 지정하여, 모달의 제목으로 드래그가 가능하도록 하였습니다.

References

• AntDesign Modal : https://ant.design/components/modal/
• ReactDraggable : https://github.com/react-grid-layout/react-draggable