diff --git a/src/DaumPostcode.tsx b/src/DaumPostcode.tsx index 85a6cbd..5012468 100644 --- a/src/DaumPostcode.tsx +++ b/src/DaumPostcode.tsx @@ -1,5 +1,5 @@ import React, { Component, createRef, CSSProperties } from 'react'; -import loadPostcode, { PostcodeOptions } from './loadPostcode'; +import loadPostcode, { PostcodeConstructor, PostcodeOptions } from './loadPostcode'; export interface DaumPostcodeProps extends Omit { onComplete?: PostcodeOptions['oncomplete']; @@ -48,7 +48,7 @@ class DaumPostcode extends Component { loadPostcode(scriptUrl).then(initiate).catch(onError); } - initiate = (Postcode: typeof window.daum.Postcode) => { + initiate = (Postcode: PostcodeConstructor) => { if (!this.wrap.current) return; const { scriptUrl, @@ -82,7 +82,8 @@ class DaumPostcode extends Component { postcode.embed(this.wrap.current, { q: defaultQuery, autoClose: autoClose }); }; - onError = () => { + onError = (e: unknown) => { + console.error(e); this.setState({ hasError: true }); }; diff --git a/src/loadPostcode.ts b/src/loadPostcode.ts index dfd4026..eeb092e 100644 --- a/src/loadPostcode.ts +++ b/src/loadPostcode.ts @@ -1,14 +1,12 @@ declare global { interface Window { - daum: { - postcode: { + daum?: { + postcode?: { load: (fn: () => void) => void; version: string; _validParam_: boolean; }; - Postcode: { - new (postcodeOptions: PostcodeOptions): Postcode; - }; + Postcode?: PostcodeConstructor; }; } } @@ -114,6 +112,10 @@ export interface EmbedOptions { autoClose?: boolean; } +export interface PostcodeConstructor { + new (postcodeOptions: PostcodeOptions): Postcode; +} + export interface Postcode { open(openOptions?: OpenOptions): void; embed(element: HTMLElement, embedOptions?: EmbedOptions): void; @@ -121,24 +123,26 @@ export interface Postcode { const loadPostcode = (function () { const scriptId = 'daum_postcode_script'; - return function (url: string): Promise { - const isScriptExist = !!document.getElementById(scriptId); - if (isScriptExist) return Promise.resolve(window.daum.Postcode); + let promise: Promise | null = null; - return new Promise((resolve, reject) => { + return function (url: string): Promise { + if( promise ) return promise; + + promise = new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = url; script.onload = () => { - try { - resolve(window.daum.Postcode); - } catch (e) { - reject(e); + if( window?.daum?.Postcode ) { + return resolve(window.daum.Postcode); } + reject(new Error('Script is loaded successfully, but cannot find Postcode module. Check your scriptURL property.')) }; script.onerror = (error) => reject(error); script.id = scriptId; document.body.appendChild(script); - }); + }) + + return promise; }; })();