blog/public/js/account/modify.js

// 회원 정보 수정
$("#fAccountModify").validate({
    onkeyup: false,
    onclick: false,
    onfocusout: false,
    showErrors: function (errorMap, errorList) {
        if (this.numberOfInvalids() && errorList.length > 0) {
            alert(errorList[0].message);
            $(errorList[0].element).focus();
        }
    },
    rules: {
        name: {required: true, minlength: 2, maxlength: 10, hangul: true},
        email: {required: true, email: true},
        thumb_img: {accept: "image/gif,image/jpeg,image/png"},
        about_me: {maxlength: 500},
        is_open_profile: {number: true}
    },
    messages: {
        name: {
            required: "이름을 입력해 주세요.",
            minlength: "이름은 최소 {0}자 이상 입니다.",
            maxlength: "이름은 최대 {0}자 이하 입력 가능합니다.",
            hangul: "이름을 한글로 입력해주세요."
        },
        email: {
            required: "E-mail을 입력해 주세요.",
            email: "E-mail 형식이 옳지 않습니다."
        },
        thumb_img: {
            accept: "이미지는 jpg, gif, png 형식만 첨부 가능합니다."
        },
        about_me: {
            maxlength: "자기소개는 최대 {0}자 이하 입력 가능합니다."
        },
        is_open_profile: {
            number: "정보 공개 여부 형식이 옳지 않습니다."
        }
    }
});

let email =
{
    timer: null,
    change: function(e) {
        if(!confirm("이메일 소유자 인증 후 변경이 가능합니다.\n이메일 주소를 변경하시겠습니까?")) {
            return false;
        }

        let mail = document.getElementById("email");

        if (!mail.value) {
            mail.focus();
            return alert("이메일을 입력해 주세요.");
        }

        if (!validateEmail(mail.value)) {
            mail.focus();
            return alert("이메일 형식이 옳지 않습니다.");
        }

        $.ajax({
            url: (BASE_URL + "/account/email"),
            type: 'GET',
            data: {email: mail.value},
            dataType: 'json',
            beforeSend: function (xhr) {
                if (!loginCheck()) {
                    xhr.abort();
                }
            },
            success: function (res) {
                if (res.success) {
                    email.verify(res);
                } else {
                    alert(res.message || "처리 중 오류가 발생하였습니다. 관리자에게 문의하십시오.");
                }
            },
            error: function (xhr, status, err) {
                procErrorEvent(xhr, status, err);
            }
        });

        e.target.blur();
    },
    verify: function(res) {
        document.getElementById("btnChangeEmail").setAttribute("hidden", "hidden");
        document.getElementById("email").className = "form-control-plaintext p-0";
        document.getElementById("tableRowspan").setAttribute("rowspan", 6);

        let $emailVerifyView = $("#emailVerifyForm");
        $emailVerifyView.attr("hidden", false);
        $emailVerifyView.find("td").html(res.view);
    },
    cancel: function() {
        document.getElementById("btnChangeEmail").removeAttribute("hidden");
        document.getElementById("email").className = "form-control";
        document.getElementById("tableRowspan").setAttribute("rowspan", 5);

        let $emailVerifyView = $("#emailVerifyForm");
        $emailVerifyView.attr("hidden", true);
        $emailVerifyView.find("td").html("");
    },
    confirm: function(e) {
        let code = document.getElementById("emailVerifyCode");

        if (!code.value) {
            code.focus();
            return alert("인증번호를 입력해 주세요.");
        }

        $.ajax({
            url: (BASE_URL + "/account/email/update"),
            type: 'POST',
            data: {code: code.value},
            dataType: 'json',
            beforeSend: function (xhr) {
                if (!loginCheck()) {
                    xhr.abort();
                }
            },
            success: function (res) {
                if (res.success) {
                    alert("이메일 주소가 변경되었습니다.");
                    email.stopTimer();
                    email.cancel();
                } else {
                    alert(res.message || "처리 중 오류가 발생하였습니다. 관리자에게 문의하십시오.");
                }
            },
            error: function (xhr, status, err) {
                procErrorEvent(xhr, status, err);
            }
        });

        e.target.blur();
    },
    startTimer: function(setTime) {

        // 타이머 중복 실행 방지로 기존 시작된 타이머를 리셋하여 점점 빨라지는 오류를 방지
        email.stopTimer();
        let countDownDate = moment().add(setTime, 'seconds');
        this.timer = setInterval(function () {
            let diff = countDownDate.diff(moment());
            if (diff <= 0) {
                email.stopTimer();
                email.cancel();
                return false;

            } else {
                $("#emailVerifyExpiresAt").html(moment.utc(diff).format("mm:ss"));
            }

        });
    },
    stopTimer: function() {
        clearInterval(this.timer);
    }
};

let thumb = {
    preview: function (e) {
        if (e.target.files.length > 0) {
            let src = URL.createObjectURL(event.target.files[0]);
            document.getElementById("prevThumbImg").src = src;
            document.getElementById("btnCancelThumb").hidden = false;
        }else{
            this.cancel();
        }
    },
    cancel: function() {
        document.getElementById("prevThumbImg").src = (BASE_URL + "/images/default/default_thumb.gif");
        document.getElementById("btnCancelThumb").hidden = true;
        document.getElementById("thumbImg").value = null
    }
};

// 이메일 변경하기
$(document).on("click", "#btnChangeEmail", email.change);

// 이메일 인증 확인
$(document).on("click", "#btnConfirmEmail", email.confirm);

// 이메일 인증 취소
$(document).on("click", "#btnCancelEmail", email.cancel);

// 프로필 이미지 미리보기
$(document).on("change", "#thumbImg", thumb.preview);

// 프로필 이미지 취소
$(document).on("click", "#btnCancelThumb", thumb.cancel);