[NextJS] 소셜 공유하기 ( 카카오톡, 트위터, 페이스북 )

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^5.1.6"

---

😢 내가 겪은 문제

공유하기 버튼을 생성하는 일이 제일 많은 일 중에 하나라고 뽑을 수 있을 정도로 참 많이 작업을 하는 것 같다.

그래서 함수로 만들어서 필요할때마다 붙여쓸 수 있도록 해놓았는데,

다른 프로젝트를 하거나 필요한 상황이 있을 때 쉽게 가져가다 붙일 수 있도록 하려고 한다.

시스템 공유나 URL 복사하기 같은 경우에는 이전 포스트에서 정리해놓았으니

확인하고 오면 더 시스템 공유까지 붙여 있어보이는 공유하기를 만들 수 있을 것이다.

[ 시스템 공유하는 방법 & URL 복사하는 방법 보고오기 ]

[NextJS] NextJS 모바일 시스템공유 하는방법

카카오톡

먼저 카카오톡 디벨로퍼 ( Kakao Developers ) 에 들어가서 내 애플리케이션으로 들어간다.

Kakao Developers

애플리케이션을 추가하고 나면 앱키를 확인 할 수 있는데 우리가 필요한건 JavaScript 키 이다.

JavaScript 키를 복사해 놓고, 플랫폼에 들어가서 Web 도메인을 등록하자.

보통 3000 포트 번호를 사용하니, http://localhost:3000 을 등록해놓으면 된다.

그다음 프로젝트로 들어가서 필요한 코드들을 삽입해주자.

app.tsx

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

_document.tsx

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

.env

NEXT_PUBLIC_KAKAO_API_KEY=복사해놓은 JAVASCRIPT 키

Share.tsx

useEffect(() => {
	window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_API_KEY);
}, []);

...

<KakaotalkIconSVG
  onClick={() => kakaoTalkShare()}
/>

kakaoTalkShare.tsx

export const kakaoTalkShare = () => {
  const { Kakao, location } = window;
  Kakao.Share.sendDefault({
    objectType: "feed",
    content: {
      title: "타이틀",
      description: "설명",
      imageUrl:
        "공유됐을 때 나오는 이미지",
      link: {
        mobileWebUrl: location.href,
        webUrl: location.href,
      },
    },
  });
};

카카오톡 공유 템플릿 같은 경우에는 종류도 다양하고, 붙일 수 있는 것도 다양하다. 그러니 자신에게 필요한거 찾아서

사용하면된다. 나는 보이는게 가장 중요하다고 생각하기 때문에, 피드나 리스트 형식을 애용하려고 한다. ( 가장 있어 보이기 때문이다. )

카카오톡 공유하기가 생각보다 할게 많아서 귀찮긴 하지만 그래도 우리나라는 카카오톡을 제일 많이 사용하니까 필수라고 할 수 있으니

귀찮다고 하지말고 꼭 해놓도록 하자.

페이스북

페이스북은 워낙 간단해서 뭐 할것도 없다. 매우 간단하니 그냥 복사해서 사용해도 무방하다.

export const faceBookShare = () => {
  return window.open(
    "http://www.facebook.com/sharer/sharer.php?u=" + location.href
  );
};

트위터

트위터도 페이스북과 마찬가지로 아주 간단하다. 이것또한 간단하니 그냥 복사해서 사용해도 무방하다.

그나마 다른점이 있다면 내용을 붙이는 정도 ... ?

export const twitterSharre = () => {
  const text = "내용";
  return window.open(
    "https://twitter.com/intent/tweet?text=" + text + "&url=" + location.href
  );
};

시스템공유까지 해서 총 4개의 공유 버튼을 만들 수 있는데

사실 카카오톡 공유하기 만드는게 제일 귀찮지, 나머지는 간단하다.