Merge pull request #113 from boostcampwm-2024/feat/#65/tanstack-router

[Feat] Tanstack Router 라우팅 세팅
boostcampwm-2024 · Nov 9, 2024 · 9d9724d · 9d9724d
2 parents 6668484 + 9a6f000
commit 9d9724d
Show file tree

Hide file tree

Showing 17 changed files with 513 additions and 3 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -12,6 +12,8 @@
   "dependencies": {
     "@repo/shards": "workspace:*",
     "@repo/types": "workspace:*",
+    "@tanstack/react-router": "^1.79.0",
+    "@tanstack/router-vite-plugin": "^1.79.0",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
@@ -20,6 +22,7 @@
     "@eslint/js": "^9.13.0",
     "@repo/lint": "workspace:*",
     "@repo/tsconfig": "workspace:*",
+    "@tanstack/router-cli": "^1.79.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
@@ -1,5 +1,19 @@
+import { createRouter, RouterProvider } from '@tanstack/react-router';
+
+import { routeTree } from './routeTree.gen';
+const router = createRouter({ routeTree });
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
 function App() {
-  return <></>;
+  return (
+    <>
+      <RouterProvider router={router} />
+    </>
+  );
 }
 
 export default App;
diff --git a/apps/web/src/components/common/Header.tsx b/apps/web/src/components/common/Header.tsx
@@ -0,0 +1,20 @@
+import { Link } from '@tanstack/react-router';
+
+/**@desc router 테스트를 위해 임시 구현한 Header입니다. */
+function Header() {
+  return (
+    <nav className="p-5 flex gap-2 border border-main">
+      <Link to="/" className="[&.active]:font-bold">
+        티클
+      </Link>
+      <Link to="/dashboard" className="[&.active]:font-bold">
+        대시보드
+      </Link>
+      <Link to="/auth/oauth" className="[&.active]:font-bold">
+        로그인
+      </Link>
+    </nav>
+  );
+}
+
+export default Header;
diff --git a/apps/web/src/components/dashboard/index.tsx b/apps/web/src/components/dashboard/index.tsx
@@ -0,0 +1,17 @@
+import { Link } from '@tanstack/react-router';
+
+/**@desc router 테스트를 위해 임시 구현한 DashboardTab입니다. */
+function DashboardTab() {
+  return (
+    <nav className="p-5 flex gap-2">
+      <Link to="/dashboard/apply" className="[&.active]:font-bold">
+        신청한 티클 관리
+      </Link>
+      <Link to="/dashboard/open" className="[&.active]:font-bold">
+        개설한 티클 관리
+      </Link>
+    </nav>
+  );
+}
+
+export default DashboardTab;
diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts
@@ -0,0 +1,314 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root';
+import { Route as DashboardLayoutImport } from './routes/dashboard/_layout';
+import { Route as IndexImport } from './routes/index';
+import { Route as TicleOpenImport } from './routes/ticle/open';
+import { Route as TicleTicleIdImport } from './routes/ticle/$ticleId';
+import { Route as LiveTicleIdImport } from './routes/live/$ticleId';
+import { Route as DashboardOpenImport } from './routes/dashboard/open';
+import { Route as DashboardApplyImport } from './routes/dashboard/apply';
+import { Route as AuthOauthImport } from './routes/auth/oauth';
+import { Route as AuthLoginImport } from './routes/auth/login';
+
+// Create/Update Routes
+
+const DashboardLayoutRoute = DashboardLayoutImport.update({
+  id: '/dashboard',
+  path: '/dashboard',
+  getParentRoute: () => rootRoute,
+} as any);
+
+const IndexRoute = IndexImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any);
+
+const TicleOpenRoute = TicleOpenImport.update({
+  id: '/ticle/open',
+  path: '/ticle/open',
+  getParentRoute: () => rootRoute,
+} as any);
+
+const TicleTicleIdRoute = TicleTicleIdImport.update({
+  id: '/ticle/$ticleId',
+  path: '/ticle/$ticleId',
+  getParentRoute: () => rootRoute,
+} as any);
+
+const LiveTicleIdRoute = LiveTicleIdImport.update({
+  id: '/live/$ticleId',
+  path: '/live/$ticleId',
+  getParentRoute: () => rootRoute,
+} as any);
+
+const DashboardOpenRoute = DashboardOpenImport.update({
+  id: '/open',
+  path: '/open',
+  getParentRoute: () => DashboardLayoutRoute,
+} as any);
+
+const DashboardApplyRoute = DashboardApplyImport.update({
+  id: '/apply',
+  path: '/apply',
+  getParentRoute: () => DashboardLayoutRoute,
+} as any);
+
+const AuthOauthRoute = AuthOauthImport.update({
+  id: '/auth/oauth',
+  path: '/auth/oauth',
+  getParentRoute: () => rootRoute,
+} as any);
+
+const AuthLoginRoute = AuthLoginImport.update({
+  id: '/auth/login',
+  path: '/auth/login',
+  getParentRoute: () => rootRoute,
+} as any);
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/';
+      path: '/';
+      fullPath: '/';
+      preLoaderRoute: typeof IndexImport;
+      parentRoute: typeof rootRoute;
+    };
+    '/dashboard': {
+      id: '/dashboard';
+      path: '/dashboard';
+      fullPath: '/dashboard';
+      preLoaderRoute: typeof DashboardLayoutImport;
+      parentRoute: typeof rootRoute;
+    };
+    '/auth/login': {
+      id: '/auth/login';
+      path: '/auth/login';
+      fullPath: '/auth/login';
+      preLoaderRoute: typeof AuthLoginImport;
+      parentRoute: typeof rootRoute;
+    };
+    '/auth/oauth': {
+      id: '/auth/oauth';
+      path: '/auth/oauth';
+      fullPath: '/auth/oauth';
+      preLoaderRoute: typeof AuthOauthImport;
+      parentRoute: typeof rootRoute;
+    };
+    '/dashboard/apply': {
+      id: '/dashboard/apply';
+      path: '/apply';
+      fullPath: '/dashboard/apply';
+      preLoaderRoute: typeof DashboardApplyImport;
+      parentRoute: typeof DashboardLayoutImport;
+    };
+    '/dashboard/open': {
+      id: '/dashboard/open';
+      path: '/open';
+      fullPath: '/dashboard/open';
+      preLoaderRoute: typeof DashboardOpenImport;
+      parentRoute: typeof DashboardLayoutImport;
+    };
+    '/live/$ticleId': {
+      id: '/live/$ticleId';
+      path: '/live/$ticleId';
+      fullPath: '/live/$ticleId';
+      preLoaderRoute: typeof LiveTicleIdImport;
+      parentRoute: typeof rootRoute;
+    };
+    '/ticle/$ticleId': {
+      id: '/ticle/$ticleId';
+      path: '/ticle/$ticleId';
+      fullPath: '/ticle/$ticleId';
+      preLoaderRoute: typeof TicleTicleIdImport;
+      parentRoute: typeof rootRoute;
+    };
+    '/ticle/open': {
+      id: '/ticle/open';
+      path: '/ticle/open';
+      fullPath: '/ticle/open';
+      preLoaderRoute: typeof TicleOpenImport;
+      parentRoute: typeof rootRoute;
+    };
+  }
+}
+
+// Create and export the route tree
+
+interface DashboardLayoutRouteChildren {
+  DashboardApplyRoute: typeof DashboardApplyRoute;
+  DashboardOpenRoute: typeof DashboardOpenRoute;
+}
+
+const DashboardLayoutRouteChildren: DashboardLayoutRouteChildren = {
+  DashboardApplyRoute: DashboardApplyRoute,
+  DashboardOpenRoute: DashboardOpenRoute,
+};
+
+const DashboardLayoutRouteWithChildren = DashboardLayoutRoute._addFileChildren(
+  DashboardLayoutRouteChildren
+);
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute;
+  '/dashboard': typeof DashboardLayoutRouteWithChildren;
+  '/auth/login': typeof AuthLoginRoute;
+  '/auth/oauth': typeof AuthOauthRoute;
+  '/dashboard/apply': typeof DashboardApplyRoute;
+  '/dashboard/open': typeof DashboardOpenRoute;
+  '/live/$ticleId': typeof LiveTicleIdRoute;
+  '/ticle/$ticleId': typeof TicleTicleIdRoute;
+  '/ticle/open': typeof TicleOpenRoute;
+}
+
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute;
+  '/dashboard': typeof DashboardLayoutRouteWithChildren;
+  '/auth/login': typeof AuthLoginRoute;
+  '/auth/oauth': typeof AuthOauthRoute;
+  '/dashboard/apply': typeof DashboardApplyRoute;
+  '/dashboard/open': typeof DashboardOpenRoute;
+  '/live/$ticleId': typeof LiveTicleIdRoute;
+  '/ticle/$ticleId': typeof TicleTicleIdRoute;
+  '/ticle/open': typeof TicleOpenRoute;
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute;
+  '/': typeof IndexRoute;
+  '/dashboard': typeof DashboardLayoutRouteWithChildren;
+  '/auth/login': typeof AuthLoginRoute;
+  '/auth/oauth': typeof AuthOauthRoute;
+  '/dashboard/apply': typeof DashboardApplyRoute;
+  '/dashboard/open': typeof DashboardOpenRoute;
+  '/live/$ticleId': typeof LiveTicleIdRoute;
+  '/ticle/$ticleId': typeof TicleTicleIdRoute;
+  '/ticle/open': typeof TicleOpenRoute;
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath;
+  fullPaths:
+    | '/'
+    | '/dashboard'
+    | '/auth/login'
+    | '/auth/oauth'
+    | '/dashboard/apply'
+    | '/dashboard/open'
+    | '/live/$ticleId'
+    | '/ticle/$ticleId'
+    | '/ticle/open';
+  fileRoutesByTo: FileRoutesByTo;
+  to:
+    | '/'
+    | '/dashboard'
+    | '/auth/login'
+    | '/auth/oauth'
+    | '/dashboard/apply'
+    | '/dashboard/open'
+    | '/live/$ticleId'
+    | '/ticle/$ticleId'
+    | '/ticle/open';
+  id:
+    | '__root__'
+    | '/'
+    | '/dashboard'
+    | '/auth/login'
+    | '/auth/oauth'
+    | '/dashboard/apply'
+    | '/dashboard/open'
+    | '/live/$ticleId'
+    | '/ticle/$ticleId'
+    | '/ticle/open';
+  fileRoutesById: FileRoutesById;
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute;
+  DashboardLayoutRoute: typeof DashboardLayoutRouteWithChildren;
+  AuthLoginRoute: typeof AuthLoginRoute;
+  AuthOauthRoute: typeof AuthOauthRoute;
+  LiveTicleIdRoute: typeof LiveTicleIdRoute;
+  TicleTicleIdRoute: typeof TicleTicleIdRoute;
+  TicleOpenRoute: typeof TicleOpenRoute;
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  DashboardLayoutRoute: DashboardLayoutRouteWithChildren,
+  AuthLoginRoute: AuthLoginRoute,
+  AuthOauthRoute: AuthOauthRoute,
+  LiveTicleIdRoute: LiveTicleIdRoute,
+  TicleTicleIdRoute: TicleTicleIdRoute,
+  TicleOpenRoute: TicleOpenRoute,
+};
+
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>();
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/",
+        "/dashboard",
+        "/auth/login",
+        "/auth/oauth",
+        "/live/$ticleId",
+        "/ticle/$ticleId",
+        "/ticle/open"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    },
+    "/dashboard": {
+      "filePath": "dashboard/_layout.tsx",
+      "children": [
+        "/dashboard/apply",
+        "/dashboard/open"
+      ]
+    },
+    "/auth/login": {
+      "filePath": "auth/login.tsx"
+    },
+    "/auth/oauth": {
+      "filePath": "auth/oauth.tsx"
+    },
+    "/dashboard/apply": {
+      "filePath": "dashboard/apply.tsx",
+      "parent": "/dashboard"
+    },
+    "/dashboard/open": {
+      "filePath": "dashboard/open.tsx",
+      "parent": "/dashboard"
+    },
+    "/live/$ticleId": {
+      "filePath": "live/$ticleId.tsx"
+    },
+    "/ticle/$ticleId": {
+      "filePath": "ticle/$ticleId.tsx"
+    },
+    "/ticle/open": {
+      "filePath": "ticle/open.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */