Daum postcode 다음 공식 우편번호 서비스에서 제공하는 '테마' 설정을 하고 싶은데요.
react-daum-postcode 라이브러리를 활용해서 우편번호 서비스 api에 접근하고 있어서 react-daum-postcode 라이브러리에서도 테마(컬러) 설정이 가능할지 문의드립니다.

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

공식 문서에서 제공하는 가이드로는, 지정된 변수명으로 원하는 컬러 hexcode를 themeObj 객체로 전달하고 있습니다. react-daum-postcode에서도 themeObj를 포함하여 전달하는 방식이 가능할까요?

[첨부: 공식문서 내 테마설정 가이드]

//변경되지 않는 색상의 경우 주석 또는 제거하시거나 값을 공백으로 하시면 됩니다.
var themeObj = {
   //bgColor: "", //바탕 배경색
   //searchBgColor: "", //검색창 배경색
   //contentBgColor: "", //본문 배경색(검색결과,결과없음,첫화면,검색서제스트)
   //pageBgColor: "", //페이지 배경색
   //textColor: "", //기본 글자색
   //queryTextColor: "", //검색창 글자색
   //postcodeTextColor: "", //우편번호 글자색
   //emphTextColor: "", //강조 글자색
   //outlineColor: "" //테두리
};

//위에서 생성한 themeObj객체를 우편번호 서비스 생성자에 넣습니다.
//생성자의 자세한 설정은 예제 및 속성탭을 확인해 주세요.
/*
new daum.Postcode({
   theme: themeObj
}).open();

new daum.Postcode({
   theme: themeObj
}).embed(target);
*/```

현 리액트 프로젝트에서 documpostcodeEmbed를 사용해서 주소 검색을 보여주고 있습니다.
유저가 버튼을 클릭시 embed가 띄워지는데, 그 상황에서 매번 콘솔에서 에러가 납니다.
(사파리 , 크롬 둘다 테스트)
직업 document에 접근해서 생기는 문제 같은데 해결할 방법이 없을까요?

다만, 콘솔에서 document.wrtie(sciprt)를 위의 embeded메소드에서 사용하는 것으로 보여지는데 ,이로 인해서

Uncaught TypeError: Cannot read properties of null (reading 'document') 아래와 같은 에러가 콘솔에 뜹니다.
작동상에는 문제가 없지만 에러가 뜨는 점이 좋진 않은데 ,직접 이 라이브러리 코드를 write를 안쓰고 read를 쓰는 쪽으로 해준다는지 해서 없애버리는 방법도 있을 것 같은데..

어떻게 해결 할 수 있을까요?

react-daum-postcode 패키지에 useBannerLink 옵션이 구현되어 있지 않습니다.

useBannerLink (https://postcode.map.daum.net/guide#attributes)

기본값은 true이며 하단 배너에 "가이드페이지"로 이동하는 링크를 활성화 시킵니다. 링크로 인해 사용성이 저하된다고 생각하신다면 false로 설정하여 이용하시기 바랍니다.

해당 옵션 구현이 필요해 보입니다.

React router dom은 6버전을 사용하고 있고, 라우터에 /address 링크를 클릭하면 아래 Postcode 컴포넌트를 랜더링하게 했는데요.
아래처럼 complete가 떨어졌을 때 홈으로 이동하게 했더니, router 에러가 발생하더라고요..
구체적인 에러메세지가 뜨기보단 라우터 모듈이랑 뭔가 충돌이 나서 발생한 것 같은데 어떤 상황인지 몰라서 일단 이슈에 남겨놓습니다.

아래 코드에서 return <div><DaumPostcodeEmbed .... /></div> 처럼 div로 한번 감싸면 에러가 안나더라고요 🤔..?

export const Postcode = (props: any) => {
  const navigate = useNavigate();
  const handleComplete = (data: Address) => {
    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가)'
  };

  const goHome = () => {
    navigate('/');
  };

  return (
      <DaumPostcodeEmbed
        onComplete={handleComplete}
        onClose={goHome}
        {...props}
      />
  );
};

build 환경에서는 잘 되는데
dev 환경에서는 다음과 같이 나오네요 ㅠㅠ

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'Postcode')

Call Stack
eval
node_modules/react-daum-postcode/lib/loadPostcode.js (1:194)
b.componentDidMount
node_modules/react-daum-postcode/lib/DaumPostcode.js (1:5913)
invokeLayoutEffectMountInDEV
node_modules/react-dom/cjs/react-dom.development.js (25023:0)
invokeEffectsInDev
node_modules/react-dom/cjs/react-dom.development.js (27304:0)
commitDoubleInvokeEffectsInDEV
node_modules/react-dom/cjs/react-dom.development.js (27280:0)
commitRootImpl
node_modules/react-dom/cjs/react-dom.development.js (26839:0)
commitRoot
node_modules/react-dom/cjs/react-dom.development.js (26638:0)
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (26073:0)
flushSyncCallbacks
node_modules/react-dom/cjs/react-dom.development.js (12009:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (25607:0)

모듈 잘 사용하고 있습니다.
그런데, 사용중에 계속 쿠키 관련 이슈가 표시됩니다.
업데이트 안될까요?

우이ㅘ 같이 주소선택 후 다시 검색을 하면 창이 사라지는 경우가 있습니다.

제가 잘못사용하고 있는건지 확인 좀 부탁드립니다...

import React, { useEffect, useState } from "react";
import DaumPostcode from "react-daum-postcode";

const Daum__postcode = (props) => {

    const complete = (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(data)
        console.log(fullAddress)
        console.log(data.zonecode)

        close_modal();
    }

    const close_modal = () => {
        document.getElementsByClassName('modal_container_wrap daum_post_code')[0].style.display = 'none'
    }

    return (
        <div className='modal_container_wrap daum_post_code'>
            <div className='company_modal_container flex_column'>
                <DaumPostcode className="postmodal" onComplete={complete} />
                <button onClick={() => close_modal()}>닫기</button>
            </div>
        </div>
    );
};

export default Daum__postcode;

type AddressData에
넘어오는 sigunguEnglish등 영어로 된 정보들에 대한 인터페이스가 빠졌습니다.
추가가 필요해보입니다.

• sigunguEnglish
• bnameEnglish

안녕하세요 패키지 만들어주셔서 감사합니다!

다름이 아니라, DaumPostcode 컴포넌트 를 팝업창 안에 넣어서 사용하려고 하는데,
한번 입력후 다시 팝업창을 열면 이전에 검색했던 내용이 남아있습니다.

혹시 DaumPostcode 주소검색창의 input을 reset할 수 있는 방법이 있을까요?

개발 프레임워크 : React

안녕하세요. 제공해주신 react-daum-postcode를 이용하여

useDaumPostcodePopup 를 이용해 팝업창을 띄우고 있습니다.

`
const open = useDaumPostcodePopup( loadPostcode.postcodeScriptUrl );
let fullAddress = "";

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

};`

const handleClose = ( e ) => {
console.log( e );
}

const handleClick = () => {
open({ onClose:handleClose, autoClose:true, onComplete: handleComplete, width:"50", top:100, left:680, popupTitle:"Test!" });
};
`

