Skip to content

[지호] sweetalert2

BaeJ1H021 edited this page Dec 11, 2023 · 1 revision

도입한 이유

기존에 별 다른 모달, 토스트 창을 만들어 두지 않고 js에서 제공하는 alert 함수를 사용하였다.

UI, UX를 고려했을 때 alert창을 계속 가져가는 것은 적합하지 않다고 판단하였고

커스터마이징 할 수 있는 모달, 토스트 창을 제공하는 라이브러리인 sweetalert2를 적용하였다.

image

Swal.fire({
        width: 600,
        icon: 'question',
        title: '로그인 후 질문 작성이 가능합니다 😉',
        text: '로그인 페이지로 이동하시겠습니까?',
        showCancelButton: true,
        cancelButtonText: '취소',
        confirmButtonText: '확인',
      }).then((result) => {
        if (result.isConfirmed) {
          return navigate('/login');
        }
      });

image

Swal.fire({
      icon: 'success',
      title: '로그인이 완료되었습니다.',
      showConfirmButton: false,
      toast: true,
      timer: 2000,
    });

image

Swal.fire({
        icon: 'success',
        title: '글이 임시 등록되었습니다.',
        confirmButtonText: '확인',
      });

🌊 ALGOCEAN

TEAM : 강서(대문)구

기획

아키텍처

스프린트 계획회의

데일리스크럼

팀 회고

개발 일지

태호

more

지호

more

지은

more

승규

more

멘토링 일지

Clone this wiki locally