1. Kakao Developers 앱 생성 및 키 발급
- https://developers.kakao.com/ 접속 후 앱 생성
- 생성한 앱에서 JavaScript 키 확인
- .env.local 파일에 키 저장하기
2. Kakao SDK 스크립트 로드
- /app/services/KakaoScript.tsx 파일 생성 후 Kakao SDK 로드
"use client";
import Script from "next/script";
export default function KakaoScript() {
const onLoad = () => {
window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_API_KEY);
};
return (
<Script
src="https://developers.kakao.com/sdk/js/kakao.js"
async
onLoad={onLoad}
/>
);
}3. RootLayout.tsx에 KakaoScript 삽입
- /app/layout.tsx 파일의 body 태그 하단에 KaKaoScript 컴포넌트 삽입
- windonw.kakao를 사용할 수 있도록 타입 선언도 추가
// 타입 선언 (any 사용 시 ESLint 오류 방지)
declare global {
interface Window {
Kakao: any; // eslint-disable-line @typescript-eslint/no-explicit-any
}
}import KakaoScript from "@/services/KakaoScript";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko">
<body>
{children}
<KakaoScript />
</body>
</html>
);
}4. 커스텀 템플릿 공유 함수 구현
- Kakao Developers에서 커스텀 템플릿을 생성한 후, 해당 템플릿 ID와 전달할 템플릿 args를 기반으로 공유 함수 작성
const handleOnClickKakao = () => {
if (window.Kakao && window.Kakao.Share) {
window.Kakao.Share.sendCustom({
templateId: ${templateId},
templateArgs: {
img: ${img},
nickname: ${nickname},
},
});
} else {
console.log("Kakao SDK 로드 실패");
}
};
프론트엔드 취준생입니다.