<%
/**
 * <pre>
 * @Class Name : insertMemberInfoForm.jsp
 * 
 * @Description : 회원가입폼
 * 
 * 
 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
 *
 * </pre>
 *
 * @ ------------    --------    ---------------------------
 * @ 수정일                     수정자             수정내용
 * @ ------------    --------    ---------------------------
 * @ 2021. 7. 12.    JSYOO       최초 생성
 *
 * 
 * @author 이씨플라자 * DIGITALSHIP JSYOO
 * @since 2021. 7. 12.
 * @version 1.0
 *
 */
 %>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>
<script>
function signUp(){
	<%//패스워드 정규식 9자이상 소문자, 숫자 ,특수문자%>
	var regExp = /^(?=.*[a-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{9,}$/i; 
	
	var p = document.getElementById('password'); 
    var p_cf = document.getElementById('passwordConfirm');
    
    var flag = false;
    
	if($("#name").val() == "")
    {
		$("#name").focus();
        alert("이름을 입력해주세요.");
        return false;
    }
    $("input[name='gender']").each( function () {
        if (this.checked) { 
            flag = !flag;  
            return; 
        }
    });
    if (!flag) {
    	$("#m").focus();
        alert("성별을 체크해주세요.");
        return false;
    }
    if(!checkBirthday())
    {
    	$("#birth_yy").focus();
        alert("생년월일이 형식에 맞지 않습니다. 확인해주세요.");   
        return false;
    }
    if($("#mobileNo_1").val() == "" || $("#mobileNo_2").val() == "" || $("#mobileNo_3").val() == "")
    {
    	$("#mobileNo_1").focus();
        alert("휴대폰 번호를 입력해주세요.");    
        return false;
    }
    if($("#mobileCertYn").val()!="Y")
    {
        alert("휴대폰 인증이 필요합니다.");
        return false;
    }
    if($("#email").val() == "")
    {
    	$("#email").focus();
        alert("이메일을 입력해주세요.");
        return false;
    }
    if($("#emailCertYn").val()!="Y")
    {
        alert("이메일 인증이 필요합니다.");
        return false;
    }
    if($("#zipCode").val()=="" || $("#address").val()=="")
    {
    	$("#zipCode").focus();
        alert("주소를 입력해주세요.");
        return false;
    }
    if(!regExp.test(p.value)){
    	p.focus();
        alert("9자리 이상, 숫자/문자/특수문자를 혼합하여 입력해주세요.");
        return false;
    }
	if(p.value != p_cf.value)
	{
	  	 p_cf.focus();
		 alert("비밀번호가 일치하지 않습니다. 확인해 주세요.");
		 return false;
	}
	if($("#service-chk1").is(":checked") == false)
	{
		$("#service-chk1").focus();
        alert("대출/열람 정보 수신에 동의해주세요.");
        return false;
	}
	if(confirm("회원가입하시겠습니까?")){
		$("#birthday").val($("#birth_yy").val()+$("#birth_mm").val()+$("#birth_dd").val());
		$("#MobileNo").val($("#mobileNo_1").val()+$("#mobileNo_2").val()+$("#mobileNo_3").val());
		
		if($("input[name='infoRecvSmsYnChk']").is(":checked"))$("#infoRecvSmsYn").val("Y");
		else $("#infoRecvSmsYn").val("N");
		if($("input[name='infoRecvEmailYnChk']").is(":checked"))$("#infoRecvEmailYn").val("Y");
		else $("#infoRecvEmailYn").val("N");
		if($("input[name='mktRecvSmsYnChk']").is(":checked"))$("#mktRecvSmsYn").val("Y");
		else $("#mktRecvSmsYn").val("N");
		if($("input[name='mktRecvEmailYnChk']").is(":checked"))$("#mktRecvEmailYn").val("Y");
		else $("#mktRecvEmailYn").val("N");
		
		<%
	    //연락받을 이메일 입력
	    %>
		$("#loginUserId").val($("#email").val());
		var form = document.joinForm;
		form.action="${pageContext.request.contextPath}/member/insertMemberInfo.do";
		form.submit();
     }
     return false;
     
}

$(document).ready(function() {
	
	$("input:checkbox[name='gender']:checkbox[value='${loginVO.snsGender}']").prop('checked', true);
	
	var birthday="${loginVO.snsBirthday}";
	
	if(!birthday == "")
	{
		var birth_yy =birthday.substr(0,4);
	    var birth_mm =birthday.substr(4,2);
	    var birth_dd =birthday.substr(6,2);
	    
	    if(birth_dd.substr(0,1) == "0")
        {
            birth_dd = birth_dd.substr(1,1)         
        }
        
	    $("#birth_yy").val(birth_yy).prop("selected", true);
	    $("#birth_mm").val(birth_mm).prop("selected", true);
	    $("#birth_dd").val(birth_dd).prop("selected", true);
	}
	
	var MobileNo="${loginVO.snsMobileNo}";
	
	if(!MobileNo == "")
	{
		var mobileNo_1 = "";
		var mobileNo_2 = "";
		var mobileNo_3 = "";
		if(MobileNo.length == 11)
   	   {
		mobileNo_1 =MobileNo.substr(0,3);
	    mobileNo_2 =MobileNo.substr(3,4);
	    mobileNo_3 =MobileNo.substr(7,4);
	   }
		if(MobileNo.length == 10)
       {
        mobileNo_1 =MobileNo.substr(0,3);
        mobileNo_2 =MobileNo.substr(3,3);
        mobileNo_3 =MobileNo.substr(6,4);
       }
        
	    $("#mobileNo_1").val(mobileNo_1);
	    $("#mobileNo_2").val(mobileNo_2);
	    $("#mobileNo_3").val(mobileNo_3);
	}
	
	
	<%
	//핸드폰 번호가 변하는것 실시간 감지
	%>
	$("#mobileNo_1,#mobileNo_2,#mobileNo_3").on("propertychange change keyup paste input", function() {
		if($("#snsMobileNo").val() != "" && ($("#snsMobileNo").val() == $("#mobileNo_1").val()+ $("#mobileNo_2").val()+ $("#mobileNo_3").val()))
		{
			$("#mobileCertYn").val("Y");
			$("#mobileCertSendBtn").css("display","none");
			$("#mobileReSend").css("display","none");
			$("[id^='mobileSuc']").css("display","inline-block");
			$("[id^='mobileVrfctNo']").css("display","none");
		}else{
			$("#mobileCertYn").val("N");
	        $("#mobileCertSendBtn").css("display","");
	        $("#mobileReSend").css("display","");
	        $("[id^='mobileSuc']").css("display","none");
		}
	});
   <%
    //아이디가 변하는것 실시간 감지
    %>
    $("#email").on("propertychange change keyup paste input", function() {
    	if($("#snsUserId").val() != "" && ($("#snsUserId").val() == $("#email").val()))
        {
            $("#emailCertYn").val("Y");
            $("#emailCertSendBtn").css("display","none");
            $("#emailReSend").css("display","none");
            $("[id^='emailSuc']").css("display","inline-block");
            $("[id^='emailVrfctNo']").css("display","none");
        }else{
            $("#emailCertYn").val("N");
            $("#emailCertSendBtn").css("display","");
            $("#emailReSend").css("display","");
            $("[id^='emailSuc']").css("display","none");
        }
    });
   <%
    //비밀번호가 변하는것 실시간 감지
    %>
    $("#password,#passwordConfirm").on("propertychange change keyup paste input", function() {
    	if($("#password").val() == $("#passwordConfirm").val())
        {
            $("#pwdSuc").css("display","inline-block");
            $("#pwdFail").css("display","none");
        }else{
        	$("#pwdSuc").css("display","none");
            $("#pwdFail").css("display","inline-block");
        }
    });
})

<%
//이메일 인증
%>
var mailDoubleSubmitFlag = false;
function emailCert(){
	if(mailDoubleSubmitFlag)
    {
       alert("메일 전송중입니다. 잠시만 기다려주세요.");
       return false;    
    }

    var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

    if(!regExp.test($("#email").val()) || $("#email").val()==""){
        
        alert("형식에 맞지 않는 이메일입니다.");
        return false;
    }
    
    mailDoubleSubmitFlag = true;
    $.ajax({
        url : "${pageContext.request.contextPath}/member/emailCertNum.ajax",
        type : "POST",
        async: true,
        data : {"email" : $("#email").val()},
        success : function(result){
            alert(result.msg);
            
            if(result.emailCertYn=="Y")
           	{
            	$("#emailCertYn").val("N");
            	$("[id^='emailSuc']").css("display","none");
                $("[id^='emailVrfctNo']").css("display","inline-block");
                mailDoubleSubmitFlag = false;
           	}
            if(result.emailCertYn=="N")
           	{
                $("#emailCertYn").val("N");
                $("[id^='emailSuc']").css("display","none");
                mailDoubleSubmitFlag = false;
           	}
            
        },error : function(){
        	mailDoubleSubmitFlag = false;
        }
    })
}

<%
//이메일 인증번호 확인
%>
function certEmailCheck(){
  <%
  //ajax 사용자가 입력한 번호를 보내 RESTfull server에서 확인 success or fail 반환 (3분이내인지도)
  %>
  $.ajax({
      url : "${pageContext.request.contextPath}/member/emailCertNumChk.ajax",
      type : "POST",
      data : {"emailVrfctNo" : $("#emailVrfctNo").val(),
              "email" : $("#email").val()},
      async: false, 
      success : function(result){
          if(result=="true")
          {
              alert("인증되었습니다.");
              $("#emailCertYn").val("Y");
              $("#emailCertSendBtn").css("display","none");
              $("#emailReSend").css("display","none");
              $("[id^='emailSuc']").css("display","inline-block");
              $("[id^='emailVrfctNo']").css("display","none");
          }else
          {
              alert("인증번호가 일치하지않습니다.");
          }
        }
      ,error : function(){
      }
  })
}

var mobileDoubleSubmitFlag = false;

<%
//핸드폰 인증번호 받기
%>
function mobileCert(){
	if(mobileDoubleSubmitFlag)
   {
       alert("인증번호 전송중입니다. 잠시만 기다려주세요.");
      return false;    
   }
    
    mobileDoubleSubmitFlag = true;
	    
	var mobileNo = $("#mobileNo_1").val()+ $("#mobileNo_2").val()+ $("#mobileNo_3").val();
	mobileNo = mobileNo.replace(/-/gi,"");
	$("#mobileNo").val(mobileNo);
    var regExp = /^\d{3}\d{3,4}\d{4}$/;
    
    if(!regExp.test(mobileNo) || mobileNo==""){
    	
    	alert("형식에 맞지 않는 번호입니다.");
    	return false;
    }
    
    $.ajax({
        url : "${pageContext.request.contextPath}/member/mobileCertNum.ajax",
        type : "POST",
        async: true,
        data : {"mobileNo" : mobileNo},
        success : function(result){
            alert("인증번호가 발송됐습니다.");
            $("#mobileCertYn").val("N");
            $("[id^='mobileSuc']").css("display","none");
            $("[id^='mobileVrfctNo']").css("display","inline-block");
            mobileDoubleSubmitFlag = false;
        },error : function(){
        	mobileDoubleSubmitFlag = false;
        }
    })
}

<%
//핸드폰 인증번호 확인
%>
function certMobileCheck(){
    <%
    //ajax 사용자가 입력한 번호를 보내 RESTfull server에서 확인 success or fail 반환 (3분이내인지도)
    %>
    $.ajax({
        url : "${pageContext.request.contextPath}/member/mobileCertNumChk.ajax",
        type : "POST",
        data : {"mobileVrfctNo" : $("#mobileVrfctNo").val(),
                "mobileNo" : $("#mobileNo").val()},
        async: false,
        success : function(result){
        	if(result=="true")
        	{
	            alert("인증되었습니다.");
	            $("#mobileCertYn").val("Y");
	            $("#mobileCertSendBtn").css("display","none");
	            $("#mobileReSend").css("display","none");
	            $("[id^='mobileSuc']").css("display","inline-block");
	            $("[id^='mobileVrfctNo']").css("display","none");
	            document.joinForm.action="${pageContext.request.contextPath}/member/selectAlreadySignUpMobilePopup.do";
	            fn_layerPopFormSubmit("joinForm",false);
        	}else
        	{
        		alert("인증번호가 일치하지않습니다.");
        	}
          }
        ,error : function(){
        }
    })
}

document.addEventListener('keydown', function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
    }
}, true);
    
