카카오톡 링크 공유, URL 복사 로직을 작성한다. (SWYP-team-2th#114)

* 카카오톡 링크 공유, URL 복사 로직을 작성한다. * 공유하기 적용 * 로고 추가 * 테스트용 코드 추가 * og image 추가 * 썸네일 제거 * 예제 제거
YOOJS1205 · Feb 27, 2025 · b6a559c · b6a559c
1 parent 398aadf
commit b6a559c
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -4,10 +4,19 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      property="og:image"
+      content="https://image.photopic.site/images-dev/202502272107360.jpg"
+    />
     <title>Vite + React + TS</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script
+      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js"
+      integrity="sha384-DKYJZ8NLiK8MN4/C5P2dtSmLQ4KwPaoqAfyA/DfmEc1VDxu4yyC7wy6K1Hs90nka"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>
diff --git a/src/api/useKakaoShareUrl.ts b/src/api/useKakaoShareUrl.ts
@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import { useBottomSheet } from '@/components/common/BottomSheet/hooks';
+
+interface KakaoShareUrlProps {
+  author: string;
+  shareUrl: string;
+}
+
+export function useKakaoShareUrl({ author, shareUrl }: KakaoShareUrlProps) {
+  const { closeBottomSheet } = useBottomSheet();
+
+  useEffect(() => {
+    if (window.Kakao && !window.Kakao.isInitialized()) {
+      console.log(import.meta.env.VITE_KAKAO_JAVASCRIPT_APP_KEY);
+      window.Kakao.init(import.meta.env.VITE_KAKAO_JAVASCRIPT_APP_KEY);
+    }
+  }, []);
+
+  const handleClickKakaoShareButton = () => {
+    if (!window.Kakao.isInitialized()) {
+      console.error('카카오 SDK가 초기화되지 않았습니다.');
+      return;
+    }
+
+    try {
+      window.Kakao.Share.sendDefault({
+        objectType: 'text',
+        text: `${author}님이 투표를 공유했어요! 💛`,
+        link: {
+          mobileWebUrl: shareUrl,
+          webUrl: shareUrl,
+        },
+      });
+
+      closeBottomSheet();
+    } catch (error) {
+      console.error('카카오 공유 에러:', error);
+    }
+  };
+
+  return {
+    handleClickKakaoShareButton,
+  };
+}
diff --git a/src/components/common/LinkShareBottomSheet/LinkShareBottomSheet.tsx b/src/components/common/LinkShareBottomSheet/LinkShareBottomSheet.tsx
@@ -0,0 +1,36 @@
+import BottomSheet from '../BottomSheet';
+import Icon from '../Icon';
+import useLinkShareBottomSheet from './hooks';
+
+interface LinkShareBottomSheetProps {
+  author: string;
+  shareUrl: string;
+}
+
+export default function LinkShareBottomSheet({
+  author,
+  shareUrl,
+}: LinkShareBottomSheetProps) {
+  const { handleClickKakaoShareButton, handleClickUrlShareButton } =
+    useLinkShareBottomSheet({ author, shareUrl });
+
+  return (
+    <BottomSheet title="투표 공유하기" hasCloseButton>
+      <div className="flex flex-col gap-5 text-title-medium">
+        <button
+          onClick={handleClickKakaoShareButton}
+          className="flex gap-4 items-center"
+        >
+          <p>카카오로 공유하기</p>
+        </button>
+        <button
+          onClick={handleClickUrlShareButton}
+          className="flex gap-4 items-center"
+        >
+          <Icon name="Link" size="medium" />
+          <p>URL로 공유하기</p>
+        </button>
+      </div>
+    </BottomSheet>
+  );
+}
diff --git a/src/components/common/LinkShareBottomSheet/hooks.ts b/src/components/common/LinkShareBottomSheet/hooks.ts
@@ -0,0 +1,42 @@
+import { useBottomSheet } from '../BottomSheet/hooks';
+import useToast from '../Toast/hooks';
+import { useKakaoShareUrl } from '@/api/useKakaoShareUrl';
+
+interface UseLinkShareBottomSheetOptions {
+  author: string;
+  shareUrl: string;
+}
+
+export default function useLinkShareBottomSheet({
+  author,
+  shareUrl,
+}: UseLinkShareBottomSheetOptions) {
+  const toast = useToast();
+  const { closeBottomSheet } = useBottomSheet();
+  const { handleClickKakaoShareButton } = useKakaoShareUrl({
+    author,
+    shareUrl,
+  });
+
+  const handleClickUrlShareButton = () => {
+    navigator.clipboard
+      .writeText(shareUrl)
+      .then(() => {
+        toast.success({
+          title: '투표 주소가 복사됐어요!😉',
+        });
+        closeBottomSheet();
+      })
+      .catch(() => {
+        toast.error({
+          title: '투표 주소 복사에 실패했어요..',
+          description: '다시 시도해주세요.',
+        });
+      });
+  };
+
+  return {
+    handleClickKakaoShareButton,
+    handleClickUrlShareButton,
+  };
+}
diff --git a/src/components/common/LinkShareBottomSheet/index.ts b/src/components/common/LinkShareBottomSheet/index.ts
@@ -0,0 +1 @@
+export { default } from './LinkShareBottomSheet';
diff --git a/src/types.d.ts b/src/types.d.ts
@@ -0,0 +1,16 @@
+interface Window {
+  Kakao: {
+    Share: {
+      sendDefault: (options: {
+        objectType: string;
+        text: string;
+        link: {
+          mobileWebUrl: string;
+          webUrl: string;
+        };
+      }) => void;
+    };
+    init: (key: string) => void;
+    isInitialized: () => boolean;
+  };
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default } from './LinkShareBottomSheet';