[Next.js] 카카오톡 공유하기 버튼 기능 만들기 (feat. TS)

📖 들어가며

이 포스팅은 Next.js 11 버전(page router) 환경에서 작성된 글입니다.
13버전 이후 app router 환경에서 구현하는 방법은 이 포스팅에서 1 ~ 1-3까지만 보시고 여기를 참고해주세요.

Next.js + Typescript 환경에서 토이 프로젝트를 진행하던 중 카카오톡으로 공유하기 기능이 필요해서 구현을 했었는데, 몇몇 오류도 마주치고 따로 정리를 하면 좋을 것 같아서 이렇게 정리하게 됩니다.

1. 애플리케이션 등록하기

일단 첫 번째로 개발하기에 앞서서 Kakao Developers에서 어플리케이션 등록을 해줘야 합니다.

1-1 로그인

사이트에 접속 해주시고 첫 화면에서 로그인을 해주시고 '내 애플리케이션'을 클릭해주세요.

1-2 애플리케이션 추가하기

그러면 이렇게 애플리케이션을 추가할 수 있는 화면이 나옵니다.

여기서 '애플리케이션 추가하기'를 눌러주세요.

'애플리케이션 추가하기'를 클릭하면 이렇게 추가할 수 있는 모달 창이 나옵니다.

앱 이름에는 만들고자 하는 서비스 이름을 기재해주시고,

사업자명에는 사업자명이 없으면 본인 이름을 적어주셔도 괜찮습니다.

추가가 완료 되었으면 해당 추가한 애플리케이션의 요약정보에는 본인이 생성한 애플리케이션의 앱 키들이 존재합니다.

여기서 저희는 JavaScript 키를 사용할 것입니다.

1-3 Web 플랫폼 등록

좌측 메뉴에서 플랫폼이라는 메뉴를 클릭해주시고 저희가 사용할 콘텐츠는 Web이니깐 'Web 플랫폼' 등록 버튼을 클릭해주시면 아래와 같은 화면이 나오는데, 여기서 저희가 개발환경에서 사용할 서버 주소와, 배포를 하셨으면 배포한 주소도 같이 적어주시면 됩니다.

이제 카카오톡 공유기능을 구현할 준비단계는 끝났습니다.

2. 적용

2-1 JavaScript SDK 추가하기

이제 해당 기능을 사용하기 위해서는 SDK를 추가해 줘야 합니다.

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

위와 같은 script 태그를 <head> 사이에 작성해 줘야 하는데,

next.js에서는 _documnet에서 공통적으로 사용할 <head> 또는 <body> 태그 등 안에 들어갈 내용들을 커스텀할 때 사용합니다. 이에 대한 자세한 내용은 공식문서를 참고해주세요.

https://nextjs.org/docs/advanced-features/custom-document

Advanced Features: Custom `Document` | Next.js

Extend the default document markup added by Next.js.

nextjs.org

그럼 카카오톡 공유 기능을 구현할 프로젝트에 구성을 해주도록 합시다.

'./pages/_document.tsx'

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
         <script
            defer
            src="https://developers.kakao.com/sdk/js/kakao.min.js"
          ></script>
        <Head/>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

2-2 env

처음에 Kakao Developers에서 애플리케이션 추가하고 요약 탭에서 봤던 JavaScript 키를 env파일로 작성해줍시다.

API Key는 코드에 직접 명시하는 것보다 보안상 env파일로 작성해 두는 것이 좋습니다.

루트 폴더에 .env 파일을 생성하고 아래와 같이 작성해주세요.

(API 키를 작성할 때 ' ' 따옴표는 필요 없습니다.)

'.env'

NEXT_PUBLIC_KAKAO_API_KEY=API키

2-3 initialize

이제 JavaScript 키를 이용해서 initialize를 해줘야 합니다.

initialize는 아래와 같이 해줄 수 있습니다.

상위 컴포넌트 (ex. Layout or _app)에서 마운트 될 때 적용될 수 있도록 해줍시다.

하나의 페이지에서만 공유 기능을 사용할 것이라면 사용할 페이지에서 작성해도 됩니다.

저는 여러 페이지에서 사용을 하기 위해서 상위 컴포넌트(Layout.tsx)에 작성해주었습니다.

ex)

'./src/components/common/Layout.tsx'

