1. 문제 정의
연세대학교 골프동아리 웹 페이지 프로젝트를 진행하며, 다양한 예외 케이스에 대한 알림으로 ‘alert’ 을 사용하여 개발하였습니다.
초기에는 모바일에 대한 고려 없이 개발을 진행하였기에 문제가 없었으나, 점차 프로젝트가 완성되어 가면서 모바일에 대한 테스트를 진행하던 도중, 모바일의 경우 alert이 제대로 동작하지 않을 수 있다는 것을 인지하게 되었습니다.
2. 해결책 - SweetAlert
alert을 모바일에서도 표현하기 위해 다양한 방법을 찾아보았습니다.
- 커스텀 토스트
- vue3-toastify
- SweetAlert
세 가지의 방법을 도전해보았지만, 공식문서의 친절함 + 다양한 예제를 고려하여 SweetAlert을 도입하기로 결정하였습니다.
3. 도입기
- sweetalert 을 설치해줍니다.
yarn add sweetalert2
npm install sweetalert2
yarn , npm 에 맞게 설치해줍니다.
- 사용하고자 하는 컴포넌트에서 import 해줍니다.
import Swal from "sweetalert2";
- sweetAlert을 사용합니다.
Swal.fire('사용하고 싶은 메시지')
4. 다양한 SweetAlert 사용법
기본적은 sweetAlert 사용법은 다음과 같습니다.
Swal.fire('SweetAlert2 is working!')
![스크린샷 2023-11-18 오전 11 07 19](https://user-images.githubusercontent.com/115435784/283966714-e15b9b10-2522-4564-9d2a-f937ff559759.png)
SweetAlert의 장점은 alert을 다양하게 커스터마이징 할 수 있다는 점입니다.
다양한 아이콘을 삽입할 수 있고, 여러개의 버튼을 만들어서 사용자에게 선택하도록 할 수도 있습니다.
postNewBoard() {
if (!this.isLoggedIn) {
Swal.fire({
icon: "error",
title: "로그인이 필요한 서비스입니다.",
confirmButtonColor: '#0a3d91',
});
} else {
this.$router.push({name: 'posting board'});
}
},
다음은 새로운 게시글을 작성하는 메서드입니다.
로그인을 하지 않은 경우 error 아이콘을 보여주고, 사용자에게 알림을 표시할 수 있습니다.
또한, 확인 버튼을 기본 색상인 보라색이 아닌, 연세골프 사이트에 맞는 색상으로 변경할 수 있습니다.
![스크린샷 2023-11-18 오전 11 07 41](https://user-images.githubusercontent.com/115435784/283966723-7b3c1058-5c03-49b1-9a07-3a2cfd72f72d.png)
게시글 삭제와 같은 동작의 경우, 삭제 버튼을 누를 경우 바로 게시글을 삭제하는 것 보다, 사용자에게 한번 더 확인하는 작업이 필요합니다.
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을 누를 경우 취소하는 동작을 추가할 수도 있습니다.
![스크린샷 2023-11-18 오전 11 08 00](https://user-images.githubusercontent.com/115435784/283966736-51d93a7f-bb64-4c6e-ac03-02bb3f49ed4d.png)
5. 참고 사이트
'Yonsei Golf' 카테고리의 다른 글
모니터링 with Docker (0) | 2023.12.09 |
---|---|
JWT Token + Refresh Token (1) | 2023.11.27 |
CloudFront, S3 배포 자동화 (2) | 2023.11.26 |
코드 개선기 - YonseiGolf Email API (0) | 2023.10.31 |
CloudFront , S3 , Route 53 을 통한 Vue 프로젝트 배포 (0) | 2023.10.24 |