From 0a37e5ae09e91655bd1d8c47cb192bf451905ebb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B2=9C=EC=A7=80=EC=9C=A4?=
 <70828192+cheonjiyun@users.noreply.github.com>
Date: Sat, 7 Sep 2024 22:16:17 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20=EC=9D=B8?=
 =?UTF-8?q?=EC=95=B1=ED=94=84=EB=9D=BC=EC=9A=B0=EC=A0=80=EB=A1=9C=20?=
 =?UTF-8?q?=EC=A0=91=EC=86=8D=EC=8B=9C=20=EB=8B=A4=EB=A5=B8=20=EB=B8=8C?=
 =?UTF-8?q?=EB=9D=BC=EC=9A=B0=EC=A0=80=EB=A1=9C=20=EC=97=B4=EA=B8=B0=20?=
 =?UTF-8?q?=EC=95=88=EB=82=B4=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20(#120)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

방만들기와, 초대하기에서 토스트
---
 src/Router.tsx                      | 13 +++++++++++--
 src/components/toast/NotifyToast.ts | 18 +++++++++++++++++-
 src/hooks/useInAppBrowser           |  0
 src/routers/CheckInAppBrowser.tsx   | 26 ++++++++++++++++++++++++++
 4 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 src/hooks/useInAppBrowser
 create mode 100644 src/routers/CheckInAppBrowser.tsx

diff --git a/src/Router.tsx b/src/Router.tsx
index 6649809..8ad6606 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -7,6 +7,7 @@ import Game from './pages/Game';
 import InputCode from './pages/InputCode';
 import InputName from './pages/InputName';
 import NotFound from './pages/NotFound';
+import CheckInAppBrowser from './routers/CheckInAppBrowser';
 
 interface RouteElement {
   path: string;
@@ -22,11 +23,19 @@ const routes: RouteElement[] = [
   },
   {
     path: 'create',
-    element: <CreateRoom />,
+    element: (
+      <CheckInAppBrowser>
+        <CreateRoom />
+      </CheckInAppBrowser>
+    ),
   },
   {
     path: '/participate',
-    element: <InputCode />,
+    element: (
+      <CheckInAppBrowser>
+        <InputCode />
+      </CheckInAppBrowser>
+    ),
   },
   {
     path: '/name',
diff --git a/src/components/toast/NotifyToast.ts b/src/components/toast/NotifyToast.ts
index ea37f8f..c0c51d5 100644
--- a/src/components/toast/NotifyToast.ts
+++ b/src/components/toast/NotifyToast.ts
@@ -2,7 +2,7 @@ import toast from 'react-hot-toast';
 
 import { VariablesCSS } from '../../styles/VariablesCSS';
 
-export const notifyUseToast = (message: string, whereUse: 'LOBBY' | 'INVITE') => {
+export const notifyUseToast = (message: string, whereUse: 'LOBBY' | 'INVITE' | 'WARNING') => {
   if (whereUse === 'LOBBY') {
     return toast(message, {
       duration: 3000,
@@ -16,6 +16,22 @@ export const notifyUseToast = (message: string, whereUse: 'LOBBY' | 'INVITE') =>
       },
     });
   }
+  if (whereUse === 'WARNING') {
+    return toast(message, {
+      duration: 8000,
+      position: 'bottom-center',
+      style: {
+        marginBottom: '50%',
+        textAlign: 'center',
+        color: VariablesCSS.night,
+        background: 'linear-gradient(118.95deg, #dfcfeb 0%, #c9abca 100%)',
+        border: '3px solid #ffffff',
+        borderRadius: '15px',
+        fontFamily: 'KCC-Hanbit',
+      },
+    });
+  }
+
   return toast(message, {
     duration: 3000,
     position: 'bottom-center',
diff --git a/src/hooks/useInAppBrowser b/src/hooks/useInAppBrowser
new file mode 100644
index 0000000..e69de29
diff --git a/src/routers/CheckInAppBrowser.tsx b/src/routers/CheckInAppBrowser.tsx
new file mode 100644
index 0000000..5be2120
--- /dev/null
+++ b/src/routers/CheckInAppBrowser.tsx
@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import { Toaster } from 'react-hot-toast';
+
+import { notifyUseToast } from '../components/toast/NotifyToast';
+
+interface propsType {
+  children: React.ReactNode;
+}
+
+export default function CheckInAppBrowser({ children }: propsType) {
+  useEffect(() => {
+    if (navigator.userAgent.indexOf('KAKAOTALK') >= 0) {
+      notifyUseToast(
+        '카카오톡안에서 튕기면 재접속할 수  없습니다.\n\n⋮ 을 눌러 다른 브라우저로 열어주세요.',
+        'WARNING',
+      );
+    }
+  }, []);
+
+  return (
+    <>
+      <Toaster />
+      {children}
+    </>
+  );
+}