[ Vite + React ] Draggable Popup

이전에 커스텀 메뉴를 눌렀을때 추가와 편집 메뉴를 구성했는데 이때 추가 버튼을 누르면 드래그가 가능한 팝업을 구현

---

Draggable

Draggable을 사용하기위해 라이브러리 설치

npm install react-draggable

 

Draggable PopupComponent를 생성

부모 컴포넌트에서 버튼을 클릭하면 화면이 나오게 하기 위해서 isOpen 상태와 팝업을 닫기위한 onClose를 설정

isOpen값이 true면 팝업이 열리도록 조건을 추가

import React from 'react';
import Draggable from 'react-draggable';
import './DraggablePopupComponent.scss'
import {observer} from "mobx-react";
import themeStore from "../../store/ThemeStore.ts";

const DraggablePopup = observer(({isOpen, onClose}) => {
    const {isDarkMode} = themeStore

    return (
        <div>
            {isOpen && (
                <div className="popup-overlay">
                    <Draggable>
                        <div className={`popup-content  ${isDarkMode ? 'isDarkMode' : ''}`}>
                            <div className={`popup-button-container ${isDarkMode ? 'isDarkMode' : ''}`}>
                                <button>추가</button>
                                <button onClick={onClose}>닫기</button>
                            </div>
                        </div>
                    </Draggable>
                </div>
            )}
        </div>
    );
});

export default DraggablePopup;

 

이후 ContextMenu 팝업에서 추가 버튼을 누르면 popup을 열기위해 추가 버튼을 누르면 useState로 값을 바꾸며

true값을 전달 DraggablePopup에 전달

 

onClose도 실행시 값을 false로 바꾸며 팝업이 닫히도록 구현

/* ADD HANDLER*/
    const [isAddPagePopup, setIsAddPagePopup] = useState(false);
    const addPageHandler = () => {
        setIsAddPagePopup(!isAddPagePopup)
    }
    
    return (
        <>
            <div className="context_container" onContextMenu={handleContextMenu}>
                {children}
            </div>
            <div id="context_menu" className={`${isDarkMode ? 'isDarkMode' : ''}`}>
                <div className={`context_menu_list ${isDarkMode ? 'dark' : ''}`}>
                    <div onClick={addPageHandler}>추가</div>
                    <div>편집</div>
                </div>
            </div>
            <DraggablePopup isOpen={isAddPagePopup} onClose={addPageHandler}/>
        </>
    );

 

이러면 드래그가 가능한 팝업을 만들 수 있다.