삭제시 모달창 팝업 나오게 하기 (tailwindcss) - web

삭제시 팝업창 나오게 하기

1. 오픈/클로징 useState 만들기 (ModalBasic 파일이 있어야 함, cargo4u_web 프로젝트)

import ModalBasic from '../../../components/ModalBasic';
    const [deleteModalOpen, setDeleteModalOpen] = useState(false);

2. 버튼 만들기

<button className="btn-lg w-2/12  bg-red-500 hover:bg-red-600 text-white" type="button" aria-controls="delete-modal" onClick={(e)=>{ e.stopPropagation(); setDeleteModalOpen(true);}} >삭제</button>

3. Modal popup창 만들기

        <ModalBasic id="delete-modal" modalOpen={deleteModalOpen} setModalOpen={setDeleteModalOpen} title="Delete Confirmation">
            {/* Modal content */}
            <div className="px-5 pt-4 pb-1">
            <div className="text-sm">
                <div className="font-medium text-slate-800 mb-2">삭제하시겠습니까?</div>
            </div>
            </div>
            {/* Modal footer */}
            <div className="px-5 py-4">
            <div className="flex flex-wrap justify-end space-x-2">
                <button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setDeleteModalOpen(false); }}>닫기</button>
                <button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white" onClick={(e)=>{e.stopPropagation(); onDelete()}}>삭제</button>
            </div>
            </div>
        </ModalBasic>