SweetAlert2 사용하기

가연·2023년 7월 16일

이번 프로젝트에서 중복검사, 로그인, 로그아웃, 회원가입, 마이페이지, 글 수정 등 여러 부분에서 alert 창이 필요했다.
그래서 alert 창을 따로 만드려고 했지만 찾아보다가 더 간단하고 예쁜 모달창을 발견해 사용하기로 했다.(사실 시간이 모자랐다.)

설치하기

npm install sweetalert2

사용 방법

import Swal from "sweetalert2";
를 상단에 적어서 import 해온다.

기본 구조

Swal.fire({
             icon: 'info',
             title: '로그인 후 이용 가능합니다.',
             text: '로그인 하시겠습니까?',
             })

: 기본 팝업창. 이 안에 추가 내용을 넣을 수 있다.

-> icon에는 기본 이모지들을 넣을 수 있다

icon : success, error ,warning, info, question 이 있다.

예, 아니오 버튼

Swal.fire({
                    icon: 'info',
                    title: '로그인 후 이용 가능합니다.',
                    text: '로그인 하시겠습니까?',
                    showCancelButton: true,
                    confirmButtonText: '예', 
                    cancelButtonText: '아니오',
                    confirmButtonColor: '#429f50',
                    cancelButtonColor: '#d33',

                })

showCancelButton : true
-> 취소 버튼을 추가할 수 있다.(기본은 확인버튼만 있음.)
confirmButtonText: '예'
-> 확인버튼 문구 수정가능
cancelButtonText: '아니오'
-> 취소버튼 문구 수정가능
confirmButtonColor: '#429f50'
-> 확인버튼 색 지정
cancelButtonColor: '#d33'
-> 취소버튼 색 지정

버튼 눌렀을 때의 상태 처리

.then(result => {
                    if (result.isConfirmed) {
                        location.href = routes.login
                    } else if (result.isDismissed) {
                        location.href = routes.home
                    }

                })