로그아웃 "모달창" 띄우기

<!-- 로그인 상태라면 -->
<c:if test="${not empty accountPk }">
    <a href="${pageContext.request.contextPath}/myPage.do"
        class="dropdown-item">마이페이지</a>
    <a href="${pageContext.request.contextPath}/cartPage.do"
        class="dropdown-item">장바구니</a>
    <a href="${pageContext.request.contextPath}/wishlistPage.do"
        class="dropdown-item">좋아요 목록</a>
    <a href="${pageContext.request.contextPath}/logout.do"
        class="dropdown-item">로그아웃</a>
</c:if>

기존 코드에서 로그아웃을 누르면 바로 메인 페이지로 넘어간다

로그아웃 버튼을 눌렀을 때 모달창에서 예, 아니오를 통해 사용자 편의를 제공하는 방향으로 코드를 수정해보려한다

 

 

 

<!-- 로그인 상태라면 -->
<c:if test="${not empty accountPk }">
    <a href="${pageContext.request.contextPath}/myPage.do"
        class="dropdown-item">마이페이지</a>
    <a href="${pageContext.request.contextPath}/cartPage.do"
        class="dropdown-item">장바구니</a>
    <a href="${pageContext.request.contextPath}/wishlistPage.do"
        class="dropdown-item">좋아요 목록</a>
    <!-- <a href="${pageContext.request.contextPath}/logout.do"
        class="dropdown-item">로그아웃</a>-->
    <a href="#" id="logoutBtn" class="dropdown-item" 
    data-bs-toggle="modal" data-bs-target="#logoutModal">
    로그아웃 </a>
</c:if>

<!-- 로그아웃 확인 모달 -->
<div class="modal fade" id="logoutModal" tabindex="-1" aria-labelledby="logoutModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header border-0"> <!-- 헤더 선 제거 -->
        <h5 class="modal-title w-100 text-center" id="logoutModalLabel">로그아웃</h5> <!-- 제목 가운데 정렬 -->
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center"> <!-- 본문 가운데 정렬 -->
        로그아웃 하시겠습니까?
      </div>
      <div class="modal-footer justify-content-center border-0"> <!-- 버튼 가운데 정렬, 선 제거 -->
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">아니오</button>
        <button type="button" class="btn btn-secondary" id="confirmLogoutBtn">예</button> 
      </div>
    </div>
  </div>
</div>


<!-- 로그아웃 완료 모달 -->
<div class="modal fade" id="logoutSuccessModal" tabindex="-1" aria-labelledby="logoutSuccessLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content text-center p-3">
      <div class="modal-body">
        <i class="fas fa-check-circle fa-3x text-success mb-2"></i>
        <h5>로그아웃 되었습니다</h5>
      </div>
    </div>
  </div>
</div>

<!-- 로그아웃 스크립트 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const confirmBtn = document.getElementById('confirmLogoutBtn');

    if(confirmBtn){
        confirmBtn.addEventListener('click', function() {
            // 로그아웃 모달 닫기
            const logoutModal = bootstrap.Modal.getInstance(document.getElementById('logoutModal'));
            logoutModal.hide();

            // AJAX 로그아웃 요청
            fetch('${pageContext.request.contextPath}/logout.do', {
                method: 'POST',
                credentials: 'same-origin'
            })
            .then(res => {
                if(res.ok){
                    // 완료 모달 띄우기
                    const successModal = new bootstrap.Modal(document.getElementById('logoutSuccessModal'));
                    successModal.show();

                    // UI 갱신: 로그인/회원가입 버튼 보이게, 마이페이지/장바구니/로그아웃 숨기기
                    document.getElementById('loginBtn')?.classList.remove('d-none');
                    document.getElementById('joinBtn')?.classList.remove('d-none');
                    document.getElementById('myPageBtn')?.classList.add('d-none');
                    document.getElementById('cartBtn')?.classList.add('d-none');
                    document.getElementById('wishlistBtn')?.classList.add('d-none');
                    document.getElementById('logoutBtn')?.classList.add('d-none');
                }
            })
            .catch(err => console.error('로그아웃 실패:', err));
        });
    }
});
</script>

 

 

현재

로그아웃 클릭시 모달이 뜨고, 모달 안에서 "예"를 누르면 AJAX로 로그아웃 처리를 한다

아니오를 누르면 모달이 닫힌다