function checkBirthday() {
    var birthday;
    var yy = $("#birth_yy option:selected").val();
    var mm = $("#birth_mm option:selected").val();
    var dd = $("#birth_dd option:selected").val();
    var lang = "ko_KR";

    var oyy = $("#birth_yy");
    var omm = $("#birth_mm");
    var odd = $("#birth_dd");

    if (mm.length == 1) {
        mm = "0" + mm;
    }
    if (dd.length == 1) {
        dd = "0" + dd;
    }

    birthday = yy + mm + dd;
    if (!isValidDate(birthday)) {
        return false;
    }

    var age = calcAge(birthday);
    if (age < 0) {
        return false;
    } else if (yy < 1900) {
        return false;
    } else {
        return true;
    }
}

function isValidDate(param) {
    try {
        param = param.replace(/-/g, '');

        // 자리수가 맞지않을때
        if (isNaN(param) || param.length != 8) {
            return false;
        }

        var year = Number(param.substring(0, 4));
        var month = Number(param.substring(4, 6));
        var day = Number(param.substring(6, 8));

        if (month < 1 || month > 12) {
            return false;
        }

        var maxDaysInMonth = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
        var maxDay = maxDaysInMonth[month - 1];

        // 윤년 체크
        if (month == 2 && (year % 4 == 0 && year % 100 != 0 || year % 400 == 0)) {
            maxDay = 29;
        }

        if (day <= 0 || day > maxDay) {
            return false;
        }
        return true;

    } catch (err) {
        return false;
    }
    ;
}

