SpringBoot 우편번호 검색/주소 찾기

html에 자신의 Scripts보다 위쪽에

<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

추가해줍니다.

 

<label class="label address">
    <span hidden>우편번호</span>
    <input class="--object-input input" maxlength="6" name="addressPostal"
           placeholder="우편번호" type="text" readonly>
    <input class="--object-button" name="addressFined" value="주소찾기" type="button">
</label>
<label class="label address">
    <span hidden>기본 주소</span>
    <input class="--object-input input" maxlength="100" name="addressPrimary" type="text"
           readonly placeholder="주소찾기를 통해 주소를 입력해 주세요.">
</label>
<label class="label address">
    <span hidden>상세 주소</span>
    <input class="--object-input input" maxlength="100" name="addressSecondary" type="text" placeholder="상세 주소를 입력해주세요.">
</label>
<div class="panel address" rel="addressFindPanel">
    <div class="dialog" rel="addressFindPanelDialog"></div>
</div>

 

 

.panel.address {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 70%);
    position: fixed;
    display: none;
}
.panel.address.visible{
    display: block;
}

visible클래스를 이용해서 CSS에서 만들어둔 주소 선택창을 활성화와 비 활성활 진행합니다.

CSS에서 기본적으로 display: none을 통해 보이지 않는 상태이고 주소 찾기 버튼을 클릭할 경우 display : block를 이용해서 화면에 배치합니다.

 

form['addressFined'].addEventListener('click', () => {
    //daum.Postcode는 주소를 선택할 경우에 작동하는 함수.
    new daum.Postcode({
        oncomplete: e => {
            form.querySelector('[rel="addressFindPanel"]').classList.remove('visible');
            form['addressPostal'].value = e['zonecode'];
            form['addressPrimary'].value = e['address'];
            form['addressSecondary'].value = '';
            form['addressSecondary'].focus();
        }
    }).embed(form.querySelector('[rel="addressFindPanelDialog"]'));

    form.querySelector('[rel="addressFindPanel"]').classList.add('visible');

});

주소 찾기 버튼을 클릭할 경우 

form.querySelector('[rel="addressFindPanel"]').classList.add('visible');

이 구문을 통해서 visible class가 추가되어서 주소 검색창이 활성화되고 

 

주소를 선택할 경우 

form['addressPostal'].value = e['zonecode'];
form['addressPrimary'].value = e['address'];

주소 입력창에 각각 주소와 우편번호가 입력됩니다.