기존에 외부 스크립트를 동적으로 로드하는 방식으로 코드를 구현했었는데 좋은 라이브러리를 발견하게 되었다..!
•
라이브러리 : react-daum-postcode
•
명령어 : yarn add react-daum-postcode
useDaumPostcodePopup 을 사용하여, 반환받은 함수를 통해 우편번호 검색 서비스를 팝업 방식으로 이용
→ 실행 시 우편번호 서비스의 스크립트 주소를 전달할 수 있음.
→ 반환한 함수를 실행할 때 다음 우편번호 서비스의 생성자 및 팝업 설정값을 전달.
→ 전달하지 않은 설정값은 다음 우편번호 서비스의 기본 설정을 따라감.
"use client";
import React, { useState } from 'react';
import { useDaumPostcodePopup } from 'react-daum-postcode';
interface AddressData {
address: string;
addressType: string;
bname: string;
buildingName: string;
}
const Address = () => {
const [address, setAddress] = useState('');
const [detailAddress, setDetailAddress] = useState('');
// Daum Postcode Popup을 사용하기 위한 스크립트 URL
const scriptUrl = '//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js';
const open = useDaumPostcodePopup(scriptUrl);
const handleComplete = (data:AddressData) => {
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})` : '';
}
setAddress(fullAddress); // 주소 상태 업데이트
};
const handleOpenPostCode = () => {
open({ onComplete: handleComplete });
};
return (
<div className='my-1'>
<div className="flex items-center space-x-2 my-2">
<p>위치</p>
<div className="flex items-center space-x-2">
<div className="flex items-center">
<input
className="form-input px-3 py-2 border rounded mr-2 max-w-xs"
type="text"
value={address}
onChange={(e) => setAddress(e.target.value)}
placeholder="주소"
/>
<button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700" onClick={handleOpenPostCode}>주소 검색</button>
</div>
</div>
</div>
<input
className="form-input px-3 py-2 border rounded mr-2 max-w-xs"
type="text"
value={detailAddress}
onChange={(e) => setDetailAddress(e.target.value)}
placeholder="상세 주소"
/>
</div>
);
}
export default Address;
TypeScript
복사