From e857590ce727db32185b10b62f9eb35e060582d4 Mon Sep 17 00:00:00 2001
From: oyeong011 <oyeong011@gmail.com>
Date: Sun, 13 Oct 2024 18:43:32 +0900
Subject: [PATCH] =?UTF-8?q?[FIX/HM-145]=20=ED=88=B4=ED=8C=81=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=9D=B8?=
 =?UTF-8?q?=EC=95=B1=EB=B8=8C=EB=9D=BC=EC=9A=B0=EC=A0=80=20=EB=A6=AC?=
 =?UTF-8?q?=EB=8B=A4=EC=9D=B4=EB=A0=89=ED=8A=B8=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   |  2 +
 .../meeting/select/HeaderToolTip.tsx          |  9 ++--
 src/hooks/useExternalBrowserRedirect.ts       | 47 +++++++++++++++++++
 src/pages/SelectPage.tsx                      |  3 +-
 4 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 src/hooks/useExternalBrowserRedirect.ts

diff --git a/src/App.tsx b/src/App.tsx
index 6218e74..29d5d37 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,7 @@ import { getUserProfile } from './apis/user.api';
 import { getMemberType } from './utils/auth';
 import useUserStore from './store/userStore';
 import { getTokenFromStorage } from './utils/token';
+import useExternalBrowserRedirect from './hooks/useExternalBrowserRedirect';
 
 if (process.env.NODE_ENV === 'development') {
   setupLocatorUI();
@@ -43,6 +44,7 @@ function App() {
     }
   }, [setUser]);
 
+  useExternalBrowserRedirect();
   return (
     <QueryClientProvider client={queryClient}>
       <ThemeProvider theme={theme}>
diff --git a/src/components/meeting/select/HeaderToolTip.tsx b/src/components/meeting/select/HeaderToolTip.tsx
index 81d1ba3..eb51aa8 100644
--- a/src/components/meeting/select/HeaderToolTip.tsx
+++ b/src/components/meeting/select/HeaderToolTip.tsx
@@ -68,7 +68,6 @@ export const TooltipArrow = styled.div<{ isAbove?: boolean }>`
   right: 7%;
 
   @media (max-width: 768px) {
-    right: 10%; // 모바일 화면에서 화살표 위치를 조정하여 더 오른쪽으로 이동
     top: ${({ isAbove }) =>
       isAbove ? `40px` : `-12px`}; // 모바일 화면에서 화살표 위치 약간 조정
     width: 15px; // 화살표 크기 축소
@@ -81,7 +80,7 @@ const commonStyles = `
   color: ${theme.color.point.purple};
 
   @media (max-width: 768px) {
-    font-size: 12px; // 모바일 화면에서 글자 크기 축소
+    font-size: 7px; // 모바일 화면에서 글자 크기 축소
   }
 `;
 
@@ -90,7 +89,7 @@ export const UserName = styled.span`
   margin: 5px;
 
   @media (max-width: 768px) {
-    font-size: 10px; // 모바일 화면에서 더 작은 글씨 크기
+    font-size: 7px; // 모바일 화면에서 더 작은 글씨 크기
   }
 `;
 
@@ -102,7 +101,7 @@ const CloseButton = styled.button`
   padding: 5px;
 
   @media (max-width: 768px) {
-    padding: 3px; // 모바일 화면에서 버튼 패딩 축소
-    font-size: 10px; // 모바일에서 버튼 글씨 크기도 작게
+    padding: 2px; // 모바일 화면에서 버튼 패딩 축소
+    font-size: 7px; // 모바일에서 버튼 글씨 크기도 작게
   }
 `;
diff --git a/src/hooks/useExternalBrowserRedirect.ts b/src/hooks/useExternalBrowserRedirect.ts
new file mode 100644
index 0000000..d14e5d1
--- /dev/null
+++ b/src/hooks/useExternalBrowserRedirect.ts
@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { toast } from 'sonner';
+
+const useExternalBrowserRedirect = () => {
+  useEffect(() => {
+    const copyToClipboard = async (val: string) => {
+      await navigator.clipboard.writeText(val);
+      toast(
+        'URL주소가 복사되었습니다.\n\nSafari가 열리면 주소창을 길게 터치한 뒤, "붙여놓기 및 이동"을 누르면 정상적으로 이용하실 수 있습니다.'
+      );
+    };
+
+    const redirectToExternalBrowser = () => {
+      const targetUrl = window.location.href;
+      copyToClipboard(targetUrl);
+
+      if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
+        window.location.href = 'x-web-search://?';
+      } else {
+        window.location.href = `intent://${targetUrl.replace(
+          /https?:\/\//i,
+          ''
+        )}#Intent;scheme=http;package=com.android.chrome;end`;
+      }
+    };
+
+    const userAgent = navigator.userAgent.toLowerCase();
+    if (/kakaotalk/i.test(userAgent)) {
+      window.location.href = `kakaotalk://web/openExternal?url=${encodeURIComponent(
+        window.location.href
+      )}`;
+    } else if (/line/i.test(userAgent)) {
+      const targetUrl = window.location.href;
+      window.location.href = targetUrl.includes('?')
+        ? `${targetUrl}&openExternalBrowser=1`
+        : `${targetUrl}?openExternalBrowser=1`;
+    } else if (
+      /inapp|naver|snapchat|wirtschaftswoche|thunderbird|instagram|everytimeapp|whatsApp|electron|wadiz|aliapp|zumapp|iphone.*whale|android.*whale|kakaostory|band|twitter|DaumApps|DaumDevice\/mobile|FB_IAB|FB4A|FBAN|FBIOS|FBSS|trill|SamsungBrowser\/[^1]/i.test(
+        userAgent
+      )
+    ) {
+      redirectToExternalBrowser();
+    }
+  }, []);
+};
+
+export default useExternalBrowserRedirect;
diff --git a/src/pages/SelectPage.tsx b/src/pages/SelectPage.tsx
index 5a6ed8f..2fcd7d4 100644
--- a/src/pages/SelectPage.tsx
+++ b/src/pages/SelectPage.tsx
@@ -105,10 +105,11 @@ function SelectPage() {
         } else {
           openModal();
         }
+        setIsSelected(true);
       } catch (error) {
         toast.error('정보 저장 중 오류가 발생했습니다. 다시 시도해주세요.');
+        setIsSelected(false);
       }
-      setIsSelected(true);
     } catch (error) {
       toast.error('정보 저장 중 오류가 발생했습니다. 다시 시도해주세요.');
     }