[TIL] SweetAlert2

이번 메인 프로젝트에서 유용하게 쓴 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();
      }
    });

 

 

⭕️ 수정한 코드 (성공1)

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을 먼저 실행하고 닫을 줄 알았더니, 그냥 닫아버리더라
그래서 저부분을 지우니까 해결!