[Spring][쇼핑몰 프로젝트][5] 주소록 API 연동

https://kimvampa.tistory.com/110

VamPa/src/main/webapp/WEB-INF/views/member/join.jsp

@@ -65,21 +65,21 @@
 				<div class="address_name">주소</div>
 				<div class="address_input_1_wrap">
 					<div class="address_input_1_box">
-						<input class="address_input_1" name="memberAddr1">
+						<input class="address_input_1" name="memberAddr1" disabled="disabled">
 					</div>
-					<div class="address_button">
+					<div class="address_button" onclick="execution_daum_address()">
 						<span>주소 찾기</span>
 					</div>
 					<div class="clearfix"></div>
 				</div>
 				<div class ="address_input_2_wrap">
 					<div class="address_input_2_box">
-						<input class="address_input_2" name="memberAddr2">
+						<input class="address_input_2" name="memberAddr2" disabled="disabled">
 					</div>
 				</div>
 				<div class ="address_input_3_wrap">
 					<div class="address_input_3_box">
-						<input class="address_input_3" name="memberAddr3">
+						<input class="address_input_3" name="memberAddr3" disabled="disabled">
 					</div>
 				</div>
 			</div>
@@ -90,6 +90,7 @@
 	</form>
 </div>
 
+<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
 <script>
 
 var code = "";				//이메일전송 인증번호 저장위한 코드
@@ -168,6 +169,62 @@ $(".mail_check_input").blur(function(){
 	
 });
 
+/* 다음 주소 연동 */
+function execution_daum_address(){
+	
+    new daum.Postcode({
+        oncomplete: function(data) {
+            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
+            
+            // 각 주소의 노출 규칙에 따라 주소를 조합한다.
+            // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
+            var addr = ''; // 주소 변수
+            var extraAddr = ''; // 참고항목 변수
+
+            //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
+            if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
+                addr = data.roadAddress;
+            } else { // 사용자가 지번 주소를 선택했을 경우(J)
+                addr = data.jibunAddress;
+            }
+
+            // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
+            if(data.userSelectedType === 'R'){
+                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
+                // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
+                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
+                    extraAddr += data.bname;
+                }
+                // 건물명이 있고, 공동주택일 경우 추가한다.
+                if(data.buildingName !== '' && data.apartment === 'Y'){
+                    extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
+                }
+                // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
+                if(extraAddr !== ''){
+                    extraAddr = ' (' + extraAddr + ')';
+                }
+                // 주소변수 문자열과 참고항목 문자열 합치기
+      			addr += extraAddr;
+            
+            } else {
+                addr += ' ';
+            }
+
+            // 우편번호와 주소 정보를 해당 필드에 넣는다.
+            $(".address_input_1").val(data.zonecode);
+            //$("[name=memberAddr1]").val(data.zonecode);	// 대체가능
+            $(".address_input_2").val(addr);
+            //$("[name=memberAddr2]").val(addr);			// 대체가능
+            // 상세주소 입력란 disabled 속성 변경 및 커서를 상세주소 필드로 이동한다.
+            $(".address_input_3").attr("disabled",false);
+            $(".address_input_3").focus();
+            
+        }
+    }).open();   
+    
+}
+
+
 </script>
 
 </body>

VamPa/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties

@@ -1,5 +1,5 @@
 #Generated by Maven Integration for Eclipse
-#Mon Nov 09 16:44:38 KST 2020
+#Wed Nov 18 08:07:25 KST 2020
 version=1.0.0-BUILD-SNAPSHOT
 groupId=com.vam
 m2e.projectName=VamPa

VamPa_MySQL/src/main/webapp/WEB-INF/views/member/join.jsp

@@ -65,21 +65,21 @@
 				<div class="address_name">주소</div>
 				<div class="address_input_1_wrap">
 					<div class="address_input_1_box">
-						<input class="address_input_1" name="memberAddr1">
+						<input class="address_input_1" name="memberAddr1" disabled="disabled">
 					</div>
-					<div class="address_button">
+					<div class="address_button" onclick="execution_daum_address()">
 						<span>주소 찾기</span>
 					</div>
 					<div class="clearfix"></div>
 				</div>
 				<div class ="address_input_2_wrap">
 					<div class="address_input_2_box">
-						<input class="address_input_2" name="memberAddr2">
+						<input class="address_input_2" name="memberAddr2" disabled="disabled">
 					</div>
 				</div>
 				<div class ="address_input_3_wrap">
 					<div class="address_input_3_box">
-						<input class="address_input_3" name="memberAddr3">
+						<input class="address_input_3" name="memberAddr3" disabled="disabled">
 					</div>
 				</div>
 			</div>
@@ -90,6 +90,7 @@
 	</form>
 </div>
 
+<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
 <script>
 
 var code = "";				//이메일전송 인증번호 저장위한 코드
@@ -168,6 +169,62 @@ $(".mail_check_input").blur(function(){
 	
 });
 
+/* 다음 주소 연동 */
+function execution_daum_address(){
+	
+    new daum.Postcode({
+        oncomplete: function(data) {
+            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
+            
+            // 각 주소의 노출 규칙에 따라 주소를 조합한다.
+            // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
+            var addr = ''; // 주소 변수
+            var extraAddr = ''; // 참고항목 변수
+
+            //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
+            if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
+                addr = data.roadAddress;
+            } else { // 사용자가 지번 주소를 선택했을 경우(J)
+                addr = data.jibunAddress;
+            }
+
+            // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
+            if(data.userSelectedType === 'R'){
+                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
+                // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
+                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
+                    extraAddr += data.bname;
+                }
+                // 건물명이 있고, 공동주택일 경우 추가한다.
+                if(data.buildingName !== '' && data.apartment === 'Y'){
+                    extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
+                }
+                // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
+                if(extraAddr !== ''){
+                    extraAddr = ' (' + extraAddr + ')';
+                }
+                // 주소변수 문자열과 참고항목 문자열 합치기
+      			addr += extraAddr;
+            
+            } else {
+                addr += ' ';
+            }
+
+            // 우편번호와 주소 정보를 해당 필드에 넣는다.
+            $(".address_input_1").val(data.zonecode);
+            //$("[name=memberAddr1]").val(data.zonecode);	// 대체가능
+            $(".address_input_2").val(addr);
+            //$("[name=memberAddr2]").val(addr);			// 대체가능
+            // 상세주소 입력란 disabled 속성 변경 및 커서를 상세주소 필드로 이동한다.
+            $(".address_input_3").attr("disabled",false);
+            $(".address_input_3").focus();
+            
+        }
+    }).open();   
+    
+}
+
+
 </script>
 
 </body>

VamPa_MySQL/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties

@@ -1,5 +1,5 @@
 #Generated by Maven Integration for Eclipse
-#Mon Nov 09 16:44:39 KST 2020
+#Wed Nov 18 08:07:26 KST 2020
 version=1.0.0-BUILD-SNAPSHOT
 groupId=com.vam
 m2e.projectName=VamPa_MySQL