fix: body.is-pc 클래스 기반 PC CSS 분리

- App.jsx에 PCWrapper 추가하여 PC에서만 body.is-pc 클래스 추가
- pc.css를 body.is-pc 기반으로 변경하여 모바일 영향 없앰
- useEffect import 추가
This commit is contained in:
caadiq 2026-01-09 18:11:21 +09:00
parent 2aff770134
commit a2f89644a6
2 changed files with 21 additions and 12 deletions

View file

@ -1,3 +1,4 @@
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 { BrowserView, MobileView } from 'react-device-detect';
@ -37,11 +38,21 @@ import AdminScheduleBots from './pages/pc/admin/AdminScheduleBots';
import PCLayout from './components/pc/Layout'; import PCLayout from './components/pc/Layout';
import MobileLayout from './components/mobile/Layout'; import MobileLayout from './components/mobile/Layout';
// PC body
function PCWrapper({ children }) {
useEffect(() => {
document.body.classList.add('is-pc');
return () => document.body.classList.remove('is-pc');
}, []);
return children;
}
function App() { function App() {
return ( return (
<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}> <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
<ScrollToTop /> <ScrollToTop />
<BrowserView> <BrowserView>
<PCWrapper>
<Routes> <Routes>
{/* 관리자 페이지 (레이아웃 없음) */} {/* 관리자 페이지 (레이아웃 없음) */}
<Route path="/admin" element={<AdminLogin />} /> <Route path="/admin" element={<AdminLogin />} />
@ -72,6 +83,7 @@ function App() {
</PCLayout> </PCLayout>
} /> } />
</Routes> </Routes>
</PCWrapper>
</BrowserView> </BrowserView>
<MobileView> <MobileView>
<Routes> <Routes>

View file

@ -1,14 +1,11 @@
/* PC 전용 스타일 */ /* PC 전용 스타일 - body.is-pc 클래스가 있을 때만 적용 */
/* PC에서만 적용 */
@media (min-width: 1024px) {
/* PC 항상 스크롤바 공간 확보 - 화면 밀림 방지 */ /* PC 항상 스크롤바 공간 확보 - 화면 밀림 방지 */
html { body.is-pc {
overflow-y: scroll; overflow-y: scroll;
} }
/* PC 최소 너비 설정 */ /* PC 최소 너비 설정 */
#root { body.is-pc #root {
min-width: 1440px; min-width: 1440px;
} }
}