feat: 동일하게 2025에도 적용

Author: y00eunji

apps/pyconkr-2025/src/App.tsx

@@ -1,17 +1,10 @@
 import { useBackendClient, useFlattenSiteMapQuery, useSponsorQuery } from "@frontend/common/src/hooks/useAPI";
+import * as BackendAPISchemas from "@frontend/common/src/schemas/backendAPI";
 import { buildNestedSiteMap } from "@frontend/common/src/utils";
 import * as React from "react";
-import { Route, Routes, useLocation } from "react-router-dom";
+import { Outlet, ScrollRestoration, useLocation } from "react-router-dom";
 import * as R from "remeda";
 
-import * as BackendAPISchemas from "@frontend/common/src/schemas/backendAPI";
-import MainLayout from "./components/layout/index.tsx";
-import { PageIdParamRenderer, RouteRenderer } from "./components/pages/dynamic_route.tsx";
-import { PresentationDetailPage } from "./components/pages/presentation_detail.tsx";
-import { ShopSignInPage } from "./components/pages/sign_in.tsx";
-import { SponsorDetailPage } from "./components/pages/sponsor_detail.tsx";
-import { Test } from "./components/pages/test.tsx";
-import { IS_DEBUG_ENV } from "./consts";
 import { useAppContext } from "./contexts/app_context";
 
 export const App: React.FC = () => {
@@ -45,15 +38,9 @@ export const App: React.FC = () => {
   }, [location, language, flatSiteMap, sponsorTiers]);
 
   return (
-    <Routes>
-      <Route element={<MainLayout />}>
-        {IS_DEBUG_ENV && <Route path="/debug" element={<Test />} />}
-        <Route path="/account/sign-in" element={<ShopSignInPage />} />
-        <Route path="/sponsors/:id" element={<SponsorDetailPage />} />
-        <Route path="/presentations/:id" element={<PresentationDetailPage />} />
-        <Route path="/pages/:id" element={<PageIdParamRenderer />} />
-        <Route path="*" element={<RouteRenderer />} />
-      </Route>
-    </Routes>
+    <>
+      <ScrollRestoration />
+      <Outlet />
+    </>
   );
 };

apps/pyconkr-2025/src/main.tsx

@@ -9,9 +9,9 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { SnackbarProvider } from "notistack";
 import * as React from "react";
 import * as ReactDom from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
+import { RouterProvider } from "react-router-dom";
 
-import { App } from "./App.tsx";
+import { router } from "./router.tsx";
 import { IS_DEBUG_ENV } from "./consts";
 import { LOCAL_STORAGE_LANGUAGE_KEY } from "./consts/local_stroage.ts";
 import { PyConKRMDXComponents } from "./consts/mdx_components.ts";
@@ -85,23 +85,21 @@ const MainApp: React.FC = () => {
       <QueryClientProvider client={queryClient}>
         <ReactQueryDevtools initialIsOpen={false} />
         <SnackbarProvider>
-          <BrowserRouter>
-            <AppContext.Provider value={{ ...appState, setAppContext }}>
-              <Components.CommonContextProvider options={{ ...CommonOptions, language: appState.language }}>
-                <Shop.Components.Common.ShopContextProvider options={{ ...ShopOptions, language: appState.language }}>
-                  <ErrorBoundary fallback={Components.ErrorFallback}>
-                    <Suspense fallback={SuspenseFallback}>
-                      <ThemeProvider theme={muiTheme}>
-                        <CssBaseline />
-                        <Global styles={globalStyles} />
-                        <App />
-                      </ThemeProvider>
-                    </Suspense>
-                  </ErrorBoundary>
-                </Shop.Components.Common.ShopContextProvider>
-              </Components.CommonContextProvider>
-            </AppContext.Provider>
-          </BrowserRouter>
+          <AppContext.Provider value={{ ...appState, setAppContext }}>
+            <Components.CommonContextProvider options={{ ...CommonOptions, language: appState.language }}>
+              <Shop.Components.Common.ShopContextProvider options={{ ...ShopOptions, language: appState.language }}>
+                <ErrorBoundary fallback={Components.ErrorFallback}>
+                  <Suspense fallback={SuspenseFallback}>
+                    <ThemeProvider theme={muiTheme}>
+                      <CssBaseline />
+                      <Global styles={globalStyles} />
+                      <RouterProvider router={router} />
+                    </ThemeProvider>
+                  </Suspense>
+                </ErrorBoundary>
+              </Shop.Components.Common.ShopContextProvider>
+            </Components.CommonContextProvider>
+          </AppContext.Provider>
         </SnackbarProvider>
       </QueryClientProvider>
     </React.StrictMode>

apps/pyconkr-2025/src/router.tsx

@@ -0,0 +1,29 @@
+import { createBrowserRouter } from "react-router-dom";
+
+import { App } from "./App.tsx";
+import MainLayout from "./components/layout/index.tsx";
+import { PageIdParamRenderer, RouteRenderer } from "./components/pages/dynamic_route.tsx";
+import { PresentationDetailPage } from "./components/pages/presentation_detail.tsx";
+import { ShopSignInPage } from "./components/pages/sign_in.tsx";
+import { SponsorDetailPage } from "./components/pages/sponsor_detail.tsx";
+import { Test } from "./components/pages/test.tsx";
+import { IS_DEBUG_ENV } from "./consts";
+
+export const router = createBrowserRouter([
+  {
+    element: <App />,
+    children: [
+      {
+        element: <MainLayout />,
+        children: [
+          ...(IS_DEBUG_ENV ? [{ path: "/debug", element: <Test /> }] : []),
+          { path: "/account/sign-in", element: <ShopSignInPage /> },
+          { path: "/sponsors/:id", element: <SponsorDetailPage /> },
+          { path: "/presentations/:id", element: <PresentationDetailPage /> },
+          { path: "/pages/:id", element: <PageIdParamRenderer /> },
+          { path: "*", element: <RouteRenderer /> },
+        ],
+      },
+    ],
+  },
+]);