이번 메인 프로젝트에서 유용하게 쓴 sweetAlert!
https://sweetalert2.github.io/
등록이나 간단한 알림창은 그냥 나와있는 데에다가 글자만 바꾸면 되는데,
수정도 그냥 수정하거나 바깥 눌러서 끄거나 둘중 하나였는데
삭제는 조금 애를 먹었다..
삭제는 삭제하시겠습니까? -> ok / cancel 두가지 선택지가 있는데,
어떤 버튼을 눌러도 삭제가 되는 것이다
그렇다고 삭제-취소 버튼을 포기하고 싶진 않아서
그냥 두다가 마지막에 열심히 째려본 결과 구현했따..
Swal.fire({
title: '정말로 삭제하시겠습니까?',
text: '아직 달성하지 못했을 수도 있어요!',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: '네, 삭제할래요!',
}).then((result) => {
axios
.delete(getURL_GOALS(goalID), getWITH_TOKEN())
.then(() => {
navigate('/goalList');
})
.catch((error) => {
const { message } = error;
enqueueSnackbar(getERROR_TEXT(Number(message.slice(-3))), {
variant: 'error',
});
});
if (result.isConfirmed) {
Swal.fire('삭제되었어요.', 'See You Again!', 'success');
} else {
GoalDetail();
}
});
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: 'btn btn-success',
cancelButton: 'btn btn-danger',
},
buttonsStyling: true,
});
const goalID = detailData.id;
const goalDelete = () => {
swalWithBootstrapButtons
.fire({
title: '정말로 삭제하시겠습니까?',
text: '아직 달성하지 못했을 수도 있어요!',
icon: 'warning',
showCancelButton: true,
confirmButtonText: '네, 삭제할래요!',
cancelButtonText: '아니요',
reverseButtons: true,
})
.then((result) => {
if (result.isConfirmed) {
axios.delete(getURL_GOALS(goalID), getWITH_TOKEN());
swalWithBootstrapButtons.fire(
'삭제되었어요.',
'See You Again!',
'success'
);
navigate('/goalList');
} else {
swalWithBootstrapButtons.fire(
'취소되었어요.',
'포기하지 마세요!',
'error'
);
}
})
.catch((error) => {
const { message } = error;
enqueueSnackbar(getERROR_TEXT(Number(message.slice(-3))), {
variant: 'error',
});
});
};
에러 스낵바는 제쳐두고, (여기 남긴 이유는 catch 어디 쓸지 헷갈릴까봐)
else if (!result.isConfirmed)
로 하면 됐다
그게 결국 if 의 else 그 자체이기 때문에 조건문 삭제.
처음에 저 취소되었어요!
알람창이 나오지 않았는데 그 이유가,
else {
swalWithBootstrapButtons.fire(
'취소되었어요.',
'포기하지 마세요!',
'error'
);
Swal.close();
}
해서 나는 저 alert을 먼저 실행하고 닫을 줄 알았더니, 그냥 닫아버리더라
그래서 저부분을 지우니까 해결!