o2o-infinith-frontend/src/shared/layouts/Layout.tsx

24 lines
807 B
TypeScript

import { Outlet, ScrollRestoration, useLocation } from 'react-router'
import Navbar from './Navbar'
import Footer from './Footer'
export function Layout() {
const location = useLocation()
const isLoadingPage = location.pathname.startsWith('/report/loading')
// react-router v7 빌트인 ScrollRestoration:
// - 새 라우트 진입 → top 스크롤
// - 뒤로/앞으로 → 이전 스크롤 위치 자동 복원
// - 해시 앵커가 있으면 그곳으로 스크롤
return (
<div className="min-h-screen flex flex-col bg-slate-50 selection:bg-purple-200 selection:text-primary-900">
{!isLoadingPage && <Navbar />}
<main className="flex-1 flex flex-col">
<Outlet />
</main>
{!isLoadingPage && <Footer />}
<ScrollRestoration />
</div>
)
}