fix: 태블릿에서 PC 뷰 표시되도록 변경
- BrowserView/MobileView → isMobileOnly 조건부 렌더링으로 변경 - 태블릿은 PC 뷰로 표시 - 모바일(폰)만 Mobile 뷰로 표시 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
4a26369dff
commit
28d408ace5
1 changed files with 9 additions and 7 deletions
|
|
@ -1,6 +1,6 @@
|
|||
import { useEffect } from 'react';
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import { BrowserView, MobileView } from 'react-device-detect';
|
||||
import { isMobileOnly } from 'react-device-detect';
|
||||
|
||||
// 공통 컴포넌트
|
||||
import { ScrollToTop } from '@/components/common';
|
||||
|
|
@ -52,14 +52,16 @@ function PCWrapper({ children }) {
|
|||
/**
|
||||
* 프로미스나인 팬사이트 메인 앱
|
||||
* react-device-detect를 사용한 PC/Mobile 분리
|
||||
* - PC, 태블릿: PC 뷰
|
||||
* - 모바일(폰): Mobile 뷰
|
||||
*/
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
|
||||
<ScrollToTop />
|
||||
|
||||
{/* PC 뷰 */}
|
||||
<BrowserView>
|
||||
{/* PC + 태블릿 뷰 */}
|
||||
{!isMobileOnly && (
|
||||
<PCWrapper>
|
||||
<Routes>
|
||||
{/* 관리자 페이지 (레이아웃 없음) */}
|
||||
|
|
@ -88,10 +90,10 @@ function App() {
|
|||
/>
|
||||
</Routes>
|
||||
</PCWrapper>
|
||||
</BrowserView>
|
||||
)}
|
||||
|
||||
{/* Mobile 뷰 */}
|
||||
<MobileView>
|
||||
{/* Mobile 뷰 (폰만) */}
|
||||
{isMobileOnly && (
|
||||
<Routes>
|
||||
<Route
|
||||
path="/"
|
||||
|
|
@ -154,7 +156,7 @@ function App() {
|
|||
{/* 404 페이지 */}
|
||||
<Route path="*" element={<MobileNotFound />} />
|
||||
</Routes>
|
||||
</MobileView>
|
||||
)}
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue