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 { useEffect } from 'react';
|
||||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
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';
|
import { ScrollToTop } from '@/components/common';
|
||||||
|
|
@ -52,14 +52,16 @@ function PCWrapper({ children }) {
|
||||||
/**
|
/**
|
||||||
* 프로미스나인 팬사이트 메인 앱
|
* 프로미스나인 팬사이트 메인 앱
|
||||||
* react-device-detect를 사용한 PC/Mobile 분리
|
* react-device-detect를 사용한 PC/Mobile 분리
|
||||||
|
* - PC, 태블릿: PC 뷰
|
||||||
|
* - 모바일(폰): Mobile 뷰
|
||||||
*/
|
*/
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
|
<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
|
||||||
<ScrollToTop />
|
<ScrollToTop />
|
||||||
|
|
||||||
{/* PC 뷰 */}
|
{/* PC + 태블릿 뷰 */}
|
||||||
<BrowserView>
|
{!isMobileOnly && (
|
||||||
<PCWrapper>
|
<PCWrapper>
|
||||||
<Routes>
|
<Routes>
|
||||||
{/* 관리자 페이지 (레이아웃 없음) */}
|
{/* 관리자 페이지 (레이아웃 없음) */}
|
||||||
|
|
@ -88,10 +90,10 @@ function App() {
|
||||||
/>
|
/>
|
||||||
</Routes>
|
</Routes>
|
||||||
</PCWrapper>
|
</PCWrapper>
|
||||||
</BrowserView>
|
)}
|
||||||
|
|
||||||
{/* Mobile 뷰 */}
|
{/* Mobile 뷰 (폰만) */}
|
||||||
<MobileView>
|
{isMobileOnly && (
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route
|
<Route
|
||||||
path="/"
|
path="/"
|
||||||
|
|
@ -154,7 +156,7 @@ function App() {
|
||||||
{/* 404 페이지 */}
|
{/* 404 페이지 */}
|
||||||
<Route path="*" element={<MobileNotFound />} />
|
<Route path="*" element={<MobileNotFound />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</MobileView>
|
)}
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue