[ React + typeScript ] 카카오톡 공유 기능 ( KaKao Developers )

내가 보려고 정리하는 리액트 애플리케이션에 카카오톡 공유 기능 추가하는 법 ! 

 

KaKao Developers 애플리케이션 추가등록

https://developers.kakao.com/

Kakao Developers

사용자에게 보여질 앱 아이콘과 앱 이름, 사업자명을 작성하고나면, 앱 아이디와 앱 키들을 확인할 수 있다. 

플랫폼 등록하기

나는 React로 개발했으므로, 좌측 메뉴 플랫폼 > Web 플랫폼 등록에 들어간다. 

본인이 배포한 도메인을 넣어주면 되고, 개발 모드에서 로컬에서 테스트 가능해야 하기 때문에 로컬 주소도 넣어준다. 

JavaScript SDK 사용하기

SDK란?

• SDK는 소프트웨어 개발 키트(Software Development Kit)로서, 기본적으로 미리 작성된 코드인데, 여기에는 개발자가 기존 소프트웨어를 사용하여 새 애플리케이션을 구축하는 데 필요한 모든 도구가 포함되어 있다.

상단 메뉴 문서 > 시작하기 > JavaScript 

SDK 설치

하단으로 내려서 설치 > 다운로드 > 최신버전 copy Script Tag 

최신 버전의 스크립트 코드를 복사한다. 

이제 코드의 index.html 에 복사한 코드를 붙여넣어준다. 

 

SDK 초기화

그리고 나서, 좀 더 내려보면 초기화가 있다. 복붙하여 main.tsx ( 또는 index.tsx ) 가장 최상위 파일에 넣어주어야 하는데,

 

그 전에 먼저 env 파일에 자신의 JavaScript키를 env 파일에 넣어준다.

VITE일 경우 아래처럼 앞에 VITE_APP을 붙여주어야 한다. 

env 파일 내 자바스크립트 키 설정

 

이 값을 불러올 때는 아래처럼 import.meta.env 뒤에 이름을 붙여 불러온다. 

const JAVASCRIPT_KET = import.meta.env.VITE_APP_JAVASCRIPT_KEY;

그리고 나서, 초기화 탭에 있는 코드 두 줄을 복사하고, 불러온 키 값을 넣어 main.tsx에 넣어준다. 

그대로 넣은 경우 , 에러가 난다. 

'Kakao' 이름을 찾을 수 없습니다. 에러 해결

vite 앱에서 Kakao 경로를 찾을 수가 없기 때문이다. Kakao 앞에 window. 를 붙여준다.

오른쪽 처럼 window. 붙이기

그래도 에러가 난다.

'Window & typeof globalThis' 형식에 'Kakao' 속성이 없습니다. 에러 해결 

외부 라이브러리인 KaKao SDK의 타입을 정확히 알지 못하기 때문에 나는 에러이다.

vite-env.d.ts 에 아래 코드 추가 

interface Window {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  Kakao: any;
}

 

메시지 템플릿 설정

상단 내 애플리케이션 > 좌측 메뉴 제품 설정 > 메시지 > 메시지 템플릿 빌더 바로가기

원하는대로 템플릿을 커스텀해준다. 

공유 코드 복사

다시 문서 > 메시지 > 카카오톡 공유 : JavaScript 

나는 사용자 정의 템플릿에 버튼도 직접 만들어 사용할 것이므로 

사용자 정의 템플릿으로 메시지 보내기  > 공유하기 버튼 사용하기 의 예제에 있는 코드를 복사해준다.

나는 제목과 내용을 사용자의 내용을 채워넣을 예정이기에 임시로 아래와 같이 설정했다. 

const FeedShareKaKao = () => {
  const TEMPLATE_ID = parseInt(import.meta.env.VITE_APP_KAKAO_TEMPLATE_ID, 10);

  const shareKaKao = (title: string, contents: string) => {
    window.Kakao.Share.sendCustom({
      templateId: TEMPLATE_ID,
      templateArgs: {
        title: title,
        description: contents,
      },
    });
  };
  return (
    <button onClick={() => shareKaKao("제목제목", "내용내용")}>카톡공유</button>
  );
};

export default FeedShareKaKao;

채팅방에 공유된 모습

이제 위에 커스텀한 템플릿을 자신의 서비스에 맞게 수정해주면 된다 !