20220906

• daum post code api 를 이용한 주소 찾아오기
  • npm 에 **react-daum-postcode를 install 한다.**
  • 임베드 방식 ```jsx import React from “react”; import DaumPostcodeEmbed from “react-daum-postcode”;

  const Postcode = () => { const handleComplete = (data) => { 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})` : "";
  }
  
  console.log(fullAddress); // e.g. '서울 성동구 왕십리로2길 20 (성수동1가)'   };
  

  return <DaumPostcodeEmbed onComplete={handleComplete} {…props} />; }; ```

코드에 삽입

참고 : https://www.npmjs.com/package/react-daum-postcode

• 위도 경도 값이 필요했는데 daum post code는 주소값만 가져오고 위경도는 가져오지 않음

• 카카오 map api 사용해야 될듯함..ㅠ

• 카카오맵
  • .env 에 REACT_APP_KAKAO_JS_APP_KEY 추가 후 index.html body안에 스크립트 태그 넣어줌

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_JS_APP_KEY%"></script>
    

화면은 잘나오는데

개발자도구에서 키값 노출됨..

• 카카오맵 z-index 때문에 모달창 레이어가 뒤로 밀려남

const customStyles = {
  content: {
    top: "50%",
    left: "50%",
    right: "50%",
    bottom: "auto",
    marginRight: "-50%",
    transform: "translate(-50%, -50%)",
  },
  overlay: { zIndex: 1000 },
};

<ReactModal
  isOpen={modalIsOpen}
  onRequestClose={closeModal}
  style={customStyles}
>
  <Postcode closeModal={closeModal} />
</ReactModal>;

리액트 모달 스타일에 overlay 옵션으로 zIndex 추가