From 198fcaaf3cc0b2c32bebfef5e3d16003174af41e Mon Sep 17 00:00:00 2001
From: ljh0608 <m98m@naver.com>
Date: Mon, 2 Sep 2024 15:31:15 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9D=98=20=EC=83=9D=EC=84=B1?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20webShare=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 "src/\bhooks/useShareLink.ts"                 | 34 +++++++++++++++++
 .../common/moleculesComponents/Header.tsx     | 37 +++++--------------
 .../selectPriority/PriorityDropdown.tsx       |  1 -
 3 files changed, 44 insertions(+), 28 deletions(-)
 create mode 100644 "src/\bhooks/useShareLink.ts"

diff --git "a/src/\bhooks/useShareLink.ts" "b/src/\bhooks/useShareLink.ts"
new file mode 100644
index 0000000..cb68257
--- /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 c6b7916..a1d37eb 100644
--- a/src/components/common/moleculesComponents/Header.tsx
+++ b/src/components/common/moleculesComponents/Header.tsx
@@ -5,8 +5,8 @@ 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';
 
@@ -23,6 +23,10 @@ interface HeaderProps {
 
 function Header({ position, setFunnelStep }: HeaderProps) {
   const { scheduleStep, setScheduleStep } = useScheduleStepContext();
+  const { meetingId } = useParams();
+
+  const {inviteURL, handleWebShare} = useShareLink();
+
   const navigationOptions = [
     {
       title: '회의 일정 정하기',
@@ -57,30 +61,8 @@ function Header({ position, setFunnelStep }: HeaderProps) {
       }
     }
   };
+  console.log(window.location.origin);
 
-  const { meetingId } = useParams();
-
-  const shareData = {
-    title: "ASAP",
-    text: "회의 시간을 입력해주세요",
-    url: `${import.meta.env.VITE_WEB_IP}/meet/${meetingId}`,
-  };
-
-  const handleWebShare=async()=>{
-    // if (navigator.share && navigator.canShare(shareData)) {
-    //   console.log("test");
-      try{
-        await navigator.share(shareData);
-      }
-      catch(err){
-        alert(err + "지원하지 않는 브라우저");
-      }
-  //  } else {
-  //    alert("out");
-  //  }
-//test
-
-  }
   return (
     <>
       <HeaderWrapper>
@@ -129,8 +111,9 @@ function Header({ position, setFunnelStep }: HeaderProps) {
           {(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}`:`${import.meta.env.VITE_WEB_IP}/meet/${meetingId}` }>
+           <IconSection onClick={handleWebShare}>
+
+            <CopyToClipboard text={ position==="cueCard" ? `${import.meta.env.VITE_WEB_IP}/q-card/${meetingId}`:inviteURL }>
           <LinkIc/>
           </CopyToClipboard>
           </IconSection>
diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
index 49a57f7..f1dda7c 100644
--- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
+++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx
@@ -132,7 +132,6 @@ function PriorityDropdown() {
       return updatedInput;
     });
   };
-  //test
   return (
     <PriorityDropdownWrapper>
       {isOpenDropDown.map((item, idx) => (