feat: 큐카드페이지 버튼 web share API 적용

src/hooks/useShareLink.ts

@@ -1,7 +1,7 @@
 import { useParams } from 'react-router-dom';
 import { notify } from 'utils/toast/copyLinkToast';
 
-const useShareLink = (position?: string) => {
+const useShareLink = (position: string) => {
   const { meetingId } = useParams();
   const route = position === 'cueCard' ? 'q-card' : 'meet';
   const inviteURL = `${window.location.origin}/${route}/${meetingId}`;

src/pages/cueCard/CueCard.tsx

@@ -1,20 +1,21 @@
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import Button from 'components/common/atomComponents/Button';
 import Text from 'components/common/atomComponents/Text';
 import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection';
 import Header from 'components/common/moleculesComponents/Header';
 import html2canvas from 'html2canvas';
 import CueCardTitle from 'pages/cueCard/components/CueCardTitle';
-import CopyToClipboard from 'react-copy-to-clipboard';
+import useShareLink from 'src/\bhooks/useShareLink';
 import styled from 'styled-components';
-import { downLoadNotify, notify } from 'utils/toast/copyLinkToast';
+import { downLoadNotify } from 'utils/toast/copyLinkToast';
 
 import Qcard from './components/Qcard';
 
 function CueCard() {
   const imageRef = useRef(null);
-
+  const { handleWebShare } = useShareLink('cueCard');
+  const [btnText, setBtnText] = useState('');
   const downLoadImage = () => {
     if (imageRef.current) {
       html2canvas(imageRef.current, { backgroundColor: null }).then((canvas) => {
@@ -26,19 +27,29 @@ function CueCard() {
     }
   };
 
-  const currentURL = window.location.href;
+  useEffect(() => {
+    const handleBtnText = async () => {
+      try {
+        await navigator.share();
+        setBtnText('링크 공유하기');
+      } catch {
+        setBtnText('링크 복사하기');
+      }
+    };
+
+    handleBtnText();
+  });
 
   return (
     <CueCardWrapper>
       <Header position={'cueCard'} />
       <CueCardTitle main={'일정 조율 완료!'} sub={'이미 확정된 회의 일정입니다'} />
       <Qcard ref={imageRef} />
       <BottomBtnSection>
-        <CopyToClipboard text={currentURL}>
-          <Button typeState={'halfTertiaryActive'} onClick={notify}>
-            <Text font={'button2'}>링크 복사하기</Text>
-          </Button>
-        </CopyToClipboard>
+        <Button typeState={'halfTertiaryActive'} onClick={handleWebShare}>
+          <Text font={'button2'}>{btnText}</Text>
+        </Button>
+
         <Button
           typeState={'halfPrimaryActive'}
           onClick={() => {