diff --git "a/src/\bhooks/useShareLink.ts" "b/src/\bhooks/useShareLink.ts" new file mode 100644 index 00000000..cb682570 --- /dev/null +++ "b/src/\bhooks/useShareLink.ts" @@ -0,0 +1,34 @@ +import { useParams } from 'react-router-dom'; +import { notify } from 'utils/toast/copyLinkToast'; + +const useShareLink = () => { + const { meetingId } = useParams(); + + const inviteURL = `${window.location.origin}/meet/${meetingId}`; + const shareData = { + title: 'ASAP', + text: '회의 시간을 입력해주세요', + url: inviteURL, + }; + + const handleCopyToClipboard = async () => { + try { + await navigator.clipboard.writeText(inviteURL); + notify(); + } catch { + alert('링크복사에 실패했습니다. \n 다시 시도해주세요.'); + } + }; + + const handleWebShare = async () => { + if (navigator.share) { + navigator.share(shareData); + } else { + handleCopyToClipboard(); + } + }; + + return { inviteURL, handleCopyToClipboard, handleWebShare }; +}; + +export default useShareLink; diff --git a/src/components/common/moleculesComponents/Header.tsx b/src/components/common/moleculesComponents/Header.tsx index 2da0954d..a1d37eb6 100644 --- a/src/components/common/moleculesComponents/Header.tsx +++ b/src/components/common/moleculesComponents/Header.tsx @@ -5,11 +5,10 @@ import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon import { useScheduleStepContext } from 'pages/selectSchedule/contexts/useScheduleStepContext'; import { ScheduleStepType } from 'pages/selectSchedule/types'; import CopyToClipboard from 'react-copy-to-clipboard'; -import { useParams } from 'react-router'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; +import useShareLink from 'src/\bhooks/useShareLink'; import styled from 'styled-components'; import { theme } from 'styles/theme'; -import { notify } from 'utils/toast/copyLinkToast'; import Navigation from './Navigation'; @@ -21,8 +20,13 @@ interface HeaderProps { setSelectScheduleStep?: Dispatch>; } + function Header({ position, setFunnelStep }: HeaderProps) { const { scheduleStep, setScheduleStep } = useScheduleStepContext(); + const { meetingId } = useParams(); + + const {inviteURL, handleWebShare} = useShareLink(); + const navigationOptions = [ { title: '회의 일정 정하기', @@ -57,8 +61,8 @@ function Header({ position, setFunnelStep }: HeaderProps) { } } }; + console.log(window.location.origin); - const { meetingId } = useParams(); return ( <> @@ -106,8 +110,10 @@ function Header({ position, setFunnelStep }: HeaderProps) { {(position==="completeCreateMeeting" || position==="cueCard" || position==="confirmMeet") && - - + {/* */} + + + diff --git a/src/utils/toast/ToastContainer.tsx b/src/utils/toast/ToastContainer.tsx index 14edeb94..d97ac1e2 100644 --- a/src/utils/toast/ToastContainer.tsx +++ b/src/utils/toast/ToastContainer.tsx @@ -24,7 +24,8 @@ export default ToastContainerBox; const StyledToastContainer = styled(ToastContainer)` display: flex; position: absolute; - bottom: 6rem; + bottom: 5rem; + height: 10rem; align-items: center; justify-content: center; overflow: hidden;