주소 입력 구현(daum 주소 api)

공식 API 홈페이지> http://postcode.map.daum.net/guide 

1. script에 postcode 추가

index.html에 아래의 스크립트를 추가

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

 

2. 주소 검색 버튼 구현 (pages/ShopBasketPage.vue)

• 주소 입력 버튼 클릭 시, showApi() 실행
• api에서 주소 선택하면 상세 주소 입력 모달 창 나타내기
• 상세 주소 입력 폼에서 저장 버튼 클릭 시, setAddress() 실행

 

2-1) 템플릿 코드

<template>
  <div id="shopbasketpage">
    <div id="form">
      <div>
        <b-icon icon="geo-alt"></b-icon>배송지
      </div>
      
      <-- 주소 검색 버튼 -->
      <button class="button-style1" @click="showApi">주소 검색</button>
      
      <-- 상세 주소 입력 폼 -->
      <div>
        <b-modal id="modal" ref="addr2-modal" hide-footer title="상세 주소 입력" centered>
          <div class="d-block">
            <div class="d-addr1">{{ addr.addr1 }}</div> 
            <div class="d-addr2">
              <input 
              type="text" 
              required 
              v-model="addr.addr2" 
              @keyup.enter="setAddress(addr)"
              placeholder="나머지 주소를 입력해주세요"/>
            </div>
          </div>
          <div class="d-btns">
            <b-button type="reset" @click="addr.addr2 = '';">리셋</b-button>
            <b-button type="submit" variant="primary" @click="setAddress(addr)">저장</b-button>
          </div> 
        </b-modal>
      </div>
      
    </div>
  </div>
</template>

 

2-2) 스크립트 코드

<script>
export default {
  name: "ShopBasketPage",
  data() {
    return {
      addr: 
        {
          zip: '',
          addr1: '',
          addr2: '',
        }
    }
  },
  methods: {
    showApi() {
        new window.daum.Postcode({ 
            oncomplete: (data) => {
                let fullRoadAddr = data.roadAddress; // 도로명 주소 변수 
                let extraRoadAddr = ''; // 도로명 조합형 주소 변수

                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                    extraRoadAddr += data.bname; 
                }

                if(data.buildingName !== '' && data.apartment === 'Y'){ 
                    extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName); 
                } // 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다. 

                if(extraRoadAddr !== ''){ 
                    extraRoadAddr = ' (' + extraRoadAddr + ')'; 
                } // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다. 

                if(fullRoadAddr !== ''){ 
                    fullRoadAddr += extraRoadAddr; 
                } // 우편번호와 주소 정보를 해당 필드에 넣는다. 

                this.addr.zip = data.zonecode; //5자리 새우편번호 사용
                this.addr.addr1 = fullRoadAddr;
                
                
                this.$refs['addr2-modal'].show() //상세 주소 입력 모달 창 보이기
            }
        }).open()
    },
  },
};
</script>

 

3. 입력한 주소 vuex에 저장 (store/index.js)

export const store = new Vuex.Store({
    state: {
    	//ordersheet 스테이트 추가	
        ordersheet: {
            addr: '',
            orderProduct: '',
        }
    },
    actions: {
        setAddress({commit},addr) {
            commit("setAddress", addr);
        }

    },
    mutations: {
        setAddress(state, addr) {
            console.log("setAddress");
            console.log("addr ", addr);
            state.ordersheet.addr = addr;  //ordersheet 스테이트의 addr의 값을 입력한 값으로 저장
        },
    },
})