들어가며

외개인 프로젝트에서는 사용자들이 다른 사람의 프로필을 열람할 수 있는 기능을 제공한다. 사용자 프로필 페이지를 통해 사용자는 다른 사람의 프로필 정보를 확인하고, 자신의 취향과 일치하는 경우 매칭 신청을 할 수 있다. 우리는 더 나아가 프로필을 공유하는 기능도 추가하고 싶었다. 예를 들어, 나의 프로필을 다른 사람에게 공유하거나, 다른 사람의 프로필을 내 친구에게 공유하여 소개시켜줄 수도 있다. 우리는 카카오톡 메시지 공유하기 API를 이용하여 공유 기능을 개발하기로 결정했다.

카카오톡 공유하기 API

카카오 개발자 사이트에서 애플리케이션 등록

카카오에서 제공하는 API를 사용하기 위해서는 우선 카카오 개발자 사이트에 접속하여 애플리케이션을 등록해야한다.
https://developers.kakao.com/
위 사이트를 접속하여 계정을 만들고 로그인을 완료한다.

위에 내 애플리케이션 탭을 클릭한다.

그러고 나서 애플리케이션 추가하기를 눌러서 애플리케이션을 등록하면된다. 그러면 추가하기 버튼 밑에처럼 애플리케이션이 생생된 것을 볼 수 있다. 생성된 애플리케이션을 클릭하면

이렇게 앱에 대한 자세한 설정페이지로 이동하게 된다. 앱 키를 클릭하면 다양한 플랫폼들에 대한 앱 키를 확인할 수 있다. 우린 웹이기 때문에 JavaScript 키를 사용할 예정이다.

SDK 포함

index.html 파일의 태그에 카카오 SDK를 포함한다.

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js" integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4" crossorigin="anonymous"></script>

여기서 카카오 SDK란 무엇일까?
SDK(Software development kit)란 다양한 서비스(예를 들어 카카오톡, 카카오지도, 톡캘린더 등)에 쉽게 접근하고 사용할 수 있도록 도와주는 JavaScript 라이브러리다. 이를 통해 개발자는 카카오의 API를 활용하여 사용자 인증, 공유, 결제, 메시지 전송 등 다양한 기능을 웹 애플리케이션에 통합할 수 있다.

SDK 초기화

전 단계에서 JavaScript SDK를 웹 페이지에 포함한 후, 아래의 JavaScript SDK 초기화 함수를 호출한다. 아까 확인했던 JAVASCRIPT_KEY에 [내 애플리케이션] > [앱 키]에서 확인한 JavaScript 키를 할당해야 한다.

  	useEffect(() => {
		// 카카오 SDK 초기화
		if (!window.Kakao.isInitialized()) {
			window.Kakao.init(process.env.REACT_APP_KAKAO_API_KEY);
		}
	}, []);

useEffect 훅을 통해 컴포넌트가 처음 렌더링될 때 SDK가 초기화가 되어있지 않으면 초기화 기능을 수행하도록 하였다. 앱 키는 환경변수로 저장하여 사용했다.

카카오톡 공유하기 버튼 생성

  <button onClick={clickShareBtn} className="whitespace-nowrap">
    <img src={Share} />
  </button>
  
  
  const clickShareBtn = () => {
    if (window.Kakao) {
        const kakao = window.Kakao;
        kakao.Share.sendDefault({
            objectType: 'feed',
            content: {
                title: '이 룸메 어떠세요?',
                description: userInfo.introduction,
                imageUrl: 'https://i.ibb.co/dts410Q/oegaeinlogo.png',
                link: {
                    mobileWebUrl: `${window.location.origin}${location.pathname}`,
                    webUrl: `${window.location.origin}${location.pathname}`,
                },
            },
            itemContent: {
                profileText: `${userInfo.name} 님의 글 | 외개인`,
                profileImageUrl: userInfo.photo_url,
            },
            buttons: [
                {
                    title: '룸메이트 보러가기',
                    link: {
                        mobileWebUrl: `${window.location.origin}${location.pathname}`,
                        webUrl: `${window.location.origin}${location.pathname}`,
                    },
                },
            ],
        });
    }
};

공유하기 버튼을 클릭했을 때 카카오톡 공유 기능을 호출하는 함수를 작성했다. JavaScript SDK의 Kakao.Share 모듈을 사용해 카카오톡 공유 기능을 구현할 수 있다.

https://developers.kakao.com/docs/latest/ko/message/js-link
위 링크에 들어가, "3. 호출 방법 선택하기" 부분을 보면 공유하기 버튼 사용하기, 직접 만든 버튼 사용하기 두 가지 구현 방식에 대한 함수들을 확인할 수 있다. 나는 직접 만든 버튼으로 메시지를 보내는 방식으로, 기본 템플릿을 제작하는 함수인 sendDefault()를 사용하였다. 메시지는 커스텀 방식이 다양하기 때문에 디자인과 기능에 맞게 커스텀하여 잘 사용하면 되겠다. 보여줄 사진이나 내용, 버튼들을 커스텀할 수 있다.

나는 누구의 프로필인지, 프로필에 대한 좋아요, 후기, 공유의 갯수, 프로필로 이동할 수 있는 버튼 정도만 커스텀하여 제작했다.

이렇게 카카오톡으로 친구들에게 프로필을 공유할 수 있게 되었다!