Alert 개선기

1. 문제 정의

연세대학교 골프동아리 웹 페이지 프로젝트를 진행하며, 다양한 예외 케이스에 대한 알림으로 ‘alert’ 을 사용하여 개발하였습니다.

초기에는 모바일에 대한 고려 없이 개발을 진행하였기에 문제가 없었으나, 점차 프로젝트가 완성되어 가면서 모바일에 대한 테스트를 진행하던 도중, 모바일의 경우 alert이 제대로 동작하지 않을 수 있다는 것을 인지하게 되었습니다.

2. 해결책 - SweetAlert

alert을 모바일에서도 표현하기 위해 다양한 방법을 찾아보았습니다.

1. 커스텀 토스트
2. vue3-toastify
3. SweetAlert

세 가지의 방법을 도전해보았지만, 공식문서의 친절함 + 다양한 예제를 고려하여 SweetAlert을 도입하기로 결정하였습니다.

3. 도입기

1. sweetalert 을 설치해줍니다.

yarn add sweetalert2

npm install sweetalert2

yarn , npm 에 맞게 설치해줍니다.

1. 사용하고자 하는 컴포넌트에서 import 해줍니다.

import Swal from "sweetalert2";

1. sweetAlert을 사용합니다.

Swal.fire('사용하고 싶은 메시지')

4. 다양한 SweetAlert 사용법

기본적은 sweetAlert 사용법은 다음과 같습니다.

Swal.fire('SweetAlert2 is working!')

SweetAlert의 장점은 alert을 다양하게 커스터마이징 할 수 있다는 점입니다.

다양한 아이콘을 삽입할 수 있고, 여러개의 버튼을 만들어서 사용자에게 선택하도록 할 수도 있습니다.

postNewBoard() {
  if (!this.isLoggedIn) {
    Swal.fire({
      icon: "error",
      title: "로그인이 필요한 서비스입니다.",
      confirmButtonColor: '#0a3d91',
    });
  } else {
    this.$router.push({name: 'posting board'});
  }
},

다음은 새로운 게시글을 작성하는 메서드입니다.

로그인을 하지 않은 경우 error 아이콘을 보여주고, 사용자에게 알림을 표시할 수 있습니다.

또한, 확인 버튼을 기본 색상인 보라색이 아닌, 연세골프 사이트에 맞는 색상으로 변경할 수 있습니다.

게시글 삭제와 같은 동작의 경우, 삭제 버튼을 누를 경우 바로 게시글을 삭제하는 것 보다, 사용자에게 한번 더 확인하는 작업이 필요합니다.

confirmDelete() {
  Swal.fire({
    title: "게시글을 삭제하시겠습니까?",
    icon: "warning",
    showCancelButton: true,
    confirmButtonColor: '#0a3d91',
    cancelButtonColor: "#d33",
    confirmButtonText: "삭제"
  }).then((result) => {
    if (result.isConfirmed) {
      this.deletePost();
      Swal.fire({
        title: "게시글이 삭제되었습니다.",
        icon: "success",
        confirmButtonColor: '#0a3d91',
      });
    }
  });
},

이와 같이 삭제 버튼을 누를 경우 게시글을 삭제하는 메서드를 실행시키고, cancle을 누를 경우 취소하는 동작을 추가할 수도 있습니다.

5. 참고 사이트

https://sweetalert2.github.io/#examples