Merge pull request #79 from kmsbernard/feat/migrate-daum-to-kakao

feat: migrate daum interfaces to kakao

Author: Normaltic

README.md

@@ -1,6 +1,6 @@
 # react-daum-postcode
 
-Daum 우편번호 검색 서비스를 React 환경에서 간편하게 이용할 수 있습니다.
+Kakao(구 Daum) 우편번호 검색 서비스를 React 환경에서 간편하게 이용할 수 있습니다.
 
 ## Install
 
@@ -17,11 +17,11 @@ yarn add react
 
 ## Embed
 
-`DaumPostcodeEmbed` 컴포넌트를 사용하여, 우편번호 검색 서비스를 임베드 방식으로 사용할 수 있습니다.
+`KakaoPostcodeEmbed` 컴포넌트를 사용하여, 우편번호 검색 서비스를 임베드 방식으로 사용할 수 있습니다.
 
 ```javascript
 import React from 'react';
-import DaumPostcodeEmbed from 'react-daum-postcode';
+import KakaoPostcodeEmbed from 'react-daum-postcode';
 
 const Postcode = () => {
   const handleComplete = (data) => {
@@ -41,37 +41,37 @@ const Postcode = () => {
     console.log(fullAddress); // e.g. '서울 성동구 왕십리로2길 20 (성수동1가)'
   };
 
-  return <DaumPostcodeEmbed onComplete={handleComplete} {...props} />;
+  return <KakaoPostcodeEmbed onComplete={handleComplete} {...props} />;
 };
 ```
 
-`DaumPostcodeEmbed` 컴포넌트에 다음 우편번호 서비스의 생성자 및 임베드 설정값 등을 `props`로 전달할 수 있습니다. 전달하지 않은 설정값은 다음 우편번호 서비스의 기본 설정을 따라갑니다.
+`KakaoPostcodeEmbed` 컴포넌트에 카카오 우편번호 서비스의 생성자 및 임베드 설정값 등을 `props`로 전달할 수 있습니다. 전달하지 않은 설정값은 카카오 우편번호 서비스의 기본 설정을 따라갑니다.
 
 | name | type | default | description
 |:----:|:----:|:-------:|:-----------|
