1. 카카오 디벨로퍼스 설정
카카오 디벨로퍼스에서 애플리케이션을 추가하고,로컬주소와 배포주소 도메인을 넣는다.
2. 카카오sdk추가
head안에 스크립트로 카카오sdk를 추가해준다.
<html lang="ko" className={`${pretendard.variable}`}>
{/* 카카오공유 */}
<Script defer src="https://developers.kakao.com/sdk/js/kakao.min.js"></Script> // 여기추가
{/* 네이버지도 */}
<Script
strategy="afterInteractive"
src={`https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${process.env.NEXT_PUBLIC_MAP_KEY}`}
></Script>
<body className={`${pretendard.className} antialiased`}>
<ClientRoot>{children}</ClientRoot>
</body>
</html>3. env에 자바스크립트앱키 넣기
// .env
NEXT_PUBLIC_KAKAO_API_KEY=djsdbajkbjdkbakjbwjkabjkdwbakjd
4. initialize
이제 JavaScript 키를 이용해서 initialize를 해주어야한다.
클라이언트단의 상위컴포넌트에 다음과같이 입력해준다 (레이아웃등)
useEffect(() => {
window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_API_KEY);
}, []);그러면 window가 kakao를 인식하지못하는 문제가있다.
따라서 이 위의 provider가 있는 컴포넌트에 전역으로 명시해준다
declare global {
interface Window {
Kakao: any;
}
}5. 카카오톡 공유하기 버튼 생성
카카오톡 공유하기 버튼을 따로 컴포넌트로 생성해줬다.
종류1) 스크랩하여 자동으로 공유
자동으로 스크랩하여 공유하는방식인 sendScrap을 사용하여 구현하였다.
// /components/KakaoShareBtn.tsx
import React from 'react';
const KakaoShareBtn = () => {
const onClick = () => {
const { Kakao, location } = window;
Kakao.Share.sendScrap({
requestUrl: location.href,
});
};
return (
<button className="w-[60px] h-[60px] rounded-full bg-[#D5D5D5] flex items-center justify-center" onClick={onClick}>
<img src="/images/kakao.png">
</button>
);
};
export default KakaoShareBtn;카카오디벨로퍼스에 친절하게 나와있다. https://developers.kakao.com/tool/demo/message/kakaolink?message_type=scrap
이방식으로 해보니 seo로 넣어준 logo, title, description이 나오고 , url만 해당경로로 가게 구현이 되었다.
해당 방식도 괜찮긴한데 마음에안들어서 커스텀을 해보기로했다.
종류2) 커스텀방식
import React from 'react';
type Props = {
title: string;
description: string;
imageUrl?: string;
};
const KakaoShareBtn = ({ title, description, imageUrl }: Props) => {
const onClick = () => {
const { Kakao, location } = window;
Kakao.Link.sendDefault({
objectType: 'feed',
content: {
title,
description,
imageUrl: imageUrl ? imageUrl : '',
link: {
mobileWebUrl: location.href,
webUrl: location.href,
},
},
buttons: [
{
title: '자세히 보기',
link: {
mobileWebUrl: location.href,
webUrl: location.href,
},
},
],
});
};
return (
<button className="w-[60px] h-[60px] rounded-full bg-[#D5D5D5] flex items-center justify-center" onClick={onClick}>
<img src="/images/kakao.png">
</button>
);
};
export default KakaoShareBtn;
카카오톡 공유하기의 템플릿은 많으니, 아래주소에서 종류를 확인하여 맞는 개발을 하면된다.
https://developers.kakao.com/docs/latest/ko/kakaotalk-share/js-link
학생 점심 좀 차려