<body>
<div id='root'></div>
<script src='https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js'></script>
<script type='module' src='./src/main.tsx'></script>
</body>Last updated
<script>
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
// 예제를 참고하여 다양한 활용법을 확인해 보세요.
}
}).open();
</script>// daum.postcode.d.ts
declare namespace daum {
export type PostcodeResult = {
address: string;
zonecode: string;
};
export class Postcode {
constructor({
oncomplete,
width,
height,
}: {
oncomplete: (data: PostcodeResult) => void;
width: string;
height: string;
});
embed(element: HTMLElement | null);
}
}export default function AddressSearch({
close,
changeAddress,
}: AddressSearchProps) {
const refElement = useRef<HTMLDivElement>(null);
useEffectOnce(() => {
new daum.Postcode({
oncomplete(data) {
const { address, zonecode: postalCode } = data;
changeAddress({ address, postalCode });
close();
},
width: '100%',
height: '100%',
}).embed(refElement.current);
});
return (
<Container id='address-search-container' onClick={close}>
<div ref={refElement} />
</Container>
);
}export default function ~Component() {
const {
value: searching,
setTrue: openSearch,
setFalse: closeSearch,
} = useBoolean();
// …(중략)…
const handleClickSearchPostalCode = () => {
openSearch();
};
return (
// ...
{searching && (
<AddressSearch
close={closeSearch}
changeAddress={handleChangeAddress1}
/>
)}
);
}