Merge pull request #331 from ASAP-as-soon-as-possible/feat/#325/webSh…

…areAPI

[Feat/#325] web Share api 배포본 테스트

src/hooks/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;

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<SetStateAction<ScheduleStepType>>;
 }
 
+
 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 (
     <>
       <HeaderWrapper>
@@ -106,8 +110,10 @@ function Header({ position, setFunnelStep }: HeaderProps) {
           <IconWrapper>
           {(position==="completeCreateMeeting" || position==="cueCard" || position==="confirmMeet") &&
             <LinkIcWrapper>
-             <IconSection onClick={notify}>
-            <CopyToClipboard text={ position==="cueCard" ? `${import.meta.env.VITE_WEB_IP}/q-card/${meetingId}`:`${import.meta.env.VITE_WEB_IP}/meet/${meetingId}` }>
+             {/* <IconSection onClick={notify}> */}
+           <IconSection onClick={handleWebShare}>
+
+            <CopyToClipboard text={ position==="cueCard" ? `${import.meta.env.VITE_WEB_IP}/q-card/${meetingId}`:inviteURL }>
           <LinkIc/>
           </CopyToClipboard>
           </IconSection>

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;