hotfix: 지원하지 않는 브라우저 알림 (#136)

app/document/[documentId]/page.module.css

@@ -5,6 +5,14 @@
   overflow-y: auto;
 }
 
+.mobileContainer {
+  text-align: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .icon {
   text-align: center;
   rotate: 90deg;

app/document/[documentId]/page.tsx

@@ -13,10 +13,10 @@ import AudioViewer from '@/components/DataViewer/AudioViewer';
 import ClickableBackgroundButton from '@/components/BackgroundButton/ClickableBackgroundButton';
 import Divider, { useDivider } from '@/components/Divider';
 import { useToast } from '@/states/toast';
-import { EventSourcePolyfill, NativeEventSource } from 'event-source-polyfill';
 import { createDocumentEventSource } from '@/utils/api';
 import { useViewerEvent } from '@/utils/ui';
 import { useRouter } from 'next/navigation';
+import { isMobile } from 'react-device-detect';
 
 interface DocumentPageProps {
   params: { documentId: string };
@@ -38,6 +38,8 @@ export default function DoucumentsPage({ params }: DocumentPageProps) {
 
   // reset viewer
   useEffect(() => {
+    // is mobile
+    if (isMobile) return;
     // is demo
     if (documentId < 0)
       pushToast({
@@ -61,6 +63,8 @@ export default function DoucumentsPage({ params }: DocumentPageProps) {
 
   // create mainEventSource
   useEffect(() => {
+    // is mobile
+    if (isMobile) return;
     const documentEventSource = createDocumentEventSource(documentId);
     return () => documentEventSource?.close();
   }, [documentId]);
@@ -83,6 +87,17 @@ export default function DoucumentsPage({ params }: DocumentPageProps) {
 
   useViewerEvent(eventCallback, documentId);
 
+  // is mobile
+  if (isMobile)
+    return (
+      <div className={styles.mobileContainer}>
+        <p>
+          모바일은 지원하지 않아요 😥 <br />
+          PC환경에서 이용해주세요!
+        </p>
+      </div>
+    );
+
   if (documentData === null) return <LoadingScreen message={'요약 마인드맵 로드중'} />;
 
   return (

package.json

@@ -25,6 +25,7 @@
     "material-symbols": "^0.13.1",
     "next": "^13.4.12",
     "react": "18.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "18.2.0",
     "react-pdf": "^7.5.0",
     "three": "^0.154.0",

yarn.lock

@@ -2786,6 +2786,13 @@ react-composer@^5.0.3:
   dependencies:
     prop-types "^15.6.0"
 
+react-device-detect@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.2.3.tgz#97a7ae767cdd004e7c3578260f48cf70c036e7ca"
+  integrity sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==
+  dependencies:
+    ua-parser-js "^1.0.33"
+
 [email protected]:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -3368,6 +3375,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
   integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
 
+ua-parser-js@^1.0.33:
+  version "1.0.37"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.37.tgz#b5dc7b163a5c1f0c510b08446aed4da92c46373f"
+  integrity sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"