From e6b230bb47efd515a45e9dca07e6b6d023234ab4 Mon Sep 17 00:00:00 2001
From: ljh0608 <m98m@naver.com>
Date: Mon, 2 Sep 2024 21:30:16 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B8=8C=EB=9D=BC=EC=9A=B0=EC=A0=80?=
 =?UTF-8?q?=ED=99=98=EA=B2=BD,=20=EB=94=94=EB=B0=94=EC=9D=B4=EC=8A=A4?=
 =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                         |  1 +
 src/pages/cueCard/CueCard.tsx        | 22 +++++-----------------
 src/utils/checkBrowserForWebShare.ts | 11 +++++++++++
 yarn.lock                            |  5 +++++
 4 files changed, 22 insertions(+), 17 deletions(-)
 create mode 100644 src/utils/checkBrowserForWebShare.ts

diff --git a/package.json b/package.json
index 6d8adc13..55d9a68c 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "axios": "^1.4.0",
     "copy-text-to-clipboard": "^3.2.0",
     "html2canvas": "^1.4.1",
+    "ismobilejs": "^1.1.1",
     "postcss-syntax": "^0.36.2",
     "prettier": "1.13",
     "react": "^18.2.0",
diff --git a/src/pages/cueCard/CueCard.tsx b/src/pages/cueCard/CueCard.tsx
index 2596c61f..621b0670 100644
--- a/src/pages/cueCard/CueCard.tsx
+++ b/src/pages/cueCard/CueCard.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
 import Button from 'components/common/atomComponents/Button';
 import Text from 'components/common/atomComponents/Text';
@@ -8,6 +8,7 @@ import html2canvas from 'html2canvas';
 import CueCardTitle from 'pages/cueCard/components/CueCardTitle';
 import useShareLink from 'src/\bhooks/useShareLink';
 import styled from 'styled-components';
+import { checkBrowserForWebShare } from 'utils/checkBrowserForWebShare';
 import { downLoadNotify } from 'utils/toast/copyLinkToast';
 
 import Qcard from './components/Qcard';
@@ -26,21 +27,6 @@ function CueCard() {
       });
     }
   };
-  useEffect(() => {
-    const handleBtnText = async () => {
-      try {
-        const canShare = await navigator.share();
-        if (canShare !== undefined) {
-          throw Error;
-        }
-        setBtnText('링크 공유하기');
-      } catch {
-        setBtnText('링크 복사하기');
-      }
-    };
-
-    handleBtnText();
-  }, []);
 
   return (
     <CueCardWrapper>
@@ -49,7 +35,9 @@ function CueCard() {
       <Qcard ref={imageRef} />
       <BottomBtnSection>
         <Button typeState={'halfTertiaryActive'} onClick={handleWebShare}>
-          <Text font={'button2'}>{btnText}</Text>
+          <Text font={'button2'}>
+            {checkBrowserForWebShare() ? '링크 공유하기' : '링크 복사하기'}
+          </Text>
         </Button>
 
         <Button
diff --git a/src/utils/checkBrowserForWebShare.ts b/src/utils/checkBrowserForWebShare.ts
new file mode 100644
index 00000000..902bcf6b
--- /dev/null
+++ b/src/utils/checkBrowserForWebShare.ts
@@ -0,0 +1,11 @@
+import isMobile from 'ismobilejs';
+
+export const checkBrowserForWebShare = () => {
+  const isFirefoxForAndroid = /Android.*Firefor/.test(navigator.userAgent);
+
+  const isAndroidWebView = /wv|WebView/.test(navigator.userAgent);
+
+  const checkMobile = isMobile().phone;
+  const checkTablet = isMobile().tablet;
+  return !(isFirefoxForAndroid || isAndroidWebView || !(checkMobile || checkTablet));
+};
diff --git a/yarn.lock b/yarn.lock
index dad7343b..ad16e4bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3266,6 +3266,11 @@ isexe@^2.0.0:
   resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+ismobilejs@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ismobilejs/-/ismobilejs-1.1.1.tgz#c56ca0ae8e52b24ca0f22ba5ef3215a2ddbbaa0e"
+  integrity sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"