diff --git "a/src/\bhooks/useShareLink.ts" "b/src/\bhooks/useShareLink.ts" index 49f16c5..11dfb59 100644 --- "a/src/\bhooks/useShareLink.ts" +++ "b/src/\bhooks/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}`; diff --git a/src/pages/cueCard/CueCard.tsx b/src/pages/cueCard/CueCard.tsx index db5b551..0cbc632 100644 --- a/src/pages/cueCard/CueCard.tsx +++ b/src/pages/cueCard/CueCard.tsx @@ -1,4 +1,4 @@ -import { useRef } from 'react'; +import { useEffect, useRef, useState } from 'react'; import Button from 'components/common/atomComponents/Button'; import Text from 'components/common/atomComponents/Text'; @@ -6,15 +6,16 @@ import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSec 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,7 +27,18 @@ function CueCard() { } }; - const currentURL = window.location.href; + useEffect(() => { + const handleBtnText = async () => { + try { + await navigator.share(); + setBtnText('링크 공유하기'); + } catch { + setBtnText('링크 복사하기'); + } + }; + + handleBtnText(); + }); return ( @@ -34,11 +46,10 @@ function CueCard() { - - - + +