카카오톡 공유 window.kakao.isInitialized is not a function 에러

JavaScript
1 
...
useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://developers.kakao.com/sdk/js/kakao.js';
    document.head.appendChild(script);
    script.onload = () => {
      setIsLoaded(true);
    };
  }, []);

  const handleShareButton = () => {
    const { kakao } = window;
    if (kakao && isLoaded) {
      if (!window.kakao.isInitialized()) {
        kakao.init(CONFIG.API_KEYS.MAP);
      }
      kakao.Share.sendDefault({
        objectType: 'location',
        address: '경기 성남시 분당구 판교역로 166 3층',
        addressTitle: '카카오 판교오피스 카페톡',
        content: {
          title: '신메뉴 출시♥︎ 체리블라썸라떼',
          description: '이번 주는 체리블라썸라떼 1+1',
          imageUrl:
            'http://k.kakaocdn.net/dn/bSbH9w/btqgegaEDfW/vD9KKV0hEintg6bZT4v4WK/kakaolink40_original.png',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
        social: {
          likeCount: 286,
          commentCount: 45,
          sharedCount: 845,
        },
        buttons: [
          {
            title: '웹으로 보기',
            link: {
              mobileWebUrl: 'https://developers.kakao.com',
              webUrl: 'https://developers.kakao.com',
            },
          },
        ],
      });
    }
  };

return (
...
<MapDetail shopInfo={shopInfo} />
...
<ShopEvent onClick={() => handleShareButton()}>
    <Image src={'/svg/share.svg'} width={18} height={18} alt="공유" />
    <div className="pl-[2px]">공유하기</div>
</ShopEvent>
)

nextjs를 통해 개발중인 애플리케이션에서 카카오톡 공유를 구현하기 위해
페이지 내에서 useEffect로 카카오sdk 스크립트를 로드하고, 로드가 완료되면 isLoaded state를 true로 변경합니다.
그리고 직접만든 버튼에 handleShareButton 이벤트를 등록했습니다.

MapDetail 컴포넌트 내부에서는 카카오맵 스크립트를 로드하고 관련 로직을 처리합니다.

이 후에 공유이벤트를 연결한 버튼을 클릭하면 window.kakao.isInitialized is not a function 에러가 출력됩니다.
카카오맵 컴포넌트를 주석처리하면 해당 에러가 출력되지는 않지만, 클릭해도 아무런 반응이 없습니다.

어떤 문제가 있는건지 알려주시면 감사하겠습니다.

2

개발하신 환경상 문제를 디버깅해드리긴 어렵고

빈프로젝트에 next.js 로 우선 카카오톡 공유하기 정상작동하는지 확인 부탁드려요.

3

빈프로젝트에서는 정상적으로 동작합니다.

declare global {
  interface Window {
    kakao: any;
  }
}

위와 같이 _app.tsx 파일 내에서 전역으로 window interface를 설정해주는데
kakao를 참조하면 카카오 맵은 정상적으로 동작하는데
카카오톡 공유하기는 정상적으로 동작하지 않아서

declare global {
  interface Window {
    kakao: any;
    Kakao: any;
  }
}

위와 같이 추가적으로 interface 설정을 해주고, 카카오맵은 kakao, 카카오톡 공유하기는 Kakao를 참조하니까
정상적으로 동작합니다.

해당 이유가 어떠한 이유에서 발생하는 건지 알 수 있을까요?

4 
공유이벤트를 연결한 버튼을 클릭하면 window.kakao.isInitialized is not a function 에러가 출력됩니다.

카카오 SDK (카카오 로그인, 공유하기 등) 에사용되는 객체는 Kakao (첫글자 대문자) 인데 해당 객체를 사용하지 않아 발생한 문제로 보입니다.