-| scriptUrl | `string` | [CURRENT_URL](https://t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js) | Daum 우편번호 서비스의 스크립트 주소입니다.|
-| onComplete | `function` | `undefined` | 우편번호 검색이 끝났을 때 사용자가 선택한 정보를 받아올 콜백함수입니다. 주소 데이터의 구성은 [Daum 가이드](http://postcode.map.daum.net/guide)를 참고해주세요. |
-| onSearch | `function` | `undefined` | 주소를 검색할 경우 실행되는 콜백함수입니다. 검색 결과 정보의 구성은 [Daum 가이드](http://postcode.map.daum.net/guide)를 참고해주세요. |
+| scriptUrl | `string` | [CURRENT_URL](https://t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js) | Kakao 우편번호 서비스의 스크립트 주소입니다.|
+| onComplete | `function` | `undefined` | 우편번호 검색이 끝났을 때 사용자가 선택한 정보를 받아올 콜백함수입니다. 주소 데이터의 구성은 [Kakao 가이드](http://postcode.map.daum.net/guide)를 참고해주세요. |
+| onSearch | `function` | `undefined` | 주소를 검색할 경우 실행되는 콜백함수입니다. 검색 결과 정보의 구성은 [Kakao 가이드](http://postcode.map.daum.net/guide)를 참고해주세요. |
 | onClose | `function` | `undefined` | 검색 결과를 선택하여, 서비스가 닫힐 때 실행되는 콜백함수입니다. |
-| onResize | `function` | `undefined` | 검색 결과로 인해, 우편번호 서비스의 화면 크기가 변경될 때 호출되는 콜백함수입니다. 변경된 화면 정보의 구성은 [Daum 가이드](http://postcode.map.daum.net/guide)를 참고해주세요. |
+| onResize | `function` | `undefined` | 검색 결과로 인해, 우편번호 서비스의 화면 크기가 변경될 때 호출되는 콜백함수입니다. 변경된 화면 정보의 구성은 [Kakao 가이드](http://postcode.map.daum.net/guide)를 참고해주세요. |
 | className | `string` | `undefined` | 우편번호 검색창을 감싸는 최상위 엘리먼트에 적용할 클래스 이름입니다. |
 | style | `object` | `{ width:"100%", height:400 }` | 우편번호 검색창을 감싸는 최상위 엘리먼트에 적용할 스타일입니다. |
 | defaultQuery | `string` | `undefined` | 우편번호 검색창에 기본으로 입력할 검색어입니다.
 | autoClose | `boolean` | `true` | 우편번호 검색 완료시 자동 닫힘 여부입니다. 주소를 선택하면, 최상위 엘리먼트를 돔에서 제거합니다. |
-| errorMessage | `ReactNode` | `<p>현재 Daum 우편번호 서비스를 이용할 수 없습니다. 잠시 후 다시 시도해주세요.</p>` | 우편번호 서비스 스크립트 로드에 실패했을 때 나타낼 에러 메세지 입니다. |
+| errorMessage | `ReactNode` | `<p>현재 Kakao 우편번호 서비스를 이용할 수 없습니다. 잠시 후 다시 시도해주세요.</p>` | 우편번호 서비스 스크립트 로드에 실패했을 때 나타낼 에러 메세지 입니다. |
 
-기타 Daum 우편번호 생성자 속성들을 동일한 이름으로 props를 전달할 수 있습니다. 속성값에 대해서는 [Daum 우편번호 서비스 가이드](http://postcode.map.daum.net/guide#attributes)를 참고해주세요.
+기타 Kakao 우편번호 생성자 속성들을 동일한 이름으로 props를 전달할 수 있습니다. 속성값에 대해서는 [Kakao 우편번호 서비스 가이드](http://postcode.map.daum.net/guide#attributes)를 참고해주세요.
 
 ## Popup
 
-`useDaumPostcodePopup` hook 을 사용하여, 반환받은 함수를 통해 우편번호 검색 서비스를 팝업 방식으로 이용할 수 있습니다.
+`useKakaoPostcodePopup` hook 을 사용하여, 반환받은 함수를 통해 우편번호 검색 서비스를 팝업 방식으로 이용할 수 있습니다.
 
 ```javascript
 import React from 'react';
-import { useDaumPostcodePopup } from 'react-daum-postcode';
+import { useKakaoPostcodePopup } from 'react-daum-postcode';
 
 const Postcode = () => {
-  const open = useDaumPostcodePopup(scriptUrl);
+  const open = useKakaoPostcodePopup(scriptUrl);
 
   const handleComplete = (data) => {
     let fullAddress = data.address;
@@ -102,27 +102,27 @@ const Postcode = () => {
 };
 ```
 
-`useDaumPostcodePopup` 실행 시 우편번호 서비스의 스크립트 주소를 전달할 수 있습니다. 반환한 함수를 실행할 때 다음 우편번호 서비스의 생성자 및 팝업 설정값을 전달할 수 있습니다. 전달하지 않은 설정값은 다음 우편번호 서비스의 기본 설정을 따라갑니다.
+`useKakaoPostcodePopup` 실행 시 우편번호 서비스의 스크립트 주소를 전달할 수 있습니다. 반환한 함수를 실행할 때 카카오 우편번호 서비스의 생성자 및 팝업 설정값을 전달할 수 있습니다. 전달하지 않은 설정값은 카카오 우편번호 서비스의 기본 설정을 따라갑니다.
 
 | name | type | default | description
 |:----:|:----:|:-------:|:-----------|
-| scriptUrl | `string` | [CURRENT_URL](https://t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js) | Daum 우편번호 서비스의 스크립트 주소입니다.|
-| onComplete | `function` | `undefined` | 우편번호 검색이 끝났을 때 사용자가 선택한 정보를 받아올 콜백함수입니다. 주소 데이터의 구성은 [Daum 가이드](http://postcode.map.daum.net/guide)를 참고해주세요. |
-| onSearch | `function` | `undefined` | 주소를 검색할 경우 실행되는 콜백함수입니다. 검색 결과 정보의 구성은 [Daum 가이드](http://postcode.map.daum.net/guide)를 참고해주세요. |
+| scriptUrl | `string` | [CURRENT_URL](https://t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js) | Kakao 우편번호 서비스의 스크립트 주소입니다.|
+| onComplete | `function` | `undefined` | 우편번호 검색이 끝났을 때 사용자가 선택한 정보를 받아올 콜백함수입니다. 주소 데이터의 구성은 [Kakao 가이드](http://postcode.map.daum.net/guide)를 참고해주세요. |
+| onSearch | `function` | `undefined` | 주소를 검색할 경우 실행되는 콜백함수입니다. 검색 결과 정보의 구성은 [Kakao 가이드](http://postcode.map.daum.net/guide)를 참고해주세요. |
 | onClose | `function` | `undefined` | 검색 결과를 선택하여, 서비스가 닫힐 때 실행되는 콜백함수입니다. |
-| onResize | `function` | `undefined` | 검색 결과로 인해, 우편번호 서비스의 화면 크기가 변경될 때 호출되는 콜백함수입니다. 변경된 화면 정보의 구성은 [Daum 가이드](http://postcode.map.daum.net/guide)를 참고해주세요. |
+| onResize | `function` | `undefined` | 검색 결과로 인해, 우편번호 서비스의 화면 크기가 변경될 때 호출되는 콜백함수입니다. 변경된 화면 정보의 구성은 [Kakao 가이드](http://postcode.map.daum.net/guide)를 참고해주세요. |
 | width | `string\|number` | `undefined` | 우편번호 검색창의 가로 너비입니다. |
 | height | `string\|number` | `undefined` | 우편번호 검색창의 세로 높이입니다. |
 | defaultQuery | `string` | `undefined` | 우편번호 검색창에 기본으로 입력할 검색어입니다. |
 | top | `string\|number` | `undefined` | 팝업의 Y 위치를 나타내는 값입니다. |
 | left | `string\|number` | `undefined` | 팝업의 X 위치를 나타내는 값입니다. |
-| popupTitle | `string` | `undefined` | 팝업창의 상태표시줄에 나오는 Title 값을 지정할 수 있습니다. 전달하지 않을 경우, 다음 우편번호의 기본 설정 문구가 출력됩니다. |
+| popupTitle | `string` | `undefined` | 팝업창의 상태표시줄에 나오는 Title 값을 지정할 수 있습니다. 전달하지 않을 경우, 카카오 우편번호의 기본 설정 문구가 출력됩니다. |
 | popupKey | `string` | `undefined` | 팝업창의 key 입니다. 전달하지 않을 경우 매번 새창이 열리게 됩니다. |
 | autoClose | `boolean` | `true` | 우편번호 검색 완료시 자동 닫힘 여부입니다. 주소를 선택하면 팝업창이 닫힙니다.
 
-기타 Daum 우편번호 생성자 속성들을 동일한 이름으로 props를 전달할 수 있습니다. 속성값에 대해서는 [Daum 우편번호 서비스 가이드](http://postcode.map.daum.net/guide#attributes)를 참고해주세요.
+기타 Kakao 우편번호 생성자 속성들을 동일한 이름으로 props를 전달할 수 있습니다. 속성값에 대해서는 [Kakao 우편번호 서비스 가이드](http://postcode.map.daum.net/guide#attributes)를 참고해주세요.
 
 
 ## 안내
 
-`react-daum-postcode`는 Daum 우편번호 서비스와 독립적으로 제작된 패키지입니다. React환경에서 발생하는 `react-daum-postcode`의 버그는 패키지 레포지터리의 [이슈트래커](https://github.com/kimminsik-bernard/react-daum-postcode/issues)에 말씀해주세요. 만약 Daum 우편번호 서비스 자체의 문제라고 생각하신다면, 다음 우편번호 서비스의 [FAQ](https://github.com/daumPostcode/QnA/blob/master/README.md)와 [이슈트래커](https://github.com/daumPostcode/QnA/issues)를 참조해주세요.
+`react-daum-postcode`는 Kakao 우편번호 서비스와 독립적으로 제작된 패키지입니다. React환경에서 발생하는 `react-daum-postcode`의 버그는 패키지 레포지터리의 [이슈트래커](https://github.com/kimminsik-bernard/react-daum-postcode/issues)에 말씀해주세요. 만약 Kakao 우편번호 서비스 자체의 문제라고 생각하신다면, 카카오 우편번호 서비스의 [FAQ](https://github.com/daumPostcode/QnA/blob/master/README.md)와 [이슈트래커](https://github.com/daumPostcode/QnA/issues)를 참조해주세요.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-daum-postcode",
   "version": "3.2.0",
-  "description": "Daum Postcode service for React",
+  "description": "Kakao(prev: Daum) Postcode service for React",
   "main": "./lib/index.cjs.js",
   "types": "./lib/index.d.ts",
   "module": "./lib/index.esm.js",
@@ -57,6 +57,7 @@
   "keywords": [
     "react",
     "daum",
+    "kakao",
     "postcode",
     "zipcode"
   ],

src/DaumPostcodeEmbed.tsx src/KakaoPostcodeEmbed.tsxsrc/DaumPostcodeEmbed.tsx renamed to src/KakaoPostcodeEmbed.tsx

@@ -1,7 +1,7 @@
 import React, { Component, createRef, CSSProperties } from 'react';
 import loadPostcode, { postcodeScriptUrl, PostcodeConstructor, PostcodeOptions, EmbedOptions } from './loadPostcode';
 
-export interface DaumPostcodeEmbedProps
+export interface KakaoPostcodeEmbedProps
   extends Omit<PostcodeOptions, 'oncomplete' | 'onresize' | 'onclose' | 'onsearch' | 'width' | 'height'>,
     Omit<EmbedOptions, 'q'> {
   onComplete?: PostcodeOptions['oncomplete'];
@@ -14,20 +14,13 @@ export interface DaumPostcodeEmbedProps
   errorMessage?: string | React.ReactNode;
   scriptUrl?: string;
 }
-/**
- * @deprecated
- * type 'DaumPostcodeProps' is renamed to 'DaumPostcodeEmbedProps'.
- * use 'DaumPostcodeEmbedProps' instead of 'DaumPostcodeProps'.
- * it will be removed future version.
- */
-export type DaumPostcodeProps = DaumPostcodeEmbedProps;
 
 interface State {
   hasError: boolean;
   completed: boolean;
 }
 
-const defaultErrorMessage = <p>현재 Daum 우편번호 서비스를 이용할 수 없습니다. 잠시 후 다시 시도해주세요.</p>;
+const defaultErrorMessage = <p>현재 Kakao 우편번호 서비스를 이용할 수 없습니다. 잠시 후 다시 시도해주세요.</p>;
 
 const defaultStyle = {
   width: '100%',
@@ -40,7 +33,7 @@ const defaultProps = {
   autoClose: true,
 };
 
-class DaumPostcodeEmbed extends Component<DaumPostcodeEmbedProps, State> {
+class KakaoPostcodeEmbed extends Component<KakaoPostcodeEmbedProps, State> {
   static defaultProps = defaultProps;
   /**
    * See #61
@@ -105,4 +98,4 @@ class DaumPostcodeEmbed extends Component<DaumPostcodeEmbedProps, State> {
   }
 }
 
-export default DaumPostcodeEmbed;
+export default KakaoPostcodeEmbed;

src/index.ts

@@ -1,12 +1,32 @@
-import DaumPostcodeEmbed from './DaumPostcodeEmbed';
-import useDaumPostcodePopup from './useDaumPostcodePopup';
+import KakaoPostcodeEmbed from './KakaoPostcodeEmbed';
+import useKakaoPostcodePopup from './useKakaoPostcodePopup';
 import loadPostcode from './loadPostcode';
 
-export { loadPostcode, DaumPostcodeEmbed, useDaumPostcodePopup };
-export default DaumPostcodeEmbed;
+export { loadPostcode, KakaoPostcodeEmbed, useKakaoPostcodePopup };
+export default KakaoPostcodeEmbed;
 
-import type { DaumPostcodeEmbedProps, DaumPostcodeProps } from './DaumPostcodeEmbed';
-import type { DaumPostcodePopupParams } from './useDaumPostcodePopup';
+import type { KakaoPostcodeEmbedProps } from './KakaoPostcodeEmbed';
+import type { KakaoPostcodePopupParams } from './useKakaoPostcodePopup';
 import type { Address, Search, State } from './loadPostcode';
 
-export type { DaumPostcodeEmbedProps, DaumPostcodeProps, DaumPostcodePopupParams, Address, Search, State };
+export type { KakaoPostcodeEmbedProps, KakaoPostcodePopupParams, Address, Search, State };
+
+/**
+ * @deprecated Use `KakaoPostcodeEmbed` instead.
+ */
+const DaumPostcodeEmbed = KakaoPostcodeEmbed;
+/**
+ * @deprecated Use `useKakaoPostcodePopup` instead.
+ */
+const useDaumPostcodePopup = useKakaoPostcodePopup;
+/**
+ * @deprecated Use `KakaoPostcodeEmbedProps` instead.
+ */
+type DaumPostcodeEmbedProps = KakaoPostcodeEmbedProps;
+/**
+ * @deprecated Use `KakaoPostcodePopupParams` instead.
+ */
+type DaumPostcodePopupParams = KakaoPostcodePopupParams;
+
+export { DaumPostcodeEmbed, useDaumPostcodePopup };
+export type { DaumPostcodeEmbedProps, DaumPostcodePopupParams };

src/loadPostcode.ts

@@ -1,11 +1,17 @@
 declare global {
   interface Window {
     daum?: {
+      /**
+       * @deprecated Use kakao.postcode instead.
+       */
       postcode: {
         load: (fn: () => void) => void;
         version: string;
         _validParam_: boolean;
       };
+      /**
+       * @deprecated Use kakao.postcode instead.
+       */
       Postcode: PostcodeConstructor;
     };
     kakao?: {

src/useDaumPostcodePopup.tsx src/useKakaoPostcodePopup.tsxsrc/useDaumPostcodePopup.tsx renamed to src/useKakaoPostcodePopup.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect } from 'react';
 
 import loadPostcode, { PostcodeOptions, OpenOptions, postcodeScriptUrl } from './loadPostcode';
 
-export type DaumPostcodePopupParams = Omit<PostcodeOptions, 'oncomplete' | 'onresize' | 'onclose' | 'onsearch'> &
+export type KakaoPostcodePopupParams = Omit<PostcodeOptions, 'oncomplete' | 'onresize' | 'onclose' | 'onsearch'> &
   Omit<OpenOptions, 'q'> & {
     onComplete?: PostcodeOptions['oncomplete'];
     onResize?: PostcodeOptions['onresize'];
@@ -12,13 +12,13 @@ export type DaumPostcodePopupParams = Omit<PostcodeOptions, 'oncomplete' | 'onre
     defaultQuery?: string;
   };
 
-function useDaumPostcodePopup(scriptUrl = postcodeScriptUrl) {
+function useKakaoPostcodePopup(scriptUrl = postcodeScriptUrl) {
   useEffect(() => {
     loadPostcode(scriptUrl);
   }, [scriptUrl]);
 
   const open = useCallback(
-    (options?: DaumPostcodePopupParams) => {
+    (options?: KakaoPostcodePopupParams) => {
       const { defaultQuery, left, top, popupKey, popupTitle, autoClose, onComplete, onResize, onClose, onSearch, onError, ...others } = {
         ...options,
       };
@@ -42,4 +42,4 @@ function useDaumPostcodePopup(scriptUrl = postcodeScriptUrl) {
   return open;
 }
 
-export default useDaumPostcodePopup;
+export default useKakaoPostcodePopup;