카카오페이 연동

1. 패키지 설치

$ npm install react-daum-postcode

---

2. 컴포넌트에 적용

import { useState } from "react";
import DaumPostcode from 'react-daum-postcode';

const Address = () => {
   const [openPostCode, setOpenPostCode] = useState(false);

   const onClickSearchAddress = {
        clickButton: () => {
            setOpenPostCode(!openPostCode);
        },

        // 주소 선택 이벤트
        selectAddress: (data) => {
            console.log(data.address); // 주소
            console.log(data.zonecode); // 우편 번호
            setOpenPostCode(false);
        }
    };
    
    return (
       <Button 
           variant="outlined"
           onClick={onClickSearchAddress.clickButton}
       >
          주소 찾기
       </Button>
       
       {openPostCode ? (
          <DaumPostcode 
             onComplete={onClickSearchAddress.selectAddress}  // 주소를 고르면 실행될 이벤트
             autoClose={false} // 주소를 고르면 자동 닫힘 설정
          />
       }
}