[Tistory] 코드 적용 - script

1. 인증번호 입력할 모달창 생성

<!-- modal -->
<div id="authModal" class="modal modal1">
    <div class="modal-content modal1">
        <p style="font-size: 30px">💌 발송 완료 💌</p>
        <input type="text" id="authCodeText" placeholder="인증번호를 입력해주세요"/>
        <div class="modal-buttons">
            <button id="cancelBtn">취소</button>
            <button id="confirmBtn">확인</button>
        </div>
    </div>
</div>

2. joinForm.mustache

<div class="email-box d-flex">
                    <input class="my_auth_form_box_input" id="email" type="email" name="email" placeholder="이메일" maxlength="60"
                           value="compilemate@gmail.com"
                           required/>
                    <button class="btn btn-outline-info btn-sm" type="button" id="emailAuthButton">인증하기</button>
                </div>

                <!-- isEmailConfirmed hidden input을 추가 -->
                <input type="hidden" id="isEmailConfirmed" name="isEmailConfirmed" value="false">
                <button type="submit" id="joinBtn" class="my_secondary_btn">회원가입</button>

<!-- 이메일 주소로 메일 보내기 -->
    function emailSendCode() {
        //console.log($("#email").val());
        let email = encodeURIComponent($("#email").val());

        $.ajax({
            url: '/send-mail?email=' + email,  // AJAX URL과 서버 매핑 URL 일치 여부 확인
            type: 'GET'

        }).done((res) => {
            console.log("Response:", res);
            emailCode = res.body;
            console.log("Received code:", emailCode);
            showModal();
        }).fail((res) => {
            alert("오류");
        });
    }
    <!-- 이메일 주소로 메일 보내기 끝 -->
    
    
    //인증번호 확인 로직
    let isEmailConfirmed = false;

    $("#confirmBtn").click(function () {
        let checkEmailCode = $("#authCodeText").val();

        $.ajax({
            url: '/check-email-code?emailCode=' + checkEmailCode,
            type: 'GET'
        }).done((res) => {
            if (res.body) {
                Swal.fire({
                    title: "인증이 완료되었습니다.",
                    icon: "success",
                    button: "확인"
                });
                $('#authModal').css('display', 'none');
                isEmailConfirmed = true; // 인증이 완료되었으므로 true로 설정
                $('#isEmailConfirmed').val('true'); // 서버로 값을 전송하기 위해 숨겨진 필드에 값 설정
            } else {
                Swal.fire({
                    title: "인증번호를 확인해주세요",
                    icon: "warning",
                    confirmButtonText: "확인"
                });
            }
        }).fail((res) => {
            alert("오류");
        });
    });
    //인증번호 확인 로직 끝

• 인증 결과 확인: 사용자가 입력한 인증번호가 서버에서 확인되어 인증이 성공하면 isEmailConfirmed 값을 true로 업데이트한다.

• 서버로의 데이터 전송: 이 값을 숨겨진 입력 필드에 설정해두면, 회원가입 폼을 제출할 때 이 값이 함께 전송됩니다. 이렇게 하면 서버에서 이메일 인증이 완료된 사용자인지 확인할 수 있다.