[TIL] React 카카오링크 API

Kakao Developers에서 '내 어플리케이션 > 추가 > 플랫폼'

API를 사용할 도메인을 추가해준다

+ 요약 정보에서 JavaScript 키를 확인해주자

 

[index.html]

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

index.html의 head에서 Kakao SDK를 불러온다

 

[API/Share/initialize.js]

const { Kakao } = window;
 
export default function initialize() {
  Kakao.init('JavaScript 키');
}

초기화는 이렇게 하나의 모듈로 빼서 관리하면 좋다

* JavaScript 키는 보안을 위해 비공개 파일에서 import하도록 변경할 필요가 있다

 

[App.js]

import initialize from './API/Share/initialize';
 
export default function App() {
  useEffect(() => {
    initialize();
  }, []);
  return (

App.js에서 useEffect로 API를 적용한다

 

[API/Share/shareKakao.js]

const { Kakao } = window;
 
export const shareKakao = (title, imageUrl, sharedUrl) => {
  Kakao.Link.sendDefault({
    objectType: 'feed',
    content: {
      title: title,
      description: 'AI가 생성한 AISM PRO 음원을 들어보세요.',
      imageUrl: imageUrl,
      link: {
        webUrl: sharedUrl,
        mobileWebUrl: sharedUrl,
      },
    },
    buttons: [
      {
        title: '자세히 보기',
        link: {
          webUrl: sharedUrl,
          mobileWebUrl: sharedUrl,
        },
      },
    ],
  });
};

공유할 내용을 커스텀해주자

 

[SharingModal.js]

import { shareKakao } from '../../../API/Share/shareKakao';
  <div
    className="sharing_modal_btn3"
    onClick={() => {
      shareKakao(props.title, props.ImageUrl, props.sharedUrl);
    }}>

import하고 파라미터를 연결해 사용하면 끝!

 

Reference🔽

Kakao Developers

카카오링크 API로 메시지 보내기

 

---

 

페이스북, 트위터 공유하기 기능도 추가해보았다

 

[API/Share/shareFacebook.js]

export const shareFacebook = (sharedUrl) => {
  let url = encodeURIComponent(sharedUrl);
  window.open(
    `https://www.facebook.com/sharer.php?u=${url}`,
    'popup',
    'width=400, height=400'
  );
};

* php를 활용한 옛날 방식인데 카카오처럼 SDK를 사용하는 방식도 가능하다!

 

[API/Share/shareTwitter.js]

export const shareTwitter = (title, sharedUrl) => {
  let url = encodeURIComponent(sharedUrl);
  window.open(
    `https://twitter.com/intent/tweet?url=${url}&text=${title}`,
    'popup',
    'width=400, height=400'
  );
};