[MBTI 테스트 사이트 만들기 #5] 카카오톡 공유하기 버튼 추가하기(React)

이전 글 보러 가기 👉 [MBTI 테스트 사이트 만들기 #4] 테스트 로직 만들기 (feat. 울집 고양이)

[MBTI 테스트 사이트 만들기 #5] 카카오톡 공유하기 버튼 추가하기(React)

친구에게 테스트 결과를 공유하도록 하기 위해서 카카오 공유 API를 활용하려고 합니다. 우선 카카오톡 콘솔 사이트로 가서 어떤 API가 있는지 확인해 보겠습니다.

kakao developers > 문서

https://developers.kakao.com/docs/latest/ko/index

Kakao Developers

카카오 API를 사용하기 위한 플랫폼 별 가이드와 카카오 로그인, 소셜, 채널, 푸시 알림, 지도 등 다양한 API를 제공하고 있네요. API를 선택하면 기능 소개와 요청 응답 API를 예제로 확인할 수 있습니다.

애플리케이션 추가하기

카카오 API를 사용하기 위해서는 우선 내 애플리케이션을 추가해야 합니다. 카카오 콘솔에 로그인하신 후 애플리케이션 추가하기를 선택합니다. 

추가된 애플리케이션을 누르게 되면 요약 정보 화면이 뜰 텐데요. API를 사용할 때 쓰일 앱 키를 여기서 확인하실 수 있습니다. (Javascript 키) 외부 노출을 하면 안 되는 매우 중요한 데이터이기 때문에 주의해 주시기 바랍니다.

추가로 설정해야 할 것이 있는데, 내 애플리케이션 > 앱 설정 > 플랫폼에 사이트 도메인을 추가해야 합니다. 이걸 추가해 놓지 않으면 나중에 카카오톡 공유하기를 만들었을 때 도메인을 찾을 수 없어 정상동작을 하지 않습니다. 저는 로컬에서 개발 중이어서 로컬호스트 주소를 추가했습니다.

애플리케이션이 추가된 것을 확인하셨으면 이제 카카오톡 공유하기 API 사용을 위해 아래 문서를 확인해 보겠습니다.

https://developers.kakao.com/docs/latest/ko/message/common

Kakao Developers

카카오톡 공유하기는 기본 템플릿으로 메시지 보내는 방법과 사용자 정의 템플릿으로 메시지 보내는 방법 2가지가 있는데 결과 페이지에 따라 변동될 정보를 넣어줄 수 있게 사용자 정의 템플릿을 만들어 보겠습니다.

템플릿 추가하기

도구 > 메시지 템플릿 도구 바로가기를 클릭합니다. 그럼 전체 애플리케이션 리스트가 나오는데, 방금 전 생성한 애플리케이션을 클릭해 줍니다.

사용 목적은 단순 공유하기 기능만 사용할 거라서 "카카오톡 공유/나에게 보내기"로 선택했습니다.

템플릿 만들기를 선택하면 4가지 유형의 레이아웃 형식을 선택할 수 있게 나옵니다. 저는 기본적인 형태인 FEED를 선택했습니다. 사용자 템플릿 정의는 User Argument를 제공하는데(파라미터) 이미지, 공통링크, 제목/설명을 파라미터 형식으로 만들 것이기 때문에 텍스트가 아닌 아래처럼 바꾸어 주었습니다.

 

공통링크 도메인이 플랫폼에 추가한 도메인과 동일한지 확인

템플릿 적용하기

템플릿을 만들었으면 코드에 적용을 해야겠죠? 문서를 참고하여 우선 kakao sdk코드를 import 해보겠습니다. (React 기준)

//App.js

...

function App() {
  const [testUrl, setTestUrl] = useState([]);
  const [testResultUrl, setTestResultUrl] = useState([]);
  const [testResultQueryUrl, setTestResultQueryUrl] = useState([]);
  const [testUrlImg, setTestUrlImg] = useState([]);

  useEffect(() => {
    const script = document.createElement("script");
    script.async = true;
    script.src = "https://developers.kakao.com/sdk/js/kakao.js";
    document.head.appendChild(script);
  }, []);

...

그리고 공유 버튼을 만들어줍니다.

공유 버튼

//Quiz.js 

...

<span>친구에게 공유하기</span>
<div
  onClick={() =>
    shareKakao(
      currentTest.info.mainTitle, //타이틀
      currentTest.info.subTitle, //서브타이틀
      currentTest.info.fullImage //미리보기 이미지
    )
  }
  style={{
    width: "50px",
  }}
>
  <img src={logo} alt={"Kakao Logo"} width={"100%"} />
</div>

...

카카오톡 로고 이미지는 아래 이미지를 사용했습니다.

공유하기 버튼 이벤트 함수

// util.js

import { useEffect } from "react";
import image from "../assets/img/smile_green.PNG";

export const shareKakao = async (title, desc, THU, type = null) => {
  if (window.Kakao) {
    if (!window.Kakao.isInitialized()) {
      await new Promise((resolve) => {
        window.Kakao.init([애플리케이션자바스크립트앱키], resolve);
      });
    }

  console.log("인증확인:", window.Kakao.isInitialized(), title, desc);

  window.Kakao.Link.sendCustom({
    templateId: [템플릿생성시발급받은ID],
    templateArgs: {
      title: title,
      desc: desc,
      THU: THU,
      type: type,
    },
  });
  }
};

 

테스트 메인페이지(ex. localhost:3000/catBTI와 결과페이지(ex. localhost:3000/catBTI/result/INTP)를 구분하기 위해 type 객체를 추가했습니다.

이제 실행을 해보면 정상적으로 카카오톡 공유가 되는 걸 확인할 수 있습니다! 원래 썸네일 이미지도 보여야하는데 서버에 업로드를 안 해놔서 저렇게 보이네요.