From bc0c2b22f02281c0c5a881c020950c792f8b22a9 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sun, 19 Apr 2026 16:07:31 +0900
Subject: [PATCH] =?UTF-8?q?=ED=83=9C=EB=B8=94=EB=A6=BF=20=EC=A0=84?=
 =?UTF-8?q?=EC=9A=A9=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=20/=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- routes/tablet.jsx: 태블릿 placeholder
- App.jsx: isMobileOnly / isTablet / (그 외=PC) 3단 분기
- components/tablet/, pages/tablet/: 향후 태블릿 전용 컴포넌트·페이지 자리
- features/registry.js: tablet device 지원 (getTabletComponent 추가)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.jsx                    | 16 +++++----------
 frontend/src/components/tablet/.gitkeep |  0
 frontend/src/features/registry.js       | 19 +++++++++++-------
 frontend/src/pages/tablet/.gitkeep      |  0
 frontend/src/routes/tablet.jsx          | 26 +++++++++++++++++++++++++
 5 files changed, 43 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/components/tablet/.gitkeep
 create mode 100644 frontend/src/pages/tablet/.gitkeep
 create mode 100644 frontend/src/routes/tablet.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index cef53ee..aece8de 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,16 +1,10 @@
-import { BrowserView, MobileView } from 'react-device-detect'
+import { isMobileOnly, isTablet } from 'react-device-detect'
 import PCRoutes from './routes/pc'
 import MobileRoutes from './routes/mobile'
+import TabletRoutes from './routes/tablet'
 
 export default function App() {
-  return (
-    <>
-      <BrowserView>
-        <PCRoutes />
-      </BrowserView>
-      <MobileView>
-        <MobileRoutes />
-      </MobileView>
-    </>
-  )
+  if (isMobileOnly) return <MobileRoutes />
+  if (isTablet) return <TabletRoutes />
+  return <PCRoutes />
 }
diff --git a/frontend/src/components/tablet/.gitkeep b/frontend/src/components/tablet/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/features/registry.js b/frontend/src/features/registry.js
index b53f28c..e87fbc4 100644
--- a/frontend/src/features/registry.js
+++ b/frontend/src/features/registry.js
@@ -1,18 +1,15 @@
 /**
  * 기능 자동 등록 시스템
  *
- * - features/{kebab-case}/pc/{PascalCase}.jsx : PC 사용자 페이지
- * - features/{kebab-case}/pc/{PascalCase}Admin.jsx : PC 관리자 페이지
+ * - features/{kebab-case}/pc/{PascalCase}.jsx     : PC 사용자 페이지
+ * - features/{kebab-case}/pc/{PascalCase}Admin.jsx: PC 관리자 페이지
+ * - features/{kebab-case}/tablet/{PascalCase}.jsx : 태블릿 사용자 페이지
  * - features/{kebab-case}/mobile/{PascalCase}.jsx : 모바일 사용자 페이지
- *
- * 예시:
- *   /boss-crystal       → features/boss-crystal/pc/BossCrystal.jsx
- *   /admin/boss-crystal → features/boss-crystal/pc/BossCrystalAdmin.jsx
  */
 
 import { lazy } from 'react'
 
-const pages = import.meta.glob('./*/{pc,mobile}/*.jsx')
+const pages = import.meta.glob('./*/{pc,tablet,mobile}/*.jsx')
 
 function slugToPascal(slug) {
   return slug
@@ -23,6 +20,7 @@ function slugToPascal(slug) {
 
 const userPcCache = new Map()
 const adminPcCache = new Map()
+const userTabletCache = new Map()
 const userMobileCache = new Map()
 
 function loadCached(cache, slug, device, suffix) {
@@ -49,6 +47,13 @@ export function getAdminComponent(slug) {
   return loadCached(adminPcCache, slug, 'pc', 'Admin')
 }
 
+/**
+ * slug에 해당하는 태블릿 사용자 페이지 컴포넌트 반환
+ */
+export function getTabletComponent(slug) {
+  return loadCached(userTabletCache, slug, 'tablet', '')
+}
+
 /**
  * slug에 해당하는 모바일 사용자 페이지 컴포넌트 반환
  */
diff --git a/frontend/src/pages/tablet/.gitkeep b/frontend/src/pages/tablet/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/routes/tablet.jsx b/frontend/src/routes/tablet.jsx
new file mode 100644
index 0000000..6907709
--- /dev/null
+++ b/frontend/src/routes/tablet.jsx
@@ -0,0 +1,26 @@
+import { Routes, Route } from 'react-router-dom'
+
+/**
+ * 태블릿 라우트 (placeholder)
+ * 추후 TabletLayout, 기능별 태블릿 페이지 등록 예정
+ */
+export default function TabletRoutes() {
+  return (
+    <Routes>
+      <Route
+        path="*"
+        element={
+          <div
+            className="min-h-screen flex items-center justify-center p-6 text-center"
+            style={{ color: 'var(--text-muted)' }}
+          >
+            <div>
+              <div className="text-4xl mb-3 opacity-50">📱</div>
+              <p className="text-sm">태블릿 버전은 준비 중입니다</p>
+            </div>
+          </div>
+        }
+      />
+    </Routes>
+  )
+}