joke-app/apps/web/src/main.tsx

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';

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 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="/admin/*" element={<AdminApp />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Suspense>
    </>
  );
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <Shell />
    </BrowserRouter>
  </StrictMode>,
);