jQuery(function ($) {
    var now = new Date();
    var year = now.getFullYear();
    var mon = now.getMonth() + 1 > 9 ? "" + (now.getMonth() + 1) : "0" + (now.getMonth() + 1);
    var day = now.getDate() > 9 ? "" + now.getDate() : "0" + now.getDate();
    // 년도
    for (var i = 1900; i <= year; i++) {
        $("#birth_yy").append('<option value="' + i + '">' + i + "</option>");
    }

    // 월별
    for (var i = 1; i <= 12; i++) {
        var mm = i > 9 ? i : "0" + i;
        $("#birth_mm").append('<option value="' + mm + '">' + mm + "</option>");
    }

    // 일별
    for (var i = 1; i <= 31; i++) {
        var dd = i > 9 ? i : "0" + i;
        $("#birth_dd").append('<option value="' + dd + '">' + dd + "</option>");
    }
    $("#birth_yy  > option[value=" + year + "]").attr("selected", "true");
    $("#birth_mm  > option[value=" + mon + "]").attr("selected", "true");
    $("#birth_dd  > option[value=" + day + "]").attr("selected", "true");
});

function calcAge(birth) {
    var date = new Date();
    var year = date.getFullYear();
    var month = (date.getMonth() + 1);
    var day = date.getDate();
    if (month < 10)
        month = '0' + month;
    if (day < 10)
        day = '0' + day;
    var monthDay = month + '' + day;

    birth = birth.replace('-', '').replace('-', '');
    var birthdayy = birth.substr(0, 4);
    var birthdaymd = birth.substr(4, 4);

    var age = monthDay < birthdaymd ? year - birthdayy - 1 : year - birthdayy;
    return age;
}
 
