feat: generated-routes

Author: tooooo1

bun.lockb

@@ -16,15 +16,18 @@
     "react-ga": "^3.3.1",
     "react-hook-form": "^7.53.0",
     "react-intersection-observer": "^9.13.0",
-    "react-router-dom": "^6.26.1",
+    "react-router": "^7.1.3",
     "react-star-ratings": "^2.3.0",
     "recoil": "^0.7.7"
   },
+  "type": "module",
   "scripts": {
+    "predev": "bun gen:routes",
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint",
-    "compile": "tsc"
+    "compile": "tsc",
+    "gen:routes": "bun scripts/generateRoutes.ts"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.1",

package.json

@@ -0,0 +1,124 @@
+import fs from 'fs';
+import path from 'path';
+
+const PAGES_DIR = path.join(process.cwd(), 'src/pages');
+
+const fileNameToPath = (fileName: string) => {
+  if (fileName === 'Main.tsx') return '/';
+
+  const specialCases: Record<string, string> = {
+    'NotFound.tsx': '/404',
+    'BadGateway.tsx': '/502',
+    'NoticeDetail.tsx': '/notice/detail',
+  };
+
+  if (fileName in specialCases) {
+    return specialCases[fileName];
+  }
+
+  return fileName
+    .replace(/\.(tsx|jsx)$/, '')
+    .replace(/([A-Z])/g, (_match, letter, offset) => {
+      return offset === 0 ? letter.toLowerCase() : letter.toLowerCase();
+    })
+    .toLowerCase()
+    .replace(/\[(.+)\]/, ':$1');
+};
+
+const generateRoutes = () => {
+  const routes: { path: string; component: string }[] = [];
+
+  const scanDir = (dir: string) => {
+    fs.readdirSync(dir).forEach((file) => {
+      const filePath = path.join(dir, file);
+
+      if (fs.statSync(filePath).isDirectory()) {
+        scanDir(filePath);
+
+        return;
+      }
+
+      if (!file.match(/\.(tsx|jsx)$/)) return;
+
+      const relativePath = path.relative(PAGES_DIR, filePath);
+      const routePath = fileNameToPath(relativePath);
+
+      routes.push({
+        path: routePath.startsWith('/') ? routePath : `/${routePath}`,
+        component: relativePath.replace(/\.tsx$/, ''),
+      });
+    });
+  };
+
+  scanDir(PAGES_DIR);
+
+  routes.push({
+    path: '/*',
+    component: 'NotFound',
+  });
+
+  const GENERATED_DIR = path.join(process.cwd(), 'src/__generated__');
+
+  if (fs.existsSync(GENERATED_DIR)) {
+    fs.rmSync(GENERATED_DIR, { recursive: true });
+  }
+  fs.mkdirSync(GENERATED_DIR, { recursive: true });
+
+  const typesContent = `/* generated file by scripts/generateRoutes.ts -- do not edit */
+/* authored by tooooo1 */
+
+/* tslint:disable */
+/* eslint-disable */
+
+type BaseRoutePath = ${routes.map((route) => `'${route.path}'`).join(' | ')};
+export type RoutePath = BaseRoutePath | \`\${BaseRoutePath}?\${string}\`;
+export type RoutePathWithQuery<T extends string> = \`\${BaseRoutePath}?\${T}\`;
+`;
+
+  const routesContent = `/* generated file by scripts/generateRoutes.ts -- do not edit */
+/* authored by tooooo1 */
+
+/* tslint:disable */
+/* eslint-disable */
+import { createBrowserRouter, type NavigateOptions } from 'react-router';
+import { RoutePath } from './routes.types';
+
+import Layout from '../components/Etc/Layout';
+
+export const router = createBrowserRouter([
+  {
+    element: <Layout />,
+    children: [
+      ${routes
+        .map(
+          (route) => `{
+      path: '${route.path}' as RoutePath,
+      lazy: async () => {
+        const { default: Component } = await import('../pages/${route.component}');
+
+        return { Component };
+      }
+    }`,
+        )
+        .join(',\n')}
+    ]
+  }
+]);
+
+declare module 'react-router' {
+  export function useNavigate(): (path: RoutePath, options?: NavigateOptions) => void;
+}
+`;
+
+  fs.writeFileSync(path.join(GENERATED_DIR, 'routes.types.ts'), typesContent);
+  fs.writeFileSync(path.join(GENERATED_DIR, 'routes.generated.tsx'), routesContent.trim());
+
+  console.log('\n🚀 Routes generated successfully!\n');
+  console.log('📍 Available routes:');
+  routes.forEach((route) => {
+    console.log(`  ${route.path.padEnd(20)} 🔗`);
+  });
+  console.log('\n✨ Route generation completed!\n');
+};
+
+generateRoutes();

scripts/generateRoutes.ts

@@ -1,30 +1,11 @@
 import { isLoginState } from 'app/recoilStore';
-import Layout from 'components/Etc/Layout';
-import {
-  BadGateway,
-  BanReason,
-  EmailSignUp,
-  Exit,
-  HistoryTest,
-  IdSearch,
-  LectureInfo,
-  Login,
-  Main,
-  MyInfo,
-  MyPosting,
-  NotFound,
-  Notice,
-  NoticeDetail,
-  PwSearch,
-  ResetPassword,
-  Search,
-  SignUp,
-} from 'pages';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { RouterProvider } from 'react-router';
 import type { MutableSnapshot } from 'recoil';
 import { RecoilRoot } from 'recoil';
 import { getAccessToken } from 'utils/tokenManeger';
 
+import { router } from './__generated__/routes.generated';
+
 const App = () => {
   const initialState = ({ set }: MutableSnapshot) => {
     const isLogin = !!getAccessToken();
@@ -33,29 +14,7 @@ const App = () => {
 
   return (
     <RecoilRoot initializeState={initialState}>
-      <Layout>
-        <Routes>
-          <Route path="/" element={<Main />} />
-          <Route path="/notice" element={<Notice />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/pwsearch" element={<PwSearch />} />
-          <Route path="/idsearch" element={<IdSearch />} />
-          <Route path="/signup" element={<SignUp />} />
-          <Route path="/myinformation" element={<MyInfo />} />
-          <Route path="/myposting" element={<MyPosting />} />
-          <Route path="/lectureinfo" element={<LectureInfo />} />
-          <Route path="/search" element={<Search />} />
-          <Route path="/emailsignup" element={<EmailSignUp />} />
-          <Route path="/notice/detail" element={<NoticeDetail />} />
-          <Route path="/historytest" element={<HistoryTest />} />
-          <Route path="/resetpassword" element={<ResetPassword />} />
-          <Route path="/exit" element={<Exit />} />
-          <Route path="/banreason" element={<BanReason />} />
-          <Route path="/404" element={<NotFound />} />
-          <Route path="/502" element={<BadGateway />} />
-          <Route path="/*" element={<Navigate replace to="/404" />} />
-        </Routes>
-      </Layout>
+      <RouterProvider router={router} />
     </RecoilRoot>
   );
 };