fix: 지원되지 않는 브라우저 로직 수정

src/common/hooks/useCheckBrowser.ts

@@ -2,19 +2,36 @@ import { useEffect } from 'react';
 
 const useCheckBrowser = () => {
   useEffect(() => {
-    const userAgent = window.navigator.userAgent;
+    // https://stackoverflow.com/questions/4565112/how-to-find-out-if-the-user-browser-is-chrome/13348618#13348618
 
-    const chromeRegexes = [
-      /\b(?:crmo|crios)\/([\w\.]+)/i, // Chrome for Android/iOS
-      /headlesschrome(?:\/([\w\.]+)| )/i, // Chrome Headless
-      / wv\).+(chrome)\/([\w\.]+)/i, // Chrome WebView
-      /chrome\/([\w\.]+) mobile/i, // Chrome Mobile
-      /(cros) [\w]+(?:\)| ([\w\.]+)\b)/i, // ChromeOS (Chromium OS)
-    ];
+    // please note,
+    // that IE11 now returns undefined again for window.chrome
+    // and new Opera 30 outputs true for window.chrome
+    // but needs to check if window.opr is not undefined
+    // and new IE Edge outputs to true now for window.chrome
+    // and if not iOS Chrome check
+    // so use the below updated condition
+    const isChromium = (window as any).chrome;
+    const winNav = window.navigator;
+    const vendorName = winNav.vendor;
+    const isOpera = typeof (window as any).opr !== 'undefined';
+    // const isFirefox = winNav.userAgent.indexOf('Firefox') > -1;
+    const isIEedge = winNav.userAgent.indexOf('Edg') > -1;
+    const isIOSChrome = winNav.userAgent.match('CriOS');
+    const isGoogleChrome =
+      typeof (winNav as any).userAgentData !== 'undefined'
+        ? (winNav as any).userAgentData.brands[0].brand === 'Google Chrome'
+        : vendorName === 'Google Inc.';
 
-    const isChrome = chromeRegexes.some((regex) => regex.test(userAgent));
-
-    if (!isChrome) {
+    if (
+      !isIOSChrome &&
+      (isChromium === null ||
+        typeof isChromium === 'undefined' ||
+        vendorName !== 'Google Inc.' ||
+        isOpera ||
+        isIEedge ||
+        !isGoogleChrome)
+    ) {
       alert('원활한 지원을 위해 크롬(Chrome) 브라우저 사용을 권장드려요.');
     }
   }, []);