카카오 우편번호 참고항목 만들기

무엇이 어려운가요

도로명 주소만 보면 어느 동네인지 알기 어려워서 법정동과 공동주택 이름을 괄호로 붙여요. 카카오 가이드의 예제 코드를 프로젝트마다 복사해 붙이게 되는 부분이에요.

규칙은 이래요. 도로명 주소를 골랐을 때만, 법정동 이름이 동·로·가 로 끝나면 넣고(법정리는 빼요), 공동주택이면 건물 이름을 넣어요.

직접 입력해 보세요

코드

import { composeExtraAddress } from '@bestow-ui/korean-utils';

// new daum.Postcode({ oncomplete(data) { ... } }) 의 data
composeExtraAddress({ userSelectedType: 'R', bname: '역삼동', buildingName: '래미안', apartment: 'Y' });
// ' (역삼동, 래미안)'
composeExtraAddress({ userSelectedType: 'R', bname: '역삼동', buildingName: '강남빌딩', apartment: 'N' });
// ' (역삼동)'
composeExtraAddress({ userSelectedType: 'J', bname: '역삼동', buildingName: '래미안', apartment: 'Y' });
// '' (지번 주소)

알아 둘 점

• 앞에 공백이 붙어 있어 도로명 주소 뒤에 그대로 이어 붙이면 돼요.

React 입력 컴포넌트

AddressInput( @bestow-ui/react)는 이 함수를 쓰는 입력 칸이에요. 우편번호 찾기 창, 참고항목, 상세 주소 칸을 한 번에 그려요. 우편번호 서비스는 공급자로 바꿔 넣을 수 있어요.