Merge pull request #419 from depromeet/bugfix/409/externalBrowser

fix: #409 웹 환경에서 카카오 브라우저 로그인 시, 소셜 로그인 정책 우회

apps/web/src/app.tsx

@@ -20,7 +20,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
           <Suspense fallback={<LoadingModal purpose={"데이터를 가져오고 있어요"} />}>
             {/* <ReactQueryDevtools initialIsOpen={false} /> */}
             {/* <DevTools /> */}
-
             <Routers />
             <Toast />
           </Suspense>

apps/web/src/helper/preventExternalBrowser.tsx

@@ -0,0 +1,19 @@
+import { Fragment, PropsWithChildren } from "react";
+
+export function PreventExternalBrowser({ children }: PropsWithChildren) {
+  const agent = navigator.userAgent;
+  const URL = document.URL;
+  const isKakao = agent.includes("KAKAO");
+  const isInstagram = agent.includes("Instagram");
+
+  if (isKakao) {
+    window.open(`kakaotalk://web/openExternal?url=${encodeURIComponent(URL)}`);
+    return <span> 시스템 브라우저를 이용해주세요 </span>;
+  } else if (isInstagram) {
+    /**
+     * NOTE: 현재는 해당 인스타그램 인앱 탈출 코드가 작동하지 않는 것 같음
+     * 추후 카카오톡처럼 인스타그램 인앱 방지 분석 후 코드 추가 예정
+     */
+  }
+  return <Fragment> {children} </Fragment>;
+}

apps/web/src/layout/GlobalLayout.tsx

@@ -5,7 +5,7 @@ import { useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 
 import { Modal } from "@/component/common/Modal";
-import { PreventExternalBrowser } from "@/helper/preventExternalBrowser.ts";
+import { PreventExternalBrowser } from "@/helper/preventExternalBrowser.tsx";
 import ChannelService from "@/lib/channel-talk/service";
 import { useBridge } from "@/lib/provider/bridge-provider";
 
@@ -48,8 +48,9 @@ export default function GlobalLayout() {
       `}
     >
       <Modal />
-      <PreventExternalBrowser />
-      <Outlet />
+      <PreventExternalBrowser>
+        <Outlet />
+      </PreventExternalBrowser>
     </div>
   );
 }