diff --git a/.gitignore b/.gitignore index b6809dc..2b8a25e 100755 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,6 @@ /node_modules /dist -/lib /modules /bin diff --git a/lib/app.d.ts b/lib/app.d.ts new file mode 100644 index 0000000..5f93c74 --- /dev/null +++ b/lib/app.d.ts @@ -0,0 +1,4 @@ +import * as React from 'react'; +import { PostcodeProps } from './types'; +declare const Postcode: React.FC; +export default Postcode; diff --git a/lib/app.js b/lib/app.js new file mode 100644 index 0000000..67eb413 --- /dev/null +++ b/lib/app.js @@ -0,0 +1,53 @@ +import { __assign, __awaiter, __generator } from "tslib"; +import * as React from 'react'; +var getJSApi = function () { + return new Promise(function (resolve, reject) { + var _a, _b; + if (typeof window === 'undefined') + reject({ message: 'unsupported platform' }); + // @ts-ignore + var postcodeSDK = (_a = window.daum) === null || _a === void 0 ? void 0 : _a.Postcode; + if (postcodeSDK) { + resolve(postcodeSDK); + return; + } + var jsapi = document.createElement('script'); + jsapi.type = 'text/javascript'; + jsapi.src = '//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js'; + var s = document.getElementsByTagName('script')[0]; + (_b = s === null || s === void 0 ? void 0 : s.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(jsapi, s); + // @ts-ignore + jsapi.onload = function () { return resolve(window.daum.Postcode); }; + jsapi.onabort = jsapi.onerror = reject; + }); +}; +var Postcode = function (_a) { + var onSelected = _a.onSelected, jsOptions = _a.jsOptions, style = _a.style; + var layer = React.useRef(null); + var loadData = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () { + var Postcode; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: return [4 /*yield*/, getJSApi()]; + case 1: + Postcode = _a.sent(); + if (Postcode) { + // @ts-ignore + new window.daum.Postcode(__assign(__assign({}, jsOptions), { width: '100%', oncomplete: function (data) { + onSelected(data); + }, onclose: function () { + loadData(); + } })).embed(layer.current, { autoClose: false }); + } + return [2 /*return*/]; + } + }); + }); }, [onSelected]); + React.useEffect(function () { + loadData()["catch"](console.warn); + }, [loadData]); + // @ts-ignore + return React.createElement("div", { ref: layer, style: style }); +}; +export default Postcode; +//# sourceMappingURL=app.js.map \ No newline at end of file diff --git a/lib/app.js.map b/lib/app.js.map new file mode 100644 index 0000000..c1a55e2 --- /dev/null +++ b/lib/app.js.map @@ -0,0 +1 @@ +{"version":3,"file":"app.js","sourceRoot":"","sources":["../src/app.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,IAAM,QAAQ,GAAG;IACf,OAAO,IAAI,OAAO,CAAC,UAAC,OAAO,EAAE,MAAM;;QACjC,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,MAAM,CAAC,EAAE,OAAO,EAAE,sBAAsB,EAAE,CAAC,CAAC;QAC/E,aAAa;QACb,IAAM,WAAW,GAAG,MAAA,MAAM,CAAC,IAAI,0CAAE,QAAQ,CAAC;QAC1C,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,CAAC,WAAW,CAAC,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC/C,KAAK,CAAC,IAAI,GAAG,iBAAiB,CAAC;QAC/B,KAAK,CAAC,GAAG,GAAG,+DAA+D,CAAC;QAC5E,IAAM,CAAC,GAAG,QAAQ,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QACrD,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,UAAU,0CAAE,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QACtC,aAAa;QACb,KAAK,CAAC,MAAM,GAAG,cAAM,OAAA,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,EAA7B,CAA6B,CAAC;QACnD,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACzC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,IAAM,QAAQ,GAA4B,UAAC,EAAgC;QAA9B,UAAU,gBAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA;IACvE,IAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEjD,IAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC;;;;wBAChB,qBAAM,QAAQ,EAAE,EAAA;;oBAA3B,QAAQ,GAAG,SAAgB;oBACjC,IAAI,QAAQ,EAAE,CAAC;wBACb,aAAa;wBACb,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,uBACnB,SAAS,KACZ,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,UAAS,IAAsB;gCACzC,UAAU,CAAC,IAAI,CAAC,CAAC;4BACnB,CAAC,EACD,OAAO,EAAE;gCACP,QAAQ,EAAE,CAAC;4BACb,CAAC,IACD,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;oBAChD,CAAC;;;;SACF,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,KAAK,CAAC,SAAS,CAAC;QACd,QAAQ,EAAE,CAAC,OAAK,CAAA,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,aAAa;IACb,OAAO,6BAAK,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;AAC3C,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"} \ No newline at end of file diff --git a/lib/app.native.d.ts b/lib/app.native.d.ts new file mode 100644 index 0000000..5f93c74 --- /dev/null +++ b/lib/app.native.d.ts @@ -0,0 +1,4 @@ +import * as React from 'react'; +import { PostcodeProps } from './types'; +declare const Postcode: React.FC; +export default Postcode; diff --git a/lib/app.native.js b/lib/app.native.js new file mode 100644 index 0000000..58838de --- /dev/null +++ b/lib/app.native.js @@ -0,0 +1,35 @@ +import { __assign, __rest } from "tslib"; +import * as React from 'react'; +import WebView from 'react-native-webview'; +import { Linking, View } from 'react-native'; +var html = "\n\n\n\n\t\n\t\n\t\n\n\n\t
\n\t\n\n\n"; +var Postcode = function (_a) { + var _b = _a.jsOptions, jsOptions = _b === void 0 ? { hideMapBtn: true } : _b, onSelected = _a.onSelected, onError = _a.onError, style = _a.style, otherProps = __rest(_a, ["jsOptions", "onSelected", "onError", "style"]); + var injectedJavaScript = React.useMemo(function () { return "initOnReady(".concat(JSON.stringify(jsOptions), ");void(0);"); }, [jsOptions]); + var onMessage = React.useCallback(function (_a) { + var nativeEvent = _a.nativeEvent; + try { + nativeEvent.data && onSelected && onSelected(JSON.parse(nativeEvent.data)); + } + catch (e) { + onError(e); + } + }, [onSelected]); + return (React.createElement(View, { style: style }, + React.createElement(WebView, __assign({ mixedContentMode: 'compatibility', androidLayerType: "hardware", renderToHardwareTextureAndroid: true, useWebKit: true }, otherProps, { source: { html: html, baseUrl: 'https://postcode.map.daum.net' }, onMessage: onMessage, injectedJavaScript: injectedJavaScript, onShouldStartLoadWithRequest: function (request) { + var _a, _b, _c, _d; + var isPostcode = !((_a = request.url) === null || _a === void 0 ? void 0 : _a.startsWith('https://postcode.map.daum.net/guide')) && + (!((_b = request.url) === null || _b === void 0 ? void 0 : _b.startsWith('http')) || + ((_c = request.url) === null || _c === void 0 ? void 0 : _c.startsWith('https://postcode.map.daum.net')) || + ((_d = request.url) === null || _d === void 0 ? void 0 : _d.startsWith('http://postcode.map.daum.net'))); + if (!isPostcode) { + Linking.openURL(request.url); + return false; + } + else { + return true; + } + } })))); +}; +export default Postcode; +//# sourceMappingURL=app.native.js.map \ No newline at end of file diff --git a/lib/app.native.js.map b/lib/app.native.js.map new file mode 100644 index 0000000..6509772 --- /dev/null +++ b/lib/app.native.js.map @@ -0,0 +1 @@ +{"version":3,"file":"app.native.js","sourceRoot":"","sources":["../src/app.native.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE7C,IAAM,IAAI,GAAG,yiDA6CZ,CAAC;AAEF,IAAM,QAAQ,GAA4B,UAAC,EAM1C;IALC,IAAA,iBAAgC,EAAhC,SAAS,mBAAG,EAAE,UAAU,EAAE,IAAI,EAAE,KAAA,EAChC,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,KAAK,WAAA,EACF,UAAU,cAL4B,+CAM1C,CADc;IAEb,IAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,cAAM,OAAA,sBAAe,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,eAAY,EAApD,CAAoD,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAElH,IAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,UAAC,EAAe;YAAb,WAAW,iBAAA;QACZ,IAAI,CAAC;YACH,WAAW,CAAC,IAAI,IAAI,UAAU,IAAI,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7E,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,CAAC,CAAC,CAAC;QACb,CAAC;IACH,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK;QAChB,oBAAC,OAAO,aACN,gBAAgB,EAAE,eAAe,EACjC,gBAAgB,EAAC,UAAU,EAC3B,8BAA8B,EAAE,IAAI,EACpC,SAAS,EAAE,IAAI,IACX,UAAU,IACd,MAAM,EAAE,EAAE,IAAI,MAAA,EAAE,OAAO,EAAE,+BAA+B,EAAE,EAC1D,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EACtC,4BAA4B,EAAE,UAAA,OAAO;;gBACnC,IAAM,UAAU,GACd,CAAC,CAAA,MAAA,OAAO,CAAC,GAAG,0CAAE,UAAU,CAAC,qCAAqC,CAAC,CAAA;oBAC/D,CAAC,CAAC,CAAA,MAAA,OAAO,CAAC,GAAG,0CAAE,UAAU,CAAC,MAAM,CAAC,CAAA;yBAC/B,MAAA,OAAO,CAAC,GAAG,0CAAE,UAAU,CAAC,+BAA+B,CAAC,CAAA;yBACxD,MAAA,OAAO,CAAC,GAAG,0CAAE,UAAU,CAAC,8BAA8B,CAAC,CAAA,CAAC,CAAC;gBAC7D,IAAI,CAAC,UAAU,EAAE,CAAC;oBAChB,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;oBAC7B,OAAO,KAAK,CAAC;gBACf,CAAC;qBAAM,CAAC;oBACN,OAAO,IAAI,CAAC;gBACd,CAAC;YACH,CAAC,IACD,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"} \ No newline at end of file diff --git a/lib/index.d.ts b/lib/index.d.ts new file mode 100644 index 0000000..a549000 --- /dev/null +++ b/lib/index.d.ts @@ -0,0 +1,2 @@ +export declare const Postcode: React.FC; +export default Postcode; diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 0000000..1753e27 --- /dev/null +++ b/lib/index.js @@ -0,0 +1,6 @@ +import app from './app'; +var _a = require('../package.json'), name = _a.name, version = _a.version, homepage = _a.homepage; +console.log("\n ___ ______________ ___ ________\n / _ |/ ___/_ __/ _ )/ _ | / __/ __/\n / __ / /__ / / / _ / __ |_\\ \\/ _/ \n/_/ |_\\___/ /_/ /____/_/ |_/___/___/ \n \n".concat(name, " ").concat(version, " :: Actbase Opensources.\nContact us -> project@actbase.io\n> https://actbase.io/opensource\n> ").concat(homepage, "\n")); +export var Postcode = app; +export default Postcode; +//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/lib/index.js.map b/lib/index.js.map new file mode 100644 index 0000000..3631bf5 --- /dev/null +++ b/lib/index.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,OAAO,CAAC;AAElB,IAAA,KAA8B,OAAO,CAAC,iBAAiB,CAAC,EAAtD,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,QAAQ,cAA+B,CAAC;AAC/D,OAAO,CAAC,GAAG,CAAC,iLAMV,IAAI,cAAI,OAAO,4GAGb,QAAQ,OACX,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,QAAQ,GAAG,GAAG,CAAC;AAE5B,eAAe,QAAQ,CAAC"} \ No newline at end of file diff --git a/lib/types.d.ts b/lib/types.d.ts new file mode 100644 index 0000000..34bc957 --- /dev/null +++ b/lib/types.d.ts @@ -0,0 +1,333 @@ +export interface OnCompleteParams { + /** + * 국가기초구역번호. 2015년 8월 1일부터 시행될 새 우편번호. + */ + zonecode: number; + /** + * 기본 주소 + * (검색 결과에서 첫줄에 나오는 주소, 검색어의 타입(지번/도로명)에 따라 달라집니다.) + */ + address: string; + /** + * 기본 영문 주소 + */ + addressEnglish: string; + /** + * 검색된 기본 주소 타입: R(도로명), J(지번) + */ + addressType: 'R' | 'J'; + /** + * 검색 결과에서 사용자가 선택한 주소의 타입 + */ + userSelectedType: 'R' | 'J'; + /** + * 연관 주소에서 "선택 안함" 부분을 선택했을때를 구분할 수 있는 상태변수 + */ + noSelected: 'Y' | 'N'; + /** + * 검색 결과에서 사용자가 선택한 주소의 언어 타입: K(한글주소), E(영문주소) + */ + userLanguageType: 'K' | 'E'; + /** + * 도로명 주소 + * (지번:도로명 주소가 1:N인 경우에는 데이터가 공백으로 들어갈 수 있습니다. + * - 아래 autoRoadAddress의 자세한 설명 참고) + */ + roadAddress: string; + /** + * 영문 도로명 주소 + */ + roadAddressEnglish: string; + /** + * 지번 주소 + * (도로명:지번 주소가 1:N인 경우에는 데이터가 공백으로 들어갈 수 있습니다. + * - 아래 autoJibunAddress의 자세한 설명 참고) + */ + jibunAddress: string; + /** + * 영문 지번 주소 + */ + jibunAddressEnglish: string; + /** + * '지번주소'에 매핑된 '도로명주소'가 여러개인 경우, 사용자가 '선택안함' 또는 '지번주소'를 클릭했을 때 연관된 도로명 주소 중 임의로 첫번째 매핑 주소를 넣어서 반환합니다. + * (autoMapping을 false로 설정한 경우에는 값이 채워지지 않습니다.) + */ + autoRoadAddress: string; + /** + * autoRoadAddress의 영문 도로명 주소 + */ + autoRoadAddressEnglish: string; + /** + * '도로명주소'에 매핑된 '지번주소'가 여러개인 경우, 사용자가 '선택안함' 또는 '도로명주소'를 클릭했을 때 연관된 지번 주소 중 임의로 첫번째 매핑 주소를 넣어서 반환합니다. + * (autoMapping을 false로 설정한 경우에는 값이 채워지지 않습니다.) + */ + autoJibunAddress: string; + /** + * autoJibunAddress의 영문 지번 주소 + */ + autoJibunAddressEnglish: string; + /** + * 건물관리번호 + */ + buildingCode: number; + /** + * 건물명 + */ + buildingName: string; + /** + * 공동주택 여부 + * (아파트,연립주택,다세대주택 등) + */ + apartment: 'Y' | 'N'; + /** + * 도/시 이름 + */ + sido: string; + /** + * 도/시 이름의 영문 + */ + sidoEnglish: string; + /** + * 시/군/구 이름 + */ + sigungu: string; + /** + * 시/군/구 이름의 영문 + */ + sigunguEnglish: string; + /** + * 시/군/구 코드 + * (5자리 구성된 시/군/구 코드입니다.) + */ + sigunguCode: string; + /** + * 도로명 코드, 7자리로 구성된 도로명 코드입니다. 추후 7자리 이상으로 늘어날 수 있습니다. + */ + roadnameCode: string; + /** + * 법정동/법정리 코드 + */ + bcode: string; + /** + * 도로명 값, 검색 결과 중 선택한 도로명주소의 "도로명" 값이 들어갑니다.(건물번호 제외) + */ + roadname: string; + /** + * 도로명 값, 검색 결과 중 선택한 도로명주소의 "도로명의 영문" 값이 들어갑니다.(건물번호 제외) + */ + roadnameEnglish: string; + /** + * 법정동/법정리 이름 + */ + bname: string; + /** + * 법정동/법정리 이름의 영문 + */ + bnameEnglish: string; + /** + * 법정리의 읍/면 이름 + * ("동"지역일 경우에는 공백, "리"지역일 경우에는 "읍" 또는 "면" 정보가 들어갑니다.) + */ + bname1: string; + /** + * 법정리의 읍/면 이름의 영문 + * ("동"지역일 경우에는 공백, "리"지역일 경우에는 "읍" 또는 "면" 정보가 들어갑니다.) + */ + bname1English: string; + /** + * 법정동/법정리 이름 + */ + bname2: string; + /** + * 법정동/법정리 이름의 영문 + */ + bname2English: string; + /** + * 행정동 이름, 검색어를 행정동으로 검색하고, 검색결과의 법정동과 검색어에 입력한 행정동과 다른 경우에 표시하고, 데이터를 내립니다. + */ + hname: string; + /** + * 사용자가 입력한 검색어 + */ + query: string; +} +export interface PostcodeTheme { + /** + * 바탕 배경색 + */ + bgColor?: string; + /** + * 검색창 배경색 + */ + searchBgColor?: string; + /** + * 본문 배경색(검색결과,결과없음,첫화면,검색서제스트) + */ + contentBgColor?: string; + /** + * 페이지 배경색 + */ + pageBgColor?: string; + /** + * 기본 글자색 + */ + textColor?: string; + /** + * 검색창 글자색 + */ + queryTextColor?: string; + /** + * 우편번호 글자색 + */ + postcodeTextColor?: string; + /** + * 강조 글자색 + */ + emphTextColor?: string; + /** + * 테두리 + */ + outlineColor?: string; +} +export interface JSOptions { + /** + * 우편번호 찾기 화면에서 애니메이션 효과를 줍니다. 기본값은 false로 설정되어 있습니다. + */ + animation?: boolean; + /** + * 우편번호 찾기가 실행된 후 검색어 입력박스에 focus를 줍니다. 단, PC 플랫폼에서만 동작하며 Mobile 플랫폼은 지원하지 않습니다. (기본값 true) + * 추가로 focus의 경우 여러 환경적 요인으로 제대로 동작하지 않을 수도 있으니 참고 부탁드립니다. + */ + focusInput?: boolean; + /** + * 기본값은 true로 설정되어 있으며, 매핑된 주소가 여러개일 경우 사용자가 '선택 안함'을 클릭할 수 있도록 합니다. 또한 연관주소를 선택하지 않고 메인주소를 선택하더라도 연관주소 중 첫번째 항목이 자동으로 데이터에 들어가게 됩니다. 데이터는 oncomplete 인자 중 autoRoadAddress 또는 autoJibunAddress 항목에 첫번째 매핑 주소가 들어갑니다. + * false로 설정을 하면 '선택 안함'이라는 항목이 노출되지 않고, 사용자가 반드시 매핑된 주소들 중 하나를 선택하도록 할 수도 있습니다. 하지만, 매핑된 주소를 정확히 모르는 사용자에게는 불편을 줄 수 있고, 1:N, M:N 관계의 주소에서는 메인주소가 선택이 되지 않기 때문에, 가급적 사용하지 않기를 권장합니다. + */ + autoMapping?: boolean; + /** + * 검색된 주소와 내려가는 데이터의 '시','도' 부분을 축약 표시합니다(한글 주소만 해당). 기본값은 true로 설정되어 있습니다. + * (서울특별시 -> 서울, 광주광역시 -> 광주, 전라북도 -> 전북, 단, '세종특별자치시' '제주특별자치도'는 지자체의 요청에 의해 제외) + */ + shorthand?: boolean; + /** + * 검색결과가 많을시 검색바 아래의 가이드 영역을 강조시켜 주는 기능입니다. 기본값은 0(비활성)입니다. + * 가이드 문구는 첫화면의 가이드 문구와 동일하며, 조합방식과 예시를 설명하여 사용자에게 재검색을 유도할 수 있도록 하는 기능입니다. + * 입력값으로는 페이지 넘버가 들어가게 되며, 3~20까지 입력 가능합니다. + */ + pleaseReadGuide?: number; + /** + * pleaseReadGuide 옵션과 같이 사용되는 옵션으로 선택사항입니다. 기본값은 1.5(1.5초간 강조)이며 입력하지 않으면 기본값으로 동작합니다. + * 입력값 설정 단위는 '초'단위로 설정할 수 있으며, 0.1~60까지 입력 가능합니다. + */ + pleaseReadGuideTimer?: number; + /** + * 검색어 입력시 검색바 아래에 뜨는 서제스트의 최대 검색 갯수를 조절할 수 있는 옵션입니다. 기본값은 10개이며 입력하지 않거나 1~10을 벗어나는 수를 입력시 기본값으로 셋팅됩니다. + */ + maxSuggestItems?: number; + /** + * 기본값은 false이며 기존보다 행정동 정보를 좀 더 많이 보여주게 하는 옵션입니다. + * 해당 기능을 활성화 하면 검색 결과의 행정동과 법정동이 다른 경우 무조건 표시를 하고 데이터를 내리게 됩니다. 그래서 법정동과 행정동이 같은 경우에는 표시하지 않으며, 데이터 또한 내리지 않습니다. + */ + showMoreHName?: boolean; + /** + * 기본값은 false이며 검색 결과의 "지도" 버튼을 가릴 수 있는 옵션입니다. 다만, 해당 기능은 자신의 주소에 익숙하지 못한 사용자들에 도움을 주는 기능으로, app에 임베딩을 해야되는 상황이거나 버튼이 눌러지면 안되는 상황일때 선택적으로 이용하시는 것을 권장합니다. + */ + hideMapBtn?: boolean; + /** + * 기본값은 false이며 검색 결과의 "영문 보기" 버튼을 가릴 수 있는 옵션입니다. 다만, 해당 기능은 자신의 주소에 익숙하지 못한 사용자들에 도움을 주는 기능으로, app에 임베딩을 해야되는 상황이거나 버튼이 눌러지면 안되는 상황일때 선택적으로 이용하시는 것을 권장합니다. + */ + hideEngBtn?: boolean; + /** + * 기본값은 false이며 검색 결과의 한글과 영문 주소를 동시에 볼 수 있게 해주는 기능입니다, 해당 기능 활성화시 "영문보기" 버튼은 감춰집니다. + * (hideEngBtn 속성의 설정 값보다 우선시 됩니다.) + */ + alwaysShowEngAddr?: boolean; + /** + * 기본값은 true이며 "form submit" 방식을 사용합니다. false로 설정 시 "location replace" 방식을 사용하게 됩니다. 우편번호 서비스로 인해 history 관련 제어가 어려우실 경우 false로 설정하여 이용하시기 바랍니다. + */ + submitMode?: boolean; + /** + * 기본값은 true이며 하단 배너에 "가이드페이지"로 이동하는 링크를 활성화 시킵니다. 링크로 인해 사용성이 저하된다고 생각하신다면 false로 설정하여 이용하시기 바랍니다. + */ + useBannerLink?: boolean; + /** + * 우편번호 찾기 화면의 색상 테마를 변경할 수 있습니다. 기본값은 null입니다. + */ + theme?: PostcodeTheme; +} +type FlexAlignType = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'; +export interface StyleProps { + alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around'; + alignItems?: FlexAlignType; + alignSelf?: 'auto' | FlexAlignType; + aspectRatio?: number; + borderBottomWidth?: number; + borderEndWidth?: number | string; + borderLeftWidth?: number; + borderRightWidth?: number; + borderStartWidth?: number | string; + borderTopWidth?: number; + borderWidth?: number; + bottom?: number | string; + display?: 'none' | 'flex'; + end?: number | string; + flex?: number; + flexBasis?: number | string; + flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse'; + flexGrow?: number; + flexShrink?: number; + flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse'; + height?: number | string; + justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'; + left?: number | string; + margin?: number | string; + marginBottom?: number | string; + marginEnd?: number | string; + marginHorizontal?: number | string; + marginLeft?: number | string; + marginRight?: number | string; + marginStart?: number | string; + marginTop?: number | string; + marginVertical?: number | string; + maxHeight?: number | string; + maxWidth?: number | string; + minHeight?: number | string; + minWidth?: number | string; + overflow?: 'visible' | 'hidden' | 'scroll'; + padding?: number | string; + paddingBottom?: number | string; + paddingEnd?: number | string; + paddingHorizontal?: number | string; + paddingLeft?: number | string; + paddingRight?: number | string; + paddingStart?: number | string; + paddingTop?: number | string; + paddingVertical?: number | string; + position?: 'absolute' | 'relative'; + right?: number | string; + start?: number | string; + top?: number | string; + width?: number | string; + zIndex?: number; + /** + * @platform ios + */ + direction?: 'inherit' | 'ltr' | 'rtl'; +} +export interface PostcodeProps { + /** + * 다음 우편번호 찾기 서비스의 옵션을 설정할 수 있습니다. + */ + jsOptions?: JSOptions; + /** + * 우편번호 검색 결과 목록에서 특정 항목을 클릭한 경우, 해당 정보를 받아서 처리할 콜백 함수를 정의하는 부분입니다.(null값 또는 정의하지 않을 시에 검색은 가능하지만, 결과 항목을 클릭하면 아무 일도 일어나지 않습니다.) + * 이 함수를 정의할때 넣는 인자에는 우편번호 검색 결과 목록에서 사용자가 클릭한 주소 정보가 들어가게 됩니다. + */ + onSelected: (data: OnCompleteParams) => void; + /** + * onSelected 함수에서 오류 발생 시 실행되는 함수입니다. + */ + onError: (error: unknown) => void; + style?: StyleProps; +} +export {}; diff --git a/lib/types.js b/lib/types.js new file mode 100644 index 0000000..718fd38 --- /dev/null +++ b/lib/types.js @@ -0,0 +1,2 @@ +export {}; +//# sourceMappingURL=types.js.map \ No newline at end of file diff --git a/lib/types.js.map b/lib/types.js.map new file mode 100644 index 0000000..c768b79 --- /dev/null +++ b/lib/types.js.map @@ -0,0 +1 @@ +{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""} \ No newline at end of file diff --git a/src/app.native.tsx b/src/app.native.tsx index 936fe94..663d379 100644 --- a/src/app.native.tsx +++ b/src/app.native.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; - import WebView from 'react-native-webview'; import { PostcodeProps } from './types'; import { Linking, View } from 'react-native'; @@ -51,8 +50,13 @@ const html = ` `; -const Postcode: React.FC = (props: PostcodeProps) => { - const { jsOptions, onSelected, onError, style, ...otherProps } = props; +const Postcode: React.FC = ({ + jsOptions = { hideMapBtn: true }, + onSelected, + onError, + style, + ...otherProps +}) => { const injectedJavaScript = React.useMemo(() => `initOnReady(${JSON.stringify(jsOptions)});void(0);`, [jsOptions]); const onMessage = React.useCallback( @@ -95,10 +99,4 @@ const Postcode: React.FC = (props: PostcodeProps) => { ); }; -Postcode.defaultProps = { - jsOptions: { - hideMapBtn: true, - }, -}; - export default Postcode;