Skip to content

๐Ÿ“ ๋‹ค์Œ ์šฐํŽธ๋ฒˆํ˜ธ์ฐพ๊ธฐ for React-Native

License

Notifications You must be signed in to change notification settings

mym0404/react-native-daum-postcode

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

49 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

@actbase/react-daum-postcode

platforms npm npm github issues github closed issues Issue Stats

๋‹ค์Œ ์šฐํŽธ๋ฒˆํ˜ธ ๊ฒ€์ƒ‰์„ React, React-Native ์—์„œ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“  ํ”Œ๋Ÿฌ๊ทธ์ธ์ž…๋‹ˆ๋‹ค.
์ƒ์„ธ ์‚ฌ์šฉ๋ฐฉ๋ฒ•์€ ์•„๋ž˜ URL์„ ์ฐธ๊ณ ํ•˜์„ธ์š”.

https://github.com/daumPostcode/QnA
https://spi.maps.daum.net/postcode/guidessl

์„ค์น˜ํ•˜๊ธฐ

npm install @actbase/react-daum-postcode

or

yarn add @actbase/react-daum-postcode

React-Native๋ฅผ ์‚ฌ์šฉ ์‹œ ์ถ”๊ฐ€์ ์œผ๋กœ ์„ค์น˜ํ•ด์ฃผ์„ธ์š”.

์šฐํŽธ๋ฒˆํ˜ธ ์ฐพ๋Š” ํŽ˜์ด์ง€ ์ž์ฒด๋Š” Webview๋ฅผ ํ†ตํ•ด ์‹คํ–‰๋˜๋„๋ก ๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค.
react-native-webview๋ฅผ ์„ค์น˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

npm install react-native-webview
npx pod-install

์‚ฌ์šฉํ•˜๊ธฐ

import Postcode from '@actbase/react-daum-postcode';

const YourView = () => (
  <Postcode
    style={{ width: 320, height: 320 }}
    jsOptions={{ animation: true }}
    onSelected={data => alert(JSON.stringify(data))}
  />
);

ํŒ์—…์œผ๋กœ ์‚ฌ์šฉํ• ๋• ์•„๋ž˜์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•ด๋„ ๋ฉ๋‹ˆ๋‹ค.

import Postcode from '@actbase/react-daum-postcode';
...

const YourView = () => {
  const [isModal, setModal] = useState(false);
  return (
    <>
      <Modal isVisible={isModal}>
        <Postcode
          style={{ width: 320, height: 320 }}
          jsOptions={{ animation: true, hideMapBtn: true }}
          onSelected={data => {
            alert(JSON.stringify(data));
            setModal(false);
          }}
        />
      </Modal>
      <Button onClick={() => setModal(true)}>์ฃผ์†Œ์ฐพ๊ธฐ</Button>
    </>
  );
}

์†์„ฑ

jsOptions?: JSOptions

๋‹ค์Œ ์šฐํŽธ๋ฒˆํ˜ธ์ฐพ๊ธฐ ์†์„ฑ์„ ๋„ฃ์Šต๋‹ˆ๋‹ค.

์•„๋ž˜ URL์„ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”.
https://spi.maps.daum.net/postcode/guidessl#attributes

onSelected: (data: OnCompleteParams) => void

๋‹ค์Œ์šฐํŽธ๋ฒˆํ˜ธ์ฐพ๊ธฐ ๊ฒฐ๊ณผ ๊ฐ’์„ ์ˆ˜์‹ ํ•ฉ๋‹ˆ๋‹ค.

oncomplete์˜ ํ•ญ๋ชฉ์„ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”.
https://spi.maps.daum.net/postcode/guidessl#attributes

style: ({width, height})

width, height๊ฐ’์„ ๋ณ„๋„๋กœ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Contacts

ํ•ด๋‹น ๋ชจ๋“ˆ์€ ์•กํŠธ๋ฒ ์ด์Šค(์œ )์—์„œ ๊ฐœ๋ฐœ ๋ฐ ๊ด€๋ฆฌ๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
ํ”„๋กœ์ ํŠธ ๋ฌธ์˜ ํ˜น์€ ์ œํœด๊ฐ€ ํ•„์š”ํ•œ ๊ฒฝ์šฐ [email protected]๋กœ ์—ฐ๋ฝ์ฃผ์„ธ์š”.

Changes

  • 1.0.4
    • ์›น๋ฒ„์ „์—์„œ width 500 ํ•ด์ œ
  • 1.0.2
    • ์›น๋ฒ„์ „์—์„œ onSelected ์žฅ์•  ์ฒ˜๋ฆฌ
  • 1.0.1
    • ์•กํŠธ๋ฒ ์ด์Šค(์œ ) ์˜คํ”ˆ์†Œ์Šค ๊ธฐ์ค€์— ๋งž์ถฐ์„œ ์ˆ˜์ •
  • 1.0.0
    • ์ฝ˜์†”์ œ๊ฑฐ
  • 0.9.8
    • onClose ์ด๋ฒคํŠธ ์ œ๊ฑฐ
    • ์›น์—์„œ ๊ฐ€๋” ํ•˜๋‹จ์— ํˆญ ํŠ€์–ด๋‚˜์˜ค๋Š” ์žฅ์•  ์ฒ˜๋ฆฌ
  • 0.9.6
    • onClose ์ด๋ฒคํŠธ ์ถ”๊ฐ€
  • 0.9.4
    • ์•„์‹ธ๋ฆฌ ๊ทธ๋ƒฅ FlexStyle์†์„ฑ์„ ๋‹ค ๋ฐ€์–ด๋„ฃ์–ด๋ฒ„๋ฆฝ์‹œ๋‹ค..
  • 0.9.3
    • ์†์„ฑ์— flex ์ถ”๊ฐ€. Thanks @miraten
  • 0.9.2
    • RN ์—์„œ ๊ฒ€์ƒ‰ ๋‹ค์ŒํŽ˜์ด์ง€ ๊ฐˆ ๊ฒฝ์šฐ ์œ„๋กœ ์Šคํฌ๋กค ์˜ฌ๋ ค์คŒ
    • ์ง€๋„๋ณด๊ธฐ ๋“ฑ ์™ธ๋ถ€ ๋งํฌ๋ฅผ ๋ˆ„๋ฅผ๊ฒฝ์šฐ ๋ธŒ๋ผ์šฐ์ €๋กœ ์ด๋™
  • 0.9.0
    • ์ฒซ ๋ฐฐํฌ

About

๐Ÿ“ ๋‹ค์Œ ์šฐํŽธ๋ฒˆํ˜ธ์ฐพ๊ธฐ for React-Native

Topics

Resources

License

Stars

Watchers

Forks

Languages

  • TypeScript 98.9%
  • JavaScript 1.1%