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

<form class="form_wrap form_full" name="deliveryModifyForm" id="deliveryModifyForm">
	<input type="hidden" class="form_control" name="custDelvAddrSq" th:value="${deliveryAddrInfo.custDelvAddrSq}">
	
	<div class="modal-header">
		<h5 class="modal-title" id="adrsModifyLabel">배송지 수정</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">
							<th:block th:if="${deliveryAddrInfo.defaultYn} == 'Y'">
								<input id="chk-default-addrs1" type="checkbox" name="defaultYn" checked>
							</th:block>
							<th:block th:if="${deliveryAddrInfo.defaultYn} == 'N'">
								<input id="chk-default-addrs1" type="checkbox" name="defaultYn">
							</th:block>
							<label for="chk-default-addrs1"><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="11" placeholder="받는 분" th:value="${deliveryAddrInfo.recipNm}">
						</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" th:value="${deliveryAddrInfo.recipPhnno}"/>
						</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" name="recipZipcode" placeholder="우편번호" th:value="${deliveryAddrInfo.recipZipcode}" readonly="readonly">
							<input type="hidden" class="form_control" name="recipBaseAddr" placeholder="기본주소" th:value="${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
							<input type="text" class="form_control" name="recipAddr" placeholder="배송주소" th:value="${deliveryAddrInfo.recipZipcode} + '    '+ ${deliveryAddrInfo.recipBaseAddr}" 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="상세주소" th:value="${deliveryAddrInfo.recipDtlAddr}">
						</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="직접 받고 부재 시 문 앞">
						<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_modi_save"><span>배송지 등록</span></button>
	</div>
</form>

<script th:inline="javascript">
var delvMemo = [[${deliveryAddrInfo.delvMemo}]];
//컨텐츠 호출
$(document).ready( function() {
	
	var delvMemoArr = ["문 앞", "직접 받고 부재 시 문 앞", "경비실", "택배함"];
	var tempMemo = true;
	
	// 배송요청사항설정
	for (i=0 ; i<delvMemoArr.length ; i++) {
		if (delvMemoArr[i] == delvMemo) {
			tempMemo = false;
		}
	}
	
	if (tempMemo) {
		$("#deliveryModifyForm input[name=rdi-request1]").eq(4).attr("checked", true);
		$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", false);
		$("#deliveryModifyForm input[name=delvMemoText]").val(delvMemo);
	}
	
	$("#deliveryModifyForm input[name=rdi-request1]").each(function(){
		var temp = $(this).parent().find('span').text();
		if (delvMemo == temp) {
			$(this).attr("checked", true);
		}
	});
	
	// 배송요청사항 버튼기능
	$("#deliveryModifyForm input[name=rdi-request1]").each(function(){
		// 버튼기능
		$(this).on("click", function(){
			var temp = $(this).parent().find('span').text();
			$("#deliveryModifyForm input[name=delvMemoText]").val("");
			if (temp == "기타사항") {
				$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", false);
			} else {
				$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", true);
			}
		});
	});

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

// 배송지등록버튼
$("#btn_delivery_modi_save").on("click", function(){
	
	// 유효성체크
	if (!deliveryModifyFormCheck()){
		return false;
	}
	
	// 기본배송지여부
	var defaultYn = "N";
	if ($("#deliveryModifyForm input[name=defaultYn]").is(":checked")) {
		defaultYn = "Y";
	}
	
	// 기타사항일때 텍스트 등록
	var delvMemo = $("#deliveryModifyForm input[name=rdi-request1]:checked").parent().find('span').text();
	if ("기타사항" == delvMemo) {
		delvMemo = $("#deliveryModifyForm input[name=delvMemoText]").val();
	}
	
	// 2021.04.29 추가
	if (gagajf.isNull(delvMemo)) {
		mcxDialog.alert("기타사항을 입력해주세요.");
		$("#deliveryAddForm input[name=delvMemoText]").focus();
		return false;
	}
	
	// 배송지정보설정
	var jsonObj = {
		"defaultYn"			: defaultYn
		, "custDelvAddrSq"	: parseInt($("#deliveryModifyForm input[name=custDelvAddrSq]").val())
		, "recipNm"			: $("#deliveryModifyForm input[name=recipNm]").val()
		, "recipPhnno"		: $("#deliveryModifyForm input[name=recipPhnno]").val()
		, "recipZipcode"	: $("#deliveryModifyForm input[name=recipZipcode]").val()
		, "recipBaseAddr"	: $("#deliveryModifyForm input[name=recipBaseAddr]").val()
		, "recipDtlAddr"	: $("#deliveryModifyForm input[name=recipDtlAddr]").val()
		, "delvMemo"		: delvMemo
	}
	
	var jsonData = JSON.stringify(jsonObj);
	
	$.ajax( {
		type		: "POST",
		url 		: '/common/updateCustDeliveryAddr',
		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) {
			// custDelvAddrSq 부모창으로 전달
			var delvObj = {
				"custDelvAddrSq"	: parseInt($("#deliveryModifyForm input[name=custDelvAddrSq]").val())
				, "dispYn"			: "Y"
				, "recipNm"			: $("#deliveryModifyForm input[name=recipNm]").val()
				, "recipPhnno"		: $("#deliveryModifyForm input[name=recipPhnno]").val()
				, "recipZipcode"	: $("#deliveryModifyForm input[name=recipZipcode]").val()
				, "recipBaseAddr"	: $("#deliveryModifyForm input[name=recipBaseAddr]").val()
				, "recipDtlAddr"	: $("#deliveryModifyForm input[name=recipDtlAddr]").val()
				, "delvMemo"		: delvMemo
			}
			
			// 부모장으로 값 전닫
			delvAddrSet(delvObj);
			
			// 팝업닫기
			$(".close-modal").trigger("click");
		}
	});
});

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

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

// 2021.04.09 하이픈처리
$(document).on("keyup", "#deliveryModifyForm 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>