89 lines
3.6 KiB
TypeScript
89 lines
3.6 KiB
TypeScript
import { StrictMode, Suspense, lazy, useEffect } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-router';
|
|
import 'pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css';
|
|
import './styles/global.css';
|
|
import { ConnectionBanner, Toasts } from './components/ui';
|
|
import { useSession } from './store/session';
|
|
import { toast } from './store/toast';
|
|
import { Home } from './pages/Home';
|
|
import { SiteHeader } from './components/SiteHeader';
|
|
import { initPwa } from './lib/pwa';
|
|
|
|
const JoinPage = lazy(() => import('./pages/JoinPage'));
|
|
const RoomPage = lazy(() => import('./pages/RoomPage'));
|
|
const GamePage = lazy(() => import('./pages/GamePage'));
|
|
const MePage = lazy(() => import('./pages/MePage'));
|
|
const ReplayPage = lazy(() => import('./pages/ReplayPage'));
|
|
const RulesPage = lazy(() => import('./pages/RulesPage'));
|
|
const NotFound = lazy(() => import('./pages/NotFound'));
|
|
const AdminApp = lazy(() => import('./pages/admin/AdminApp'));
|
|
const GamesPage = lazy(() => import('./pages/GamesPage'));
|
|
|
|
function Announcement() {
|
|
const text = useSession((s) => s.announcement);
|
|
const maintenance = useSession((s) => s.maintenance);
|
|
if (!text && !maintenance) return null;
|
|
return (
|
|
<div role="note" style={{ background: maintenance ? 'var(--warning-soft)' : 'var(--primary-soft)', padding: '8px 16px', textAlign: 'center', fontWeight: 600 }}>
|
|
{maintenance && '🛠 점검 중 · '}
|
|
{text || '새 방을 잠시 만들 수 없어요.'}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Shell() {
|
|
const loaded = useSession((s) => s.loaded);
|
|
const nav = useNavigate();
|
|
const loc = useLocation();
|
|
useEffect(() => {
|
|
void useSession.getState().refresh();
|
|
const onUnauthorized = () => void useSession.getState().refresh();
|
|
window.addEventListener('bg:unauthorized', onUnauthorized);
|
|
return () => window.removeEventListener('bg:unauthorized', onUnauthorized);
|
|
}, []);
|
|
useEffect(() => {
|
|
const q = new URLSearchParams(loc.search);
|
|
if (q.get('linked') === '1') toast('디스코드 계정과 연결했어요.');
|
|
if (q.get('login') === 'failed') toast('디스코드 로그인에 실패했어요. 다시 시도해 주세요.', 'error');
|
|
if (q.get('login') === 'banned') toast('이용이 제한된 계정이에요.', 'error', 6000);
|
|
if (q.has('linked') || q.has('login')) {
|
|
q.delete('linked');
|
|
q.delete('login');
|
|
nav({ pathname: loc.pathname, search: q.toString() }, { replace: true });
|
|
}
|
|
}, [loc.search]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
if (!loaded) return <div className="page muted">불러오는 중…</div>;
|
|
return (
|
|
<>
|
|
<ConnectionBanner />
|
|
<SiteHeader />
|
|
<Announcement />
|
|
<Toasts />
|
|
<Suspense fallback={<div className="page muted">불러오는 중…</div>}>
|
|
<Routes>
|
|
<Route path="/" element={<Home />} />
|
|
<Route path="/j" element={<JoinPage />} />
|
|
<Route path="/games" element={<GamesPage />} />
|
|
<Route path="/r/:code" element={<RoomPage />} />
|
|
<Route path="/g/:gameId" element={<GamePage />} />
|
|
<Route path="/rules/:gameId" element={<RulesPage />} />
|
|
<Route path="/me" element={<MePage />} />
|
|
<Route path="/replay/:gamePk" element={<ReplayPage />} />
|
|
<Route path="/admin/*" element={<AdminApp />} />
|
|
<Route path="*" element={<NotFound />} />
|
|
</Routes>
|
|
</Suspense>
|
|
</>
|
|
);
|
|
}
|
|
|
|
initPwa();
|
|
createRoot(document.getElementById('root')!).render(
|
|
<StrictMode>
|
|
<BrowserRouter>
|
|
<Shell />
|
|
</BrowserRouter>
|
|
</StrictMode>,
|
|
);
|