fix: 태블릿에서 PC 뷰 표시되도록 변경

- BrowserView/MobileView → isMobileOnly 조건부 렌더링으로 변경
- 태블릿은 PC 뷰로 표시
- 모바일(폰)만 Mobile 뷰로 표시

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-01-22 18:58:29 +09:00
parent 4a26369dff
commit 28d408ace5

View file

@ -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>
); );
} }