[MBTI 테스트] - 카카오톡 공유하기 기능 만들기

카카오톡 공유하기 기능 구현 순서

1. 카카오 Developers 설정하기
2. 앱 키 확인하기
3. index.html에 Javascript SDK 파일 넣기
4. 카카오톡 공유 버튼을 눌렀을 때 동작하는 이벤트 리스너 가져오기
5. 카카오톡 공유 버튼 컴포넌트 만들기 

 

 

세부 내용

1️⃣ 카카오 Developers 설정하기

Kakao Developers

 

카카오톡 공유하기 기능 구현에 앞서 거쳐야하는 과정이 있다.

기능을 구현하기 위한 API Key가 필요하기 때문에 카카오 developers에서 애플리케이션을 생성해야 한다.

내 애플리케이션 -> 애플리케이션 추가하기

회사명과 카테고리는 아무거나 지정해도 상관없었다.

 

2️⃣ 앱 키 확인하기

생성한 애플리케이션에서 앱 키를 확인할 수 있다.

카카오톡 공유하기 기능에서는 Javascript 키를 이용한다.

내 애플리케이션 -> 애플리케이션 선택 -> 앱 키

 

3️⃣ index.html에 Javascript SDK 파일 넣기

이제 Javascript SDK 파일을 웹 페이지에 포함시켜줘야 한다.

설치 코드는 계속 되서 업데이트 되기 때문에, 붙여놓은 코드를 그대로 가져다 쓰기보다 직접 홈페이지에 들어가 확인해보는 것이 좋다.

Kakao Developers

문서 -> Javascript -> 시작하기 -> 설치 -> 다운로드

 

<script
  src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js"
  integrity="sha384-DKYJZ8NLiK8MN4/C5P2dtSmLQ4KwPaoqAfyA/DfmEc1VDxu4yyC7wy6K1Hs90nka"
  crossorigin="anonymous"
></script>

index.html -> body 안에 해당 코드를 넣어주었다.

 

4️⃣ 카카오톡 공유 버튼을 눌렀을 때 동작하는 이벤트 리스너 가져오기

여기에서 원하는 템플릿을 가져다가 쓰면 된다.

카카오톡에서 제공하는 템플릿을 그대로 사용하거나 커스텀해서 만들 수도 있다.

Kakao Developers

문서 -> 메시지 -> 카카오톡 공유:Javscript

 

5️⃣ 카카오톡 공유 버튼 컴포넌트 만들기

카카오톡 공유 버튼을 컴포넌트로 만들어서 재사용하였다.

코드에 대한 세부 내용은 주석으로 적어두었다.

✅ 외부에 노출되면 안되는 API key는 환경 변수에 설정하고 불러왔다.

✅ buttonStyle은 Tailwind css를 이용할 때 지정해주는 style을 뜻한다.

재사용될 때 각각 다른 디자인으로 보여지기 때문에 props로 style을 받아오게 하였다.

import { useEffect } from "react";
import { KAKAO_IMAGE_URL } from "../../../constants/constants";
const { Kakao } = window;

const KakaoShareButton = ({ userInfo, buttonStyle }) => {
  // description(카카오톡 공유 내용)에 넣을 닉네임과 MBTI 결과 가져온다
  const { nickname, mbtiResult } = userInfo;
  // 배포한 사이트 주소
  const vercelUrl = "http://mbti-freetest.vercel.app/";

  // 컴포넌트가 처음 렌더링될 때 카카오 SDK를 초기화한다
  useEffect(() => {
    // Kakao가 존재하지 않으면 함수가 더 이상 실행되지 않도록 한다
    if (!Kakao) return;
    // 카카오 SDK가 초기화되지 않았으면, Kakao.init 메서드를 사용해 초기화한다
    if (!Kakao.isInitialized()) {
      Kakao.init(import.meta.env.VITE_KAKAO_API_KEY);
    }
  }, []);

  // 공유하기 버튼 눌렀을 때 실행되는 함수
  const shareKakao = () => {
    Kakao.Share.sendDefault({
      objectType: "feed",
      content: {
        title: "MBTI 테스트 결과 공유",
        description: `${nickname}님의 MBTI는 ${mbtiResult}입니다.`,
        imageUrl: `${KAKAO_IMAGE_URL}`,
        link: {
          mobileWebUrl: vercelUrl,
        },
      },
      buttons: [
        {
          title: "테스트 하러가기",
          link: {
            mobileWebUrl: vercelUrl,
          },
        },
      ],
    });
  };

  return (
    <button onClick={shareKakao} className={buttonStyle}>
      카카오톡 공유
    </button>
  );
};

export default KakaoShareButton;

 

카카오톡 공유하기 버튼 컴포넌트는 다음과 같은 형식으로 넣어주면 된다!

<KakaoShareButton
  userInfo={{ nickname, mbtiResult }}
  buttonStyle={buttonStyle}
/>;

 

주의사항

🚨 카카오톡 공유하기 기능은 베포한 사이트에서 테스트를 해봐야한다.

 

위의 gif는 vs code에서 서버를 실행한 뒤, 카카오톡 공유하기 기능을 테스트했을 때 발생하는 상황이다.

코드에 문제가 없는 것 같은데 요청이 실패한다고 떠서 뭐가 문제일까하고 계속 들여다 봤었다.

설마..?하고 배포한 사이트에 들어가서 카카오톡 기능을 테스트 해봤는데, 정상적으로 동작하였다.

 

 

느낀 점

카카오톡 페이지에서 사용방법을 잘 설명해주고 있어서 구현하는데 크게 어렵지 않았다.

내가 만든 웹 애플리케이션을 카카오톡으로 공유할 수 있게 됐다는 점이 굉장히 짜릿했다.

부끄러움을 이겨내고 주변 친구들에게 테스트를 해달라고 부탁하였다. 

이런 맛에 개발자를 하는건가 싶었다.

 

---

[참고자료]

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

https://gallery-k.tistory.com/421