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

…areAPI [Feat/#325] 큐카드 web share api 적용
ASAP-as-soon-as-possible · Sep 2, 2024 · 89f05ae · 89f05ae
2 parents f940860 + 4993dc6
commit 89f05ae
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 58 deletions.
diff --git a/src/hooks/useShareLink.ts b/src/hooks/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
@@ -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<SetStateAction<ScheduleStepType>>;
 }
 
-
 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) {
                 <BackIc />
               </IconSection>
             </ConfirmIconSection>
-          ) : undefined}
+          ) : (
+            undefined
+          )}
           {position === 'createMeeting' ? (
             <Text font={'title2'} color={`${theme.colors.white}`}>
               회의 정보 입력
@@ -108,49 +107,51 @@ function Header({ position, setFunnelStep }: HeaderProps) {
             <EmptyBox />
           )}
           <IconWrapper>
-          {(position==="completeCreateMeeting" || position==="cueCard" || position==="confirmMeet") &&
-            <LinkIcWrapper>
-             {/* <IconSection onClick={notify}> */}
-           <IconSection onClick={handleWebShare}>
-
-            <CopyToClipboard text={ position==="cueCard" ? `${import.meta.env.VITE_WEB_IP}/q-card/${meetingId}`:inviteURL }>
-          <LinkIc/>
-          </CopyToClipboard>
-          </IconSection>
-          {position==="completeCreateMeeting" && <Tooltip tooltipText={"링크 공유하기"}></Tooltip>}
-
-          </LinkIcWrapper>}
-          <IconSection onClick={() => setIsNaviOpen((prev) => !prev)}>
-            <HambergerIc />
-          </IconSection>
-
+            {(position === 'completeCreateMeeting' ||
+              position === 'cueCard' ||
+              position === 'confirmMeet') && (
+              <LinkIcWrapper>
+                {/* <IconSection onClick={notify}> */}
+                <IconSection onClick={handleWebShare}>
+                  {/* <CopyToClipboard text={ position==="cueCard" ? `${import.meta.env.VITE_WEB_IP}/q-card/${meetingId}`:inviteURL }> */}
+                  <LinkIc />
+                  {/* </CopyToClipboard> */}
+                </IconSection>
+                {position === 'completeCreateMeeting' && <Tooltip tooltipText={'링크 공유하기'} />}
+              </LinkIcWrapper>
+            )}
+            <IconSection onClick={() => setIsNaviOpen((prev) => !prev)}>
+              <HambergerIc />
+            </IconSection>
           </IconWrapper>
         </HeaderSection>
         {isNaviOpen ? (
           <NavigationSection>
             <NavigationContainer>
-            <IconContainer onClick={() => setIsNaviOpen((prev) => !prev)}>
-              <ExitIc />
-            </IconContainer>
-              <Navigation navigationOptions={navigationOptions}/>
+              <IconContainer onClick={() => setIsNaviOpen((prev) => !prev)}>
+                <ExitIc />
+              </IconContainer>
+              <Navigation navigationOptions={navigationOptions} />
             </NavigationContainer>
           </NavigationSection>
-        ) : undefined}
+        ) : (
+          undefined
+        )}
       </HeaderWrapper>
     </>
   );
 }
 
 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;
 `;
 

diff --git a/src/pages/cueCard/CueCard.tsx b/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={() => {