style24.front/src/main/webapp/WEB-INF/views/web/popup/DelvAddrAddPopWeb.html

<form class="form_wrap form_full" name="deliveryAddForm" id="deliveryAddForm">
	<div class="modal-header">
		<h5 class="modal-title" id="adrsAddLabel">배송지 등록</h5>
	</div>
	<div class="modal-body">
		<div class="pop_cont">
			<div class="area_adrsinfo">
				<h6>배송지 정보</h6>
				<th:block th:if="${isLogin} == true">
					<div class="default_addrs">
						<div class="form_field">
							<input id="chk-default-addrs" type="checkbox" name="defaultYn" checked="">
							<label for="chk-default-addrs"><span>기본 배송지로 등록</span></label>
						</div>
					</div>
				</th:block>
				<div class="form_field">
					<label class="input_label sr-only">받는 분</label>
					<div class="ui_col_12">
						<div class="input_wrap"> 
							<input type="text" class="form_control" name="recipNm" maxlength="10" placeholder="받는 분">
						</div>
					</div>
				</div>	
				<div class="form_field">
					<label class="input_label sr-only">휴대폰 번호</label>
					<div class="ui_col_12">
						<div class="input_wrap"> 
							<input type="text" name="recipPhnno" placeholder="휴대폰 번호" class="form_control" minlength="12" maxlength="13"/>
						</div>
					</div>
				</div>
				<div class="form_field">
					<label class="input_label sr-only">배송주소</label>
					<div class="ui_col_12">
						<div class="input_wrap"> 
							<input type="hidden" class="form_control" name="recipZipcode" placeholder="우편번호" readonly="readonly">
							<input type="hidden" class="form_control" name="recipBaseAddr" placeholder="기본주소" readonly="readonly">
							<input type="text" class="form_control" name="recipAddr" placeholder="배송주소" readonly="readonly">
						</div>
						<button type="button" class="btn btn_dark btn_sm" onclick="fnOpenDaumAddr();"><span>우편번호 찾기</span></button>
					</div>
				</div>
				<div class="form_field">
					<label class="input_label sr-only">상세주소</label>
					<div class="ui_col_12">
						<div class="input_wrap"> 
							<input type="text" class="form_control" name="recipDtlAddr" maxlength="50" placeholder="상세주소">
						</div>
					</div>
				</div>
			</div>
			<div class="area_request">
				<h6>배송요청 사항</h6> 
					<div class="form_field">
					<div>
						<input type="radio" name="rdi-request1" id="rdi-request11" value="문 앞" >
						<label for="rdi-request11"><span>문 앞</span></label>
					</div>
					<div>
						<input type="radio" name="rdi-request1" id="rdi-request12" value="직접 받고 부재 시 문 앞" checked>
						<label for="rdi-request12"><span>직접 받고 부재 시 문 앞</span></label>
					</div>
					<div>
						<input type="radio" name="rdi-request1" id="rdi-request13" value="경비실">
						<label for="rdi-request13"><span>경비실</span></label>
					</div>
					<div>
						<input type="radio" name="rdi-request1" id="rdi-request14" value="택배함">
						<label for="rdi-request14"><span>택배함</span></label>
					</div>
					<div>
						<input type="radio" name="rdi-request1" id="rdi-request15" value="기타사항">
						<label for="rdi-request15"><span>기타사항</span></label>
						<div class="info_box">
							<div class="input_wrap">
								<input type="text" name="delvMemoText" class="form_control" maxlength="30" placeholder="보관장소만 입력 (필수)" disabled>
								<p>보관 장소 외 다른 내용 입력시 통보없이 삭제 될 수 있습니다.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn_dark" id="btn_delivery_addr_save"><span>배송지 등록</span></button>
	</div>
</form>

<script th:inline="javascript">
var isLogin				= [[${isLogin}]];				// 로그인여부

//컨텐츠 호출
$(document).ready( function() {
	// 배송요청사항 버튼기능
	$("#deliveryAddForm input[name=rdi-request1]").each(function(){
		
		// 기타기능 버튼기능
		$(this).on("click", function(){
			var temp = $(this).parent().find('span').text();
			$("#deliveryAddForm input[name=delvMemoText]").val("");
			if (temp == "기타사항") {
				$("#deliveryAddForm input[name=delvMemoText]").attr("disabled", false);
			} else {
				$("#deliveryAddForm input[name=delvMemoText]").attr("disabled", true);
			}
		});
	});

	$(document).on('click','#adrsAddPop .close-modal',function(e){
		$('#adrsAddPop .modal-dialog .modal-content').html('');
	});

});

