Merge pull request #102 from CHZZK-Study/dev

[FIX] 인앱브라우저 리다렉 및 툴팁 디자인 수정

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}>

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; // 모바일에서 버튼 글씨 크기도 작게
   }
 `;

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;

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('정보 저장 중 오류가 발생했습니다. 다시 시도해주세요.');
     }