[React] 카카오 공유하기

1. kakao developers 애플리케이션 등록  

1. https://developers.kakao.com/ 에 접속하여 내 애플리케이션 - 애플리케이션 추가하기 등록
2. 플랫폼 등록후 제공되는 키 중 javascript key를 사용합니다.

2. JavaScript SDK 추가

1. useEffect로 sdk를 등록하는 방법이나 index.html에 추가하는 방법으로 sdk를 추가합니다.
2. public 폴더의 index.html에 아래의 sdk를 추가합니다.

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

3. 카카오 공유하기 함수 생성

1. 사용할 컴포넌트에서 공유하기 함수를 만들어 줍니다.(createDefaultButton과 sendDefault를 사용하는 방법 2가지 중 직접 버튼을 만들어서 기능만 사용할 예정이라 sendDefault를 사용하였습니다.)
   Kakao.Share.sendDefault() 함수는 카카오톡 공유하기 버튼을 추가하지 않고, 메시지 보내기 요청만 합니다.
   웹 페이지 구성 요소 중, 카카오톡 공유하기 버튼으로 사용할 버튼 클릭 시 해당 함수를 호출하도록 하는 방식입니다.
   
   
2. https://developers.kakao.com/docs/latest/ko/message/js-link 에서 원하는 방식을 선택(피드, 리스트, 위치, 커머스, 텍스트, 캘린더)하여 예제를 불러와서 입맛대로 수정해 줍니다.

Kakao Developers

 

예시)

 const shareKakao = () => {
    if (window.Kakao) {
      const kakao = window.Kakao;
      if (!kakao.isInitialized()) {
        kakao.init(javascript key);
      }

      kakao.Link.sendDefault({
        objectType: "feed", 
        content: {
          title: "제목입니다",
          description: "설명란입니다",
          imageUrl:
            "https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_medium.png",
          link: {
            mobileWebUrl: "https://www.naver.com",
            webUrl: "https://www.google.com",
          },
        },
        buttons: [
          {
            title: "자세히 보러 가기",
            link: {
              mobileWebUrl: "https://www.naver.com",
              webUrl: "https://www.google.com",
            },
          },
        ],
      });
    }
  };

4. 오류 해결

1. window.Kakao

Kakao로 접근을 하면 리액트에서 읽어내지 못하기 때문에 window.Kakao로 접근해 줍니다.

2. ErrorCode(4012)

https://developers.kakao.com/  > 내 애플리케이션 > 플랫폼에서 개발 서버와 같은 주소를 redirect Url에 추가해 줍니다.

 

 

3. TS type error

ts를 사용 중이라면 window를 사용해도 'Window & typeof globalThis' 형식에 'Kakao' 속성이 없습니다. 에러가 발생합니다.
해당 에러를 해결하기 위해 App.tsx로 이동하여 Kakao의 속성을 넣어줍니다.

declare global {
  interface Window {
    Kakao: any;
  }
}

function App() {
	...
}

 

5. 결과물

공유하기에 해당하는 버튼을 눌렀을 때 화면

 

공유하기 메세지를 받은 화면

 

 

 

참조)

https://velog.io/@bokjunwoo/wm70xwdj

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

https://developers.kakao.com/tool/demo/message/kakaolink