페이지 기능: 카카오 공유하기 기능 추가

src/components/shared/header/headerItems/RightIcon.tsx

@@ -8,7 +8,7 @@ import FilledHeart from '@components/icons/FilledHeart';
 import Filter from '@components/icons/Filter';
 import Heart from '@components/icons/Heart';
 import Search from '@components/icons/Search';
-import Share from '@components/icons/Share';
+import KakaoShareButton from '@shared/kakao-share-button/KakaoShareButton';
 
 import { RightIconProps } from '../types/headerType';
 
@@ -50,7 +50,7 @@ function RightIcon({
             : <Heart onClick={handleHeartClick} />}
         </li>
         <li>
-          <Share />
+          <KakaoShareButton />
         </li>
       </ul>
     );

src/components/shared/kakao-share-button/KakaoShareButton.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+
+import Script from 'next/script';
+
+import Share from '@/components/icons/Share';
+import useKakaoShare from '@hooks/useKakaoShare';
+
+function KakaoShareButton() {
+  const containerId = useKakaoShare('#kakao-link-btn', process.env.NEXT_PUBLIC_KAKAO_APP_JS_KEY!);
+
+  return (
+    <>
+      <button id={containerId} style={{ cursor: 'pointer' }}>
+        <Share />
+      </button>
+      <Script
+        strategy="afterInteractive"
+        type="text/javascript"
+        src={`https://t1.kakaocdn.net/kakao_js_sdk/${process.env.NEXT_PUBLIC_KAKAO_LOGIN_VERSION}/kakao.min.js`}
+      />
+    </>
+  );
+}
+export default KakaoShareButton;

src/hooks/useKakaoShare.ts

@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { useCallback, useEffect } from 'react';
+
+declare global {
+  interface Window {
+    Kakao: any
+  }
+}
+
+function useKakaoShare(containerId: string, key: string) {
+  const createShareButton = useCallback(() => {
+    // kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
+    if (window.Kakao) {
+      const kakao = window.Kakao;
+      // 중복 initialization 방지
+      if (!kakao.isInitialized()) {
+        // 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
+        kakao.init(key);
+      }
+      kakao.Share.createDefaultButton({
+        // Render 부분 id=kakao-link-btn 을 찾아 그부분에 렌더링을 합니다
+        container: containerId,
+        objectType: 'feed',
+        content: {
+          title: 'Washfit',
+          description: '안전한 세차용품 정보 제공 플랫폼',
+          imageUrl:
+            'https://tago.kr/images/sub/TG300-D02_img01.png',
+          link: {
+            webUrl: 'https://dev.washfit.site/',
+            mobileWebUrl: 'https://dev.washfit.site/',
+          },
+        },
+        social: {
+          likeCount: 77,
+          commentCount: 55,
+          sharedCount: 333,
+        },
+        buttons: [
+          // 카카오톡 웹에서 보기
+          {
+            title: '웹으로 보기',
+            link: {
+              mobileWebUrl: 'https://dev.washfit.site/',
+              webUrl: 'https://dev.washfit.site/',
+            },
+          },
+          // 카카오톡 모바일에서 보기
+          {
+            title: '앱으로 보기',
+            link: {
+              mobileWebUrl: 'https://dev.washfit.site/',
+              webUrl: 'https://dev.washfit.site/',
+            },
+          },
+        ],
+      });
+    }
+  }, [containerId, key]);
+
+  useEffect(() => {
+    createShareButton();
+  }, [createShareButton]);
+
+  // #kakao-link-btn과 같은 id에서 '#'제거 과정
+  const id = containerId.substring(1);
+  return id;
+}
+
+export default useKakaoShare;