From 05d38dee683191e081661ed5df08fc47f9c618fc Mon Sep 17 00:00:00 2001 From: ljh0608 Date: Mon, 2 Sep 2024 16:12:24 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20cue=20card=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20webShare=20API?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "src/\bhooks/useShareLink.ts" | 36 ++++++---- .../common/moleculesComponents/Header.tsx | 69 ++++++++++--------- 2 files changed, 57 insertions(+), 48 deletions(-) diff --git "a/src/\bhooks/useShareLink.ts" "b/src/\bhooks/useShareLink.ts" index cb68257..49f16c5 100644 --- "a/src/\bhooks/useShareLink.ts" +++ "b/src/\bhooks/useShareLink.ts" @@ -1,14 +1,30 @@ import { useParams } from 'react-router-dom'; import { notify } from 'utils/toast/copyLinkToast'; -const useShareLink = () => { +const useShareLink = (position?: string) => { const { meetingId } = useParams(); + const route = position === 'cueCard' ? 'q-card' : 'meet'; + const inviteURL = `${window.location.origin}/${route}/${meetingId}`; - const inviteURL = `${window.location.origin}/meet/${meetingId}`; - const shareData = { - title: 'ASAP', - text: '회의 시간을 입력해주세요', - url: inviteURL, + const handleWebShare = async () => { + const shareData = { + meet: { + title: 'ASAP', + text: '회의 시간을 입력해주세요 \n', + url: inviteURL, + }, + 'q-card': { + title: 'ASAP', + text: '회의 시간이 확정되었어요! \n', + url: inviteURL, + }, + }; + + if (navigator.share) { + navigator.share(shareData[route]); + } else { + handleCopyToClipboard(); + } }; const handleCopyToClipboard = async () => { @@ -20,14 +36,6 @@ const useShareLink = () => { } }; - const handleWebShare = async () => { - if (navigator.share) { - navigator.share(shareData); - } else { - handleCopyToClipboard(); - } - }; - return { inviteURL, handleCopyToClipboard, handleWebShare }; }; diff --git a/src/components/common/moleculesComponents/Header.tsx b/src/components/common/moleculesComponents/Header.tsx index a1d37eb..808bfd5 100644 --- a/src/components/common/moleculesComponents/Header.tsx +++ b/src/components/common/moleculesComponents/Header.tsx @@ -4,7 +4,6 @@ import Text from 'components/common/atomComponents/Text'; import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon'; import { useScheduleStepContext } from 'pages/selectSchedule/contexts/useScheduleStepContext'; import { ScheduleStepType } from 'pages/selectSchedule/types'; -import CopyToClipboard from 'react-copy-to-clipboard'; import { useNavigate, useParams } from 'react-router-dom'; import useShareLink from 'src/\bhooks/useShareLink'; import styled from 'styled-components'; @@ -20,12 +19,11 @@ interface HeaderProps { setSelectScheduleStep?: Dispatch>; } - function Header({ position, setFunnelStep }: HeaderProps) { const { scheduleStep, setScheduleStep } = useScheduleStepContext(); const { meetingId } = useParams(); - const {inviteURL, handleWebShare} = useShareLink(); + const { inviteURL, handleWebShare } = useShareLink(position); const navigationOptions = [ { @@ -36,7 +34,7 @@ function Header({ position, setFunnelStep }: HeaderProps) { title: '피드백 보내기', url: 'https://tally.so/r/wL79av', }, - ] + ]; const navigate = useNavigate(); const [isNaviOpen, setIsNaviOpen] = useState(false); @@ -61,7 +59,6 @@ function Header({ position, setFunnelStep }: HeaderProps) { } } }; - console.log(window.location.origin); return ( <> @@ -91,7 +88,9 @@ function Header({ position, setFunnelStep }: HeaderProps) { - ) : undefined} + ) : ( + undefined + )} {position === 'createMeeting' ? ( 회의 정보 입력 @@ -108,34 +107,36 @@ function Header({ position, setFunnelStep }: HeaderProps) { )} - {(position==="completeCreateMeeting" || position==="cueCard" || position==="confirmMeet") && - - {/* */} - - - - - - - {position==="completeCreateMeeting" && } - - } - setIsNaviOpen((prev) => !prev)}> - - - + {(position === 'completeCreateMeeting' || + position === 'cueCard' || + position === 'confirmMeet') && ( + + {/* */} + + {/* */} + + {/* */} + + {position === 'completeCreateMeeting' && } + + )} + setIsNaviOpen((prev) => !prev)}> + + {isNaviOpen ? ( - setIsNaviOpen((prev) => !prev)}> - - - + setIsNaviOpen((prev) => !prev)}> + + + - ) : undefined} + ) : ( + undefined + )} ); @@ -143,14 +144,14 @@ function Header({ position, setFunnelStep }: HeaderProps) { export default Header; -const LinkIcWrapper=styled.div` - position:relative; -` +const LinkIcWrapper = styled.div` + position: relative; +`; -const IconWrapper= styled.div` - display:flex; +const IconWrapper = styled.div` + display: flex; align-items: center; -` +`; const HeaderWrapper = styled.div` width: 100%; `; @@ -176,7 +177,7 @@ const IconSection = styled.button` display: flex; align-items: center; justify-content: center; - width:4.2rem; + width: 4.2rem; height: 4.2rem; `; From 4993dc67aa6f4ca346ddb612f50322dda4944af7 Mon Sep 17 00:00:00 2001 From: ljh0608 Date: Mon, 2 Sep 2024 16:34:11 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=ED=81=90=EC=B9=B4=EB=93=9C?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B2=84=ED=8A=BC=20web=20share?= =?UTF-8?q?=20API=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "src/\bhooks/useShareLink.ts" | 2 +- src/pages/cueCard/CueCard.tsx | 31 +++++++++++++++++++++---------- 2 files changed, 22 insertions(+), 11 deletions(-) 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() { - - - + +