[FEAT]: 데스크톱 환경만 허용하도록 변경

Author: Seol-JY

client/src/App.css

@@ -985,3 +985,101 @@ ul {
   color: rgba(255, 255, 255, 0.8) !important;
   opacity: 1;
 }
+
+.screen-size-warning {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--popup-background-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.warning-content {
+  background-color: var(--popup-inner-contents-background-color);
+  padding: 2rem;
+  border-radius: 11px;
+  text-align: center;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
+  max-width: 400px;
+}
+
+.warning-content h2 {
+  color: var(--popup-inner-contents-font-color);
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.warning-content p {
+  color: var(--popup-inner-contents-font-color);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+/* 기존 CSS 파일에 추가 */
+.screen-size-warning {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--popup-background-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  backdrop-filter: blur(5px); /* 배경 블러 효과 */
+}
+
+.warning-content {
+  background-color: var(--popup-inner-contents-background-color);
+  padding: 2rem;
+  border-radius: 16px;
+  text-align: center;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
+  max-width: 400px;
+  animation: fade-in 0.5s ease-in-out; /* 페이드 인 애니메이션 */
+}
+
+.warning-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  color: var(--cursor-color);
+}
+
+.warning-content h2 {
+  color: var(--popup-inner-contents-font-color);
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  font-weight: 600;
+}
+
+.english-text {
+  color: var(--popup-inner-contents-font-color);
+  font-size: 1rem;
+  line-height: 1.5;
+  margin-bottom: 0.5rem;
+}
+
+.korean-text {
+  color: var(--popup-inner-contents-font-color);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  opacity: 0.8; /* 한국어 텍스트를 더 연하게 표시 */
+}
+
+/* 페이드 인 애니메이션 */
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

client/src/App.js

@@ -1,5 +1,6 @@
 import "./App.css";
 import Editor from "./components/Editor";
+import ScreenSizeWarning from "./components/ScreenSizeWarning";
 import Sidebar from "./components/Sidebar";
 import SidebarButton from "./components/SidebarButton";
 import Topbar from "./components/Topbar";
@@ -80,6 +81,8 @@ function App() {
 
   return (
     <Provider store={store}>
+      <ScreenSizeWarning />
+
       <div
         style={{
           margin: "0 10px 0 0",

client/src/components/ScreenSizeWarning.jsx

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from "react";
+
+const ScreenSizeWarning = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // 모바일 또는 태블릿 기기인지 확인하는 함수
+  const isMobileDevice = () => {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (
+        window.innerWidth < 768 ||
+        window.innerHeight < 470 ||
+        isMobileDevice()
+      ) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize(); // 초기 로드 시에도 체크
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="screen-size-warning">
+      <div className="warning-content">
+        <div className="warning-icon">🖥️</div>
+        <h2>Please Check Your Screen Size</h2>
+        <p className="english-text">
+          This application is optimized for desktop environments. Please use a
+          computer or enlarge your screen.
+        </p>
+        <p className="korean-text">
+          이 애플리케이션은 데스크톱 환경에 최적화되어 있습니다. 컴퓨터를
+          사용하거나 화면을 확대해주세요.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ScreenSizeWarning;