[SP0] 메이커스 채널 1:1 채팅 연결

Summary

closed #382

카카오 디벨로퍼 등록
JS SDK 설치
메이커스 채널과 1:1 채팅하기 연결

Screenshot

Footer 의견 제안하기

https://github.com/sopt-makers/sopt.org-frontend/assets/81505421/20875a9e-2004-4c3a-8996-df9622db041e

500에러 문의하기

https://github.com/sopt-makers/sopt.org-frontend/assets/81505421/b7a167a8-a1a0-40a3-b2e3-0d75cc5c7136

Comment

카카오 채널 연동 공식 문서

카카오 디벨로퍼 가입 및 플랫폼 등록 카카오 디벨로퍼에 제 계정으로 sopt.org, localhost:3000, 저희집 IP:3000 뚫어놨습니다
JS SDK 설치 JS SDK는 <script>로만 설치해야 하고, 또 모든 페이지에서 작동할 수 있도록 최상단에서 실행되어야 한다고 해서 _app에 추가해줬습니다. 또 기존에 GoogleTagManager Script 구현방식과 형태를 통일하기 위해 kakao(폴더) > Script.tsx(파일) > KakaoScript라는 컴포넌트로 분리해서 설치 스크립트 넣어줬습니당
JS SDK 초기화

🚨 JS Key는 env 파일로 관리해야 합니다. slack으로 따로 전달드리겠습니다!

Kakao.init('JAVASCRIPT_KEY');

이런 코드로 초기화 해줘야 하는데, SDK 설치 스크립트가 모두 실행된 후에 초기화가 진행되어야 합니다. 따라서 next/script의 Script 컴포넌트의 속성인 onLoad 안에 SDK 초기화 함수를 넣어줘서 동기적인 실행을 구현했습니다 .

export default function KakaoScript() {
  const handleOnLoad = () => {
    window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_KEY);
  };

  return (
    <Script
      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.1/kakao.min.js"
      integrity="sha384-kDljxUXHaJ9xAb2AzRd59KxjrFjzHa5TAoFQ6GbYTCAG0bjM55XohjjDT7tDDC01"
      crossOrigin="anonymous"
      onLoad={handleOnLoad}
    ></Script>
  );
}

채널과 연결

기존에는 문의하기, 의견 제안하기 모두 외부 링크로 이어져야하기 때문에 next/link 컴포넌트 즉 a태그로 구현되었는데, 이를 button 태그로 바꾸고 onClick 함수에 1:1채팅으로 연결하는 로직을 넣어줬습니다

  <S.ContactButton type="button" onClick={handleClickKakao}>
    문의하기
  </S.ContactButton>

  const handleClickKakao = () => {
    window.Kakao.Channel.chat({
      channelPublicId: '_sxaIWG', // 이건 저희 메이커스 채널 고유 id 입니다! 
    });
  };

🚀주의 공식문서에서 하라는 대로만 하면 TS에서는 타입에러가 발생합니다 window 객체에 Kakao 모듈을 못찾겠다고 에러가 나는데요, 따라서 window 전역 객체 내에 우리가 사용할 Kakao 모듈 타입들을 친절히 알려줘야 합니다.

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

대부분의 아티클에서 Kakao 모듈의 타입을 알 수 없다며 any를 쓰길래 저도 처음엔 이렇게 any를 썼는데요 공홈의 기마이를 죽이는 행위인 것 같아서 다시 제대로 타입 지정을 해주었습니다 제가 사용하는 세가지 메소드의 타입을 Kakao 공식문서 참고해서 직접 넣어줬어요 !

declare global {
  interface Window {
    Kakao: Kakao;
  }

  interface Kakao {
    init: (appKey?: string) => void;
    initialized: () => boolean;
    Channel: {
      chat: (setting: { channelPublicId: string }) => void;
    };
  }
}

이렇게 공식문서가 제공하는 interface 참고해서 필요한 타입 설정해주는 것도 조은 경험인 것 가타요

sopt-makers / sopt.org-frontend