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:
parent
2aff770134
commit
a2f89644a6
2 changed files with 21 additions and 12 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue