Files
sake/src/main/webapp/WEB-INF/views/sopmal/mpage/mbr/MbrInfoUpdtU.jsp

1394 lines
51 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui"%>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld"%>
<%--
Class Name : MbrInfoUpdtU.jsp
Description : 회원 정보 수정 .jsp
Modification Information
수정일 수정자 수정내용
------- -------- ---------------------------
2024-02-27 추지훈 최초 생성
2024-10-11 이대환 회원정보수정 수정
--%>
<!DOCTYPE html>
<html lang="ko">
<head>
<%-- 공통 include --%>
<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
<style>
.mb-10 {
margin-bottom: 10px;
}
.editAccount__innerBox > .update-text{
margin-top: 8px;
margin-bottom: 0px;
}
</style>
<script>
$(document).ready(function() {
fn_show_editContent();
fn_show_emailAuth();
// fn_show_phoneAuth();
first = 0;
$(".signUp__inputBox__alertText").hide();
fn_alert_hide($("#mbrId"), $("#mbrIdAlert"), 'id');
fn_alert_hide($("#mbrPassword"), $("#mbrPasswordAlert"), 'pw');
fn_alert_hide($("#newPassword"), $("#newPasswordAlert"), 'pw');
fn_alert_hide($("#checkPassword"), $("#checkPasswordAlert"), 'pw');
// fn_alert_hide($("#mbtlnb"), $("#mbtlnbAlert"));
fn_alert_hide($("#email"), $("#emailAlert"));
fn_alert_hide($("#mbtlCert"), $("#mbtlCertAlert"));
// fn_alert_hide($("#id"), $("#emailAlert"));
// fn_alert_hide($("#dtlAdres"), $("#postcodeAlert"));
// fn_alert_hide_selected();
//휴대폰번호 포매팅
if($("#mbtlnb").val() !== ''){
fn_set_lagacyMbtlnb($("#mbtlnb").val());
}
});
/* ********************************************************
* 휴대폰번호 포매팅
******************************************************** */
const fn_set_lagacyMbtlnb = function(mbtlnb) {
$("#mbtlnb").val(fn_format_mbtlnb(mbtlnb));
// $("#inputMbtlnb").val(mbtlnb);
}
/* ********************************************************
* 아이디 중복 확인
******************************************************** */
dupList = [];
isChkd_Dup = false;
const fn_check_mbrid = function() {
var regular = /^(?=.*[a-zA-Z])[a-zA-Z\d_]{6,20}$/;
let mbrid = $('#mbrId').val();
let mbrDvCd = $('#mbrDvCd').val();
if(!regular.test(mbrid)) {
alert('아이디는 영문 소문자, 숫자, 밑줄만 사용 가능하며, 6~20자 이내로 입력해주세요.');
return
}
if(!isChkd_Dup) {
let params = {
'mbrId' : mbrid,
'mbrDvCd': mbrDvCd
};
$.ajax({
type : 'post',
url : '<c:url value="/sopmal/mbr/selectIdDplctCnfirm"/>',
data : params,
success : function(data) {
if (JSON.parse(data.resBody.result).message === 'impossible'){
alert('\"' + mbrid + '\" 은 이용중인 아이디 입니다.');
dupList.push(mbrid);
$("#mbrIdAlert").html('이미 사용중인 아이디입니다.');
$("#mbrIdAlert").show();
}
if (JSON.parse(data.resBody.result).message === 'possible'){
isChkd_Dup = true;
alert('\"' + mbrid + '\" 은 사용 가능합니다.');
}
}
});
}
}
/* ********************************************************
* 기존 가입 여부 조회(이메일)
******************************************************** */
const fn_check_mbrwithdrawal_email = function() {
let mbrNm = $('#mbrNm').val();
// let mbtlnb = $('#lagacyEmail').text().trim().replace(/-/g, '')
let email = $('#email').val().trim();
let params = {
'mbrNm' : mbrNm,
'email': email
};
$.ajax({
type : 'post',
url : '<c:url value="/sopmal/mbr/selectMbrwithdrawalSearchEmail"/>',
data : params,
success : function(result) {
let mbrWithDrawalList = JSON.parse(result.resBody.result).mbrWithDrawalList;
fn_make_rejoinInforList_email(mbrWithDrawalList);
}
});
}
/* ********************************************************
* 기존 가입 내역(이메일)
******************************************************** */
const fn_make_rejoinInforList_email = function(_data) {
let tbodyClone;
let isExtMember = false;
let isDupEmail = false;
if (_data.length > 0) {
$('#rejoinContainer').show();
for (let i = 0; i < _data.length; i++) {
if (_data[i].mbrId.startsWith('M-')) {
isExtMember = true;
tbodyClone +='<tr>';
tbodyClone +=' <td style="display : none;">' + _data[i].mbrInnb + '</td>';
tbodyClone +=' <td>' + _data[i].brand + '</td>';
tbodyClone +=' <td>' + _data[i].extrlIntrlckDv + '</td>';
tbodyClone +=' <td>' + _data[i].emailAdres + '</td>';
tbodyClone +='</tr>';
} else {
$('#rejoinContainer').hide();
isExtMember = false;
isDupEmail = true;
break;
}
}
tbodyClone +='<tr style="display:none;"><td><input type="text" name="extMember" value="'+_data[0].mbrInnb+'"/></td></tr>';
if (isExtMember) {
alert('계정정보 연동을 진행합니다.');
}
$('#rejoinSelect').html(tbodyClone);
}
if (isDupEmail) {
alert('이미 가입된 이메일 정보가 있습니다. \n 다른 이메일을 입력해 주세요.');
} else {
$('#emailAuthContent').show();
$('#mbtlCert').focus();
fn_email_sending_number();
}
}
/* ********************************************************
* 기존 가입 여부 조회
******************************************************** */
const fn_check_mbrwithdrawal = function() {
let mbrNm = $('#mbrNm').val();
let mbtlnb = $('#lagacyMbtlnb').text().trim().replace(/-/g, '');
let params = {
'mbrNm' : mbrNm,
'mbtlnb': mbtlnb
};
$.ajax({
type : 'post',
url : '<c:url value="/sopmal/mbr/selectMbrwithdrawalSearch"/>',
data : params,
success : function(result) {
let mbrWithDrawalList = JSON.parse(result.resBody.result).mbrWithDrawalList;
fn_make_rejoinInforList(mbrWithDrawalList);
}
});
}
/* ********************************************************
* 기존 가입 내역
******************************************************** */
const fn_make_rejoinInforList = function(_data) {
let tbodyClone;
let isExtMember = false;
if (_data.length > 0) {
$('#rejoinContainer').show();
for (let i = 0; i < _data.length; i++) {
if (_data[i].mbrId.startsWith('M-')) {
isExtMember = true;
tbodyClone +='<tr>';
tbodyClone +=' <td style="display : none;">' + _data[i].mbrInnb + '</td>';
tbodyClone +=' <td>' + _data[i].brand + '</td>';
tbodyClone +=' <td>' + _data[i].extrlIntrlckDv + '</td>';
tbodyClone +=' <td>' + _data[i].emailAdres + '</td>';
tbodyClone +='</tr>';
}
}
tbodyClone +='<tr style="display:none;"><td><input type="text" name="extMember" value="'+_data[0].mbrInnb+'"/></td></tr>';
if (isExtMember) {
alert('계정정보 연동을 진행합니다.');
}
$('#rejoinSelect').html(tbodyClone);
}
}
/* ********************************************************
* 회원 정보 수정(아이디)
******************************************************** */
const fn_update_id = function() {
if (!isChkd_Dup) {
alert('아이디 중복 확인을 해주세요.');
$('#mbrId').focus();
return;
}
if(!fn_check_password()) {
return;
}
if (confirm('아이디를 <spring:message code="confirm.common.update"/>')) {
$.ajax({
type: "post",
url : '<c:url value="/sopmal/mpage/mbr/updateMbrIdUpdt"/>',
data : {
mbrId : $("#mbrId").val(),
newPassword : $("#newPassword").val(),
checkPassword : $("#checkPassword").val()
},
success:function(data) {
alert('<spring:message code="success.common.update"/>');
$('.update-text').val('');
$("#idChngBtn").click();
//TODO : 화면 리로드 없이 아이디 변경 적용하기
location.reload();
}
});
}
}
/* ********************************************************
* 회원 정보 수정(비밀번호)
******************************************************** */
const fn_update_password = function() {
if(!fn_check_password()) {
return;
}
if (confirm('비밀번호를 <spring:message code="confirm.common.update"/>')) {
$.ajax({
type: "post",
url : '<c:url value="/sopmal/mpage/mbr/updateMbrPasswordUpdt"/>',
data : {
mbrPassword : $("#mbrPassword").val(),
newPassword : $("#newPassword").val(),
checkPassword : $("#checkPassword").val()
},
success:function(data) {
alert('<spring:message code="success.common.update"/>');
$('.update-text').val('');
$("#pwdChngBtn").click();
}
});
}
}
/* ********************************************************
* password check
******************************************************** */
const fn_check_password = function() {
var regular = /^((?=.*[a-zA-Z])(?=.*\d|.*\W)|(?=.*\d)(?=.*\W))[a-zA-Z\d\W]{6,20}$/;
let mbrPassword = $('#mbrPassword');
let newPassword = $('#newPassword');
let newPasswordChk = $('#checkPassword');
let mbrId = $('#mbrId');
if(mbrPassword.length > 0 && !regular.test(mbrPassword.val())){
alert('비밀번호는 영문 대소문자/숫자/특수문자 중 2가지 이상 조합한 6~20자로 입력해주세요.');
mbrPassword.focus();
return;
}
if(!regular.test(newPassword.val())){
alert('비밀번호는 영문 대소문자/숫자/특수문자 중 2가지 이상 조합한 6~20자로 입력해주세요.');
newPassword.focus();
return;
}
if(!regular.test(newPasswordChk.val())){
alert('비밀번호는 영문 대소문자/숫자/특수문자 중 2가지 이상 조합한 6~20자로 입력해주세요.');
newPasswordChk.focus();
return;
}
if (newPassword.val() !== newPasswordChk.val()) {
alert('변경 비밀번호가 일치하지 않습니다.');
newPassword.focus();
return;
}
if (mbrPassword.val() == mbrId.val()) {
mbrPassword.focus();
alert('비밀번호는 아이디와 동일할 수 없습니다.');
return;
}
return true;
}
/* ********************************************************
* 휴대폰 인증 카운터
******************************************************** */
let seconds;
let countdown;
let timerRunning = false;
const fn_set_timeOut = function() {
if (seconds >= 0) {
const minutes = Math.floor(seconds / 60).toString().padStart(2, '0');
const remainingSeconds = (seconds % 60).toString().padStart(2, '0');
$('#timer').text(minutes+":"+remainingSeconds);
seconds--;
} else {
fn_stop_email_timer();
// fn_stop_timer();
alert('인증번호 유효시간이 만료되었습니다.');
}
}
/* ********************************************************
* 휴대폰 인증 번호 발송
******************************************************** */
first = 0;
mbtlCert = '';
const fn_sending_number = function() {
if(timerRunning){
return;
}
if(mbtlCert === $('#mbtlnb').val()){
first++;
}else{
first = 0;
}
mbtlCert = $('#mbtlnb').val();
let mbrNm = $('#mbrNm').val();
let mbtlnb = $('#mbtlnb').val().trim().replace(/-/g, '');
let params = {
'mbrNm' : mbrNm,
'mbtlnb': mbtlnb
};
$.ajax({
type : 'post',
url : '<c:url value="/sopmal/mbr/insertPhoneAuth"/>',
data : params,
success : function (Data) {
let result = JSON.parse(Data.resBody.result);
if(result.result == "success"){
if (first > 0) {
alert('인증번호가 재발송되었습니다.');
} else if (first === 0) {
alert('인증번호가 발송되었습니다.');
first++;
} else {
return;
}
$('#sndngInnb').val(result.sndngInnb);
}else {
alert('인증번호 발송에 실패했습니다.');
fn_stop_timer();
return;
}
}
});
$('#mbtlnb').attr("readonly", true);
clearInterval(countdown);
seconds = 180;
fn_set_timeOut();
countdown = setInterval(fn_set_timeOut, 1000);
timerRunning = true;
}
/* ********************************************************
* 이메일 인증 번호 발송
******************************************************** */
first = 0;
mbtlCert = '';
const fn_email_sending_number = function() {
if(timerRunning){
return;
}
if(mbtlCert === $('#email').val()){
first++;
}else{
first = 0;
}
mbtlCert = $('#email').val();
let mbrNm = $('#mbrNm').val();
let email = $('#email').val().trim();
let params = {
'mbrNm' : mbrNm,
'email': email
};
$.ajax({
type : 'post',
url : '<c:url value="/sopmal/mbr/insertEmailAuth"/>',
data : params,
success : function (Data) {
let result = JSON.parse(Data.resBody.result);
if(result.result == "success"){
if (first > 0) {
alert('인증번호가 재발송되었습니다.');
} else if (first === 0) {
alert('인증번호가 발송되었습니다.');
first++;
} else {
return;
}
$('#sndngInnb').val(result.sndngInnb);
}else {
alert('인증번호 발송에 실패했습니다.');
fn_stop_email_timer();
return;
}
}
});
$('#email').attr("readonly", true);
clearInterval(countdown);
seconds = 300;
fn_set_timeOut();
countdown = setInterval(fn_set_timeOut, 1000);
timerRunning = true;
}
/* ********************************************************
* 타이머 정지 함수
******************************************************** */
const fn_stop_timer = function() {
if (timerRunning) {
clearInterval(countdown);
$('#timer').text('03:00');
$('#mbtlCert').val('');
$('#phoneAuthContent').hide();
$('#mbtlnb').attr("readonly", false);
timerRunning = false;
}
}
/* ********************************************************
* 타이머 정지 함수(이메일)
******************************************************** */
const fn_stop_email_timer = function() {
if (timerRunning) {
clearInterval(countdown);
$('#timer').text('05:00');
$('#mbtlCert').val('');
$('#emailAuthContent').hide();
$('#email').attr("readonly", false);
timerRunning = false;
}
}
/* ********************************************************
* 휴대폰 인증 확인
******************************************************** */
isChkd_own = false;
const fn_confim_own = function() {
if (first <= 0) return;
let sndngInnb = $('#sndngInnb').val();
let mbtlnb = $('#mbtlnb').val().trim().replace(/-/g, '');
let crtnb = $('#mbtlCert').val();
fn_stop_timer();
let params = {
'sndngInnb': sndngInnb,
'mbtlnb': mbtlnb,
'crtnb' : crtnb
};
$.ajax({
type : 'post',
url : '<c:url value="/sopmal/mbr/selectPhoneAuth"/>',
data : params,
success : function (Data) {
let result = JSON.parse(Data.resBody.result);
if(result.result == "success"){
$('#phoneAuthOkBtn').show();
$('#phoneAuthBtn').hide();
isChkd_own = true;
fn_change_mbtlnb();
$('#mbtlnb').attr("readonly", true);
}else {
alert('인증번호가 일치하지 않습니다.');
return;
}
}
});
}
/* ********************************************************
* 휴대폰 인증 버튼 클릭시, 휴대폰 인증 박스 노출
******************************************************** */
const fn_show_phoneAuth = function() {
let phoneAuthBtn = $('#phoneAuthBtn');
let phoneAuthContent = $('#phoneAuthContent');
phoneAuthContent.hide();
phoneAuthBtn.click(function () {
if(!$('#mbtlnb').val()){
alert('휴대폰 번호를 입력해 주세요.');
$('#mbtlnb').focus();
return;
}
$('#phoneAuthContent').show();
$('#mbtlCert').focus();
fn_sending_number();
});
}
/* ********************************************************
* 회원 정보 수정(휴대폰번호 변경)
******************************************************** */
const fn_change_mbtlnb = function() {
if (confirm('휴대폰번호를 <spring:message code="confirm.common.update"/>')) {
$.ajax({
type: "post",
url: '<c:url value="/sopmal/mpage/mbr/updateMbrMblphonInfoUpdt"/>',
data: {
mbtlnb : $("#mbtlnb").val()
},
success: function (data) {
let newMbtlnb = JSON.parse(data.resBody.result);
newMbtlnb = newMbtlnb.paramVO.mbtlnb;
fn_set_lagacyMbtlnb(newMbtlnb);
alert('<spring:message code="success.common.update"/>');
$("#mbtlnbChngBtn").click();
}
});
}
};
/* ********************************************************
* 이메일 인증 확인
******************************************************** */
isChkd_own_email = false;
const fn_confim_own_email = function() {
if (first <= 0) return;
let sndngInnb = $('#sndngInnb').val();
let email = $('#email').val().trim().replace(/-/g, '');
let crtnb = $('#mbtlCert').val();
fn_stop_email_timer();
let params = {
'sndngInnb': sndngInnb,
'email': email,
'crtnb' : crtnb
};
$.ajax({
type : 'post',
url : '<c:url value="/sopmal/mbr/selectEmailAuth"/>',
data : params,
success : function (Data) {
let result = JSON.parse(Data.resBody.result);
if(result.result == "success"){
$('#emailAuthOkBtn').show();
$('#emailAuthBtn').hide();
isChkd_own_email = true;
fn_change_email();
$('#email').attr("readonly", true);
}else {
alert('인증번호가 일치하지 않습니다.');
return;
}
}
});
}
/* ********************************************************
* 이메일 인증 버튼 클릭시, 이메일 인증 박스 노출
******************************************************** */
const fn_show_emailAuth = function() {
let emailAuthBtn = $('#emailAuthBtn');
let emailAuthContent = $('#emailAuthContent');
emailAuthContent.hide();
emailAuthBtn.click(function () {
if(!$('#email').val()){
alert('이메일 주소를 입력해 주세요.');
$('#email').focus();
return;
}
// 기존 가입 여부 확인
fn_check_mbrwithdrawal_email();
// $('#emailAuthContent').show();
// $('#mbtlCert').focus();
// fn_email_sending_number();
});
}
/* ********************************************************
* 회원 정보 수정(이메일 변경)
******************************************************** */
const fn_change_email = function() {
if (confirm('이메일 주소를 <spring:message code="confirm.common.update"/>')) {
$.ajax({
type: "post",
url: '<c:url value="/sopmal/mpage/mbr/updateMbrEmailInfoUpdt"/>',
data: {
email : $("#email").val()
},
success: function (data) {
let newEmail = JSON.parse(data.resBody.result);
newEmail = newEmail.paramVO.email;
$("#lagacyEmail").text(newEmail);
$("#inputEmail").val(newEmail);
alert('<spring:message code="success.common.update"/>');
$("#emailChngBtn").click();
}
});
}
};
/**********************************************
* 이메일 형식 유효성 체크 (올바른 이메일 형식일 때 True)
***********************************************/
// const fn_check_email = function(email) {
//
// var regular = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
//
// if(regular.test(email)){
// return true;
// }else{
// return false;
// }
// }
/* ********************************************************
* email 합치기
******************************************************** */
// const fn_make_email = function() {
//
// let domain = $('#domain').val();
// let id = $('#id').val().trim();
// $('[name=email]').val(id + '@' + domain);
//
// return $('[name=email]').val();
// }
/* ********************************************************
* 회원 정보 수정(이메일 변경)
******************************************************** */
<%--const fn_change_email = function() {--%>
<%-- let email = fn_make_email();--%>
<%-- if(!fn_check_email(email)) {--%>
<%-- alert('올바른 이메일 형식이 아닙니다.');--%>
<%-- $('#id').focus();--%>
<%-- return;--%>
<%-- }--%>
<%-- if (confirm('이메일을 <spring:message code="confirm.common.update"/>')) {--%>
<%-- $.ajax({--%>
<%-- type: "post",--%>
<%-- url: '<c:url value="/sopmal/mpage/mbr/updateMbrEmailInfoUpdt"/>',--%>
<%-- data: {--%>
<%-- id : $("#id").val().trim(),--%>
<%-- domain: $("#domain").val().trim(),--%>
<%-- email : email--%>
<%-- },--%>
<%-- success: function (data) {--%>
<%-- let newEmail = JSON.parse(data.resBody.result);--%>
<%-- newEmail = newEmail.paramVO.email;--%>
<%-- $("#lagacyEmail").text(newEmail);--%>
<%-- alert('<spring:message code="success.common.update"/>');--%>
<%-- $("#emailChngBtn").click();--%>
<%-- }--%>
<%-- });--%>
<%-- }--%>
<%--}--%>
/* ********************************************************
* 우편번호 찾기
******************************************************** */
// const fn_set_postcode = function(data) {
// $('#postcode').val(data.postcode);
// if (data.addressType == '02') {
// $('#adresDv').val(data.addressType);
// $('#address').val(data.jibunAddress);
// } else if (data.addressType == '01') {
// $('#adresDv').val(data.addressType);
// $('#address').val(data.roadAddress+data.extraAddress);
// }
// }
/* ********************************************************
* 외부연동 로그인 ( 네이버, 카카오 )
******************************************************** */
const fn_sns_connection = function(dvCd, toggleId) {
let isCheck = $(toggleId).is(':checked');
if (isCheck) {
const data = $('#mbrInfoUpdtForm').serialize();
$.ajax({
type: "post",
url : '<c:url value="/sopmal/mpage/mbr/insertAcntCnncSttusRegist"/>',
data : { // TODO : 카카오, 네이버 로그인 구현 시 파라미터 수정
mbrInnb : $('#mbrInnb').val(),
mbrDvCd : $('#mbrDvCd').val(),
extrlIntrlckDvCd : dvCd
},
success:function(data) {
alert('<spring:message code="success.common.insert"/>');
fn_move_mbr_info_update();
}
});
$.ajax({
type: "post",
url : '<c:url value="/sopmal/mpage/mbr/deleteAcntCnncSttusDel"/>',
data : { // TODO : 카카오 로그인 구현 시 파라미터 수정
mbrInnb : $('#mbrInnb').val(),
mbrDvCd : $('#mbrDvCd').val(),
extrlIntrlckDvCd : dvCd
},
success:function(data) {
alert('<spring:message code="success.common.insert"/>');
fn_move_mbr_info_update();
}
});
}
}
/* ********************************************************
* 회원 정보 수정
******************************************************** */
const fn_update_mbr_info = function() {
// if ($('#select-brthYear').val() == null || $('#select-Month').val() == null) {
// alert('생년월을 선택해 주세요.');
// $("#brthDeAlert").show();
// document.getElementById('birthYear').scrollIntoView();
// return;
// }
// if ($('#postcode').val().trim() == '' || $('#address').val().trim() == '') {
// alert('우편번호를 선택해 주세요.');
// $("#postcodeAlert").show();
// document.getElementById('postcodeBtn').scrollIntoView();
// return;
// }
// if ($('#dtlAdres').val().trim() == '') {
// alert('상세주소를 입력해 주세요.');
// $('#dtlAdres').focus();
// return;
// }
if ($('#mbtlnb').val() === null || $('#mbtlnb').val() === '') {
alert('휴대폰 번호를 입력해주세요.');
$('#mbtlnb').focus();
return;
}
let mbtlnb = $('#mbtlnb').val().trim().replace(/-/g, '');
$('[name=mbtlnb]').val(mbtlnb);
// console.log("mbtlnb : ",mbtlnb);
const data = $("#mbrInfoUpdtForm").serialize();
if (confirm('회원 정보를 <spring:message code="confirm.common.update"/>')) {
$.ajax({
type: "post",
url : '<c:url value="/sopmal/mpage/mbr/updateMbrInfoUpdt"/>',
data : data,
success:function(data) {
alert('<spring:message code="success.common.update"/>');
fn_move_mbr_info_update();
}
});
}
}
/* ********************************************************
* 회원 정보 수정 화면 이동
******************************************************** */
const fn_move_mbr_info_update = function() {
$('#mbrInfoUpdtForm').attr('action', '<c:url value="/sopmal/mpage/mbr/selectMbrInfoUpdtForm"/>');
$('#mbrInfoUpdtForm').attr('method', 'post');
$('#mbrInfoUpdtForm').submit();
}
/* ********************************************************
* 회원 탈퇴 화면 이동
******************************************************** */
const fn_move_secsn_from = function() {
$('#mbrInfoUpdtForm').attr('action', '<c:url value="/sopmal/mpage/mbr/selectMbrSecsnForm"/>');
$('#mbrInfoUpdtForm').attr('method', 'post');
$('#mbrInfoUpdtForm').submit();
}
/* ********************************************************
* 버튼 문구 변경
******************************************************** */
const fn_change_btn_text = (target) => {
let SpringMsgInsrt = '<spring:message code="button.insert"/>';
let SpringMsgChnge = '<spring:message code="button.change"/>';
let SpringMsgCancl = '<spring:message code="button.cancel"/>';
if($(target).text() === SpringMsgInsrt){
fn_check_mbrwithdrawal();
$(target).text(SpringMsgCancl);
$(".editAccount__editBtn").not($(target)).each(function(){
$(this).text(SpringMsgChnge);
});
}else if($(target).text() === SpringMsgChnge){
$(target).text(SpringMsgCancl);
$(".editAccount__editBtn").not($(target)).each(function(){
$(this).text(SpringMsgChnge);
});
if($('#idChngBtn').length) {
$('#idChngBtn').text(SpringMsgInsrt);
$('#rejoinContainer').hide();
}
}else{
$(target).text(SpringMsgChnge);
if($('#idChngBtn').length) {
$('#idChngBtn').text(SpringMsgInsrt);
$('#rejoinContainer').hide();
}
}
//초기화
first = 0;
fn_stop_email_timer();
// fn_stop_timer();
$('.update-text').val('');
$('.editAccount__editContent .signUp__inputBox__alertText').hide();
// $('select[name="domain"]').val('직접입력').niceSelect('update');
// fn_set_domain('직접입력');
if(isChkd_own_email){
$('.update-text').attr("readonly", false);
$('#emailAuthBtn').show();
$('#emailAuthOkBtn').hide();
$('#resIdForm').hide();
$('#resPswdForm').hide();
isChkd_own_email = false;
}
// if(isChkd_own){
// $('.update-text').attr("readonly", false);
// $('#phoneAuthBtn').show();
// $('#phoneAuthOkBtn').hide();
// $('#resIdForm').hide();
// $('#resPswdForm').hide();
// isChkd_own = false;
// }
}
/* ********************************************************
* 변경 버튼 클릭시, 변경할 내용 노출
******************************************************** */
const fn_show_editContent = () => {
var editBtn = $('.editAccount__editBtn');
var editContent = $('.editAccount__editContent');
editContent.hide();
editBtn.on('click', function () {
var $this = $(this);
var $thisContent = $this.closest('td').find('.editAccount__editContent');
if ($thisContent.is(':visible')) {
$thisContent.hide();
} else {
editContent.hide();
$thisContent.show();
}
});
}
/* ********************************************************
* domain 넣기
******************************************************** */
const fn_set_domain = function(_value) {
if (_value === '직접입력') {
$('#domain').attr('readonly', false);
$('#domain').val('');
} else {
$('#domain').attr('readonly', true);
$('#domain').val(_value);
}
}
/* ********************************************************
* 사용자 입력값이 입력될 때 alertText 숨기기
******************************************************** */
const fn_alert_hide = (inputId, alertId, type) => {
inputId.on('input', function () {
switch(type){
case 'id':
var regular = /^(?=.*[a-zA-Z])[a-zA-Z\d_]{6,20}$/;
if (!$(this).val()) {
alertId.html('아이디를 입력해 주세요.');
}else if(dupList.includes(inputId.val())){
alertId.html('이미 사용중인 아이디입니다.');
alertId.show();
return;
}else if(!regular.test(inputId.val())){
alertId.html('아이디는 영문 소문자, 숫자, 밑줄만 사용 가능하며, 6~20자 이내로 입력해주세요.');
alertId.show();
return;
}
break;
case 'pw':
var regular = /^((?=.*[a-zA-Z])(?=.*\d|.*\W)|(?=.*\d)(?=.*\W))[a-zA-Z\d\W]{6,20}$/;
if (!$(this).val()) {
alertId.html('비밀번호를 입력해 주세요.');
}else if(!regular.test(inputId.val())){
alertId.html('비밀번호는 영문 대소문자/숫자/특수문자 중 2가지 이상 조합한 6~20자로 입력해주세요.');
alertId.show();
return;
}
break;
default:
break;
}
alertId.hide();
if (!$(this).val()) {
alertId.show();
}
})
};
</script>
</head>
<body>
<%-- 공통 Header --%>
<jsp:include page="/WEB-INF/views/comm/Header.jsp"/>
<!-- 메인 컨텐츠 영역 -->
<main>
<div class="sub-wrapper">
<div class="sub-content">
<div class="sub-rl">
<%-- 마이페이지 Left 영역 --%>
<jsp:include page="/WEB-INF/views/comm/mpage/MypageLeft.jsp"/>
<div class="sub-right-content">
<div class="sub-right-content__section">
<h3 class="sub-right-content__title">회원정보수정</h3>
<div class="editAccount">
<div class="table-wrapper editAccount__table">
<table class="table">
<caption>해당 테이블에 대한 설명</caption>
<!-- 각 열 width 설정 -->
<colgroup>
<col style="width: 180px;">
<col style="width: auto;">
</colgroup>
<tbody>
<tr>
<th>
<span class="editAccount__title">이름</span>
</th>
<td>
<span class="editAccount__text"><c:out value="${ resultMap.result.mbrNm }"/></span>
</td>
</tr>
<tr>
<th>
<span class="editAccount__title">아이디</span>
</th>
<td>
<c:choose>
<c:when test="${resultMap.extrlIntrlckAt == 'Y'}">
<span class="editAccount__text">아직 등록하지 않았습니다.</span>
</c:when>
<c:otherwise>
<span class="editAccount__text"><c:out value="${ resultMap.result.mbrId }"/></span>
</c:otherwise>
</c:choose>
</td>
</tr>
<form id="mbrInfoUpdtForm">
<input type="hidden" id="mbrNm" name="mbrNm" value="<c:out value="${ resultMap.result.mbrNm }"/>"/>
<tr>
<th>
<span class="editAccount__title">비밀번호</span>
</th>
<td>
<c:choose>
<c:when test="${resultMap.extrlIntrlckAt == 'Y'}">
<div>
<button type="button" class="btn md gray2 editAccount__editBtn" id="idChngBtn" onclick="fn_change_btn_text(this);return false;"><spring:message code="button.insert"/></button>
</div>
<div class="editAccount__editContent">
<div class="editAccount__innerBox">
<div class="inputWithBtn">
<input type="text" class="input-text full" name="mbrId" id="mbrId" title="신규 아이디" placeholder="영문 소문자, 숫자, 밑줄(만) 사용 가능, 6~20자" oninput="this.value = this.value.toLowerCase();" onchange="isChkd_Dup = false;" maxlength="20" style="margin-top:0px; margin-bottom:0px;">
<button type="button" class="btn md outline" onclick="fn_check_mbrid();">중복 확인</button>
</div>
<p class="signUp__inputBox__alertText" id="mbrIdAlert">아이디를 입력해 주세요.</p>
<input type="password" class="input-text full update-text" name="newPassword" id="newPassword" title="신규 비밀번호" placeholder="영문 대소문자/숫자/특수문자 중 2가지 이상 포함 6~20자" maxlength="20">
<p class="signUp__inputBox__alertText" id="newPasswordAlert">비밀번호를 입력해 주세요.</p>
<input type="password" class="input-text full update-text" name="checkPassword" id="checkPassword" title="신규 비밀번호 확인" placeholder="비밀번호를 한번 더 입력해주세요." maxlength="20">
<p class="signUp__inputBox__alertText" id="checkPasswordAlert">비밀번호를 입력해 주세요.</p>
<div class="editAccount__innerBtnContainer">
<button type="button" class="btn outline full lg" onclick="fn_update_id(); return false;" style="margin-top:8px;">확인</button>
</div>
</div>
<div class="signUp__inputBox__item" id="rejoinContainer" style="display: none;">
<p class="textInfo"><i class="icon icon_textInfo--sm"></i> 인증하신 정보로 가입된 계정 정보입니다. 해당
정보로 연동되어 간편 가입이 진행됩니다.
</p>
<table class="table vertical tight">
<caption>해당 테이블에 대한 설명</caption>
<!-- 각 열 width 설정 -->
<colgroup>
<col style="width: 30%;">
<col style="width: auto;">
</colgroup>
<thead>
<tr>
<th style="display:none;">회원 고유번호</th>
<th>가입사이트</th>
<th>가입방식</th>
<th>이메일</th>
</tr>
</thead>
<tbody id="rejoinSelect"></tbody>
</table>
</div>
</div>
</c:when>
<c:otherwise>
<div>
<button type="button" class="btn md gray2 editAccount__editBtn" id="pwdChngBtn" onclick="fn_change_btn_text(this);return false;"><spring:message code="button.change"/></button>
</div>
<div class="editAccount__editContent">
<div class="editAccount__innerBox">
<input type="password" class="input-text full update-text" name="mbrPassword" id="mbrPassword" title="기존 비밀번호" placeholder="기존 비밀번호 입력" maxlength="20" style="margin-top:0px; margin-bottom:0px;">
<p class="signUp__inputBox__alertText" id="mbrPasswordAlert">비밀번호를 입력해 주세요.</p>
<input type="password" class="input-text full update-text" name="newPassword" id="newPassword" title="변경할 비밀번호" placeholder="영문 대소문자/숫자/특수문자 중 2가지 이상 포함 6~20자" maxlength="20">
<p class="signUp__inputBox__alertText" id="newPasswordAlert">비밀번호를 입력해 주세요.</p>
<input type="password" class="input-text full update-text" name="checkPassword" id="checkPassword" title="변경할 비밀번호 확인" placeholder="비밀번호를 한번 더 입력해주세요." maxlength="20">
<p class="signUp__inputBox__alertText" id="checkPasswordAlert">비밀번호를 입력해 주세요.</p>
<div class="editAccount__innerBtnContainer">
<button type="button" class="btn outline full lg" onclick="fn_update_password(); return false;" style="margin-top:8px;">확인</button>
</div>
</div>
</div>
</c:otherwise>
</c:choose>
</td>
</tr>
<%-- <tr>--%>
<%-- <th>--%>
<%-- <span class="editAccount__title">휴대폰번호</span>--%>
<%-- </th>--%>
<%-- <td>--%>
<%-- <span class="editAccount__text" id="lagacyMbtlnb"><c:out value="${ resultMap.result.mbtlnb}"/></span>--%>
<%-- <button type="button" class="btn md gray2 editAccount__editBtn" id="mbtlnbChngBtn" onclick="fn_change_btn_text(this);return false;"><spring:message code="button.change"/></button>--%>
<%-- <div class="editAccount__editContent" id="phoneInputContent">--%>
<%-- <div class="inputWithBtn">--%>
<%-- <input type="text" class="input-text full number update-text" id="mbtlnb" title="휴대폰" placeholder="휴대폰번호 입력 (’-’ 없이)" oninput="fn_set_event(this, 'keyup', fn_fmt_telno)" maxlength="13">--%>
<%-- <input type="hidden" name="mbtlnb" value="<c:out value="${resultMap.result.mbtlnb}"/>" id="inputMbtlnb">--%>
<%-- <button type="button" class="btn md theme outline" id="phoneAuthBtn"><spring:message code="button.certification"/></button>--%>
<%-- <!-- 인증완료시 버튼 -->--%>
<%-- <button type="button" class="btn md outline" id="phoneAuthOkBtn" style="display:none;"><spring:message code="button.certificationDone"/></button>--%>
<%-- </div>--%>
<%-- <p class="signUp__inputBox__alertText" id="mbtlnbAlert">휴대폰 번호를 입력해 주세요.</p>--%>
<%-- <div class="phoneAuth" id="phoneAuthContent">--%>
<%-- <input type="hidden" id="sndngInnb">--%>
<%-- <div>--%>
<%-- <div class="inputWithBtn">--%>
<%-- <div class="inputTimer">--%>
<%-- <input type="text" class="input-text full number update-text" id="mbtlCert" title="인증번호" placeholder="인증번호 입력" maxlength="6">--%>
<%-- <span class="inputTimer__time" id="timer">03:00</span>--%>
<%-- </div>--%>
<%-- <button type="button" class="btn md gray" onclick="fn_confim_own();"><spring:message code="button.ok"/></button>--%>
<%-- </div>--%>
<%-- <p class="signUp__inputBox__alertText" id="mbtlCertAlert">인증번호를 입력해 주세요.</p>--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- </td>--%>
<%-- </tr>--%>
<tr>
<th>
<span class="editAccount__title">이메일</span>
</th>
<td>
<span class="editAccount__text" id="lagacyEmail"><c:out value="${ resultMap.result.email}"/></span>
<button type="button" class="btn md gray2 editAccount__editBtn" id="emailChngBtn" onclick="fn_change_btn_text(this);return false;"><spring:message code="button.change"/></button>
<div class="editAccount__editContent" id="emailInputContent">
<div class="inputWithBtn">
<input type="text" class="input-text full update-text" id="email" title="이메일" placeholder="이메일을 입력해 주세요" maxlength="190">
<input type="hidden" name="email" value="<c:out value="${resultMap.result.email}"/>" id="inputEmail">
<button type="button" class="btn md theme outline" id="emailAuthBtn"><spring:message code="button.certificationEmail"/></button>
<!-- 인증완료시 버튼 -->
<button type="button" class="btn md outline" id="emailAuthOkBtn" style="display:none;"><spring:message code="button.certificationDone"/></button>
</div>
<p class="signUp__inputBox__alertText" id="emailAlert">이메일을 입력해 주세요.</p>
<div class="phoneAuth" id="emailAuthContent">
<input type="hidden" id="sndngInnb">
<div>
<div class="inputWithBtn">
<div class="inputTimer">
<input type="text" class="input-text full number update-text" id="mbtlCert" title="인증번호" placeholder="인증번호 입력" maxlength="6">
<span class="inputTimer__time" id="timer">05:00</span>
</div>
<button type="button" class="btn md gray" onclick="fn_confim_own_email();"><spring:message code="button.ok"/></button>
</div>
<p class="signUp__inputBox__alertText" id="mbtlCertAlert">인증번호를 입력해 주세요.</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th>
<span class="editAccount__title">휴대폰번호</span>
</th>
<td>
<div class="inputWithBtn">
<input type="text" class="input-text full number update-text" id="mbtlnb" title="휴대폰" placeholder="휴대폰번호 입력 (’-’ 없이)" oninput="fn_set_event(this, 'keyup', fn_fmt_telno)" value="<c:out value="${ resultMap.result.mbtlnb }"/>" maxlength="13">
<input type="hidden" name="mbtlnb" value="<c:out value="${resultMap.result.mbtlnb}"/>" id="inputMbtlnb">
</div>
<%-- <p class="signUp__inputBox__alertText" id="mbtlnbAlert">휴대폰 번호를 입력해 주세요.</p>--%>
</td>
</tr>
<%-- <tr>--%>
<%-- <th>--%>
<%-- <span class="editAccount__title">이메일</span>--%>
<%-- </th>--%>
<%-- <td>--%>
<%-- <span class="editAccount__text" id="lagacyEmail"><c:out value="${ resultMap.result.email }"/></span>--%>
<%-- <button type="button" class="btn md gray2 editAccount__editBtn" id="emailChngBtn" onclick="fn_change_btn_text(this);return false;"><spring:message code="button.change"/></button>--%>
<%-- <div class="editAccount__editContent">--%>
<%-- <div class="editAccount__innerBox">--%>
<%-- <input type="hidden" name="email" value=""/>--%>
<%-- <div class="inputEmail">--%>
<%-- <input class="input-text full update-text" type="email" id="id" title="이메일 id" placeholder="이메일" maxlength="25">--%>
<%-- <span class="inputEmail__at">@</span>--%>
<%-- <input class="input-text full" type="text" id="domain" title="이메일 domain" maxlength="25">--%>
<%-- <div class="select-box">--%>
<%-- <select name="domain" title="이메일 자동발송 발신주소" onchange="fn_set_domain(this.value);">--%>
<%-- <c:forEach var="email" items="${resultMap.email}" varStatus="status">--%>
<%-- <option value="${email.cdNm}" ${f:setSelected(email.cd, '99')}><c:out value="${email.cdNm}"/></option>--%>
<%-- </c:forEach>--%>
<%-- </select>--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- <p class="signUp__inputBox__alertText" id="emailAlert">이메일을 입력해 주세요.</p>--%>
<%-- <div class="editAccount__innerBtnContainer">--%>
<%-- <button type="button" class="btn outline full lg" onclick="fn_change_email();"><spring:message code="button.ok"/></button>--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- </td>--%>
<%-- </tr>--%>
<tr>
<th>
<span class="editAccount__title">생년월<span class="required-asterisk">*</span></span>
</th>
<td>
<div class="inputHalf">
<div class="select-box">
<jsp:useBean id="now" class="java.util.Date" />
<fmt:formatDate var="year" value="${now}" pattern="yyyy" />
<select title="생년월 중 년" name="brthDe">
<c:forEach var="i" begin="0" end="101" >
<c:choose>
<c:when test="${ (year-i) eq fn:substring( resultMap.result.brthDe,0, 4 ) }">
<option value="<c:out value="${ year-i }"/>" selected="selected"><c:out value="${ year-i }"/></option>
</c:when>
<c:otherwise>
<option value="<c:out value="${ year-i }"/>"><c:out value="${ year-i }"/></option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
</div>
<div class="select-box">
<select title="생년월 중 월" name="brthDe">
<c:forEach var="month" begin="1" end="12" >
<c:choose>
<c:when test="${ month eq fn:substring( resultMap.result.brthDe,4, 6 ) }">
<option value="<c:if test="${ month lt 10 }">0</c:if><c:out value="${ month }"/>" selected="selected"><c:if test="${ month lt 10 }">0</c:if><c:out value="${ month }"/></option>
</c:when>
<c:otherwise>
<option value="<c:if test="${ month lt 10 }">0</c:if><c:out value="${ month }"/>"><c:if test="${ month lt 10 }">0</c:if><c:out value="${ month }"/></option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
</div>
</div>
<p class="signUp__inputBox__alertText" id="brthDeAlert" style="display: none;">생년월을 선택해 주세요.</p>
</td>
</tr>
<%-- <tr>--%>
<%-- <th>--%>
<%-- <span class="editAccount__title">주소<span class="required-asterisk">*</span></span>--%>
<%-- </th>--%>
<%-- <td>--%>
<%-- <div class="inputAddress">--%>
<%-- <div class="inputAddress__postalCode">--%>
<%-- <input type="text" class="input-text" id="postcode" name="zip" title="우편번호" placeholder="우편번호"--%>
<%-- value="<c:out value="${ resultMap.result.zip }"/>" readonly>--%>
<%-- <button type="button" id="postcodeBtn" class="btn md theme outline" onclick="fn_select_postcode(fn_set_postcode);"><spring:message code="button.zipcode"/></button>--%>
<%-- </div>--%>
<%-- <input type="text" class="input-text full" id="address" name="lnbAdres" title="주소" placeholder="주소"--%>
<%-- <c:choose>--%>
<%-- <c:when test="${ resultMap.result.adresDv eq '01'}">--%>
<%-- value="<c:out value="${ resultMap.result.rnmAdres }"/>"--%>
<%-- </c:when>--%>
<%-- <c:when test="${ resultMap.result.adresDv eq '02'}">--%>
<%-- value="<c:out value="${ resultMap.result.lnbAdres }"/>"--%>
<%-- </c:when>--%>
<%-- </c:choose>--%>
<%-- readonly>--%>
<%-- <input type="text" class="input-text full" id="dtlAdres" name="dtlAdres" title="상세주소" placeholder="나머지 주소를 입력해 주세요."--%>
<%-- value="<c:out value="${ resultMap.result.dtlAdres }"/>">--%>
<%-- <input type="hidden" id="adresDv" name="adresDv" value="${ resultMap.result.adresDv }">--%>
<%-- </div>--%>
<%-- <p class="signUp__inputBox__alertText" id="postcodeAlert">주소를 입력해 주세요.</p>--%>
<%-- </td>--%>
<%-- </tr>--%>
<tr>
<th>
<span class="editAccount__title">마케팅 수신동의</span>
</th>
<td>
<div class="b-checkbox-container editAccount__check">
<label class="b-checkbox checkbox">
<input type="checkbox" value="Y" name="marktRecptnAgreAt" <c:if test="${ resultMap.result.marktRecptnAgreAt eq 'Y' }">checked="checked"</c:if>>
<span class="check"></span>
<span class="control-label">동의함</span>
<input type="hidden" name="beforeMarktRecptnAgreAt" value="<c:out value="${resultMap.result.marktRecptnAgreAt}"/>"/>
</label>
</div>
<div class="infoBox">
<ul class="infoBox__list">
<li><em>할인쿠폰, 교환권, 행사</em>등 정보와 혜택을 보내드리고 <em>당첨 상품 배송 시 꼭
필요하오니 </em>동의
부탁드립니다.</li>
<li>귀하는 이에 동의하지 않으실 수 있으나, 그 경우 <em>할인쿠폰, 사은품 교환권, 할인행사,
상품배송</em>등을
전달받지 못하실 수 있음을
알려드립니다.
</li>
</ul>
</div>
</td>
</tr>
<%--
<tr>
<th>
<span class="editAccount__title">SNS 연동설정</span>
</th>
<td>
<div class="editAccount__switch">
<label class="toggle-switchy kakao" for="toggle-1" data-size
data-style="rounded" data-label="left">
<input type="checkbox" id="toggle-1" name="sbscrbDvCd" value="kakao" onclick="fn_sns_connection('kakao', '#toggle-1'); return false;" <c:if test="${ resultMap.result.extrlMemberAtKakao eq 1 }">checked="checked"</c:if> />
<span class="toggle">
<span class="switch"></span>
</span>
<span class="label">카카오 로그인</span>
</label>
<label class="toggle-switchy naver" for="toggle-2" data-size data-style="rounded" data-label="left">
<input type="checkbox" id="toggle-2" name="sbscrbDvCd" value="naver" onclick="fn_sns_connection('naver', '#toggle-2'); return false;" <c:if test="${ resultMap.result.extrlMemberAtNaver eq 1 }">checked="checked"</c:if> />
<span class="toggle">
<span class="switch"></span>
</span>
<span class="label">네이버 로그인</span>
</label>
</div>
</td>
</tr>
--%>
</form>
</tbody>
</table>
<div class="editAccount__bottom">
<button type="button" class="editAccount__deleteLink" onclick="fn_move_secsn_from();">회원탈퇴</button>
</div>
</div>
</div>
<div class="sub-bottom-btn-container">
<button type="button" class="btn xl outline" onclick="history.back();">취소</button>
<button type="button" class="btn xl theme" onclick="fn_update_mbr_info('#mbrInfoUpdtForm');">수정하기</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<%-- 공통 Footer --%>
<jsp:include page="/WEB-INF/views/comm/Footer.jsp"/>
<!-- 모달 -->
</body>
</html>