feat: 프로젝트 동적 라우팅 생성

boostcampwm-2024 · Nov 12, 2024 · 3219817 · 3219817
1 parent 737ace1
commit 3219817
Show file tree

Hide file tree

Showing 6 changed files with 250 additions and 8 deletions.
diff --git a/apps/client/src/routeTree.gen.ts b/apps/client/src/routeTree.gen.ts
@@ -16,8 +16,12 @@ import { Route as LoginImport } from './routes/login';
 import { Route as AuthImport } from './routes/_auth';
 import { Route as IndexImport } from './routes/index';
 import { Route as AuthAccountImport } from './routes/_auth.account';
+import { Route as AuthProjectImport } from './routes/_auth.$project';
 import { Route as AuthAccountIndexImport } from './routes/_auth.account.index';
+import { Route as AuthProjectIndexImport } from './routes/_auth.$project.index';
 import { Route as AuthAccountSettingsImport } from './routes/_auth.account.settings';
+import { Route as AuthProjectSettingsImport } from './routes/_auth.$project.settings';
+import { Route as AuthProjectBoardImport } from './routes/_auth.$project.board';
 
 // Create/Update Routes
 
@@ -50,18 +54,42 @@ const AuthAccountRoute = AuthAccountImport.update({
 	getParentRoute: () => AuthRoute,
 } as any);
 
+const AuthProjectRoute = AuthProjectImport.update({
+	id: '/$project',
+	path: '/$project',
+	getParentRoute: () => AuthRoute,
+} as any);
+
 const AuthAccountIndexRoute = AuthAccountIndexImport.update({
 	id: '/',
 	path: '/',
 	getParentRoute: () => AuthAccountRoute,
 } as any);
 
+const AuthProjectIndexRoute = AuthProjectIndexImport.update({
+	id: '/',
+	path: '/',
+	getParentRoute: () => AuthProjectRoute,
+} as any);
+
 const AuthAccountSettingsRoute = AuthAccountSettingsImport.update({
 	id: '/settings',
 	path: '/settings',
 	getParentRoute: () => AuthAccountRoute,
 } as any);
 
+const AuthProjectSettingsRoute = AuthProjectSettingsImport.update({
+	id: '/settings',
+	path: '/settings',
+	getParentRoute: () => AuthProjectRoute,
+} as any);
+
+const AuthProjectBoardRoute = AuthProjectBoardImport.update({
+	id: '/board',
+	path: '/board',
+	getParentRoute: () => AuthProjectRoute,
+} as any);
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -94,20 +122,48 @@ declare module '@tanstack/react-router' {
 			preLoaderRoute: typeof SignupImport;
 			parentRoute: typeof rootRoute;
 		};
+		'/_auth/$project': {
+			id: '/_auth/$project';
+			path: '/$project';
+			fullPath: '/$project';
+			preLoaderRoute: typeof AuthProjectImport;
+			parentRoute: typeof AuthImport;
+		};
 		'/_auth/account': {
 			id: '/_auth/account';
 			path: '/account';
 			fullPath: '/account';
 			preLoaderRoute: typeof AuthAccountImport;
 			parentRoute: typeof AuthImport;
 		};
+		'/_auth/$project/board': {
+			id: '/_auth/$project/board';
+			path: '/board';
+			fullPath: '/$project/board';
+			preLoaderRoute: typeof AuthProjectBoardImport;
+			parentRoute: typeof AuthProjectImport;
+		};
+		'/_auth/$project/settings': {
+			id: '/_auth/$project/settings';
+			path: '/settings';
+			fullPath: '/$project/settings';
+			preLoaderRoute: typeof AuthProjectSettingsImport;
+			parentRoute: typeof AuthProjectImport;
+		};
 		'/_auth/account/settings': {
 			id: '/_auth/account/settings';
 			path: '/settings';
 			fullPath: '/account/settings';
 			preLoaderRoute: typeof AuthAccountSettingsImport;
 			parentRoute: typeof AuthAccountImport;
 		};
