지출 내역 리스트 기능 추가하기 : 6 - 3 (이쁜 alert창)

기존 지출 내역 리스트에 기능 추가하기

구현 순서

1. 회원가입, 로그인 페이지 및 폼의 UI 생성
2. jwt 인증서버를 사용한 회원가입, 로그인 기능 추가 및 인증 상태 관리
3. 내비게이션 바 생성 및 라우터 설정
4. 프로필 수정 페이지 생성 및 프로필 수정 기능 추가
5. json-server와 Tanstack Query를 사용해 지출 CRUD 구현
6. 이후 디테일한 부분 및 선택 구현 사항 다루기

6. 이후 디테일한 부분 및 선택 구현 사항 다루기

(3) alert창 이쁜거 쓰기

tailwind를 이용해서 styled-components를 리팩토링하려고 했는데 너무 많아서 데드라인을 넘길 것 같아 포기

기존 지출 내역 APP에서는 alert, comfirm창 전부 모달로 직접 만들어서 사용했었다.

근데 다시 만들자니 너무 귀찮고 번거로웠고 시간도 오래 걸리고 그냥 남이 만든거 갖다 쓰기로 했다.

 

sweetalert2를 사용해서 이쁜 alert창 써보기

설치

터미널
yarn add sweetalert2

 

사용법

import Swal from 'sweetalert2'; // import하고

// 아이콘, 내용 등의 값들을 설정해주면 됨
// then을 이용해서 이후의 로직도 작성 가능
// isConfirmed의 값을 이용해 확인을 클릭했을 때의 로직도 작성가능
Swal.fire({
            icon: "warning",
            title: "로그아웃 하시겠습니까?",
            confirmButtonText: "로그아웃",
            showCancelButton: true,
            cancelButtonText: "아니요",
            confirmButtonColor: "red",
        }).then(result => {			
            if (result.isConfirmed) {	
                Swal.fire({
                    icon: "success",
                    title: "안녕~",
                    text: "로그아웃중..",
                    showConfirmButton: false,
                    timer: 2000,
                });
                dispatch(logout());
                navigate("/login")

 

더 자세한 사용법은 여기로

https://sweetalert2.github.io/

SweetAlert2

 

로그아웃 버튼 클릭 시 결과

기존 alert보다 훨씬 낫고 이쁨

모달을 하나하나 추가하기엔 너무 번거롭고 시간도 많이 씀

훨씬 효율적이고 쓰기도 어렵지 않고 내가 직접 만든 것보다 이뻐서 안 쓸 이유가 없음

 

이제 다른 곳들에도 적용하고 배포하고 끝내야겠다~!