react-daumpost-hook 1.0.8 → 1.1.5

package/README.md

@@ -12,39 +12,42 @@
 ## 설치
 
 ```shell
-npm install --save react-daumpost-hook
+npm install react-daumpost-hook 
+//or
+yarn add react-daumpost-hook
 ```
 
 ## 사용법
 
+### 팝업 방식 사용
+
 ```js
-import React, { useRef } from 'react';
+import React from 'react';
 import ReactDaumPost from 'react-daumpost-hook';
 
 const App = function () {
     const ref = useRef(null);
 
     const postConfig = {
-        ref : ref,
+        // 팝업창으로 사용시 ref: userRef()
         onComplete : (data) => {
-            console.log(data);
-            // 검색후 해당 컴포넌트를 다시 안보이게 하는 부분
-            ref.current.style.display= "none";
+            /* 
+                우편 번호 처리하는 로직
+            */
         }
     };
     const postCode = ReactDaumPost(postConfig);
    
     return (
         <main>
-            test
-            <input type="text"  onClick={() => postCode()} />
-            <div ref={ref}></div>
+            우편번호찾기
+            <input type="text"  onClick={postCode} />
         </main>
     );
 };
 ```
 
-### react-hook-form을 같이 쓸 경우
+### 기존 DOM에 삽입 + react-hook-form을 같이 쓸 경우
 
 ```js
 import React, { useRef } from 'react';
@@ -57,9 +60,9 @@ const App = function () {
     const ref = useRef(null);
     
     const postConfig = {
-        ref : ref,
+        ref : ref, //팝업창으로 사용시 해당 파라메터를 없애면 된다.
         onComplete : (data) => {
-            // 데이터를 받아와서 Set해주는 부분
+            // 데이터를 받아와서 set해주는 부분
             setValue('address', data.address);
             handleSubmit((data) => console.log(data))();
             // 검색후 해당 컴포넌트를 다시 안보이게 하는 부분
@@ -70,9 +73,9 @@ const App = function () {
    
     return (
         <main>
-            test
-            <input type="text"  onClick={() => postCode()} />
-            <div ref={ref}></div>
+            우편번호찾기
+            <input type="text"  onClick={postCode} />
+            <div ref={ref}>/* 이곳에 검색창이 삽입 됩니다.*/</div>
         </main>
     );
 };
@@ -83,16 +86,22 @@ const App = function () {
 ```js
 import ReactDaumPost from 'react-daumpost-hook';
 ```
-에서 불러온 ReactDaumPost 함수를 실행시키면 다음 우편 주소 API 스크립트를 로딩하며 해당 주소 API를 실행 시킬 수 있는 함수를 반환합니다.
-반환 된 함수를 원하시는 컴포넌트의 이벤트에 연결하시면 다음 우편주소 API를 사용 하실 수 있습니다.
-ReactDaumPost Hook을 실행시킬때 임의의 config객체를 인자로 넘겨서 API를 설정합니다.
-
-### CONFIG 구성
-
-1. **ref (?ref)** : 다음 API 포스트코드 검색창을 삽입시킬 컴포넌트입니다. useRef를 통해서 셀렉한 ref를 넘깁니다., **해당 속성을 비워두시면 자동으로 우편코드 검색 창을 팝업 방식**으로 띄웁니다.
-2. **apiUrl (?string)** : 다음 API 스크립트 경로입니다. 선택사항이며 제공되는 API 경로가 변경된 경우 해당 값으로 변경해주시면 됩니다.
-**기본값은 "t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"** 입니다.
-3. **method (?object)** : 다음 API에서 제공되는 **생성자들을 사용하실 경우 제공되는 인터페이스**입니다. 아래와 같이 객체를 생성하여서 method 인수로 넘겨주시면됩니다. 
+에서 불러온 ReactDaumPost 함수를 호출하면 다음 우편 주소 API 스크립트를 html에 삽입하며 해당 주소 API를 불러올 수 있는 함수를 반환합니다. 반환 된 함수를 원하시는 컴포넌트의 이벤트에 바인딩하시면 해당 이벤트로 다음 우편주소 API를 호출 할 수 있습니다.  
+또 API 설정의 경우 ReactDaumPost 함수를 호출할때 props 객체를 인자로 넘겨서 API를 설정합니다.  
+* 해당 패키지의 경우 바닐라js로 구성 되어서 간단하게 API 로직을 캡슐화 하고 있습니다.  
+팝업 방식으로 쓰신다면 js 기반 프로젝트라면 어디서든 상관 없습니다.  
+다만 타입스크립트의 사용시 리액트 기반으로 타입추론을 하고 있습니다.
+
+### PROPS
+> config자체를 넘기지 않을 경우 console에 검색결과를 출력 합니다.  
+
+1. **`ref (?ref)`** : 다음 우편번호 찾기 검색창을 삽입시킬 컴포넌트입니다. useRef를 통해서 셀렉한 ref를 넘깁니다., **해당 속성을 비워두시면 자동으로 우편코드 검색 창을 팝업 방식**으로 띄웁니다.  
+  
+2. **`apiUrl (?string)`** : 다음 API 스크립트 경로입니다. 선택사항이며 제공되는 API 경로가 변경된 경우 해당 값으로 변경해주시면 됩니다.  
+**`기본값은 "t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"`** 입니다.  
+  
+3. **`method (?object)`** : 다음 API에서 제공되는 **생성자들을 사용하실 경우 제공되는 인터페이스**입니다. 아래와 같이 객체를 생성하여서 method 인수로 넘겨주시면됩니다.  
+  
 ```js
 {
     onresize: function(size) {
@@ -104,15 +113,14 @@ ReactDaumPost Hook을 실행시킬때 임의의 config객체를 인자로 넘겨
 ```
 자세한 내용은 [Daum Postcode API 가이드](http://postcode.map.daum.net/guide#usage)에서 참고해주시길 바랍니다.
 
-4. **onComplete (?function)** : 포스트 API 검색 결과를 처리할 함수를 넘겨주시길바랍니다. 기본 값은 (data) => console.log(data)입니다.
-
-***ref, apiUrl, method, onComplete 4가지 인자***를 객체 프로퍼티로 해당 커스텀훅에 넘겨서 사용 할 수 있으며 해당 인자들은 모두 선택사항이며  
-***반드시 필요한 속성은 검색결과를 처리할 onComplete 하나***입니다. ref를 통해서 원하는 위치에 검색창을 삽입하시거나 팝업방식으로 간단히 API를  
-이용가능하니 참고하셔서 사용해주시고 문의가 있을시 해당 Git Repo에 이슈로 등록해주시길 바랍니다.
-
-
+4. **`onComplete (function)`** : API 검색 결과를 처리할 함수를 넘겨주시길바랍니다.  
+`config 자체를 안넘길 경우 기본 값은 (data) => console.log(data)입니다.`  
+  
+    
+***ref, apiUrl, method, onComplete 4가지 인자*** 를 `config` 프로퍼티로 해당 커스텀훅에 넘겨서 API를 설정할 수 있습니다.  
+4가지 중 ***반드시 필요한 속성은 검색결과를 처리할 onComplete 하나*** 입니다. 를 통해서 원하는 위치에 검색창을 삽입하시거나 팝업방식으로 간단히 API를 이용가능하니 참고하셔서 사용해주시고 문의가 있을시 해당 Git Repo에 이슈로 등록해주시길 바랍니다.
 
 
-### License
+### LICENSE
 
 react-daumpost-hook is [MIT licensed](./LICENSE).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-daumpost-hook",
-  "version": "1.0.8",
-  "description": "다음 포스트 코드 API 커스텀훅",
+  "version": "1.1.5",
+  "description": "다음 카카오에서 무료로 제공하는  우편번호(주소찾기) API를 쉽게 기존 코드에 연결 할 수 있는 hook 패키지 입니다.",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "scripts": {
@@ -15,7 +15,17 @@
     "react",
     "daum",
     "postcode",
-    "hook"
+    "hook",
+    "kakao",
+    "우편번호",
+    "주소찾기",
+    "커스텀훅",
+    "daum address",
+    "address",
+    "korea",
+    "daum postcode",
+    "kakao postcode",
+    "kakao address"
   ],
   "files": [
     "src",
@@ -28,7 +38,6 @@
   },
   "homepage": "https://github.com/yoonjonglyu/react-daumpost-hook#readme",
   "dependencies": {
-    "prop-types": "^15.7.2",
     "react": "^17.0.2"
   }
 }

package/src/index.d.ts

@@ -1,26 +1,26 @@
-export {};
+import React from 'react';
+
+export { };
 declare global {
     interface Window {
         daum?: any;
     }
-    
+
 }
+
 declare module 'react-daumpost-hook' {
-    import React from 'react';
+    const ReactDaumPost: ReactDaumPost
 
-    const ReactDaumPost : ReactDaumPost
-    
     interface ReactDaumPost {
-        (config : ReactDaumPostProps) : Function
+        (config?: ReactDaumPostProps): VoidFunction
     }
 
     interface ReactDaumPostProps {
-        ref? : React.MutableRefObject<null>,
-        onComplete? : Function,
-        apiUrl? : string,
-        method? : Object
+        ref?: React.MutableRefObject<any>,
+        onComplete: VoidFunction,
+        apiUrl?: string,
+        method?: Object
     }
 
-    export { ReactDaumPostProps, ReactDaumPost }
     export default ReactDaumPost;
 }

package/src/index.js

@@ -1,4 +1,2 @@
 import ReactDaumPost from './reactDaumPostHook';
-
-export { ReactDaumPost };
 export default ReactDaumPost;

package/src/reactDaumPostHook.js

@@ -1,4 +1,4 @@
-const ReactPostCodeHook = function (props) {
+function daumPostCodeHook(props) {
     const {
         ref,
         apiUrl,
@@ -8,41 +8,41 @@ const ReactPostCodeHook = function (props) {
 
     // 내부 변수들 더블 언더바 를 prefix로 사용
     const __postcodeUrl = apiUrl !== undefined ? apiUrl : "//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
-    const __scriptId = "DPCKAKAO#$%!@#@@$@#@$#";
+    const __scriptId = "daumpostcodemapv2";
     const __method = method !== undefined ? method : {};
     const __onComplete = onComplete !== undefined ? onComplete : (data) => console.log(data);
 
 
     // 스크립트가 없을시 로드 해오는 부분
-    if (!document.getElementById(__scriptId)) {
+    if (document.getElementById(__scriptId) === null) {
         const __postCodeScript = document.createElement('script');
         __postCodeScript.id = __scriptId;
         __postCodeScript.src = __postcodeUrl;
-        document.body.appendChild(__postCodeScript);
+        document.head.appendChild(__postCodeScript);
     }
 
-    const getPostCode = function () {
-        if(ref === undefined){
+    const getPostCode = () => {
+        if (ref === undefined) {
             getPostCodePopup();
         } else {
             getPostCodeEmbed();
         }
     }
 
-    const getPostCodeEmbed = function (){
+    const getPostCodeEmbed = () => {
         new window.daum.Postcode({
             oncomplete: __onComplete,
             onresize: function (size) {
                 ref.current.style.height = size.height + 'px';
             },
-            width : "100%",
-            height : "100%",
+            width: "100%",
+            height: "100%",
             ...__method
         }).embed(ref.current);
         ref.current.style.display = 'block';
     }
 
-    const getPostCodePopup = function (){
+    const getPostCodePopup = () => {
         new window.daum.Postcode({
             oncomplete: __onComplete,
             ...__method
@@ -52,4 +52,4 @@ const ReactPostCodeHook = function (props) {
     return getPostCode;
 }
 
-export default ReactPostCodeHook;
+export default daumPostCodeHook;