카카오 공유하기버튼 구현

1. 준비 사항

  1) react - vite 로 프로젝트 생성 했을 때의 예시. 

  2) 카카오 디벨로퍼에서 앱 생성

 

 

2. index.html 에 아래의 스크립트를 추가한다.

 - version 에 따른 Intergrity_value 값을 복사하여 넣으면 된다.

 

<사용방법>

https://developers.kakao.com/docs/latest/ko/javascript/getting-started

 

<version별 intergrity_value 값 확인>

https://developers.kakao.com/docs/latest/ko/javascript/download

<script src="https://t1.kakaocdn.net/kakao_js_sdk/${VERSION}/kakao.min.js"
  integrity="${INTEGRITY_VALUE}" crossorigin="anonymous"></script>

 

 

<적용 예시>

// index.html

<script
      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.8/kakao.min.js"
      integrity="sha384-WUSirVbD0ASvo37f3qQZuDap8wy76aJjmGyXKOYgPL/NdAs8HhgmPlk9dz2XQsNv"
      crossorigin="anonymous"
    >

 

 

3. 앱 초기화 

방법 : 1  " 앱 > 앱설정 > 앱 > 일반 " 으로 가서 JavaScript 키를 입력 한다.

<script>
  Kakao.init('${JAVASCRIPT_KEY}');  // 사용하려는 앱의 JavaScript 키 입력
</script>

 

 

방법 : 2 App.tsx 에 useEffect 를 사용하여 초기화를 해도 가능하다.

useEffect(() => {
    if (!window.Kakao.isInitialized()) {
      window.Kakao.init(import.meta.env.VITE_KAKAO_JAVASCRIPT_KEY)
    }
  }, [])

 

 

이때 typescript 를 사용하고 있다면 window에 kakao라는 매서드가 없다는 타입 오류가 발생하기 때문에 아래와 같이 파일을 생성하고 전역으로 타입을 추가한다.

// src/types/kakao.d.ts
export {}

declare global {
  interface Kakao {
    init: (key: string) => void
    isInitialized: () => boolean
    Share: { 
      sendDefault: (options: KakaoShareDefaultOptions) => void
    }
  }
  
  // kakao.Share 내의 버튼 타입  
  interface KakaoShareDefaultOptions { 
    objectType: 'feed' | 'list' | 'location' | 'commerce' | 'text'
    content: {
      title: string
      description?: string
      imageUrl: string
      link: {
        mobileWebUrl: string
        webUrl: string
      }
    }
    itemContent?: {
      profileText?: string
      profileImageUrl?: string
      titleImageUrl?: string
      titleImageText?: string
      titleImageCategory?: string
      items?: { item: string; itemOp: string }[]
      sum?: string
      sumOp?: string
    }
    social?: {
      likeCount?: number
      commentCount?: number
      sharedCount?: number
      viewCount?: number
      subscriberCount?: number
    }
    buttons?: {
      title: string
      link: {
        mobileWebUrl: string
        webUrl: string
      }
    }[]
  }
  
 // window내 Kakao 매서드 타입 정의
  interface Window {
    Kakao: Kakao
  }
}

 

 

4. 버튼 함수 생성

 아래와 같이 버튼 함수를 생성을 하여서 버튼과 연결 시키면 카카오로 해당 내용을 공유 할 수 있게 된다.

const handleKakaoShare = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation()
    const kakao = window.Kakao
    const url = `${window.location.origin}/movie/${id}`
    if (kakao) {
      kakao.Share.sendDefault({
        objectType: 'feed',
        content: {
          title,
          description: '이 영화 어때요?',
          imageUrl: `https://image.tmdb.org/t/p/w500${poster_path}`,
          link: {
            mobileWebUrl: url,
            webUrl: url,
          },
        },
        buttons: [
          {
            title: '자세히 보기',
            link: {
              mobileWebUrl: url,
              webUrl: url,
            },
          },
        ],
      })
    }
  }