From b4cf4a22ad88e1a41cf7b08821dbdd952b7a9533 Mon Sep 17 00:00:00 2001
From: klmhyeonwoo <gentlemonster77@likelion.org>
Date: Sun, 3 Nov 2024 21:04:09 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20#409=20=EC=9B=B9=20=ED=99=98?=
 =?UTF-8?q?=EA=B2=BD=EC=97=90=EC=84=9C=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?=
 =?UTF-8?q?=EB=B8=8C=EB=9D=BC=EC=9A=B0=EC=A0=80=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=EC=8B=9C,=20=EC=86=8C=EC=85=9C=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EC=A0=95=EC=B1=85=20=EC=9A=B0=ED=9A=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app.tsx                          |  1 -
 apps/web/src/helper/preventExternalBrowser.ts | 17 -----------------
 .../web/src/helper/preventExternalBrowser.tsx | 19 +++++++++++++++++++
 apps/web/src/layout/GlobalLayout.tsx          |  7 ++++---
 4 files changed, 23 insertions(+), 21 deletions(-)
 delete mode 100644 apps/web/src/helper/preventExternalBrowser.ts
 create mode 100644 apps/web/src/helper/preventExternalBrowser.tsx

diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx
index f5d11c13..4f40aa68 100644
--- a/apps/web/src/app.tsx
+++ b/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>
diff --git a/apps/web/src/helper/preventExternalBrowser.ts b/apps/web/src/helper/preventExternalBrowser.ts
deleted file mode 100644
index 3433c411..00000000
--- a/apps/web/src/helper/preventExternalBrowser.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export function PreventExternalBrowser() {
-  const agent = navigator.userAgent;
-  const URL = document.URL;
-  alert("agent");
-
-  // NOTE: 카카오톡 인앱 브라우저 방지
-  if (agent.includes("KAKAO")) {
-    window.open(`kakaotalk://web/openExternal?url=${encodeURIComponent(URL)}`);
-  } else if (agent.includes("Instagram")) {
-    /**
-     * NOTE: 현재는 해당 인스타그램 인앱 탈출 코드가 작동하지 않는 것 같음
-     * 추후 카카오톡처럼 인스타그램 인앱 방지 분석 후 코드 추가 예정
-     */
-  }
-
-  return null;
-}
diff --git a/apps/web/src/helper/preventExternalBrowser.tsx b/apps/web/src/helper/preventExternalBrowser.tsx
new file mode 100644
index 00000000..1dfe24d4
--- /dev/null
+++ b/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) {
+    return <span> 시스템 브라우저를 이용해주세요 </span>;
+    window.open(`kakaotalk://web/openExternal?url=${encodeURIComponent(URL)}`);
+  } else if (isInstagram) {
+    /**
+     * NOTE: 현재는 해당 인스타그램 인앱 탈출 코드가 작동하지 않는 것 같음
+     * 추후 카카오톡처럼 인스타그램 인앱 방지 분석 후 코드 추가 예정
+     */
+  }
+  return <Fragment> {children} </Fragment>;
+}
diff --git a/apps/web/src/layout/GlobalLayout.tsx b/apps/web/src/layout/GlobalLayout.tsx
index 9d80a25c..2faf45f6 100644
--- a/apps/web/src/layout/GlobalLayout.tsx
+++ b/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>
   );
 }

From 0487e44a031d3840026f17d84956577b9cc8e441 Mon Sep 17 00:00:00 2001
From: klmhyeonwoo <gentlemonster77@likelion.org>
Date: Sun, 3 Nov 2024 21:05:23 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20#409=20=EC=9E=98=EB=AA=BB=EB=90=9C?=
 =?UTF-8?q?=20=EC=BD=94=EB=93=9C=20=EC=88=9C=EC=84=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/helper/preventExternalBrowser.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/helper/preventExternalBrowser.tsx b/apps/web/src/helper/preventExternalBrowser.tsx
index 1dfe24d4..b712340b 100644
--- a/apps/web/src/helper/preventExternalBrowser.tsx
+++ b/apps/web/src/helper/preventExternalBrowser.tsx
@@ -7,8 +7,8 @@ export function PreventExternalBrowser({ children }: PropsWithChildren) {
   const isInstagram = agent.includes("Instagram");
 
   if (isKakao) {
-    return <span> 시스템 브라우저를 이용해주세요 </span>;
     window.open(`kakaotalk://web/openExternal?url=${encodeURIComponent(URL)}`);
+    return <span> 시스템 브라우저를 이용해주세요 </span>;
   } else if (isInstagram) {
     /**
      * NOTE: 현재는 해당 인스타그램 인앱 탈출 코드가 작동하지 않는 것 같음