11/07 : 중간발표 / Alert 디자인 추가

1️⃣ 중간발표

중간 발표를 무사히 마치고 앞으로 얼마 남지 않은 시간동안 개선해야 할 점을 정리해본다.

1. 인증메일 유효시간

2. alert 디자인 수정

3. 비밀번호 암호화

 

 

---

 

 

2️⃣ SweetAlert2 사용해 Alert문 디자인 추가

<!-- alert 커스텀 -->
 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.9.0/dist/sweetalert2.min.css">
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.9.0/dist/sweetalert2.all.min.js"></script>

 

일단 head 태그 안에 sweetalert1이랑 2에 대한 CDN을 다 추가 해줬다.

 

💡 사용방법 참고

https://inpa.tistory.com/entry/SweetAlert2-📚-설치-사용

https://sweetalert.js.org/guides/ https://www.jsdelivr.com/package/npm/sweetalert2

 

 

 

✅ travelList.jsp

$(document).ready(function() {
        $(".deleteBtn").on("click", function() {
            var travelID = $(this).attr("data-travelID");
            var confirmed = confirm("정말 삭제하시겠습니까?");   //확인 메세지 표시. true or false 값을 반환.
            if (confirmed) {    //확인을 누른 경우에만 삭제 요청
         	   location.href="travelDel?travelID="+travelID;
            }
        });
    });  

 

👇

$(document).ready(function() {
		    $(".deleteBtn").on("click", function() {
		        var travelID = $(this).attr("data-travelID");
	
		        // SweetAlert2 대화상자 표시
		        Swal.fire({
		            title: '정말 삭제하시겠습니까?',
		            text: '다시 되돌릴 수 없습니다. 신중하세요.',
		            icon: 'warning',
		            showCancelButton: true,
		            confirmButtonColor: '#3085d6',
		            cancelButtonColor: '#d33',
		            confirmButtonText: '삭제',
		            cancelButtonText: '취소',
		            reverseButtons: true,
		        }).then((result) => {
		            if (result.isConfirmed) {
		                // 사용자가 확인을 클릭한 경우에만 삭제 요청
		                location.href = "travelDel?travelID=" + travelID;
		            }
		        });
		    });
		});

 

 

 

 

✅ travelRetrieve.jsp

<button class="travel-title_close" onclick="if(confirm('현재 일정을 닫을까요?')) history.back();">닫기</button>

 

👇

<button class="travel-title_close" id="closeButton">닫기</button>

			<script>
				document.getElementById("closeButton").addEventListener("click", function() {
				    Swal.fire({
				        title: '현재 일정을 닫으시겠습니까?',
				        text: '보관함 목록으로 돌아갑니다.',
				        icon: 'warning',
				        showCancelButton: true,
				        confirmButtonColor: '#3085d6',
				        cancelButtonColor: '#d33',
				        confirmButtonText: '닫기',
				        cancelButtonText: '취소',
				        reverseButtons: true,
				    }).then((result) => {
				        if (result.isConfirmed) {
				            history.back();
				        }
				    });
				});
			</script>

 

 

 

Alert문이 있는 모든 jsp에 다 바꿔줌!