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 ( - <> - - - - - - - - ) + if (isMobileOnly) return + if (isTablet) return + return } 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 ( + + +
+
📱
+

태블릿 버전은 준비 중입니다

+
+ + } + /> +
+ ) +}