useEffect(() => {
if (!(window as any).Kakao) {
const script = document.createElement('script');
script.src = 'https://t1.kakaocdn.net/kakao_js_sdk/2.6.0/kakao.min.js';
script.integrity =
'sha384-6MFdIr0zOira1CHQkedUqJVql0YtcZA1P0nbPrQYJXVJZUkTk/oX4U9GhUIs3/z8';
script.crossOrigin = 'anonymous';
script.onload = () => {
(window as any).Kakao.init(process.env.NEXT_PUBLIC_KAKAO_API_KEY);
(window as any).Kakao.Channel.createChatButton({
container: '#chat-channel-button',
channelPublicId: process.env.NEXT_PUBLIC_KAKAO_CHANNEL_PUBLICK_ID,
supportMultipleDensities: true,
});
};
document.head.appendChild(script);
}
}, []);
위와 같이 구현을 하였고 데스크탑에서는 잘 구동이 됩니다만,
모바일에서 버튼을 눌러 채널 연동을 시도하면
“페이지를 찾을 수 없습니다.”
“비공개 또는 삭제된 프로필일 수 있습니다.”
“또는 주소가 정확한지 다시 한번 확인해주세요.” 라는 알림만 보여집니다.
이걸 웹 개발자 모드에서 모바일로 접속하면,
header tag에 ‘data-locator-hook-status-message=“No valid renderers found.”’ 같은 에러 문구가 생기는데 원인을 알 수 있을까요 ?