[Feat] 올바르지 않은 경로/환경으로 요청시 오류를 반환하는 컴포넌트 추가

apps/web/src/components/NotFound.tsx

@@ -0,0 +1,20 @@
+import { Link } from '@tanstack/react-router';
+
+import TicleCharacterBadge from '@/assets/images/ticle-character-badge.png';
+import TicleLogo from '@/assets/ticle.svg?react';
+import Button from '@/components/common/Button';
+
+function NotFound() {
+  return (
+    <div className="flex h-dvh w-full flex-col items-center justify-center gap-8 px-2">
+      <img src={TicleCharacterBadge} alt="티클 캐릭터" width={150} height={150} />
+      <TicleLogo className="fill-primary" width={190} />
+      <h1 className="text-center text-2xl font-bold">페이지가 존재하지 않습니다</h1>
+      <Link to="/">
+        <Button>홈으로 돌아가기</Button>
+      </Link>
+    </div>
+  );
+}
+
+export default NotFound;

apps/web/src/components/NotSupportedMobile.tsx

@@ -0,0 +1,15 @@
+import TicleCharacterBadge from '@/assets/images/ticle-character-badge.png';
+import TicleLogo from '@/assets/ticle.svg?react';
+
+function NotSupportedMobile() {
+  return (
+    <div className="flex h-dvh w-full flex-col items-center justify-center gap-8 px-2">
+      <img src={TicleCharacterBadge} alt="티클 캐릭터" width={150} height={150} />
+      <TicleLogo className="fill-primary" width={190} />
+      <h1 className="text-center text-2xl font-bold">모바일 환경은 지원하지 않습니다</h1>
+      <p className="text-center">데스크톱 브라우저에서 접속해주세요.</p>
+    </div>
+  );
+}
+
+export default NotSupportedMobile;

apps/web/src/hooks/mediasoup/useSocket.ts

@@ -50,7 +50,6 @@ const useSocket = (): UseSocketReturn => {
       });
 
       socket.on(SOCKET_EVENTS.disconnect, () => {
-        navigate({ to: '/', replace: true });
         setIsConnected(false);
         setIsError(null);
       });

apps/web/src/routes/__root.tsx

@@ -1,12 +1,19 @@
 import { Outlet, ScrollRestoration, createRootRoute } from '@tanstack/react-router';
 
+import NotFound from '@/components/NotFound';
+import NotSupportedMobile from '@/components/NotSupportedMobile';
 import { ToastContainer } from '@/components/toast/ToastContainer';
 
 export const Route = createRootRoute({
   component: RootComponent,
+  notFoundComponent: NotFound,
 });
 
 function RootComponent() {
+  if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+    return <NotSupportedMobile />;
+  }
+
   return (
     <div className="h-full min-h-dvh bg-weak">
       <ScrollRestoration />