[React] 카톡 플러스 친구 채널 채팅 연결 버튼 구현

📌 들어가며

React Hook을 활용하여 웹 페이지에서 카톡 플러스 친구 채널과 1:1 채팅을 연결하는 기능이 포함된 버튼을 만드는 과정을 소개합니다.

📚 목차

1. 카톡 플러스 친구 생성
2. 카톡 앱 서비스 생성
3. 카카오 SDK 추가
4. 채팅 기능 추가
5. 결과

1. 카톡 플러스 친구 생성

연결할 카톡 플러스 친구 채널을 생성합니다.
https://center-pf.kakao.com/

카카오톡 채널 관리자센터

2. 카톡 앱 서비스 생성

아래 링크를 통해 카톡 앱 서비스를 생성합니다(그림 1).
https://developers.kakao.com/console/app

카카오계정 로그인

그림 1. 카톡 애플리케이션 생성

3. 카카오 SDK 추가
index.html 파일 내 title 태그 밑에 카카오 SDK를 추가합니다.

...
    <title>Hey Tech Tistory Blog</title>
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
...

4. 채팅 기능 추가

1) 코드

...  

  useEffect(()=>{
    const script = document.createElement('script');
    script.async = true;
    try{
      if (window.Kakao) {
        const kakao = window.Kakao;
        if (!kakao.isInitialized()) {
          kakao.init("JavaScript 서비스 Key");
        }
      }

    window.Kakao.Channel.createChatButton({
      container: '#kakao-talk-channel-chat-button',
      channelPublicId: '카톡플러스친구ID',
      title: 'consult',
      size: 'small',
      color: 'yellow',
      shape: 'pc',
      supportMultipleDensities: true,
    });
    document.body.appendChild(script);
    document.body.removeChild(script);
  } catch (err){}
  }, [])

...

여러 버튼 관련 옵션은 아래의 공식 개발 문서를 참고하시길 바랍니다.
https://developers.kakao.com/sdk/reference/js/release/Kakao.Channel.html#.createChatButton

Kakao Developers

2) 앱 Key 복붙

먼저, 위의 코드에서 8번째 라인에 앱 Key 값을 입력해야 합니다. 앞서 생성했던 카톡 앱 서비스에 들어가셔서 JavaScript Key 값을 복붙 합니다.

그림 2. 카톡 앱 서비스 Key

3) 카톡 플친 ID 복붙

다음으로, 카톡 플러스친구 ID를 입력해야 합니다. 앞서 생성했던 카톡 플친 페이지에서 사이드 메뉴에 "홍보하기"를 클릭하시면, 아래의 그림 3처럼 채널 URL을 확인하실 수 있습니다. 이를 위의 코드 14번째 라인 channelPublicId 변수에 복붙 합니다.

그림 3. 카톡 플친 ID

4) 버튼 생성

...

return (
	<div id="kakao-talk-channel-chat-button"></div>
);

...

5. 결과

화면에 아래의 그림 4처럼, 버튼이 생성된 것을 확인하실 수 있습니다.

그림 4. 결과화면

버튼 클릭 시, 아래의 그림 5처럼, 카톡 플친 채널과 1:1 대화로 연결되는 것을 확인하실 수 있습니다.

그림 5. 카톡 플친 채널과 채팅창 연결 모습

❗️ 카톡 플친 채팅 안 될 경우

카톡 플친과 채팅이 바로 연결 안 될 경우, 1:1 채팅이 비활성화되어 있기 때문일 확률이 높습니다. 아래의 그림 6과 같이, 카톡 플친 웹 페이지에서 1:1 채팅을 활성화해 주세요.

그림 6. 카톡 플친 1:1 대화 활성화

📌 맺으며

바로 위에서 결과 예시로써 보여드린, 가볍게 즐겨볼 만한 카톡 대화 내용 분석 서비스를 소개합니다 :)
무료 서비스이며, 업로드 한 파일은 분석 이외에 절대 활용되거나 서버에 저장되지 않습니다😊
http://www.advancer-katalk.click/

카톡분석 왕 테스트

---

포스팅 내용에 오류가 있을 경우 아래에 댓글 남겨주시면 감사드리겠습니다.
그럼 오늘도 즐거운 하루 보내시길 바랍니다 :)
고맙습니다😊