Nest - Next | n2server | Signup | Address

 

회원가입에 필요한 주소검색을 구현해보자. 먼저 다음 명령어를 실행한다.

$ npm i react-daum-postcode

 

그다음 상단에서 import 하고 

import DaumPostcode from 'react-daum-postcode';

 

다음과 같이 컴포넌트를 사용할 것이다.

<DaumPostcode onComplete={AddressComplete} />

 

 

일단 필요한 State 먼저 선언한다.

    //address
    const [addressOpen,setAddressOpen] = useState<boolean>(false); // 주소검색 오픈
    const [addressDetail,setAddressDetail] = useState<string>(''); // 자세한 주소 입력칸

 

그리고 HTML부분을 다음과같이 바꾸고 화면을 보자.

<div>
    <input 
        name="address"
        type="text"
        placeholder="Enter Address"
        value={userState.userInfo.address}
        disabled />
    <button
    	type="button"
        onClick={()=> { setAddressOpen(true) }}>
    주소검색    
    </button>
</div>
{ addressOpen ?
<DaumPostcode onComplete={AddressComplete} />
: ""}
<div>
    <input 
            name="address"
            type="text"
            placeholder="Enter Address2"
            value={addressDetail}
            onChange={(event)=> {
                setAddressDetail(event.target.value)
            }} />
</div>

 

그다음 주소검색 버튼을 누르고 원하는 주소를 클릭하면 실행되는 AddressComplete 함수를 구현한다.

const AddressComplete = (data : any) => {
        let fullAddress = data.address;
        let extraAddress = '';
        if (data.addressType === 'R') {
            if (data.bname !== '') {
                extraAddress += data.bname;
            }
            if (data.buildingName !== '') {
                extraAddress += (extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName);
            }
            fullAddress += (extraAddress !== '' ? ` (${extraAddress})` : '');
        }
        //fullAddress -> 전체 주소반환
        dispatch({type : actionTypesUser.USER_INFO, data : ['address',fullAddress]})
        setAddressOpen(false);
    }

 

• 기본적으로 검색한 주소가 들어가는 칸과 주소검색 버튼, 상세 주소 입력 칸이 있다.
• 검색한 주소는 검색한 내용이 들어가야되므로 disabled 처리한다. value는 userInfo의 address 이다.
• 주소검색 버튼을 누르면 하단에 주소검색칸이 생긴다.
• 원하는 주소를 클릭하면 setAddressOpen 함수가 실행된다.
• 상세주소까지 입력하면 끝!

 

화면을 확인해보자

 

1. 첫 화면

 

 

2. 주소검색을 클릭할 경우

 

 

3. 원하는 주소 클릭 후 상세주소까지 입력

 

 

현재 주소검색 결과값과 상세주소가 합쳐져있지 않기 때문에 회원가입 버튼을 눌렀을 경우에

합쳐줄 것이다.