문제는 useDaumPostcodePopup이 PC 브라우저와 모바일 브라우저에서 다르게 동작합니다.

웹에서는 검색 버튼을 누르면 팝업창이 뜨고 검색 후, 주소 클릭시 팝업 창이 닫히나 모바일에서는 다르게 동작합니다.

모바일 웹에서는 검색 버튼을 누르면 새 페이지로 이동하고 주소를 검색해도 주소 창이 닫히지 않습니다.

해당 문제를 처리할 수 있는 방법이 있나요?

처음 렌더링 하면
Uncaught TypeError: Cannot read properties of undefined (reading 'postcode')
The above error occurred in the component:
이 오류가 뜨면서 DaumPostcode 컴포넌트를 제외한 나머지 컴포넌트가 사라집니다.
코드 수정해서 컴파일시키면 사라진 컴포넌트가 다시 생기는데
최신버전으로 바꿔도 오류나고 그렇다고 낮은 버전으로 해도 오류가 생깁니다.
Model컴포넌트 적용해도 마찬가지고
{state && } <- 이렇게 해도 오류가 뜹니다.

예시 코드와 props 설명에서는 onComplete 하나만 필수인데, index.d.ts 내부의 DaumPostcodeProps['onSearch'] 가 required라 타입스크립트 환경에서 에러가 납니다.

라이브러리 잘 사용하고 있습니다.
최신버전으로 업데이트해서 사용하고 있는데, 아래 내용의 오류가 발생하고 있습니다.
확인 한 번 부탁드리겠습니다.

daumPostcode/QnA#653

502 에러의 경우 어떻게 예외처리(안내 메세지 등 다른 컴포넌트 렌더링)를 할수 있는지 문의드립니다.

