React 로 카카오톡 공유하기 기능 추가해보기

https://developers.kakao.com/tool/demo/message/kakaolink?message_type=scrap 

Kakao Developers

카카오API 중 공유하기를 사용해보려고 한다...

이유는 만들고 있는 사이트에 저 버튼(노란..)을 만들어버렸기 때문이다.

 

구현방법을 체크하여 코드를 가져올 수 있는데,

직접 만든 버튼으로 메시지 > 기본 > 피드 를 선택하면

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js"
  integrity="sha384-dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx" crossorigin="anonymous"></script>
<script>
  Kakao.init('c089c8172def97eb00c07217cae17495'); // 사용하려는 앱의 JavaScript 키 입력
</script>

<a id="kakaotalk-sharing-btn" href="javascript:shareMessage()">
  <img src="https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_medium.png"
    alt="카카오톡 공유 보내기 버튼" />
</a>

<script>
  function shareMessage() {
    Kakao.Share.sendDefault({
      objectType: 'feed',
      content: {
        title: '딸기 치즈 케익',
        description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
        imageUrl:
          'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
        link: {
          // [내 애플리케이션] > [플랫폼] 에서 등록한 사이트 도메인과 일치해야 함
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com',
        },
      },
      social: {
        likeCount: 286,
        commentCount: 45,
        sharedCount: 845,
      },
      buttons: [
        {
          title: '웹으로 보기',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
        {
          title: '앱으로 보기',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
      ],
    });
  }
</script>

이런식으로 카카오톡 공유가 가능하다.

 

직접 만든 버튼 > 사용자 정의 메시지의 경우

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js"
  integrity="sha384-dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx" crossorigin="anonymous"></script>
<script>
  Kakao.init('c089c8172def97eb00c07217cae17495'); // 사용하려는 앱의 JavaScript 키 입력
</script>

<a id="kakaotalk-sharing-btn" href="javascript:shareMessage()">
  <img src="https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_medium.png"
    alt="카카오톡 공유 보내기 버튼" />
</a>

<script>
  function shareMessage() {
    Kakao.Share.sendCustom({
      templateId: 82775,
      templateArgs: {
        title: '라이언이 즐겨먹던 바로 그 틴케이스 치즈볼',
        description: '바라만 봐도 즐거워지는 힐링 패키지에는 시크릿 스토리가 숨어있어요.',
      },
    });
  }
</script>

 

그럼 이제 이걸 어떻게 리액트에 적용하는가가 문제인데,

 

구글링해보니 일단 어플리케이션 등록이 필요하다고 한다.

내 어플리케이션탭에 들어가서 회원가입 후, 일단 내 어플리케이션 등록부터 해준다.

https://developers.kakao.com/console/app

 

만들어준 어플리케이션에 접속하면 여러 키들이 눈에

보인다. 이를 .env 에 저장해준다.

 

 

플랫폼을 등록해준다. 개발용으로 일단 Web만 등록해준다.

 

내 어플리케이션 내에서 메시지로 진입해준다.

그리고 템플릿을 만들어줄 수 있는데....

 

 

템플릿 이거저거 설정해주면 준비 단계는 얼추 끝이 난다.

 

 

자바스크립트를 사용하여 기능 연결해주기

어플리케이션을 만들었으니 카카오톡에서 제공하는 SDK와 연결이 필요하다.

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

해당 스크립트 태그를 index.html 에 넣어주고

 

window.Kakao.init(process.env.REACT_APP_JAVASCRIPT_KEY);
window.Kakao.isInitialized();

index.tsx 파일에 해당 코드 또한 넣어준다. 카카오톡 공유를 사용할 컴포넌트에 넣어주는 건 카카오가 계속해서 초기화 되므로 상위 파일에 넣어줘야 한다고 함.

 

일전에 .env에서 선언해줬던 웹 키를 넣어주면 된다.

 

 

이게 init 이 되고나면 새로운 파일이 생겼음을 알 수 있다.

react-app-env.d.ts 파일인데, 여기에 아래의 코드를 넣어줘야 발생하는 에러를 잡아줄 수 있다.

/// <reference types="react-scripts" />
interface Window {
  Kakao: any;
}

 

 

공유하기 버튼 함수 작성

공유하기 위한 버튼 함수를 만들기 위해선 api 에서 제공하는 함수를 써야하는데

이게 템플릿 종류에 따라 다르다. 자세한 내용은 아래에 있으니 잘 따라 쓰면 된다..

https://developers.kakao.com/docs/latest/ko/message/js-link#custom-template-msg-custom

Kakao Developers

https://developers.kakao.com/docs/latest/ko/message/message-template#component

Kakao Developers

나의 경우는 타입을 Feed 로, 사용자정의 타입으로 만들었기 때문에 sendCustom 함수를 사용했다.

  const shareKakao = () => {
    window.Kakao.Link.sendCustom({
      templateId: 만들었던템플릿ID,
    });
  }

가장 간단하게 템플릿 아이디만 넣어서 옵션 설정만 해주면!

쨘!

 

성공적으로 보내졌다.. 문구나 사진은 대충 긁어다 쓴거고 제대로 사이트가 접속되는 것도 확인할 수 있었다....만!

 

내가 원했던 레시피에 따른 공유가 전혀되고 있지 않았다.

아무래도 공유해줄 url을 지정해주지 않아서 그런 것 같아서 좀더 옵션 추가가 필요함을 느꼈다.

구글링을 해보니 그럴 때 사용해주는게 templateArgs 라는 속성이었다!

 

templateArgs: {
    foodName: `${data.RECIPE_NM_KO}`,
    foodTime: `${data.COOKING_TIME}`,
    idx: idx,
}

나에게 필요한 정보들을 모아서...

이 정보들은 내가 만들었던 템플릿에서 사용이 가능하다.

 

페이지에 따른 카카오톡 공유버튼 완성!

접속도 제대로 된다 😋