feat: 브라우저환경, 디바이스에 따른 텍스트 변경

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",

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

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));
+};

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"