해당 코드 적용하면 홈페이지 로딩이 계속 됩니다.
로딩을 취소하거나 브라우저 사이즈를 줄이면 화면이 나타나긴 하는데,,
그리고 this.handleAdrress 오타입니다.. if (data.addressType === 'R') {. 여기에도 . 문자가 들어가있어요.

안녕하세요 버전 3으로 넘어가면서 interface AddressData가 Address 이름으로 바뀌어

import DaumPostcode, { Address } from 'react-daum-postcode'; 식으로 import 변경 후

Address가 any 타입으로 인식이 되네요.

index.d.ts를 보니
import DaumPostcode, { DaumPostcodeProps } from './DaumPostcode';
import { Address, Search, State } from 'loadPostcode';

이런 식으로 DaumPostcode만 상대경로로 설정을 해 놓으셨던데 혹시 이유가 뭔지 궁금해서 문의드립니다.

제 vscode 설정이 잘못되어 인식을 못 하는 걸로 판단해서 임의로 loadPostcode도 './loadPostcode'로 변경 후 사용 중입니다.

안녕하세요!
아래 코드에서 data의 타입은 어떻게 설정하면 될까요?

   const handleComplete = (data: any) => {
    console.log(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})` : '';

      setValue('address', fullAddress);
      setValue('postCode', data.zonecode);
      setShowPostCodeHome(false);
    }
  };

추가적으로 현재 주소 입력 input에 나타나는 '터치 하여 검색해주세요.' 라는 툴팁을 제거 할 수 있는 방법이 있는지
같이 문의 드립니다.

ionic-react 환경에서 사용시 Home.tsx에서는 정상적으로 표시되는데
모달창에서 사용시 간헐적으로 작동이 되다가

postcode.v2.js:1 Uncaught TypeError: Cannot read property 'document' of null

위와같은 오류와 함께 작동하지 않습니다.
컴포넌트 내부의 iframe src가 about:blank로 표시됩니다.
예제링크
https://codesandbox.io/s/cold-night-wgs7p

다음QnA
위 상황과 비슷한 사항인것같습니다.

우선 react 패키지 만들어 주셔서 감사합니다.

http://postcode.map.daum.net/guide 에 레이어 형태의 예제를 보면 레이어 우상단에 닫기 버튼이 존재합니다.

아래와 같은 형태의 img태그가 추가되어 닫기 버튼이 추가되는데 현재 react-daum-postcode에서 가능한 방법이 없는것으로 보입니다.

<div id="layer" style="display:none;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;">
<img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:1" onclick="closeDaumPostcode()" alt="닫기 버튼">
</div>

추가가 가능한 방법이 있을지 문의 드립니다.

DaumPostcode.js 위치에서 에러납니다.

팝업창을 통해서 주소를 검색할 때, 아래 사진처럼 placeholder 텍스트가 사라지지 않습니다.
검색창에 입력 후 다른 영역을 클릭하거나, 검색버튼을 눌렀을 때는 placeholder의 안내메세지가 사라지는데, 입력하고 있을 때는
사라지지 않아서 입력하고 있는 글자를 보기가 어렵습니다.

좋은 라이브러리 만들어주셔서 감사합니다.

검색시에 히스토리가 추가되는것 같은데 추가가 안되도록 할수도 있을까요?

좋은 라이브러리를 만들어주셔서 감사합니다.

에러내용은,

Warning: useEffect received a final argument during this render, but not during the previous render. Even though the final argument is optional, its type cannot change between renders.

입니다.

render 가 되는 과정에서 life cycle 문제 인건지,
제가 사용하고 있는 코드에서는 함수형 컴포넌트에서 사용하는 useEffect 가 들어가 있지 않아서 문의드립니다.

react-create-app 을 사용하고 있고,
react 버전은 16이상 최신 버전을 사용하고 있습니다.

배포 감사드리구요.
확인 부탁 드리겠습니다.

submitMode를 props로 받아서 써야하는데 type 에러가 나던데
type이 정의되지 않은 것 같은데 따로 이유가 있나요?

react 버전 충돌로 인하여, react 18 버전에서 팝업 훅을 사용할 수 없습니다.

안녕하세요~
다음우편번호서비스 담당자입니다.

저희 서비스를 React모듈로 만들어 배포해 주셔서 진심으로 감사드립니다. ^^
다름이 아니라, 현재 저희 공식가이드페이지 (http://postcode.map.daum.net/guide) 에서도 정의하고 있듯이

API 스크립트의 주소가 변경되었습니다.

https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js

위 URL로 변경되었으며,
해당 버전은 현재 이용하고 계시는 ssl.daumcdn.net에 연결된 버전과 다르게, loader-core가 통합된 버전이라, 위 파일 하나만 다운받으면 저희 서비스를 이용가능합니다.

추가로 지속적인 서비스 유지보수는 위 도메인이 메인이며, 확정이 되진 않았으나, ssl.daumcdn.net도메인에 연결된 버전은 종료할 계획을 가지고 있기 때문에, t1.daumcdn.net으로 변경을 해주시면 좋을 것 같습니다.

감사합니다.