다음 주소 검색 api 이용해서 next 에 적용하기 (+모달)

 

https://postcode.map.daum.net/guide

Daum 우편번호 서비스

 

회원가입 기능 구현 중, 주소를 직접 입력하지 않고 검색 서비스를 넣기 위해 이것저것 찾아보던중,

도로명 주소 api는 조금 복잡..하다 생각하던 중 

다음주소 검색  api를 알게됨! 이건 진짜 편했따...

 

일단 다음에서 제공하는 api를 이용하기 위해 설치부터 해보자

npm install react-daum-postcode

이것만 하면 이제 진짜 끝났음!!!

나는 회원가입 페이지에서 공통으로 쓰는 버튼을 이용해,

새로운 모달창을 여는 방식으로 하려 했다.

왜냐면 이거 비회원이나 관리자가 추가할 때도 이용해야하기 때문에....

 

 

import DaumPostcode from "react-daum-postcode";

<DaumPostcode
    onComplete={onCompletePost}
></DaumPostcode>

사용할 곳에서 추가해주면 됨

 

AddressModal.tsx

import {
	Modal,
	ModalOverlay,
	ModalContent,
	ModalHeader,
	ModalFooter,
	ModalBody,
	ModalCloseButton,
	Button,
} from "@chakra-ui/react";
import DaumPostcode from "react-daum-postcode";

export default function SearchAddressModal({ isOpen, onOpen, onClose, onCompletePost }: any) {
	return (
		<>
			<Modal isOpen={isOpen} onClose={onClose} size={"sm"}>
				<ModalOverlay />
				<ModalContent>
					<ModalHeader>주소검색</ModalHeader>
					<ModalCloseButton />
					<ModalBody>
						<DaumPostcode
							onComplete={onCompletePost}
						></DaumPostcode>
					</ModalBody>
				</ModalContent>
			</Modal>
		</>
	);
}

 

다른 곳에도 공통으로 이용했던 chakra ui 모달로 만들었다.

중요한건 일단 import 해온 것과 중간에 DaumPostCode 컴포넌트!

 

이제 회원가입 페이지에서 이 모달을 열고, onComplete 함수를 어떻게 처리할지 설정해주면됨

버튼 클릭하면 모달 열어주고,

onComplete함수는 주소 눌렀을 때 실행되는 함수이다.

 const onCompletePost = (data: any) => {
    console.log(data);
  };

 

일단 이렇게 해서 data가 어떻게 오는지 확인하고,

 

 

나는 회원가입 form은 공통 컴포넌트 사용하고, 그 안에 들어가는 데이터 리스트만 바뀐다.

그리고 주소검색 후 주소 선택하고 나면 상세주소를 입력하는 칸이 짜잔! 등장하게 만들 것임.

 

const {
    isOpen: isSearchAddressOpen,
    onOpen: onSearchAddressOpen,
    onClose: onSearchAddressClose,
} = useDisclosure();

<Button
  ml={"10px"}
  fontSize={"sm"}
  color={"#F8bbd0"}
  onClick={onSearchAddressOpen}
>
  주소찾기
</Button>

 

일단 모달창 열리게 하고,

 

const [showDetailAddressInput, setShowDetailAddressInput] = useState<boolean>(false);

{
    id === "addressDetail" && !showDetailAddressInput ? (
      <></>
    ) : <나머지 input 코드>
}

 

상세주소 창 상태값을 추가해준다

 

 

onComplete 함수만 만들어주면 됨!

const onCompletePost = (data: any) => {
    setInputAddressValue(data.address);
    onSearchAddressClose();
    setShowDetailAddressInput(true);
};

{isSearchAddressOpen ? (
      <SearchAddressModal
        isOpen={isSearchAddressOpen}
        onClose={onSearchAddressClose}
        onCompletePost={onCompletePost}
      />
    ) : (
      <></>
)}

선택한 주소값을 Address input 값에 넣어주고,

모달창을 닫고, 그리고 상세주소 창 상태값을 true로 바꾸어줌!

 

여기서 onSearchAddressClose() 의 () 이거 안 붙였더니 자꾸 모달창만 안 닫혔다 ㅠ,ㅠ

주소창은 없어졌는데..

다른 button onclick 할 때는 () 안 붙여도 됐었어서 헷갈렸다 ㅠ,ㅠ

 

이렇게 하면 완성!