npm: react-daum-postcode

Daum 우편번호 서비스

1. npm i react-daum-postcode 설치
2. import DaumPostcodeEmbed
3. 아래 참고

//Signup.jsx 24-03-20

import { Link } from 'react-router-dom';
import SignupLogo from '/imgs/signupLogo.png'
import DaumPostcodeEmbed from 'react-daum-postcode';
import { useState } from 'react';

function Signup() {
    const [address, setAddress] = useState({
        address: "",
        postcode: ""
    })
    // const [isModalOpen, setIsModalOpen] = useState(false)

    const handleAddress = (data) => {
        setAddress({
            address: data.address,
            postcode: data.zonecode
        })
    }
    return (
        <div className="main-layer">

            <img src={SignupLogo} alt="회원가입로고" className="mt-20 " />
            <p className="m-4 login-font">물건을 받을 주소를 입력해주세용</p>

            <div className='flex flex-row items-center w-[330px] gap-5'>
                {/* value 값을 통해 FindAddress에서 받아온 postcode를 할당 */}
                <input type="text" placeholder='우편번호' className='w-[100px] h-[50px] border-[2.5px] rounded-[5px] p-3' value={address.postcode} onChange={(e) => setAddress(e.target.value)}/>
                <button className="w-[100px] h-[30px] rounded bg-gray-400 text-white text-[15px]" onClick={handleAddress}>우편번호 찾기</button>
            </div>

            <div className="flex flex-row w-[330px] h-[50px] border-[2.5px] rounded-[5px] p-3">
                {/* value 값을 통해 FindAddress에서 받아온 address를 할당 */}
                <input type="text" placeholder="주소" className='w-full' value={address.address} onChange={(e) => setAddress(e.target.value)}/>
            </div>

            <div className="flex flex-row w-[330px] h-[50px] border-[2.5px] rounded-[5px] p-3">
                <input type="text" placeholder="상세주소" className='w-full' />
            </div>

            <Link to={"/signup/favorite"}>
                <button className="common-btn">다음</button>
            </Link>

            {<DaumPostcodeEmbed onComplete={handleAddress} autoClose />}
        </div>
    )
}

export default Signup;

받아오는 데이터 형식

address
: 
"경북 구미시 진평동 553"
addressEnglish
: 
"553, Jinpyeong-dong, Gumi-si, Gyeongsangbuk-do, Korea"
addressType
: 
"J"
apartment
: 
"N"
autoJibunAddress
: 
""
autoJibunAddressEnglish
: 
""
autoRoadAddress
: 
""
autoRoadAddressEnglish
: 
""
bcode
: 
"4719012300"
bname
: 
"진평동"
bname1
: 
""
bname1English
: 
""
bname2
: 
"진평동"
bname2English
: 
"Jinpyeong-dong"
bnameEnglish
: 
"Jinpyeong-dong"
buildingCode
: 
"4719012300105530000004621"
buildingName
: 
""
hname
: 
""
jibunAddress
: 
"경북 구미시 진평동 553"
jibunAddressEnglish
: 
"553, Jinpyeong-dong, Gumi-si, Gyeongsangbuk-do, Korea"
noSelected
: 
"N"
postcode
: 
""
postcode1
: 
""
postcode2
: 
""
postcodeSeq
: 
""
query
: 
"진평동 553"
roadAddress
: 
"경북 구미시 진평2길 33-8"
roadAddressEnglish
: 
"33-8, Jinpyeong 2-gil, Gumi-si, Gyeongsangbuk-do, Korea"
roadname
: 
"진평2길"
roadnameCode
: 
"4724860"
roadnameEnglish
: 
"Jinpyeong 2-gil"
sido
: 
"경북"
sidoEnglish
: 
"Gyeongsangbuk-do"
sigungu
: 
"구미시"
sigunguCode
: 
"47190"
sigunguEnglish
: 
"Gumi-si"
userLanguageType
: 
"K"
userSelectedType
: 
"R"
zonecode
: 
"39397"