[TIL] 20240605 - kakao 우편번호 서비스

kakao 우편번호 서비스

---

kakao 우편번호 서비스는 우편번호 검색, 도로명 주소 입력 기능을 제공

URL : https://postcode.map.daum.net/guide

🧊 Use

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    new daum.Postcode({
        oncomplete: function(data) {
            // 검색결과 항목 클릭 시 실행할 코드
        }
    }).open();
</script>

🧊 속성

oncomplete

우편번호 검색 결과에서 특정 항목을 클릭한 경우, 해당 정보를 받아서 처리할 콜백 함수 정의

• zonecode : 우편번호
• address : 기본 주소
• addressEnglish : 기본 영문 주소
• addressType : 검색된 기본 주소 타입
• userSelectedType : 검색 결과에서 사용자가 선택한 주소 타입
• roadAddress : 도로명 주소
• roadAddressEnglish : 영문 도로명 주소
• jibunAddress : 지번 주소
• jibunAddressEnglish : 영문 지번 주소
  
  

onresize

검색 결과로 인해 서비스의 화면 크기가 변한 경우, 화면 크기 정보를 받아서 처리할 콜백 함수 정의

• width : 검색 결과 화면 넓이

• height : 검색 결과 화면 높이
  
  

onclose

우편번호 찾기 화면을 띄운 후, 검색 결과를 선택하거나 창을 닫았을 경우 발생하는 콜백 함수 정의

• state

  • FORCE_CLOSE : 브라우저의 닫기 버튼을 통해 화면이 닫힌 경우

  • COMPLETE_CLOSE : 검색 결과를 선택하여 화면이 닫힌 경우
    
    

onsearch

주소를 검색할 경우에 실행되는 콜백함수

• q : 검색창에 입력된 검색어
• count : 검색 결과의 총 갯수

🧊 컴포넌트 생성 예시

function FindAddressButton({ onCompleted }: Props) {
  
  const handleOpen = () => {
    new window.daum.Postcode({
      onCompleted: (data: any) => {
        onCompleted(data.address as string);
      }
    }).open();
  };

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
    script.async = true;
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return (
    <Button type="button" onClick={handleOpen}>
      주소 찾기
    </Button>
  );
};

window.d.ts 파일을 만들어 직접 타입 선언

interface Window {
  daum: {
    Postcode: any;
  };
};