function fn_cancel(){
	document.joinForm.action ="/member/selectMemberJoiningInfo.do";
	document.joinForm.submit();
}

</script>
<!-- 회원가입 섹션 -->
    <div class="location join">
        <h2 class="blind">회원가입 섹션영역</h2>
        <div class="inner">
            <div class="row-top">
                <div class="location-box">
                    <ul class="loc">
                        <li>HOME</li>
                        <li class="on">회원가입</li>
                    </ul>
                    <ul class="tit">
                        <li><span>회원</span>가입</li>
                    </ul>
                </div>
                <div class="arr"><img src="/images/icon/icon-join-arr2.png" alt="화살표 아이콘"></div>
            </div>
            <div class="contents row-bottom">
                <div class="join-box">
                    <div class="step">
                        <div class="s1">
                            <div class="icon"><img src="/images/icon/icon-join-step-suc.png" alt="인증 성공 아이콘"></div>
                            <div class="text"><p>STEP 01</p><p>본인인증</p></div>
                        </div>
                        <div class="s2">
                            <div class="icon"><img src="/images/icon/icon-join-step-suc.png" alt="인증 성공 아이콘"></div>
                            <div class="text"><p>STEP 02</p><p>약관동의</p></div>
                        </div>
                        <div class="s3 on">
                            <div class="icon"><img src="/images/icon/icon-join-step3-on.png" alt="정보입력 아이콘"></div>
                            <div class="text"><p>STEP 03</p><p>정보입력</p></div>
                        </div>
                    </div>
                    
                    <div class="info">
                        <form id="joinForm" name="joinForm" method="post" class="mt-5 form-container">
                            <input type="hidden" id="birthday" name="birthday" >
                            <input type="hidden" id="mobileNo" name="mobileNo" >
				            <input type="hidden" id="mobileCertYn" name="mobileCertYn" value="Y">
				            <input type="hidden" id="emailCertYn" name="emailCertYn" value="Y">
				            <input type="hidden" id="loginUserId" name="loginUserId" >
				            <input type="hidden" id="snsMobileNo" name="snsMobileNo" value="<c:out value="${loginVO.snsMobileNo}"/>">
				            <input type="hidden" id="snsUserId" name="snsUserId" value="<c:out value="${loginVO.snsUserId}"/>">
				            <input type="hidden" id="infoRecvSmsYn" name="infoRecvSmsYn" >
				            <input type="hidden" id="infoRecvEmailYn" name="infoRecvEmailYn">
				            <input type="hidden" id="mktRecvSmsYn" name="mktRecvSmsYn">
				            <input type="hidden" id="mktRecvEmailYn" name="mktRecvEmailYn">
				            
                            <h2 style="margin-top:0;">회원정보</h2>
                            
                            <div class="form-group Username">
                                <label for="name">이름</label>
                                <div class="con">
                                    <input class="form-control" type="text" id="name" name="name" minlength="2" maxlength="20" value="<c:out value="${loginVO.snsName}"/>" placeholder="이름을 입력하세요" />
                                </div>
                            </div>
                            
                            <div class="form-group Usersex">
                                <label>성별</label>
                                <div class="con">
                                    <label for="m" style="display:none;">남자</label><div class="chk"><input type="checkbox" id="m" class="sex" name="gender" value="M" ><label for="m">남자</label></div>
                                    <label for="w" style="display:none;">여자</label><div class="chk"><input type="checkbox" id="w" class="sex" name="gender" value="F"><label for="w">여자</label></div>
                                </div>
                            </div>
                            
                            <div class="form-group Userbirth">
                                <label>생년월일</label>
                                <div class="con">
                                    <label for="birth_yy" style="display:none;">년</label><select name="birth_yy" id="birth_yy"></select>년
                                    <label for="birth_mm" style="display:none;">월</label><select name="birth_mm" id="birth_mm"></select>월
                                    <label for="birth_dd" style="display:none;">일</label><select name="birth_dd" id="birth_dd"></select>일
                                </div>
                            </div>
                            
                            <div class="form-group Usermobile">
                                <label>휴대폰 번호</label>
                                <div class="con mobile">
                                    <div class="row">
                                        <label for="mobileNo_1" style="display:none;">ex)010</label><input class="form-control mobile1" type="text" id="mobileNo_1" value="010" maxlength="3"  oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"/> -
                                        <label for="mobileNo_2" style="display:none;">1234</label><input class="form-control mobile2" type="text" id="mobileNo_2" value="" maxlength="4"  oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"/> -
                                        <label for="mobileNo_3" style="display:none;">5678</label><input class="form-control mobile3" type="text" id="mobileNo_3" value="" maxlength="4"  oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"/>
                                        <button type="button" class="btn-color" id="mobileCertSendBtn" name="mobileCertSendBtn" style="display:none;" onclick="mobileCert();">인증하기</button>
                                        <button type="button" class="btn-black" id="mobileReSend" style="display:none;" onclick="mobileCert();">재전송</button>
                                    </div>
                                    <div class="row" id="mobileCertForm">
                                        <label for="mobileVrfctNo" style="display:none;">인증번호 입력</label><input class="form-control cer" type="text" id='mobileVrfctNo' name='mobileVrfctNo' style="display:none;" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');" maxlength="6" placeholder=" SMS로 발송된 인증번호를 입력하세요"/>
                                        <button type="button" class="btn-gray" id='mobileVrfctNoBtn' style="display:none;" onclick='certMobileCheck();'>확인</button>
                                        <span id="mobileSuc" class="suc">인증이 완료되었습니다.</span>
                                        <span id="mobileSuc-chk" class="chk-suc"></span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group Useremail">
                                <label for="email">이메일</label>
                                <div class="con email">
                                    <div class="row">
                                        <input class="form-control email1" type="email" id="email" name="email" placeholder="example@mail.com" maxlength="30" value="<c:out value="${loginVO.snsUserId}"/>" />
                                        <button type="button" class="btn-color" id="emailCertSendBtn" name="emailCertSendBtn" style="display:none;" onclick="emailCert();">인증하기</button>
                                        <button type="button" class="btn-black" id="emailReSend"  style="display:none;" onclick="emailCert();">재전송</button>
                                    </div>
                                    <div class="row" id="emailCertForm">
                                        <label for="emailVrfctNo" style="display:none;">인증번호 입력</label><input class="form-control cer" type="text" id='emailVrfctNo' name='emailVrfctNo' style="display:none;" placeholder=" 이메일로 발송된 인증번호를 입력하세요"/>
                                        <button type="button" class="btn-gray" id='emailVrfctNoBtn' style="display:none;" onclick='certEmailCheck()'>확인</button>
                                        <span id="emailSuc" class="suc">인증이 완료되었습니다.</span>
                                        <span id="emailSuc-chk" class="chk-suc"></span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group Useraddr">
                                <label>주소</label>
                                <div class="con addr">
                                    <div class="row">
                                        <label for="zipCode" style="display:none;">우편번호</label><input class="form-control addr1" type="text" id="zipCode" name="zipCode" readonly placeholder="우편번호" />
                                        <button type="button" class="btn-color" onclick="sample6_execDaumPostcode();">우편번호</button>
                                    </div>
                                    <div class="row">
                                        <label for="address" style="display:none;">주소</label><input class="form-control addr2" type="text" id="address" name="address" readonly placeholder="주소" />
                                        <label for="addressDetail" style="display:none;">상세주소</label><input class="form-control addr3" type="text" id="addressDetail" name="addressDetail" placeholder="상세주소" />
                                    </div>
                                </div>
                            </div>

                            <div class="form-group Password">
                                <label for="password">비밀번호</label>
                                <div class="con">
                                    <input class="form-control" type="password" id="password" name="password" placeholder="비밀번호" />
                                    <span>9자리 이상, 숫자/문자/특수문자를 혼합하여 입력</span>
                                    <label for="passwordConfirm" style="display:none;">비밀번호 확인</label><input class="form-control" type="password" id="passwordConfirm" name="passwordConfirm" placeholder="비밀번호 확인" />
                                    <span class="suc" id="pwdSuc">일치합니다.</span>
                                    <span class="fail" id="pwdFail">일치하지 않습니다.</span>
                                    <span class="text">-  입력하신 비밀번호는 ‘계정 연결’, ‘내 정보 확인’, ‘회원탈퇴’ 시, 회원님의 정보보호 및 본인확인을 위해 사용됩니다.</span>
                                </div>
                            </div>
                            
                            <h2>서비스 알림 수신 동의</h2>
                            
                            <div class="form-group service">
                                <div class="left">
                                    <div class="chk"><input type="checkbox" id="service-chk1" class="ser-chk1"  checked><label for="service-chk1">대출/열람 정보 수신동의 [필수/1건 이상 선택]</label></div>
                                </div>
                                <p class="bg">- 문자(SMS)/이메일 수신동의를 하시면 ‘자료반납’, ‘자료연체’, ‘예약자료 도착’, ‘열람신청 승인’, ‘열람신청 반려’ 알림을 받으실 수 있습니다.</p>
                            </div>
                            
                            <div class="form-group service">
                                <div class="left">
                                    <div class="chk"><input type="checkbox" id="service-chk2" class="ser-chk2" ><label for="service-chk2">지방문화원 소식/홍보 알림 수신동의 [선택]</label></div>
                                </div>
                                <div class="right">
                                    <div class="chk"><input type="checkbox" id="service-chk2-1" class="ser-chk2-2" name="mktRecvSmsYnChk"><label for="service-chk2-1">문자(SMS)</label></div>
                                    <div class="chk"><input type="checkbox" id="service-chk2-2" class="ser-chk2-2" name="mktRecvEmailYnChk"><label for="service-chk2-2">이메일</label></div>
                                </div>
                                <p class="bg">- 문자(SMS)/이메일 수신동의를 하시면 문화원 소식이나 주요 행사 등의 정보를 빠르게 만나실 수 있습니다.</p>
                                <p>- 회원가입완료, 임시비밀번호 발급관련 내용의 경우 수신 동의와 상관없이 이메일로 발송됩니다.</p>
                            </div>
                            
                            <div class="btn-box">
                                <button type="button" class="btn btn-gray" id="cancel" onclick="fn_cancel();">취소</button>
                                <button type="button" class="btn btn-color" onclick="signUp();">가입하기</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    function sample6_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var addr = ''; // 주소 변수
                var extraAddr = ''; // 참고항목 변수

                //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                    addr = data.roadAddress;
                } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    addr = data.jibunAddress;
                }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('zipCode').value = data.zonecode;
                document.getElementById("address").value = addr;
                // 커서를 상세주소 필드로 이동한다.
                document.getElementById("addressDetail").focus();
            }
        }).open();
    }
</script>
