feat: 인앱 브라우저 감지

- InAppBrowserDetect 컴포넌트 추가: 인앱 브라우저에서의 기능 제한 안내 및 외부 브라우저로 이동 기능 구현
- useInAppBrowserDetect 훅 추가: 인앱 브라우저 감지 및 관련 기능 제공
- RouteProvider에 InAppBrowserDetect 컴포넌트 통합

Author: Cllaude99

apps/web/src/components/InAppBrowser/index.tsx

@@ -0,0 +1,68 @@
+import useInAppBrowserDetect from '@/hooks/useInAppBrowserDetect';
+import { ReactNode, useEffect } from 'react';
+
+interface InAppBrowserDetectProps {
+  children: ReactNode;
+}
+
+const InAppBrowserDetect = ({ children }: InAppBrowserDetectProps) => {
+  const {
+    isInAppBrowser,
+    browserName,
+    moveToExternalBrowser,
+    moveToStore,
+    isAndroid,
+    isIOS,
+  } = useInAppBrowserDetect();
+
+  useEffect(() => {
+    if (isInAppBrowser) moveToExternalBrowser();
+  }, [isInAppBrowser, moveToExternalBrowser]);
+
+  if (isInAppBrowser) {
+    const userBrowserName = (() => {
+      switch (browserName) {
+        case 'kakaotalk':
+          return '카카오톡';
+        case 'naver':
+          return '네이버';
+        case 'facebook':
+          return '페이스북';
+        case 'instagram':
+          return '인스타그램';
+        case 'line':
+          return '라인';
+        default:
+          return '현재 사용중인';
+      }
+    })();
+
+    const storeName = (() => {
+      if (isAndroid) return '구글 플레이';
+      if (isIOS) return '앱 스토어';
+      return '스토어';
+    })();
+
+    return (
+      <div>
+        <div>
+          <p>{userBrowserName} 인앱브라우저에서는</p>
+          <p>일부 기능 이용이 제한됩니다.</p>
+          <p>외부 브라우저로 이동중입니다...</p>
+          <button
+            onClick={(e) => {
+              e.preventDefault();
+              moveToStore();
+            }}
+          >
+            {storeName}에서 설치하기
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+};
+
+export default InAppBrowserDetect;

apps/web/src/hooks/.gitkeep

@@ -0,0 +1,122 @@
+import { useCallback } from 'react';
+
+interface InAppBrowserInfo {
+  isInAppBrowser: boolean;
+  browserName: string | null;
+}
+
+interface BrowserPattern {
+  name: string;
+  patterns: string[];
+}
+
+const BROWSER_PATTERNS: BrowserPattern[] = [
+  {
+    name: 'kakaotalk',
+    patterns: ['kakaotalk'],
+  },
+  {
+    name: 'naver',
+    patterns: ['naver', 'naver.*inapp', 'naver.*whale'],
+  },
+  {
+    name: 'facebook',
+    patterns: ['fban', 'fbios', 'fb_iab'],
+  },
+  {
+    name: 'instagram',
+    patterns: ['instagram', 'instagram.*inapp'],
+  },
+  {
+    name: 'line',
+    patterns: ['line', 'line.*inapp'],
+  },
+];
+
+// 테스트 용 (실제로는 우리의 앱 정보를 사용해야 함)
+const NAVER_APP_INFO = {
+  androidPackage: 'com.nhn.android.search',
+  iosAppId: '393499958',
+};
+
+const useInAppBrowserDetect = () => {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const isAndroid = userAgent.includes('android');
+  const isIOS = /iphone|ipad|ipod/.test(userAgent);
+
+  const detectInAppBrowser = (): InAppBrowserInfo => {
+    for (const browser of BROWSER_PATTERNS) {
+      if (
+        browser.patterns.some((pattern) =>
+          pattern.includes('.*')
+            ? new RegExp(pattern).test(userAgent)
+            : userAgent.includes(pattern),
+        )
+      ) {
+        return { isInAppBrowser: true, browserName: browser.name };
+      }
+    }
+
+    return { isInAppBrowser: false, browserName: null };
+  };
+
+  const { isInAppBrowser, browserName } = detectInAppBrowser();
+
+  const moveToStore = useCallback(() => {
+    if (isAndroid) {
+      window.location.href = `market://details?id=${NAVER_APP_INFO.androidPackage}`;
+    } else if (isIOS) {
+      window.location.href = `itms-apps://itunes.apple.com/app/id${NAVER_APP_INFO.iosAppId}`;
+    } else {
+      // 폴백 URL (웹 버전)
+      window.location.href = isAndroid
+        ? `https://play.google.com/store/apps/details?id=${NAVER_APP_INFO.androidPackage}`
+        : `https://apps.apple.com/app/id${NAVER_APP_INFO.iosAppId}`;
+    }
+  }, [isAndroid, isIOS]);
+
+  const getExternalBrowserUrl = useCallback(
+    (currentUrl: string, browser: string): string => {
+      const isAndroid = userAgent.includes('android');
+
+      if (browser === 'kakaotalk') {
+        return `kakaotalk://web/openExternal?url=${encodeURIComponent(currentUrl)}`;
+      }
+
+      if (isAndroid) {
+        return `intent://${currentUrl.replace(/https?:\/\//, '')}#Intent;scheme=https;package=com.android.chrome;end`;
+      }
+
+      return currentUrl;
+    },
+    [userAgent],
+  );
+
+  const moveToExternalBrowser = useCallback(() => {
+    const currentUrl = window.location.href;
+
+    if (!isInAppBrowser) return;
+
+    if (browserName) {
+      window.location.href = getExternalBrowserUrl(currentUrl, browserName);
+      return;
+    }
+
+    const newWindow = window.open(currentUrl, '_blank');
+
+    if (!newWindow) {
+      window.location.href = currentUrl;
+    }
+  }, [isInAppBrowser, browserName, getExternalBrowserUrl]);
+
+  return {
+    isInAppBrowser,
+    browserName,
+    moveToExternalBrowser,
+    moveToStore,
+    isAndroid,
+    isIOS,
+  };
+};
+
+export default useInAppBrowserDetect;

apps/web/src/hooks/useInAppBrowserDetect.ts

@@ -14,6 +14,7 @@ import { PrivateRoute } from './PrivateRoute';
 import { PublicRoute } from './PublicRoute';
 import DefaultComponent from '@/components/DefaultComponent';
 import LandingPage from '@/pages/Landing';
+import InAppBrowserDetect from '@/components/InAppBrowser';
 
 type ROUTE_TYPE = 'PRIVATE' | 'PUBLIC';
 
@@ -29,11 +30,13 @@ const router = createBrowserRouter([
   {
     path: PATH.ROOT,
     element: (
-      <UnknownErrorBoundary>
-        <APIErrorBoundary>
-          <Outlet />
-        </APIErrorBoundary>
-      </UnknownErrorBoundary>
+      <InAppBrowserDetect>
+        <UnknownErrorBoundary>
+          <APIErrorBoundary>
+            <Outlet />
+          </APIErrorBoundary>
+        </UnknownErrorBoundary>
+      </InAppBrowserDetect>
     ),
     errorElement: <SomethingWentWrong />,
     children: [