[API] 카카오 주소 API

olive3·2024년 2월 28일

회원가입 구현 중 우편번호 찾기를 통해 주소를 넣어주기 위해 카카오 주소 API를 사용했다. 카카오에서 5개의 예제를 제공하는데 그 중 사용자가 선택한 값 이용하기 예제를 적용했다.

구현

join.html

...

<ul class="address">
	<li>
    	<p class="join_tit btn_included">주소</p>
    </li>
    <li>
        <input class="input_box" th:field="*{zipCode}" placeholder="우편번호" type="text"/>
        <button type="button" id="searchZipCodeBtn" class="btn1" onclick="findPostCode()">주소검색</button>
    </li>
    <li>
        <input class="input_box" th:field="*{basicAddress}" placeholder="기본주소" type="text"/>
    </li>
    <li>
        <input class="input_box" th:field="*{detailAddress}" placeholder="상세주소(선택 가능)" maxlength="60" type="text"/>
    </li>
</ul>
...

join.js

function findPostCode() {
    new daum.Postcode({
        oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

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

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

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