카페를 찾아주는 팀 프로젝트를 진행중인데, 이번에 카카오 공유하기 기능을 도입하기로 했다.
FrontEnd 영역을 맡은 나는 Next.js 기반으로 어플리케션을 구축을 하여 개발중인데, 여기서 기획자분께서 카카오 공유하기를 여러 페이지에서 커스텀하게 동작하도록 요청하셔서 카카오 공유하기를 Next.js 에서 사용하기 위해 어떤식으로 사용을 했는지 소개해보려고 합니다!
(저는 Next.js 14 version 을 사용하고 있어 이전 버전을 사용하시는 분들은 Javascript App key를 적용하는데 있어서 차이점이 있을 수 있습니다.)
가장 먼저, 카카오 공유하기 기능을 사용하기 위해선 아래 링크인 카카오 Developers에서 어플리케이션을 만들어줘야 한다.
https://developers.kakao.com/console/app
카카오계정
accounts.kakao.com
그러면 해당 어플리케이션에 카카오 기능을 사용하기 위해 Key를 카카오측에서 할당해주는데, 우리가 여기서 필요한건 Web 환경에서 사용할 Javascript Key다.
Javascript Key를 내 Next.js 어플리케이션에 적용시켜주기 위해 나는 다음과 같은 과정을 거쳤다.
"use client";
import Script from "next/script";
function KakaoScript() {
const onLoad = () => {
const kakao = (window as any).Kakao;
kakao.init(process.env.NEXT_PUBLIC_KAKAO_API_KEY);
};
return (
<Script
src="https://developers.kakao.com/sdk/js/kakao.js"
async
onLoad={onLoad}
/>
);
}
export default KakaoScript;맨 처음 어플리케이션이 로드될때 Javascript App key를 읽어들이기 위하여 KakaoScript 컴포넌트를 하나 선언 해주었다.
그런다음 이 KakaoScript 컴포넌트를 아래와 같이 layout.tsx 파일 맨 하단에 위치시켜주면 된다.
// meta 와 관련된 정보 기입
......
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<body>
<Introduce />
<QueryProvider>
<section style={{ width: "380px", height: "100vh" }}>
{children}
</section>
</QueryProvider>
</body>
<KakaoScript />
</html>
);이제, app key를 사용할 수 있게 셋팅을 해줬으니 카카오 공유하기를 위한 공유하기 메시지 템플릿을 만들어보자.
https://developers.kakao.com/docs/latest/ko/message/message-template
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
위 링크를 클릭하면 아래와 같은 메시지 템플릿 소개 화면으로 이동하게 되는데 조금만 스크롤을 내리면 메시지 템플릿 도구 버튼이 있다.
이 메시지 템플릿 도구 버튼을 클릭하여 나만의 템플릿을 만들어보자.
나는 이미 나만의 템플릿을 만들어논게 있기 때문에 아래와 같이 Template ID 110854가 존재하는데, 왼쪽에 템플릿 만들기 버튼을 클릭해서 템플릿 양식을 선택해서 만들어주기만 하면된다. (보통 Feed 템플릿 양식을 선택한다)
1. 공통설정 - 사용목적에 카카오톡공유 / 전달 가능 : 허용 을 선택해준다.
2. 이미지 - 카카오톡 공유시 상단에 보여지는 이미지를 커스텀하고 싶을때 고정 이미지를 셋팅할 수 있고 변수를 전달받아 유동적인 이미지를 보여주게 할 수 있다. 나는 카페마다 다른 이미지를 공유하기 위해 유동적인 이미지 변수인 imageUrl로 셋팅했다.
3. 제목 & 설명
imageUrl 변수와 마찬가지로 title, desccription으로 공유할때마다 다른 컨텐츠를 보여주기 위해 위와 같이 셋팅!
4. Button
난 버튼명은 카페콕에서 확인하기라는 Text로 지정해주었다.
좀 만 밑으로 내리면 고급설정은 따로 설정은 안해주었다.
5. 컴포넌트 링크 관리
링크는 위에서 만든 버튼을 클릭했을때 어디로 링크를 태울지 설정하는 기능인데, 나는 기존 도메인(cafecok.site) + cafe/${cafeId}를 넣어줌으로써 특정 카페마다 링크를 달리하기 위해 cafeId로 지정해주었다.
그럼... 템플릿도 만들었겠다! 내가 설정한 템플릿을 사용하기 위해 카카오 공유하기 기능 역할이 있는 ShareButton Component를 만들어보자.
"use client";
import { useRouter } from "next/navigation";
import { patchSharePlan } from "@/apis/plans";
import { useCallback } from "react";
import useIsLoggedIn from "@/Hooks/useLoggedIn";
import Icon from "@/components/common/Icon";
declare global {
interface Window {
Kakao: any;
}
}
interface ShareButtonProps {
type?: string;
cafeId: number;
planId?: number;
cafeInfo: {
title: string;
description: string;
imageUrl: string;
linkUrl: string;
};
}
const ShareButton = ({ type, cafeId, planId, cafeInfo }: ShareButtonProps) => {
const isLoggedIn = useIsLoggedIn();
const router = useRouter();
const handleShareToKakao = useCallback(() => {
const { Kakao } = window;
Kakao.Share.sendCustom({
templateId: 110854,
templateArgs: {
title: cafeInfo.title,
description: cafeInfo.description,
cafeId: cafeId,
imageUrl: `http:${cafeInfo.imageUrl}`,
},
});
if (planId) patchSharePlan(planId);
}, []);
const onClickShareButton = (e: React.SyntheticEvent<HTMLButtonElement>) => {
e.stopPropagation();
if (isLoggedIn) {
handleShareToKakao();
} else {
alert("로그인이 필요합니다.");
router.push("/");
}
};
return (
<button onClick={onClickShareButton}>
<Icon
type={type === "detailInfo" ? "share_white" : "share"}
size="small"
alt="공유하기"
/>
</button>
);
};
export default ShareButton;
내 프로젝트 특성상 공유하기 기능이 전달받는 props에 따라 달리 보여줘야 했기 때문에, 좀 복잡해보일 수 있다..
위 코드에서 공유하기 템플릿을 커스텀하게 사용하기 위해선 Kakao.Share.sendCustom 함수를 작성해주면 된다.
가장먼저 sendCustom 함수 내 templateId는 내가 만든 templateId그대로 넣어주면 되고!
템플릿 만들기에서 사용하기로한 각각 title, description, cafeId , imageUrl 변수들은 templateArgs 값에 셋팅을 해주면된다.
이렇게 셋팅하고 테스트해보면... 아래와 같이 공유하기 버튼을 클릭했을때 내가 설정한 template로 공유할 수 있게 된다.
카카오톡에서 공유하게 되면 아래와 같이 내가 설정한 값들이 정상적으로 보인다!
공유하기 기능은 kakao Developers API를 잘 읽으면 쉽게 도입할 수 있지만, Next.js 14 버전에서 사용하는 사람들은 많이 찾아 볼 수 없어 직접 이렇게 글을 정리하게 되었습니다.
궁금하신 사항이나, 문의가 있으시면 댓글 부탁드릴게요!
'개발 > Project' 카테고리의 다른 글
| [유데미x스나이퍼팩토리] 프로젝트 캠프 schdn ui (1) | 2024.11.17 |
|---|
