feat: 카카오 인앱프라우저로 접속시 다른 브라우저로 열기 안내 토스트 구현 (#120)

방만들기와, 초대하기에서 토스트

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',

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',

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}
+    </>
+  );
+}