Merge pull request #144 from ezcode-my/feat/non-desktop-block

grimza99 · web-flow · commit f610e54bd32e · 2025-11-12T21:12:25.000+09:00
feat: 모바일 디바이스 감지 및 모바일 전용 UI 추가
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,6 +6,9 @@ import AuthProvider from '@/lib/AuthProvider';
 import { getServerSession } from 'next-auth';
 import { authOptions } from '@/lib/authOptions';
 import { Metadata } from 'next';
+import { headers } from 'next/headers';
+import { detectDeviceType } from '@/shared/util/detectDeviceType';
+import MobileBlockUI from '@/shared/ui/moblieBlockUI/MoblieBlockUI';
 
 export const metadata: Metadata = {
   title: 'EZ-CODE - 코딩 테스트',
@@ -20,6 +23,16 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const ua = (await headers()).get('user-agent') ?? '';
+  const device = detectDeviceType(ua);
+  if (device === 'mobile')
+    return (
+      <html>
+        <body>
+          <MobileBlockUI />
+        </body>
+      </html>
+    );
   const session = await getServerSession(authOptions);
   return (
     <html lang="ko">
diff --git a/src/shared/ui/moblieBlockUI/MoblieBlockUI.tsx b/src/shared/ui/moblieBlockUI/MoblieBlockUI.tsx
@@ -0,0 +1,7 @@
+export default function MobileBlockUI() {
+  return (
+    <div className="flex flex-col justify-center items-center w-full h-screen bg-background text-white px-4 text-center">
+      <h1 className="text-3xl font-bold mb-4">아직 데스크탑을 제외한 환경은 지원하지 않습니다</h1>
+    </div>
+  );
+}
diff --git a/src/shared/util/detectDeviceType.ts b/src/shared/util/detectDeviceType.ts
@@ -0,0 +1,5 @@
+export function detectDeviceType(ua: string) {
+  const agent = ua.toLowerCase();
+  const isMobile = /iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(agent);
+  return isMobile ? 'mobile' : 'desktop';
+}