+		'/_auth/$project/': {
+			id: '/_auth/$project/';
+			path: '/';
+			fullPath: '/$project/';
+			preLoaderRoute: typeof AuthProjectIndexImport;
+			parentRoute: typeof AuthProjectImport;
+		};
 		'/_auth/account/': {
 			id: '/_auth/account/';
 			path: '/';
@@ -120,6 +176,20 @@ declare module '@tanstack/react-router' {
 
 // Create and export the route tree
 
+interface AuthProjectRouteChildren {
+	AuthProjectBoardRoute: typeof AuthProjectBoardRoute;
+	AuthProjectSettingsRoute: typeof AuthProjectSettingsRoute;
+	AuthProjectIndexRoute: typeof AuthProjectIndexRoute;
+}
+
+const AuthProjectRouteChildren: AuthProjectRouteChildren = {
+	AuthProjectBoardRoute: AuthProjectBoardRoute,
+	AuthProjectSettingsRoute: AuthProjectSettingsRoute,
+	AuthProjectIndexRoute: AuthProjectIndexRoute,
+};
+
+const AuthProjectRouteWithChildren = AuthProjectRoute._addFileChildren(AuthProjectRouteChildren);
+
 interface AuthAccountRouteChildren {
 	AuthAccountSettingsRoute: typeof AuthAccountSettingsRoute;
 	AuthAccountIndexRoute: typeof AuthAccountIndexRoute;
@@ -133,10 +203,12 @@ const AuthAccountRouteChildren: AuthAccountRouteChildren = {
 const AuthAccountRouteWithChildren = AuthAccountRoute._addFileChildren(AuthAccountRouteChildren);
 
 interface AuthRouteChildren {
+	AuthProjectRoute: typeof AuthProjectRouteWithChildren;
 	AuthAccountRoute: typeof AuthAccountRouteWithChildren;
 }
 
 const AuthRouteChildren: AuthRouteChildren = {
+	AuthProjectRoute: AuthProjectRouteWithChildren,
 	AuthAccountRoute: AuthAccountRouteWithChildren,
 };
 
@@ -147,8 +219,12 @@ export interface FileRoutesByFullPath {
 	'': typeof AuthRouteWithChildren;
 	'/login': typeof LoginRoute;
 	'/signup': typeof SignupRoute;
+	'/$project': typeof AuthProjectRouteWithChildren;
 	'/account': typeof AuthAccountRouteWithChildren;
+	'/$project/board': typeof AuthProjectBoardRoute;
+	'/$project/settings': typeof AuthProjectSettingsRoute;
 	'/account/settings': typeof AuthAccountSettingsRoute;
+	'/$project/': typeof AuthProjectIndexRoute;
 	'/account/': typeof AuthAccountIndexRoute;
 }
 
@@ -157,7 +233,10 @@ export interface FileRoutesByTo {
 	'': typeof AuthRouteWithChildren;
 	'/login': typeof LoginRoute;
 	'/signup': typeof SignupRoute;
+	'/$project/board': typeof AuthProjectBoardRoute;
+	'/$project/settings': typeof AuthProjectSettingsRoute;
 	'/account/settings': typeof AuthAccountSettingsRoute;
+	'/$project': typeof AuthProjectIndexRoute;
 	'/account': typeof AuthAccountIndexRoute;
 }
 
@@ -167,24 +246,52 @@ export interface FileRoutesById {
 	'/_auth': typeof AuthRouteWithChildren;
 	'/login': typeof LoginRoute;
 	'/signup': typeof SignupRoute;
+	'/_auth/$project': typeof AuthProjectRouteWithChildren;
 	'/_auth/account': typeof AuthAccountRouteWithChildren;
+	'/_auth/$project/board': typeof AuthProjectBoardRoute;
+	'/_auth/$project/settings': typeof AuthProjectSettingsRoute;
 	'/_auth/account/settings': typeof AuthAccountSettingsRoute;
+	'/_auth/$project/': typeof AuthProjectIndexRoute;
 	'/_auth/account/': typeof AuthAccountIndexRoute;
 }
 
 export interface FileRouteTypes {
 	fileRoutesByFullPath: FileRoutesByFullPath;
-	fullPaths: '/' | '' | '/login' | '/signup' | '/account' | '/account/settings' | '/account/';
+	fullPaths:
+		| '/'
+		| ''
+		| '/login'
+		| '/signup'
+		| '/$project'
+		| '/account'
+		| '/$project/board'
+		| '/$project/settings'
+		| '/account/settings'
+		| '/$project/'
+		| '/account/';
 	fileRoutesByTo: FileRoutesByTo;
-	to: '/' | '' | '/login' | '/signup' | '/account/settings' | '/account';
+	to:
+		| '/'
+		| ''
+		| '/login'
+		| '/signup'
+		| '/$project/board'
+		| '/$project/settings'
+		| '/account/settings'
+		| '/$project'
+		| '/account';
 	id:
 		| '__root__'
 		| '/'
 		| '/_auth'
 		| '/login'
 		| '/signup'
+		| '/_auth/$project'
 		| '/_auth/account'
+		| '/_auth/$project/board'
+		| '/_auth/$project/settings'
 		| '/_auth/account/settings'
+		| '/_auth/$project/'
 		| '/_auth/account/';
 	fileRoutesById: FileRoutesById;
 }
@@ -225,6 +332,7 @@ export const routeTree = rootRoute
     "/_auth": {
       "filePath": "_auth.tsx",
       "children": [
+        "/_auth/$project",
         "/_auth/account"
       ]
     },
@@ -234,6 +342,15 @@ export const routeTree = rootRoute
     "/signup": {
       "filePath": "signup.tsx"
     },
+    "/_auth/$project": {
+      "filePath": "_auth.$project.tsx",
+      "parent": "/_auth",
+      "children": [
+        "/_auth/$project/board",
+        "/_auth/$project/settings",
+        "/_auth/$project/"
+      ]
+    },
     "/_auth/account": {
       "filePath": "_auth.account.tsx",
       "parent": "/_auth",
@@ -242,10 +359,22 @@ export const routeTree = rootRoute
         "/_auth/account/"
       ]
     },
+    "/_auth/$project/board": {
+      "filePath": "_auth.$project.board.tsx",
+      "parent": "/_auth/$project"
+    },
+    "/_auth/$project/settings": {
+      "filePath": "_auth.$project.settings.tsx",
+      "parent": "/_auth/$project"
+    },
     "/_auth/account/settings": {
       "filePath": "_auth.account.settings.tsx",
       "parent": "/_auth/account"
     },
+    "/_auth/$project/": {
+      "filePath": "_auth.$project.index.tsx",
+      "parent": "/_auth/$project"
+    },
     "/_auth/account/": {
       "filePath": "_auth.account.index.tsx",
       "parent": "/_auth/account"

diff --git a/apps/client/src/routes/_auth.$project.board.tsx b/apps/client/src/routes/_auth.$project.board.tsx
@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_auth/$project/board')({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const { project } = Route.useParams();
+	return <div>안녕하세요, {project} 칸반 보드 페이지</div>;
+}
diff --git a/apps/client/src/routes/_auth.$project.index.tsx b/apps/client/src/routes/_auth.$project.index.tsx
@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_auth/$project/')({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const { project } = Route.useParams();
+	return <div>안녕하세요, {project} 대시보드 페이지</div>;
+}
diff --git a/apps/client/src/routes/_auth.$project.settings.tsx b/apps/client/src/routes/_auth.$project.settings.tsx
@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_auth/$project/settings')({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const { project } = Route.useParams();
+	return <div>안녕하세요, {project} 설정 페이지</div>;
+}
diff --git a/apps/client/src/routes/_auth.$project.tsx b/apps/client/src/routes/_auth.$project.tsx
@@ -0,0 +1,49 @@
+import { createFileRoute, Link, Outlet } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_auth/$project')({
+	component: ProjectLayout,
+});
+
+function ProjectLayout() {
+	const { project } = Route.useParams();
+
+	return (
+		<>
+			<nav className="h-9 border-b px-6">
+				<ul className="flex h-full items-center gap-4 text-sm">
+					<li>
+						<Link
+							to="/$project"
+							params={{ project }}
+							activeOptions={{ exact: true }}
+							className="[&.active]:font-semibold"
+						>
+							Overview
+						</Link>
+					</li>
+					<li>
+						<Link
+							to="/$project/board"
+							params={{ project }}
+							activeOptions={{ exact: true }}
+							className="[&.active]:font-semibold"
+						>
+							Board
+						</Link>
+					</li>
+					<li>
+						<Link
+							to="/$project/settings"
+							params={{ project }}
+							activeOptions={{ exact: true }}
+							className="[&.active]:font-semibold"
+						>
+							Settings
+						</Link>
+					</li>
+				</ul>
+			</nav>
+			<Outlet />
+		</>
+	);
+}