[TIL] 2023.11.02 - 카카오톡 공유하기

 카카오톡 공유하기 

 

① 카카오 sdk 추가

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

 

② 카카오 공유하기 함수 생성

export const shareKakao = (title, postId) => {

  // url이 id값에 따라 변경되기 때문에 route를 인자값으로 받아줌
  if (window.Kakao) {
    const kakao = window.Kakao;
    if (!kakao.isInitialized()) {
      kakao.init(import.meta.env.VITE_REACT_APP_JavaScript_KEY); // 카카오에서 제공받은 javascript key를 넣어줌 -> .env파일에서 호출시킴
    }

    kakao.Share.sendDefault({
      objectType: "feed",
      content: {
        title: "[갈래] 우리 여행 갈래?",
        description: title,
        imageUrl:
          "https://github.com/hyj01230/gallae_fe/blob/main/public/img/gallae.png?raw=true",
        link: {
          // [내 애플리케이션] > [플랫폼] 에서 등록한 사이트 도메인과 일치해야 함
          mobileWebUrl: `https://gallae-fe.vercel.app/posts/${postId}`,
          webUrl: `https://gallae-fe.vercel.app/posts/${postId}`,
        },
      },
      social: {},
      // 버튼 전체내용 빈 배열로 설정해야 버튼 숨겨짐!
      buttons: [
        {
          title: "",
          link: {
            mobileWebUrl: "",
            webUrl: "",
          },
        },
        {
          title: "",
          link: {
            mobileWebUrl: "",
            webUrl: "",
          },
        },
      ],
    });
  }
};

 

③ 공유하기 버튼에 onclick 연결(postId, title 넘기기)

import { shareKakao } from "../util/shareKakaoLink";

<div
  onClick={() => shareKakao(item.title, item.postId)}
>
  공유하기
</div>;

 

 참고 

• https://velog.io/@marksen/React-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0-%EA%B8%B0%EB%8A%A5