문의 시, 디벨로퍼스 앱ID를 알려주세요.
- 친구 api와 피커, 메시지 api 사용을 위한 체크 리스트 ( 친구 api와 피커, 메시지 api 사용을 위한 체크 리스트 ) 먼저 확인해주세요.
- 메시지 API 권한 신청은 “디벨로퍼스>내 애플리케이션>앱 설정>앱 권한” 메뉴에서 신청 할 수 있습니다.
앱 ID: 1098404
링크 : https://over-the-mountain.site/
카카오톡 공유 할 때 아이폰에서 네이버앱이나 사파리 앱으로 공유하면 잘 되는데요
크롬으로 공유 할 때 전달한 값들이 undefine이 뜹니다
이거는 네이버앱, 사파리로 할 때
이거는 크롬앱으로 할 때
공유하기 코드도 보여드립니다
import { useEffect } from 'react'
import KakaoShareIcon from '@/assets/icons/kakaoShareIcon.svg?react'
interface KakaoShareButtonProps {
title: string
description: string
imageUrl: string
webUrl: string
}
declare global {
interface Window {
Kakao: any
}
}
const KakaoShareButton = ({ title, description, imageUrl, webUrl }: KakaoShareButtonProps) => {
const JavaScript_Key = import.meta.env.VITE_JAVASCRIPT_KEY
useEffect(() => {
const loadKakaoSDK = () => {
return new Promise<void>((resolve, reject) => {
if (window.Kakao) {
resolve()
return
}
const script = document.createElement('script')
script.src = 'https://developers.kakao.com/sdk/js/kakao.min.js'
script.onload = () => {
if (!window.Kakao) {
reject('Kakao SDK failed to load')
return
}
if (!window.Kakao.isInitialized()) {
window.Kakao.init(JavaScript_Key)
}
resolve()
}
script.onerror = () => reject('Kakao SDK load error')
document.head.appendChild(script)
})
}
loadKakaoSDK()
.then(() => {
if (window.Kakao.isInitialized()) {
window.Kakao.Share.createCustomButton({
container: '#kakaotalk-sharing-btn',
templateId: 111504,
templateArgs: {
title: title,
description: description,
imageUrl: imageUrl,
webUrl: webUrl,
},
})
}
})
.catch(error => {
console.error(error)
})
}, [title, imageUrl, description, webUrl, JavaScript_Key])
return (
<div id="kakaotalk-sharing-btn" className="flex cursor-pointer flex-col items-center justify-center gap-1">
<KakaoShareIcon />
<div className="text-b3 text-gray-900">카카오톡</div>
</div>
)
}
export default KakaoShareButton