feat: tanstack router 설정

* chore: tanstack router 설정
* feat: tanstack router 적용

apps/client/package.json

@@ -14,6 +14,7 @@
 	"dependencies": {
 		"@radix-ui/react-icons": "^1.3.1",
 		"@radix-ui/react-slot": "^1.1.0",
+		"@tanstack/react-router": "^1.79.0",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
 		"lucide-react": "^0.454.0",
@@ -24,6 +25,8 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.13.0",
+		"@tanstack/router-devtools": "^1.79.0",
+		"@tanstack/router-plugin": "^1.79.0",
 		"@types/react": "^18.3.12",
 		"@types/react-dom": "^18.3.1",
 		"@vitejs/plugin-react": "^4.3.3",

apps/client/src/App.tsx

@@ -1,90 +1,16 @@
-import { useState } from 'react';
-import { Button } from '@/components/ui/button.tsx';
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from './components/ui/card';
-import {
-	Section,
-	SectionContent,
-	SectionDescription,
-	SectionFooter,
-	SectionHeader,
-	SectionTitle,
-} from './components/ui/section';
+import { createRouter, RouterProvider } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
 
-const initialColumns = [
-	{
-		id: '0',
-		title: '할 일',
-		tasks: [
-			{ id: '1', title: '프로젝트 계획 수립' },
-			{ id: '2', title: '디자인 초안 작성' },
-			{
-				id: '5',
-				title: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publish`,
-			},
-			{ id: '6', title: '디자인 초안 작성' },
-			{ id: '7', title: '디자인 초안 작성' },
-			{ id: '8', title: '디자인 초안 작성' },
-			{ id: '9', title: '디자인 초안 작성' },
-			{ id: '10', title: '디자인 초안 작성' },
-		],
-	},
-	{
-		id: '1',
-		title: '진행 중',
-		tasks: [
-			{ id: '3', title: '프론트엔드 개발' },
-			{ id: '11', title: '프론트엔드 개발' },
-		],
-	},
-	{
-		id: '2',
-		title: '완료',
-		tasks: [{ id: '4', title: '요구사항 분석' }],
-	},
-];
+const router = createRouter({ routeTree });
 
-function App() {
-	const [columns] = useState(initialColumns);
-
-	return (
-		<div className="flex h-screen flex-col">
-			<div className="p-4">
-				<h1 className="text-primary pt-2">Welcome to Harmony!</h1>
-				<p>Harmony 는 일정관리 서비스입니다.</p>
-				<Button>default</Button>
-				<Button variant="destructive">destructive</Button>
-				<Button variant="secondary">secondary</Button>
-				<Button variant="outline">outline</Button>
-				<Button variant="ghost">ghost</Button>
-				<Button variant="link">link</Button>
-			</div>
+declare module '@tanstack/react-router' {
+	interface Register {
+		router: typeof router;
+	}
+}
 
-			<div className="flex flex-1 space-x-2 overflow-x-auto p-4">
-				{columns.map((column) => (
-					<Section key={column.id} className="flex w-80 flex-shrink-0 flex-col bg-[#f7f8f9]">
-						<SectionHeader>
-							<SectionTitle>{column.title}</SectionTitle>
-							<SectionDescription>섹션에 대한 추가 설명도 필요할까?</SectionDescription>
-						</SectionHeader>
-						<SectionContent className="flex-1 overflow-y-auto">
-							<div className="space-y-2">
-								{column.tasks.map((task) => (
-									<Card key={task.id} className="bg-[#ffffff]">
-										<CardHeader>
-											<CardTitle>{task.title}</CardTitle>
-										</CardHeader>
-										<CardContent>라벨1 라벨2 라벨3</CardContent>
-										<CardFooter>하위 이슈를 아코디언 형식으로 보여줄 것인가?</CardFooter>
-									</Card>
-								))}
-							</div>
-						</SectionContent>
-						<SectionFooter>+ 이슈 만들기</SectionFooter>
-					</Section>
-				))}
-			</div>
-		</div>
-	);
+function App() {
+	return <RouterProvider router={router} />;
 }
 
 export default App;

apps/client/src/main.tsx

@@ -3,8 +3,12 @@ import { createRoot } from 'react-dom/client';
 import './global.css';
 import App from './App.tsx';
 
-createRoot(document.getElementById('root')!).render(
-	<StrictMode>
-		<App />
-	</StrictMode>
-);
+const rootElement = document.getElementById('root')!;
+if (!rootElement.innerHTML) {
+	const root = createRoot(rootElement);
+	root.render(
+		<StrictMode>
+			<App />
+		</StrictMode>
+	);
+}

apps/client/src/routeTree.gen.ts

@@ -0,0 +1,134 @@
+/* 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 LoginImport } from './routes/login';
+import { Route as JoinImport } from './routes/join';
+import { Route as IndexImport } from './routes/index';
+
+// Create/Update Routes
+
+const LoginRoute = LoginImport.update({
+	id: '/login',
+	path: '/login',
+	getParentRoute: () => rootRoute,
+} as any);
+
+const JoinRoute = JoinImport.update({
+	id: '/join',
+	path: '/join',
+	getParentRoute: () => rootRoute,
+} as any);
+
+const IndexRoute = IndexImport.update({
+	id: '/',
+	path: '/',
+	getParentRoute: () => rootRoute,
+} as any);
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+	interface FileRoutesByPath {
+		'/': {
+			id: '/';
+			path: '/';
+			fullPath: '/';
+			preLoaderRoute: typeof IndexImport;
+			parentRoute: typeof rootRoute;
+		};
+		'/join': {
+			id: '/join';
+			path: '/join';
+			fullPath: '/join';
+			preLoaderRoute: typeof JoinImport;
+			parentRoute: typeof rootRoute;
+		};
+		'/login': {
+			id: '/login';
+			path: '/login';
+			fullPath: '/login';
+			preLoaderRoute: typeof LoginImport;
+			parentRoute: typeof rootRoute;
+		};
+	}
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+	'/': typeof IndexRoute;
+	'/join': typeof JoinRoute;
+	'/login': typeof LoginRoute;
+}
+
+export interface FileRoutesByTo {
+	'/': typeof IndexRoute;
+	'/join': typeof JoinRoute;
+	'/login': typeof LoginRoute;
+}
+
+export interface FileRoutesById {
+	__root__: typeof rootRoute;
+	'/': typeof IndexRoute;
+	'/join': typeof JoinRoute;
+	'/login': typeof LoginRoute;
+}
+
+export interface FileRouteTypes {
+	fileRoutesByFullPath: FileRoutesByFullPath;
+	fullPaths: '/' | '/join' | '/login';
+	fileRoutesByTo: FileRoutesByTo;
+	to: '/' | '/join' | '/login';
+	id: '__root__' | '/' | '/join' | '/login';
+	fileRoutesById: FileRoutesById;
+}
+
+export interface RootRouteChildren {
+	IndexRoute: typeof IndexRoute;
+	JoinRoute: typeof JoinRoute;
+	LoginRoute: typeof LoginRoute;
+}
+
+const rootRouteChildren: RootRouteChildren = {
+	IndexRoute: IndexRoute,
+	JoinRoute: JoinRoute,
+	LoginRoute: LoginRoute,
+};
+
+export const routeTree = rootRoute
+	._addFileChildren(rootRouteChildren)
+	._addFileTypes<FileRouteTypes>();
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/",
+        "/join",
+        "/login"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    },
+    "/join": {
+      "filePath": "join.tsx"
+    },
+    "/login": {
+      "filePath": "login.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */

apps/client/src/routes/__root.tsx

@@ -0,0 +1,11 @@
+import { createRootRoute, Outlet } from '@tanstack/react-router';
+import { TanStackRouterDevtools } from '@tanstack/router-devtools';
+
+export const Route = createRootRoute({
+	component: () => (
+		<>
+			<Outlet />
+			<TanStackRouterDevtools />
+		</>
+	),
+});

apps/client/src/routes/index.tsx

@@ -0,0 +1,21 @@
+import { createFileRoute, Link } from '@tanstack/react-router';
+
+function HomePage() {
+	return (
+		<div className="flex gap-2 p-2">
+			<Link to="/" className="[&.active]:font-bold">
+				Harmony
+			</Link>
+			<Link to="/login" className="[&.active]:font-bold">
+				Login
+			</Link>
+			<Link to="/join" className="[&.active]:font-bold">
+				Join
+			</Link>
+		</div>
+	);
+}
+
+export const Route = createFileRoute('/')({
+	component: HomePage,
+});

apps/client/src/routes/join.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+function RouteComponent() {
+	return 'Hello /join!';
+}
+
+export const Route = createFileRoute('/join')({
+	component: RouteComponent,
+});

apps/client/src/routes/login.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+function RouteComponent() {
+	return 'Hello /login!';
+}
+
+export const Route = createFileRoute('/login')({
+	component: RouteComponent,
+});

apps/client/vite.config.ts

@@ -1,10 +1,11 @@
 import path from 'path';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
 
 // https://vite.dev/config/
 export default defineConfig({
-	plugins: [react()],
+	plugins: [react(), TanStackRouterVite()],
 	resolve: {
 		alias: {
 			'@': path.resolve(__dirname, 'src'),