[React+typescript] 카카오톡 공유기능 추가하기

Today, What I learned?

유저 피드백을 반영하여, 기존의 공유 기능에서 카카오톡 공유를 추가하기로 했다. (아무래도 많이 쓰이니까)

유저 피드백 중 일부

이전 프로젝트에도 구현되어 있던 부분이라 (담당하진 않음) 꽤 많은 참고를 했음에도?..

조금 다르게 적용하려다 보니 오류가 좀 발생해서 기록..

 

 

사전 작업

일단 카카오 디벨롭스에서 앱 등록과 플랫폼에 도메인 등록이 필요하다.

앱을 등록하면 앱 키를 확인할 수 있고, 여기서 필요한 값은 자바스크립트 키값. env 파일에 추가해 주자!

 

 

또 플랫폼에서 Web에 도메인을 추가해 준다.

나는 배포주소랑 로컬호스트를 추가해 주었다.

추가적으로 PR시 vercel 프리뷰에서 확인하고 싶다면 프리뷰 주소를 추가해줘야 한다.

 

 

 

index.html

index.html의 헤더 안에 카카오 스크립트를 추가해 준다.

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

 

 

 

d.ts

타입스크립트를 쓰고 있기 때문에.. KaKao 객체에 대한 타입 지정이 필요하다.
Window 객체를 확장해서 인터페이스로 정의해 주기! 이걸 하지 않는다면 에러가 발생한다 😇

interface Window {
  Kakao: any;
}

 

 

 

카카오 API 초기화

공유하기 기능이 들어가는 페이지에 useEffect로 카카오 API 초기화를 할 수 있도록 넣어주었다.
우리 프로젝트에서 현재 카카오 API를 쓰는 부분은 여기뿐이기 때문에,,

useEffect(() => {
    if (!window.Kakao.isInitialized()) {
      window.Kakao.init(process.env.REACT_APP_KAKAO_API_KEY);
    }
  }, []);

처음에 if문을 안 넣었다가, 이미 초기화가 되었다는 오류가 콘솔에 찍히는 걸 보고 if문을 추가해 주었다.

 

 

이벤트 핸들러 함수 추가

이제 이벤트 핸들러를 추가!

카카오 디벨롭스를 보면 Kakao.Share를 통해서 공유기능을 구현할 수 있다.

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

Kakao Developers

 

 

 

나는 제목, 30자까지의 내용, 썸네일이 들어가도록 했다. 더 많은 옵션이 있지만 필요한 것이 이 정도라 여기까지.. 👀

const handleShareKakaoClick = () => {
    if (window.Kakao) {
      const kakao = window.Kakao;

      kakao.Share.sendDefault({
        objectType: 'feed',
        content: {
          title: title,
          description: content.substring(0, 30) + '...',
          imageUrl:
            thumbnail ??
            '-디폴트 썸네일-',
          link: {
            mobileWebUrl: currentURL,
            webUrl: currentURL,
          },
        },
      });
    }

 

 

우리 프로젝트에서는 썸네일 이미지가 없을 경우 디폴트 이미지를 보여주는데, 이 이미지는 로컬에만 저장되어 있기 때문에..

디폴트 이미지에 대한 이미지 파일 URL이 필요해서 이건 구글 드라이브에 올려 가져왔다.

 

 

 

그럼 이제 핸들러를 onClick 이벤트로 걸어주면 적용 완.

<ShareKaKaoArea>
    <ShareKaKaoBtn onClick={handleShareKakaoClick}>
        <KaKaoIconImg src={kakaoIcon} />
    </ShareKaKaoBtn>
</ShareKaKaoArea>

 

 

공유버튼 누르면 이렇게 잘 넘어간다~

 

 

쓰고 보니 생각보다 복잡하지 않은 것 같은 느낌이 드는데 암튼 잘 적용되었다~