import GlobalStyle from 'styles/GlobalStyle';
import styled from 'styled-components';
import { size } from 'styles/theme';
import Footer from './Footer';
import DarkModeBtn from '../Buttons/DarkModeBtn';
import { useEffect } from 'react';

const Wrapper = styled.div`
  width: 100%;
  max-width: ${size.mobile};
  min-height: 100vh;
  margin: auto;
  padding: ${({ theme }) => theme.padding.base};
  display: flex;
  flex-direction: column;
  justify-content: center;
`;

interface IProps {
  children: React.ReactNode;
}

const Layout = ({ children }: IProps) => {
  useEffect(() => {
      window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_API_KEY);
  }, []);

  return (
    <Wrapper>
      <GlobalStyle />
      <DarkModeBtn />
      {children}
      <Footer />
    </Wrapper>
  );
};

export default Layout;

그리고 이렇게만 작성하게 되면 window 객체 안에 Kakao가 없다고 오류가 발생할 것입니다.

window 객체에 Kakao가 있다고 알려줘야 합니다.

전역으로 window interface를 정의해줍시다.

'./pages/_app.tsx'

import type { AppProps } from 'next/app';
import Layout from 'src/components/common/Layout';
import ThemeProvider from 'src/context/ThemeProvider';

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

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ThemeProvider>
  );
}
export default MyApp;

TypeScript에서 any 타입을 최대한 지향하는 것이 좋지만, Kakao의 type을 따로 알 수 없어서 any로 명시했습니다.

이렇게 명시를 해주면 오류가 발생하지 않고 window 객체의 Kakao에 접근이 가능합니다.

2-4 onClick function

저는 카카오 공유 기능을 하는 버튼 컴포넌트를 따로 작성했습니다.

import Button from '../common/Button';
import styled from 'styled-components';
import KakaoIcon from 'public/images/kakaotalk_logo_icon_147272.svg';

const SButton = styled(Button)`
  display: flex;
  justify-content: center;
  align-items: center;
`;

const KakaoBtn = () => {
  const onClick = () => {
    const { Kakao, location } = window;
    Kakao.Link.sendScrap({
      requestUrl: location.href,
    });
  };
  return (
    <SButton fontColor="yellow" borderColor="whiteYellow" onClick={onClick}>
      <KakaoIcon viewBox="0 0 60 48" width="30px" height="23px" />
      카카오톡 공유하기
    </SButton>
  );
};

export default KakaoBtn;

버튼을 클릭했을 때 실행하는 onClick 함수에서 기능을 하는 코드를 작성해 주었습니다.

아래와 같은 부분은 requestUrl이 공유할 Url입니다.

location.href를 작성해 줌으로써 현재 위치해있는 URL을 공유할 수 있도록 했습니다.

 Kakao.Link.sendScrap({
      requestUrl: location.href,
    });

그리고 중요한 부분은 카카오 공유 방식에 있어서 여러 가지 방법이 있습니다.

ex)

https://developers.kakao.com/docs/latest/ko/message/js-link

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

저는 SEO를 위해 페이지에 meta og tag를 작성해서 공식문서(위에 링크)를 참고해서 스크랩한 웹 페이지 정보를 바탕으로 메시지 내용을 구성할 수 있도록 Kakao.Link.sendScrap 메서드를 사용했습니다.

위 링크를 참고해 보시면 직접 메세지 제목, 내용 등 구성할 수 있는 메서드도 있습니다.

저는 많은 것들 중 sendScrap를 사용한 것입니다.

그리고 만약 개발 환경(localhost) 환경에서 sendScrap를 통한 공유 기능을 테스트할 시 카카오에서 locahost:3000 주소를 스크랩할 수 없기 때문에 제목, 내용 등 제대로 표시가 되지 않는 게 정상입니다.

별다른 오류가 발생하지 않는다면 프로젝트를 배포한 주소에서 테스트를 해보시면 정상적으로 메시지 내용이 나타나는 걸 확인할 수 있습니다.

📕 마무리

Next.js + TypeScript 환경에서 카카오톡으로 공유하기 기능을 구현하는 방법에 대해서 알아봤습니다.

혹시 이해가 안 되시거나 구현하는 데에 있어서 모르시는 부분이 있으시면 댓글 남겨주세요!

저작자표시 비영리 변경금지