61 lines
2.4 KiB
React
61 lines
2.4 KiB
React
|
import React, { useEffect } from 'react';
|
||
|
|
import { Routes, Route, useLocation } from 'react-router-dom';
|
||
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
||
|
|
import DeviceLayout, { useIsMobile } from './components/DeviceLayout';
|
||
|
|
import Sidebar from './components/Sidebar';
|
||
|
|
import ServerDetail from './pages/ServerDetail';
|
||
|
|
import WorldsPage from './pages/WorldsPage';
|
||
|
|
import PlayersPage from './pages/PlayersPage';
|
||
|
|
import PlayerStatsPage from './pages/PlayerStatsPage';
|
||
|
|
import WorldMapPage from './pages/WorldMapPage';
|
||
|
|
|
||
|
|
// 페이지 전환 애니메이션 래퍼 컴포넌트
|
||
|
|
const PageWrapper = ({ children }) => (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
exit={{ opacity: 0, y: -20 }}
|
||
|
|
transition={{ duration: 0.2, ease: 'easeOut' }}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
|
||
|
|
function App() {
|
||
|
|
const isMobile = useIsMobile();
|
||
|
|
const location = useLocation();
|
||
|
|
|
||
|
|
// 라우트 전환 시 스크롤 맨 위로
|
||
|
|
useEffect(() => {
|
||
|
|
window.scrollTo(0, 0);
|
||
|
|
}, [location.pathname]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<DeviceLayout>
|
||
|
|
<div className="min-h-screen bg-mc-bg text-gray-200 font-sans selection:bg-mc-green/30">
|
||
|
|
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-[0.03] pointer-events-none"></div>
|
||
|
|
|
||
|
|
{/* 사이드바 + 메인 콘텐츠 레이아웃 */}
|
||
|
|
<div className={`flex min-h-screen ${isMobile ? 'flex-col' : ''}`}>
|
||
|
|
<Sidebar isMobile={isMobile} />
|
||
|
|
|
||
|
|
{/* 메인 콘텐츠 영역 */}
|
||
|
|
<main className="flex-1 min-w-0 overflow-hidden">
|
||
|
|
<AnimatePresence mode="wait">
|
||
|
|
<Routes location={location} key={location.pathname}>
|
||
|
|
<Route path="/" element={<PageWrapper><ServerDetail isMobile={isMobile} /></PageWrapper>} />
|
||
|
|
<Route path="/worlds" element={<PageWrapper><WorldsPage isMobile={isMobile} /></PageWrapper>} />
|
||
|
|
<Route path="/players" element={<PageWrapper><PlayersPage isMobile={isMobile} /></PageWrapper>} />
|
||
|
|
<Route path="/player/:uuid/stats" element={<PageWrapper><PlayerStatsPage isMobile={isMobile} /></PageWrapper>} />
|
||
|
|
<Route path="/worldmap" element={<PageWrapper><WorldMapPage isMobile={isMobile} /></PageWrapper>} />
|
||
|
|
</Routes>
|
||
|
|
</AnimatePresence>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</DeviceLayout>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default App;
|