Merge pull request #287 from boostcampwm-2024/feature/fe/#286-noDeskt…

…opVer

[FE][Feat] #286 : 데스크탑 접속시 모바일 접속 유도

frontend/src/App.css

@@ -1,5 +1,6 @@
 #root {
   touch-action: pan-y;
+  font-family: Pretendard, 'Pretendard Variable', sans-serif;
 }
 
 .logo {
@@ -45,6 +46,30 @@
   user-select:none
 }
 
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  z-index: 10000;
+}
+
+.message {
+  text-align: center;
+  font-size: 1.5rem;
+  line-height: 3;
+  display: flex;
+  flex-direction: column;
+  span {
+    line-height: 1.5;
+    font-size: 0.8rem;
+
 .spinner {
   width: 3rem;
   height: 3rem;

frontend/src/App.tsx

@@ -1,4 +1,41 @@
 import { IndexRoutes } from '@/routes/IndexRoutes.tsx';
 import 'App.css';
+import { useEffect, useState } from 'react';
 
-export const App = () => <IndexRoutes />;
+export const App = () => {
+  const [isMobile, setIsMobile] = useState(true);
+
+  useEffect(() => {
+    const checkIsMobile = () => {
+      const isMobileScreen = window.innerWidth <= 768;
+
+      const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera;
+      const isMobileDevice = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
+        userAgent,
+      );
+
+      setIsMobile(isMobileScreen || isMobileDevice);
+    };
+
+    checkIsMobile();
+
+    window.addEventListener('resize', checkIsMobile);
+
+    return () => window.removeEventListener('resize', checkIsMobile);
+  }, []);
+
+  if (!isMobile) {
+    return (
+      <>
+        <div className="overlay">
+          <div className="message">
+            모바일로 접속해주세요! <span>많은 관심 감사합니다.</span>
+            <span>데스크탑 버전은 추후 업데이트될 예정이니 조금만 기다려주세요!</span>
+          </div>
+        </div>
+        <IndexRoutes />
+      </>
+    );
+  }
+  return <IndexRoutes />;
+};