// 배송지등록버튼
$("#btn_delivery_addr_save").on("click", function(){
	
	// 유효성체크
	if (!deliveryAddFormCheck()){
		return false;
	}
	
	// 기본배송지여부
	var defaultYn = "N";
	if ($("#deliveryAddForm input[name=defaultYn]").is(":checked")) {
		defaultYn = "Y";
	}
	
	// 기타사항일때 텍스트 등록
	var delvMemo = $("#deliveryAddForm input[name=rdi-request1]:checked").parent().find('span').text();
	if ("기타사항" == delvMemo) {
		delvMemo = $("#deliveryAddForm input[name=delvMemoText]").val();
	}
	
	// 2021.04.29 추가
	if (gagajf.isNull(delvMemo)) {
		mcxDialog.alert("기타사항을 입력해주세요.");
		$("#deliveryAddForm input[name=delvMemoText]").focus();
		return false;
	}
	
	// custDelvAddrSq 부모창으로 전달
	var delvObj = {
		"custDelvAddrSq"	: 0
		, "dispYn"			: "Y"
		, "defaultYn"		: defaultYn
		, "recipNm"			: $("#deliveryAddForm input[name=recipNm]").val()
		, "recipPhnno"		: $("#deliveryAddForm input[name=recipPhnno]").val()
		, "recipZipcode"	: $("#deliveryAddForm input[name=recipZipcode]").val()
		, "recipBaseAddr"	: $("#deliveryAddForm input[name=recipBaseAddr]").val()
		, "recipDtlAddr"	: $("#deliveryAddForm input[name=recipDtlAddr]").val()
		, "delvMemo"		: delvMemo
	}
	
	// 비회원
	if (isLogin == false) {
		// 부모장으로 값 전닫
		delvAddrSet(delvObj);
		// 팝업닫기
		$(".close-modal").trigger("click");
		return false;
	}
	
	var jsonData = JSON.stringify(delvObj);
	
	$.ajax( {
		type		: "POST",
		url 		: '/common/createCustDeliveryAddr',
		data		: jsonData,
		dataType 	: 'html',
		beforeSend : function(xhr, settings) {
			xhr.setRequestHeader("AJAX"			, "true");
			xhr.setRequestHeader('Accept'		, 'application/json');
			xhr.setRequestHeader('Content-Type'	, 'application/json');
		},
		success 	: function(result) {
			if (result != null) {
				delvObj.custDelvAddrSq = result;
				
				// 부모장으로 값 전닫
				delvAddrSet(delvObj);
			}
			
			// 팝업닫기
			$(".close-modal").trigger("click");
		}
	});
});

// 유효성체크 함수
var deliveryAddFormCheck = function() {
	// TODO 유효성 체크 추가
	if (gagajf.isNull($("#deliveryAddForm input[name=recipNm]").val())) {
		mcxDialog.alert("받는분을 입력해주세요.");
		$('#deliveryAddForm input[name=custNm]').focus();
		return false;
	}
	
	if (gagajf.isNull($("#deliveryAddForm input[name=recipPhnno]").val())) {
		mcxDialog.alert("휴대폰번호를 입력해주세요.");
		$('#deliveryAddForm input[name=recipPhnno]').focus();
		return false;
	}
	
	if ($("#deliveryAddForm input[name=recipPhnno]").val().length < 12) {
		mcxDialog.alert("휴대폰번호를 정확히 입력해주세요.");
		$('#deliveryAddForm input[name=recipPhnno]').focus();
		return false;
	}
	
	if ($("#deliveryAddForm input[name=recipPhnno]").val().length > 13) {
		mcxDialog.alert("휴대폰번호를 정확히 입력해주세요.");
		$('#deliveryAddForm input[name=recipPhnno]').focus();
		return false;
	}
	
	if (gagajf.isNull($("#deliveryAddForm input[name=recipZipcode]").val())) {
		mcxDialog.alert("배송주소를 입력해주세요.");
		$('#deliveryAddForm input[name=recipAddr]').focus();
		return false;
	}
	
	if (gagajf.isNull($("#deliveryAddForm input[name=recipBaseAddr]").val())) {
		mcxDialog.alert("배송주소를 입력해주세요.");
		$('#deliveryAddForm input[name=recipAddr]').focus();
		return false;
	}
	
	if (gagajf.isNull($("#deliveryAddForm input[name=recipDtlAddr]").val())) {
		mcxDialog.alert("상세주소를 입력해주세요.");
		$('#deliveryAddForm input[name=recipDtlAddr]').focus();
		return false;
	}
	
	return true;
}

//우편번호 DAUM을 이용한 우편번호 팝업 레이어
var fnOpenDaumAddr = function() {
	let daumZip = new daum.Postcode({
		oncomplete: function(data) {
			$('#deliveryAddForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
			$('#deliveryAddForm input[name=recipZipcode]').val(data.zonecode);
			$('#deliveryAddForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
			$('#deliveryAddForm input[name=recipDtlAddr]').focus();
			cfnCloseDaumAddr();
		},
		width: '100%'
	});
	cfnOpenDaumAddr(daumZip);
}

// 2021.04.09 하이픈처리
$(document).on("keyup", "#deliveryAddForm input[name=recipPhnno]", function() { 
	$(this).val( $(this).val().replace(/[^0-9]/g, "").replace(/(^02|^0505|^1[0-9]{3}|^0[0-9]{2})([0-9]+)?([0-9]{4})$/,"$1-$2-$3").replace("--", "-") ); 
});
</script>