안녕하세요.
옆의 귀여운 루피와 공유하기는 제 미니미 프로젝트의 핵심 카카오톡 공유하기 화면입니다.
처음에 계획했던 건 커피 월드컵 사이트를 공유하는 것이었는데, 최종에서는 결과를 공유하는 것으로 변경되었습니다. 왜냐면, 이 프로젝트의 핵심은 월드컵이 아니라 월드컵 결과로 친구들에게 기프티콘을 노나주는 것이기 때문이죠. 덕분에 리액트에서 라우터를 추가해서 페이지도 만들고 해봤습니다.
그래서 이번에는 해놓으면 간단하지만 하기 전에는 조금 어려워보이는 카카오톡 공유하기를 간단히 정리해보고자 합니다.
사용방법이 엄청 어렵다!는 아니지만, 우편번호 API보다는 난이도가 있습니다!
1. Kakao Developer
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
미리보기에서 벌써 말해줍니다. 카카오 API를 활용해서 메시지를 보내라고.
2. 내 애플리케이션 → 애플리케이션 추가하기
3. 내 애플리케이션 → 앱 설정 → 플랫폼
사이트 도메인을 추가해줍니다.
localhost에서 먼저 테스트를 해봐야 하므로, netlify와 더불어 추가해줍니다.
4. React 기준 index.html에 script 추가
<head>
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
</head>
5. React 기준 카카오톡 공유하기 컴포넌트 만들기
export const KakaoShare = (selected, brand) => {
if (!window.Kakao.isInitialized()) {
window.Kakao.init(process.env.REACT_APP_KAKAO_JS_API_KEY);
console.log("Kakao SDK initialized:", window.Kakao.isInitialized());
}
// 생략
window.Kakao.Link.sendDefault({
objectType: "feed",
content: {
title: "내가 어디서 어떤 커피를 먹고싶냐면..",
description: `#${drinkDescription} #${coffeeDescription} #${dessertDescription} #${brandDescription}에서 #적당한 #깊티를 #내놔라`,
imageUrl: "https://raw.githubusercontent.com/HJ0216/dream-coffee-worldcup/main/src/image/loopy-img-share.jpg",
link: {
mobileWebUrl: resultUrl, // 모바일 웹 URL
webUrl: resultUrl, // PC 웹 URL
},
},
buttons: [
{
title: "자세히 보기",
link: {
mobileWebUrl: resultUrl,
webUrl: resultUrl,
},
},
],
});
};기본 템플릿을 사용했습니다.
컴포넌트 초반에 초기화를 확인하는데, 이 때 API 키가 필요합니다.
내 애플리케이션 → 앱 설정 → 앱 키에서 Javascript 키를 복사해서 넣으면 됩니다.
무료 API키지만 키 값은 소중하므로 .env를 활용해 Github 상에 공유되지 않도록 합니다.
🚨Github에 올라가지 않은 환경변수는 Netlify에서 따로 추가 후 재 빌드를 해줘야 합니다.
저는 직접 만든 버튼에 기본 템플릿 피드를 사용하였습니다.
이 외에 다양한 템플릿 또는 커스터마이징이 가능하며, 아래 사이트를 참고하시면 됩니다.
https://developers.kakao.com/docs/latest/ko/message/js-link
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
6. 최종 결과
는 가장 먼저 만나보셨던 화려한 루피 사진이 공유하기 화면입니다.
또는 아래 사이트에서도 직접 체험해보실 수 있습니다.
결과를 친구에게 공유해서 기프티콘 요청을 하실 수 있습니다!
Coffee WorldCup
hj0216.netlify.app
+ 브랜드가 겹치지 않게 모아놓은 후기
++ 신기한 점: 친구와 내가 자주 가는 커피집이 선호하는 커피 브랜드가 아니었다😲!
📑
참고 자료
Chat GPT
https://developers.kakao.com/docs/latest/ko/message/js-link
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
카카오톡 공유하기 JavaScript API 사용하기
카카오톡 공유하기 API JavaScript로 간단하게 사용하기
velog.io
https://front-kuli.tistory.com/168
React 로 카카오톡 공유하기 기능 추가해보기
https://developers.kakao.com/tool/demo/message/kakaolink?message_type=scrap Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제
front-kuli.tistory.com
'MinimiProject > 커피 월드컵' 카테고리의 다른 글
| [커피 월드컵] React에서 사용한 기술 정리 (1) | 2025.01.01 |
|---|---|
| [커피 월드컵] Netlify React 배포 (0) | 2024.12.24 |
