From e43050a8d12d0c0758bc9f585c8277015b6633c6 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Wed, 6 Nov 2024 18:34:11 +0900 Subject: [PATCH 1/9] =?UTF-8?q?feat:=20tanstack=20router=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=20=EC=84=B8=ED=8C=85=20-=20tanstack=20router=20?= =?UTF-8?q?=EC=84=A4=EC=B9=98=20-=20tanstack=20router=20cli=20=EC=84=A4?= =?UTF-8?q?=EC=B9=98=20-=20tanstack=20router=20vite=20plugin=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20-=20root=20=EA=B2=BD=EB=A1=9C=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/package.json | 3 ++ apps/web/src/routeTree.gen.ts | 59 ++++++++++++++++++++++++++++++++++ apps/web/src/routes/__root.tsx | 9 ++++++ apps/web/vite.config.ts | 3 +- 4 files changed, 73 insertions(+), 1 deletion(-) create mode 100644 apps/web/src/routeTree.gen.ts create mode 100644 apps/web/src/routes/__root.tsx diff --git a/apps/web/package.json b/apps/web/package.json index ed0b6c81..44db3f93 100644 --- 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", "react": "^18.3.1", "react-dom": "^18.3.1" }, @@ -19,6 +21,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/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts new file mode 100644 index 00000000..0f261ed4 --- /dev/null +++ b/apps/web/src/routeTree.gen.ts @@ -0,0 +1,59 @@ +/* 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'; + +// Create/Update Routes + +// Populate the FileRoutesByPath interface + +declare module '@tanstack/react-router' { + interface FileRoutesByPath {} +} + +// Create and export the route tree + +export interface FileRoutesByFullPath {} + +export interface FileRoutesByTo {} + +export interface FileRoutesById { + __root__: typeof rootRoute; +} + +export interface FileRouteTypes { + fileRoutesByFullPath: FileRoutesByFullPath; + fullPaths: never; + fileRoutesByTo: FileRoutesByTo; + to: never; + id: '__root__'; + fileRoutesById: FileRoutesById; +} + +export interface RootRouteChildren {} + +const rootRouteChildren: RootRouteChildren = {}; + +export const routeTree = rootRoute + ._addFileChildren(rootRouteChildren) + ._addFileTypes(); + +/* ROUTE_MANIFEST_START +{ + "routes": { + "__root__": { + "filePath": "__root.tsx", + "children": [] + } + } +} +ROUTE_MANIFEST_END */ diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx new file mode 100644 index 00000000..fe72a8e6 --- /dev/null +++ b/apps/web/src/routes/__root.tsx @@ -0,0 +1,9 @@ +import { Outlet, createRootRoute } from '@tanstack/react-router'; + +export const Route = createRootRoute({ + component: RootComponent, +}); + +function RootComponent() { + return ; +} diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts index edda3dee..8abfa9c5 100644 --- a/apps/web/vite.config.ts +++ b/apps/web/vite.config.ts @@ -1,8 +1,9 @@ +import { TanStackRouterVite } from '@tanstack/router-vite-plugin'; import react from '@vitejs/plugin-react'; import { defineConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths'; // https://vite.dev/config/ export default defineConfig({ - plugins: [react(), tsconfigPaths()], + plugins: [react(), tsconfigPaths(), TanStackRouterVite()], }); From 4857064d3eeb566cc7879d1a9fbefad7e2430fb9 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Wed, 6 Nov 2024 22:55:56 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=EA=B8=B0=EB=B3=B8=20=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=ED=8C=85=20=EB=A1=9C=EC=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/App.tsx | 16 +++++++- apps/web/src/components/common/Header.tsx | 14 +++++++ apps/web/src/routeTree.gen.ts | 47 ++++++++++++++++++----- apps/web/src/routes/__root.tsx | 17 +++++++- apps/web/src/routes/index.tsx | 9 +++++ 5 files changed, 91 insertions(+), 12 deletions(-) create mode 100644 apps/web/src/components/common/Header.tsx create mode 100644 apps/web/src/routes/index.tsx diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx index b4f6543f..8431b0a4 100644 --- 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 ( +
+ +
+ ); } export default App; diff --git a/apps/web/src/components/common/Header.tsx b/apps/web/src/components/common/Header.tsx new file mode 100644 index 00000000..7b4ae09e --- /dev/null +++ b/apps/web/src/components/common/Header.tsx @@ -0,0 +1,14 @@ +import { Link } from '@tanstack/react-router'; + +/**@desc router 테스트를 위해 임시 구현한 Header입니다. */ +function Header() { + return ( +
+ + 티클 + {' '} +
+ ); +} + +export default Header; diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts index 0f261ed4..e6c687fe 100644 --- a/apps/web/src/routeTree.gen.ts +++ b/apps/web/src/routeTree.gen.ts @@ -11,37 +11,61 @@ // Import Routes import { Route as rootRoute } from './routes/__root'; +import { Route as IndexImport } from './routes/index'; // Create/Update Routes +const IndexRoute = IndexImport.update({ + id: '/', + path: '/', + getParentRoute: () => rootRoute, +} as any); + // Populate the FileRoutesByPath interface declare module '@tanstack/react-router' { - interface FileRoutesByPath {} + interface FileRoutesByPath { + '/': { + id: '/'; + path: '/'; + fullPath: '/'; + preLoaderRoute: typeof IndexImport; + parentRoute: typeof rootRoute; + }; + } } // Create and export the route tree -export interface FileRoutesByFullPath {} +export interface FileRoutesByFullPath { + '/': typeof IndexRoute; +} -export interface FileRoutesByTo {} +export interface FileRoutesByTo { + '/': typeof IndexRoute; +} export interface FileRoutesById { __root__: typeof rootRoute; + '/': typeof IndexRoute; } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath; - fullPaths: never; + fullPaths: '/'; fileRoutesByTo: FileRoutesByTo; - to: never; - id: '__root__'; + to: '/'; + id: '__root__' | '/'; fileRoutesById: FileRoutesById; } -export interface RootRouteChildren {} +export interface RootRouteChildren { + IndexRoute: typeof IndexRoute; +} -const rootRouteChildren: RootRouteChildren = {}; +const rootRouteChildren: RootRouteChildren = { + IndexRoute: IndexRoute, +}; export const routeTree = rootRoute ._addFileChildren(rootRouteChildren) @@ -52,7 +76,12 @@ export const routeTree = rootRoute "routes": { "__root__": { "filePath": "__root.tsx", - "children": [] + "children": [ + "/" + ] + }, + "/": { + "filePath": "index.tsx" } } } diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx index fe72a8e6..8f174803 100644 --- a/apps/web/src/routes/__root.tsx +++ b/apps/web/src/routes/__root.tsx @@ -1,9 +1,22 @@ -import { Outlet, createRootRoute } from '@tanstack/react-router'; +import { Outlet, createRootRoute, useRouter } from '@tanstack/react-router'; + +import Header from '@/components/common/Header'; + +const NO_HEADER_PATHS = ['/live']; export const Route = createRootRoute({ component: RootComponent, }); function RootComponent() { - return ; + const router = useRouter(); + const currentPath = router.state.location.pathname; + const shouldShowHeader = !NO_HEADER_PATHS.includes(currentPath); + + return ( + <> + {shouldShowHeader &&
} + + + ); } diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx new file mode 100644 index 00000000..db102ab3 --- /dev/null +++ b/apps/web/src/routes/index.tsx @@ -0,0 +1,9 @@ +import { createFileRoute } from '@tanstack/react-router'; + +export const Route = createFileRoute('/')({ + component: IndexPage, +}); + +function IndexPage() { + return 'Hello /!'; +} From 45a1111d8f999618b91728877e8f82cb78d5cf76 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Wed, 6 Nov 2024 23:07:59 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20=ED=8B=B0=ED=81=B4=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EC=97=90=20=EB=8C=80=ED=95=9C=20=EB=8F=99?= =?UTF-8?q?=EC=A0=81=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/components/common/Header.tsx | 4 +-- apps/web/src/routeTree.gen.ts | 31 ++++++++++++++++++++--- apps/web/src/routes/index.tsx | 16 ++++++++++-- apps/web/src/routes/ticle/$ticleId.tsx | 10 ++++++++ apps/web/tailwind.config.ts | 2 +- 5 files changed, 54 insertions(+), 9 deletions(-) create mode 100644 apps/web/src/routes/ticle/$ticleId.tsx diff --git a/apps/web/src/components/common/Header.tsx b/apps/web/src/components/common/Header.tsx index 7b4ae09e..e61edff8 100644 --- a/apps/web/src/components/common/Header.tsx +++ b/apps/web/src/components/common/Header.tsx @@ -3,10 +3,10 @@ import { Link } from '@tanstack/react-router'; /**@desc router 테스트를 위해 임시 구현한 Header입니다. */ function Header() { return ( -
+
티클 - {' '} +
); } diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts index e6c687fe..14c38c01 100644 --- a/apps/web/src/routeTree.gen.ts +++ b/apps/web/src/routeTree.gen.ts @@ -12,6 +12,7 @@ import { Route as rootRoute } from './routes/__root'; import { Route as IndexImport } from './routes/index'; +import { Route as TicleTicleIdImport } from './routes/ticle/$ticleId'; // Create/Update Routes @@ -21,6 +22,12 @@ const IndexRoute = IndexImport.update({ getParentRoute: () => rootRoute, } as any); +const TicleTicleIdRoute = TicleTicleIdImport.update({ + id: '/ticle/$ticleId', + path: '/ticle/$ticleId', + getParentRoute: () => rootRoute, +} as any); + // Populate the FileRoutesByPath interface declare module '@tanstack/react-router' { @@ -32,6 +39,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof IndexImport; parentRoute: typeof rootRoute; }; + '/ticle/$ticleId': { + id: '/ticle/$ticleId'; + path: '/ticle/$ticleId'; + fullPath: '/ticle/$ticleId'; + preLoaderRoute: typeof TicleTicleIdImport; + parentRoute: typeof rootRoute; + }; } } @@ -39,32 +53,37 @@ declare module '@tanstack/react-router' { export interface FileRoutesByFullPath { '/': typeof IndexRoute; + '/ticle/$ticleId': typeof TicleTicleIdRoute; } export interface FileRoutesByTo { '/': typeof IndexRoute; + '/ticle/$ticleId': typeof TicleTicleIdRoute; } export interface FileRoutesById { __root__: typeof rootRoute; '/': typeof IndexRoute; + '/ticle/$ticleId': typeof TicleTicleIdRoute; } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath; - fullPaths: '/'; + fullPaths: '/' | '/ticle/$ticleId'; fileRoutesByTo: FileRoutesByTo; - to: '/'; - id: '__root__' | '/'; + to: '/' | '/ticle/$ticleId'; + id: '__root__' | '/' | '/ticle/$ticleId'; fileRoutesById: FileRoutesById; } export interface RootRouteChildren { IndexRoute: typeof IndexRoute; + TicleTicleIdRoute: typeof TicleTicleIdRoute; } const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, + TicleTicleIdRoute: TicleTicleIdRoute, }; export const routeTree = rootRoute @@ -77,11 +96,15 @@ export const routeTree = rootRoute "__root__": { "filePath": "__root.tsx", "children": [ - "/" + "/", + "/ticle/$ticleId" ] }, "/": { "filePath": "index.tsx" + }, + "/ticle/$ticleId": { + "filePath": "ticle/$ticleId.tsx" } } } diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx index db102ab3..936f9894 100644 --- a/apps/web/src/routes/index.tsx +++ b/apps/web/src/routes/index.tsx @@ -1,9 +1,21 @@ -import { createFileRoute } from '@tanstack/react-router'; +import { createFileRoute, Link } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ component: IndexPage, }); function IndexPage() { - return 'Hello /!'; + return ( +
+ + Ticle 1 + + + Ticle 2 + + + Ticle 3 + +
+ ); } diff --git a/apps/web/src/routes/ticle/$ticleId.tsx b/apps/web/src/routes/ticle/$ticleId.tsx new file mode 100644 index 00000000..62ff6019 --- /dev/null +++ b/apps/web/src/routes/ticle/$ticleId.tsx @@ -0,0 +1,10 @@ +import { createFileRoute } from '@tanstack/react-router'; + +export const Route = createFileRoute('/ticle/$ticleId')({ + component: RouteComponent, +}); + +function RouteComponent() { + const { ticleId } = Route.useParams(); + return `ticle ${ticleId}`; +} diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts index f7d4110a..aa284dc9 100644 --- a/apps/web/tailwind.config.ts +++ b/apps/web/tailwind.config.ts @@ -3,7 +3,7 @@ import type { Config } from 'tailwindcss'; const config: Config = { content: [ - './src/pages/**/*.{js,ts,jsx,tsx}', + './src/routes/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}', './src/*.tsx', ], From 6df1f593d745b329cebf8e4eac47e636d4c1bb85 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Thu, 7 Nov 2024 00:34:22 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feat:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?= =?UTF-8?q?=EB=93=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=8F=20=ED=95=98?= =?UTF-8?q?=EC=9C=84=20=ED=83=AD=20=EC=A0=84=ED=99=98=20=EB=9D=BC=EC=9A=B0?= =?UTF-8?q?=ED=8C=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/components/common/Header.tsx | 7 +- apps/web/src/components/dashboard/index.tsx | 17 ++++ apps/web/src/routeTree.gen.ts | 87 ++++++++++++++++++++- apps/web/src/routes/dashboard.tsx | 23 ++++++ apps/web/src/routes/dashboard/apply.tsx | 9 +++ apps/web/src/routes/dashboard/open.tsx | 9 +++ 6 files changed, 147 insertions(+), 5 deletions(-) create mode 100644 apps/web/src/components/dashboard/index.tsx create mode 100644 apps/web/src/routes/dashboard.tsx create mode 100644 apps/web/src/routes/dashboard/apply.tsx create mode 100644 apps/web/src/routes/dashboard/open.tsx diff --git a/apps/web/src/components/common/Header.tsx b/apps/web/src/components/common/Header.tsx index e61edff8..4696d035 100644 --- a/apps/web/src/components/common/Header.tsx +++ b/apps/web/src/components/common/Header.tsx @@ -3,11 +3,14 @@ import { Link } from '@tanstack/react-router'; /**@desc router 테스트를 위해 임시 구현한 Header입니다. */ function Header() { return ( -
+
+ + 대시보드 + + ); } diff --git a/apps/web/src/components/dashboard/index.tsx b/apps/web/src/components/dashboard/index.tsx new file mode 100644 index 00000000..dc692835 --- /dev/null +++ b/apps/web/src/components/dashboard/index.tsx @@ -0,0 +1,17 @@ +import { Link } from '@tanstack/react-router'; + +/**@desc router 테스트를 위해 임시 구현한 DashboardTab입니다. */ +function DashboardTab() { + return ( + + ); +} + +export default DashboardTab; diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts index 14c38c01..f9e70ca3 100644 --- a/apps/web/src/routeTree.gen.ts +++ b/apps/web/src/routeTree.gen.ts @@ -11,11 +11,20 @@ // Import Routes import { Route as rootRoute } from './routes/__root'; +import { Route as DashboardImport } from './routes/dashboard'; import { Route as IndexImport } from './routes/index'; import { Route as TicleTicleIdImport } from './routes/ticle/$ticleId'; +import { Route as DashboardOpenImport } from './routes/dashboard/open'; +import { Route as DashboardApplyImport } from './routes/dashboard/apply'; // Create/Update Routes +const DashboardRoute = DashboardImport.update({ + id: '/dashboard', + path: '/dashboard', + getParentRoute: () => rootRoute, +} as any); + const IndexRoute = IndexImport.update({ id: '/', path: '/', @@ -28,6 +37,18 @@ const TicleTicleIdRoute = TicleTicleIdImport.update({ getParentRoute: () => rootRoute, } as any); +const DashboardOpenRoute = DashboardOpenImport.update({ + id: '/open', + path: '/open', + getParentRoute: () => DashboardRoute, +} as any); + +const DashboardApplyRoute = DashboardApplyImport.update({ + id: '/apply', + path: '/apply', + getParentRoute: () => DashboardRoute, +} as any); + // Populate the FileRoutesByPath interface declare module '@tanstack/react-router' { @@ -39,6 +60,27 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof IndexImport; parentRoute: typeof rootRoute; }; + '/dashboard': { + id: '/dashboard'; + path: '/dashboard'; + fullPath: '/dashboard'; + preLoaderRoute: typeof DashboardImport; + parentRoute: typeof rootRoute; + }; + '/dashboard/apply': { + id: '/dashboard/apply'; + path: '/apply'; + fullPath: '/dashboard/apply'; + preLoaderRoute: typeof DashboardApplyImport; + parentRoute: typeof DashboardImport; + }; + '/dashboard/open': { + id: '/dashboard/open'; + path: '/open'; + fullPath: '/dashboard/open'; + preLoaderRoute: typeof DashboardOpenImport; + parentRoute: typeof DashboardImport; + }; '/ticle/$ticleId': { id: '/ticle/$ticleId'; path: '/ticle/$ticleId'; @@ -51,38 +93,61 @@ declare module '@tanstack/react-router' { // Create and export the route tree +interface DashboardRouteChildren { + DashboardApplyRoute: typeof DashboardApplyRoute; + DashboardOpenRoute: typeof DashboardOpenRoute; +} + +const DashboardRouteChildren: DashboardRouteChildren = { + DashboardApplyRoute: DashboardApplyRoute, + DashboardOpenRoute: DashboardOpenRoute, +}; + +const DashboardRouteWithChildren = DashboardRoute._addFileChildren(DashboardRouteChildren); + export interface FileRoutesByFullPath { '/': typeof IndexRoute; + '/dashboard': typeof DashboardRouteWithChildren; + '/dashboard/apply': typeof DashboardApplyRoute; + '/dashboard/open': typeof DashboardOpenRoute; '/ticle/$ticleId': typeof TicleTicleIdRoute; } export interface FileRoutesByTo { '/': typeof IndexRoute; + '/dashboard': typeof DashboardRouteWithChildren; + '/dashboard/apply': typeof DashboardApplyRoute; + '/dashboard/open': typeof DashboardOpenRoute; '/ticle/$ticleId': typeof TicleTicleIdRoute; } export interface FileRoutesById { __root__: typeof rootRoute; '/': typeof IndexRoute; + '/dashboard': typeof DashboardRouteWithChildren; + '/dashboard/apply': typeof DashboardApplyRoute; + '/dashboard/open': typeof DashboardOpenRoute; '/ticle/$ticleId': typeof TicleTicleIdRoute; } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath; - fullPaths: '/' | '/ticle/$ticleId'; + fullPaths: '/' | '/dashboard' | '/dashboard/apply' | '/dashboard/open' | '/ticle/$ticleId'; fileRoutesByTo: FileRoutesByTo; - to: '/' | '/ticle/$ticleId'; - id: '__root__' | '/' | '/ticle/$ticleId'; + to: '/' | '/dashboard' | '/dashboard/apply' | '/dashboard/open' | '/ticle/$ticleId'; + id: '__root__' | '/' | '/dashboard' | '/dashboard/apply' | '/dashboard/open' | '/ticle/$ticleId'; fileRoutesById: FileRoutesById; } export interface RootRouteChildren { IndexRoute: typeof IndexRoute; + DashboardRoute: typeof DashboardRouteWithChildren; TicleTicleIdRoute: typeof TicleTicleIdRoute; } const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, + DashboardRoute: DashboardRouteWithChildren, TicleTicleIdRoute: TicleTicleIdRoute, }; @@ -97,12 +162,28 @@ export const routeTree = rootRoute "filePath": "__root.tsx", "children": [ "/", + "/dashboard", "/ticle/$ticleId" ] }, "/": { "filePath": "index.tsx" }, + "/dashboard": { + "filePath": "dashboard.tsx", + "children": [ + "/dashboard/apply", + "/dashboard/open" + ] + }, + "/dashboard/apply": { + "filePath": "dashboard/apply.tsx", + "parent": "/dashboard" + }, + "/dashboard/open": { + "filePath": "dashboard/open.tsx", + "parent": "/dashboard" + }, "/ticle/$ticleId": { "filePath": "ticle/$ticleId.tsx" } diff --git a/apps/web/src/routes/dashboard.tsx b/apps/web/src/routes/dashboard.tsx new file mode 100644 index 00000000..1c44db74 --- /dev/null +++ b/apps/web/src/routes/dashboard.tsx @@ -0,0 +1,23 @@ +import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'; + +import DashboardTab from '@/components/dashboard'; + +export const Route = createFileRoute('/dashboard')({ + component: RouteComponent, + beforeLoad: () => { + if (window.location.pathname === '/dashboard') { + throw redirect({ + to: '/dashboard/apply', + }); + } + }, +}); + +function RouteComponent() { + return ( + <> + + + + ); +} diff --git a/apps/web/src/routes/dashboard/apply.tsx b/apps/web/src/routes/dashboard/apply.tsx new file mode 100644 index 00000000..56ce5bab --- /dev/null +++ b/apps/web/src/routes/dashboard/apply.tsx @@ -0,0 +1,9 @@ +import { createFileRoute } from '@tanstack/react-router'; + +export const Route = createFileRoute('/dashboard/apply')({ + component: RouteComponent, +}); + +function RouteComponent() { + return '내가 신청한 티클'; +} diff --git a/apps/web/src/routes/dashboard/open.tsx b/apps/web/src/routes/dashboard/open.tsx new file mode 100644 index 00000000..33fc20bf --- /dev/null +++ b/apps/web/src/routes/dashboard/open.tsx @@ -0,0 +1,9 @@ +import { createFileRoute } from '@tanstack/react-router'; + +export const Route = createFileRoute('/dashboard/open')({ + component: RouteComponent, +}); + +function RouteComponent() { + return '내가 개설한 티클'; +} From d39f1912bf1d8aebb4c73f443a7ba5807733bdcf Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Thu, 7 Nov 2024 00:41:38 +0900 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20=ED=8B=B0=ED=81=B4=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A4=ED=95=98=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/components/common/Header.tsx | 3 + apps/web/src/routeTree.gen.ts | 102 +++++++++++++++++++++- apps/web/src/routes/auth/login.tsx | 9 ++ apps/web/src/routes/auth/oauth.tsx | 16 ++++ apps/web/src/routes/index.tsx | 25 +++--- apps/web/src/routes/ticle/open.tsx | 9 ++ 6 files changed, 149 insertions(+), 15 deletions(-) create mode 100644 apps/web/src/routes/auth/login.tsx create mode 100644 apps/web/src/routes/auth/oauth.tsx create mode 100644 apps/web/src/routes/ticle/open.tsx diff --git a/apps/web/src/components/common/Header.tsx b/apps/web/src/components/common/Header.tsx index 4696d035..922d3e81 100644 --- a/apps/web/src/components/common/Header.tsx +++ b/apps/web/src/components/common/Header.tsx @@ -10,6 +10,9 @@ function Header() { 대시보드 + + 로그인 + ); } diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts index f9e70ca3..48e582b6 100644 --- a/apps/web/src/routeTree.gen.ts +++ b/apps/web/src/routeTree.gen.ts @@ -13,9 +13,12 @@ import { Route as rootRoute } from './routes/__root'; import { Route as DashboardImport } from './routes/dashboard'; 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 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 @@ -31,6 +34,12 @@ const IndexRoute = IndexImport.update({ 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', @@ -49,6 +58,18 @@ const DashboardApplyRoute = DashboardApplyImport.update({ getParentRoute: () => DashboardRoute, } 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' { @@ -67,6 +88,20 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof DashboardImport; 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'; @@ -88,6 +123,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof TicleTicleIdImport; parentRoute: typeof rootRoute; }; + '/ticle/open': { + id: '/ticle/open'; + path: '/ticle/open'; + fullPath: '/ticle/open'; + preLoaderRoute: typeof TicleOpenImport; + parentRoute: typeof rootRoute; + }; } } @@ -108,47 +150,87 @@ const DashboardRouteWithChildren = DashboardRoute._addFileChildren(DashboardRout export interface FileRoutesByFullPath { '/': typeof IndexRoute; '/dashboard': typeof DashboardRouteWithChildren; + '/auth/login': typeof AuthLoginRoute; + '/auth/oauth': typeof AuthOauthRoute; '/dashboard/apply': typeof DashboardApplyRoute; '/dashboard/open': typeof DashboardOpenRoute; '/ticle/$ticleId': typeof TicleTicleIdRoute; + '/ticle/open': typeof TicleOpenRoute; } export interface FileRoutesByTo { '/': typeof IndexRoute; '/dashboard': typeof DashboardRouteWithChildren; + '/auth/login': typeof AuthLoginRoute; + '/auth/oauth': typeof AuthOauthRoute; '/dashboard/apply': typeof DashboardApplyRoute; '/dashboard/open': typeof DashboardOpenRoute; '/ticle/$ticleId': typeof TicleTicleIdRoute; + '/ticle/open': typeof TicleOpenRoute; } export interface FileRoutesById { __root__: typeof rootRoute; '/': typeof IndexRoute; '/dashboard': typeof DashboardRouteWithChildren; + '/auth/login': typeof AuthLoginRoute; + '/auth/oauth': typeof AuthOauthRoute; '/dashboard/apply': typeof DashboardApplyRoute; '/dashboard/open': typeof DashboardOpenRoute; '/ticle/$ticleId': typeof TicleTicleIdRoute; + '/ticle/open': typeof TicleOpenRoute; } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath; - fullPaths: '/' | '/dashboard' | '/dashboard/apply' | '/dashboard/open' | '/ticle/$ticleId'; + fullPaths: + | '/' + | '/dashboard' + | '/auth/login' + | '/auth/oauth' + | '/dashboard/apply' + | '/dashboard/open' + | '/ticle/$ticleId' + | '/ticle/open'; fileRoutesByTo: FileRoutesByTo; - to: '/' | '/dashboard' | '/dashboard/apply' | '/dashboard/open' | '/ticle/$ticleId'; - id: '__root__' | '/' | '/dashboard' | '/dashboard/apply' | '/dashboard/open' | '/ticle/$ticleId'; + to: + | '/' + | '/dashboard' + | '/auth/login' + | '/auth/oauth' + | '/dashboard/apply' + | '/dashboard/open' + | '/ticle/$ticleId' + | '/ticle/open'; + id: + | '__root__' + | '/' + | '/dashboard' + | '/auth/login' + | '/auth/oauth' + | '/dashboard/apply' + | '/dashboard/open' + | '/ticle/$ticleId' + | '/ticle/open'; fileRoutesById: FileRoutesById; } export interface RootRouteChildren { IndexRoute: typeof IndexRoute; DashboardRoute: typeof DashboardRouteWithChildren; + AuthLoginRoute: typeof AuthLoginRoute; + AuthOauthRoute: typeof AuthOauthRoute; TicleTicleIdRoute: typeof TicleTicleIdRoute; + TicleOpenRoute: typeof TicleOpenRoute; } const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, DashboardRoute: DashboardRouteWithChildren, + AuthLoginRoute: AuthLoginRoute, + AuthOauthRoute: AuthOauthRoute, TicleTicleIdRoute: TicleTicleIdRoute, + TicleOpenRoute: TicleOpenRoute, }; export const routeTree = rootRoute @@ -163,7 +245,10 @@ export const routeTree = rootRoute "children": [ "/", "/dashboard", - "/ticle/$ticleId" + "/auth/login", + "/auth/oauth", + "/ticle/$ticleId", + "/ticle/open" ] }, "/": { @@ -176,6 +261,12 @@ export const routeTree = rootRoute "/dashboard/open" ] }, + "/auth/login": { + "filePath": "auth/login.tsx" + }, + "/auth/oauth": { + "filePath": "auth/oauth.tsx" + }, "/dashboard/apply": { "filePath": "dashboard/apply.tsx", "parent": "/dashboard" @@ -186,6 +277,9 @@ export const routeTree = rootRoute }, "/ticle/$ticleId": { "filePath": "ticle/$ticleId.tsx" + }, + "/ticle/open": { + "filePath": "ticle/open.tsx" } } } diff --git a/apps/web/src/routes/auth/login.tsx b/apps/web/src/routes/auth/login.tsx new file mode 100644 index 00000000..712242c5 --- /dev/null +++ b/apps/web/src/routes/auth/login.tsx @@ -0,0 +1,9 @@ +import { createFileRoute } from '@tanstack/react-router'; + +export const Route = createFileRoute('/auth/login')({ + component: RouteComponent, +}); + +function RouteComponent() { + return 'local 로그인'; +} diff --git a/apps/web/src/routes/auth/oauth.tsx b/apps/web/src/routes/auth/oauth.tsx new file mode 100644 index 00000000..a07012af --- /dev/null +++ b/apps/web/src/routes/auth/oauth.tsx @@ -0,0 +1,16 @@ +import { createFileRoute, Link } from '@tanstack/react-router'; + +export const Route = createFileRoute('/auth/oauth')({ + component: RouteComponent, +}); + +function RouteComponent() { + return ( +
+ OAuth 로그인 + + 로컬 로그인 + +
+ ); +} diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx index 936f9894..a2d07bc8 100644 --- a/apps/web/src/routes/index.tsx +++ b/apps/web/src/routes/index.tsx @@ -6,16 +6,19 @@ export const Route = createFileRoute('/')({ function IndexPage() { return ( -
- - Ticle 1 - - - Ticle 2 - - - Ticle 3 - -
+ <> + 티클 개설하기 +
+ + Ticle 1 + + + Ticle 2 + + + Ticle 3 + +
+ ); } diff --git a/apps/web/src/routes/ticle/open.tsx b/apps/web/src/routes/ticle/open.tsx new file mode 100644 index 00000000..1e3ecaf4 --- /dev/null +++ b/apps/web/src/routes/ticle/open.tsx @@ -0,0 +1,9 @@ +import { createFileRoute } from '@tanstack/react-router'; + +export const Route = createFileRoute('/ticle/open')({ + component: RouteComponent, +}); + +function RouteComponent() { + return '티클 개설하기'; +} From 6f228e7c3c277a7dbad4c155506b8dac6aa9a182 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Thu, 7 Nov 2024 02:36:40 +0900 Subject: [PATCH 6/9] =?UTF-8?q?feat:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?= =?UTF-8?q?=EB=93=9C=EC=97=90=20=EB=8C=80=ED=95=9C=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=EA=B3=BC=20=EC=A4=91=EC=B2=A9=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/routeTree.gen.ts | 34 ++++++++++--------- .../{dashboard.tsx => dashboard/_layout.tsx} | 0 apps/web/vite.config.ts | 2 +- 3 files changed, 19 insertions(+), 17 deletions(-) rename apps/web/src/routes/{dashboard.tsx => dashboard/_layout.tsx} (100%) diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts index 48e582b6..37dafbe8 100644 --- a/apps/web/src/routeTree.gen.ts +++ b/apps/web/src/routeTree.gen.ts @@ -11,7 +11,7 @@ // Import Routes import { Route as rootRoute } from './routes/__root'; -import { Route as DashboardImport } from './routes/dashboard'; +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'; @@ -22,7 +22,7 @@ import { Route as AuthLoginImport } from './routes/auth/login'; // Create/Update Routes -const DashboardRoute = DashboardImport.update({ +const DashboardLayoutRoute = DashboardLayoutImport.update({ id: '/dashboard', path: '/dashboard', getParentRoute: () => rootRoute, @@ -49,13 +49,13 @@ const TicleTicleIdRoute = TicleTicleIdImport.update({ const DashboardOpenRoute = DashboardOpenImport.update({ id: '/open', path: '/open', - getParentRoute: () => DashboardRoute, + getParentRoute: () => DashboardLayoutRoute, } as any); const DashboardApplyRoute = DashboardApplyImport.update({ id: '/apply', path: '/apply', - getParentRoute: () => DashboardRoute, + getParentRoute: () => DashboardLayoutRoute, } as any); const AuthOauthRoute = AuthOauthImport.update({ @@ -85,7 +85,7 @@ declare module '@tanstack/react-router' { id: '/dashboard'; path: '/dashboard'; fullPath: '/dashboard'; - preLoaderRoute: typeof DashboardImport; + preLoaderRoute: typeof DashboardLayoutImport; parentRoute: typeof rootRoute; }; '/auth/login': { @@ -107,14 +107,14 @@ declare module '@tanstack/react-router' { path: '/apply'; fullPath: '/dashboard/apply'; preLoaderRoute: typeof DashboardApplyImport; - parentRoute: typeof DashboardImport; + parentRoute: typeof DashboardLayoutImport; }; '/dashboard/open': { id: '/dashboard/open'; path: '/open'; fullPath: '/dashboard/open'; preLoaderRoute: typeof DashboardOpenImport; - parentRoute: typeof DashboardImport; + parentRoute: typeof DashboardLayoutImport; }; '/ticle/$ticleId': { id: '/ticle/$ticleId'; @@ -135,21 +135,23 @@ declare module '@tanstack/react-router' { // Create and export the route tree -interface DashboardRouteChildren { +interface DashboardLayoutRouteChildren { DashboardApplyRoute: typeof DashboardApplyRoute; DashboardOpenRoute: typeof DashboardOpenRoute; } -const DashboardRouteChildren: DashboardRouteChildren = { +const DashboardLayoutRouteChildren: DashboardLayoutRouteChildren = { DashboardApplyRoute: DashboardApplyRoute, DashboardOpenRoute: DashboardOpenRoute, }; -const DashboardRouteWithChildren = DashboardRoute._addFileChildren(DashboardRouteChildren); +const DashboardLayoutRouteWithChildren = DashboardLayoutRoute._addFileChildren( + DashboardLayoutRouteChildren +); export interface FileRoutesByFullPath { '/': typeof IndexRoute; - '/dashboard': typeof DashboardRouteWithChildren; + '/dashboard': typeof DashboardLayoutRouteWithChildren; '/auth/login': typeof AuthLoginRoute; '/auth/oauth': typeof AuthOauthRoute; '/dashboard/apply': typeof DashboardApplyRoute; @@ -160,7 +162,7 @@ export interface FileRoutesByFullPath { export interface FileRoutesByTo { '/': typeof IndexRoute; - '/dashboard': typeof DashboardRouteWithChildren; + '/dashboard': typeof DashboardLayoutRouteWithChildren; '/auth/login': typeof AuthLoginRoute; '/auth/oauth': typeof AuthOauthRoute; '/dashboard/apply': typeof DashboardApplyRoute; @@ -172,7 +174,7 @@ export interface FileRoutesByTo { export interface FileRoutesById { __root__: typeof rootRoute; '/': typeof IndexRoute; - '/dashboard': typeof DashboardRouteWithChildren; + '/dashboard': typeof DashboardLayoutRouteWithChildren; '/auth/login': typeof AuthLoginRoute; '/auth/oauth': typeof AuthOauthRoute; '/dashboard/apply': typeof DashboardApplyRoute; @@ -217,7 +219,7 @@ export interface FileRouteTypes { export interface RootRouteChildren { IndexRoute: typeof IndexRoute; - DashboardRoute: typeof DashboardRouteWithChildren; + DashboardLayoutRoute: typeof DashboardLayoutRouteWithChildren; AuthLoginRoute: typeof AuthLoginRoute; AuthOauthRoute: typeof AuthOauthRoute; TicleTicleIdRoute: typeof TicleTicleIdRoute; @@ -226,7 +228,7 @@ export interface RootRouteChildren { const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, - DashboardRoute: DashboardRouteWithChildren, + DashboardLayoutRoute: DashboardLayoutRouteWithChildren, AuthLoginRoute: AuthLoginRoute, AuthOauthRoute: AuthOauthRoute, TicleTicleIdRoute: TicleTicleIdRoute, @@ -255,7 +257,7 @@ export const routeTree = rootRoute "filePath": "index.tsx" }, "/dashboard": { - "filePath": "dashboard.tsx", + "filePath": "dashboard/_layout.tsx", "children": [ "/dashboard/apply", "/dashboard/open" diff --git a/apps/web/src/routes/dashboard.tsx b/apps/web/src/routes/dashboard/_layout.tsx similarity index 100% rename from apps/web/src/routes/dashboard.tsx rename to apps/web/src/routes/dashboard/_layout.tsx diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts index 8abfa9c5..6f1052d1 100644 --- a/apps/web/vite.config.ts +++ b/apps/web/vite.config.ts @@ -5,5 +5,5 @@ import tsconfigPaths from 'vite-tsconfig-paths'; // https://vite.dev/config/ export default defineConfig({ - plugins: [react(), tsconfigPaths(), TanStackRouterVite()], + plugins: [react(), tsconfigPaths(), TanStackRouterVite({ routeToken: '_layout' })], }); From 642232e65b7af51ef5c9dab8145671ce7dc8a197 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Thu, 7 Nov 2024 03:49:48 +0900 Subject: [PATCH 7/9] =?UTF-8?q?feat:=20=EA=B2=BD=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=EC=8B=9C=20Header=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20?= =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=EC=9D=B4=20=EC=A0=81=EC=9A=A9?= =?UTF-8?q?=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/routes/__root.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx index 8f174803..7e0160cb 100644 --- a/apps/web/src/routes/__root.tsx +++ b/apps/web/src/routes/__root.tsx @@ -1,21 +1,21 @@ -import { Outlet, createRootRoute, useRouter } from '@tanstack/react-router'; +import { Outlet, createRootRoute, useLocation } from '@tanstack/react-router'; import Header from '@/components/common/Header'; -const NO_HEADER_PATHS = ['/live']; +const NO_HEADER_PATHS = ['/live', '/auth/oauth', '/auth/login']; export const Route = createRootRoute({ component: RootComponent, }); function RootComponent() { - const router = useRouter(); - const currentPath = router.state.location.pathname; - const shouldShowHeader = !NO_HEADER_PATHS.includes(currentPath); + const location = useLocation(); + const currentPath = location.pathname; + const hasHeader = !NO_HEADER_PATHS.includes(currentPath); return ( <> - {shouldShowHeader &&
} + {hasHeader &&
} ); From c592e5e9537cfc57b6350fa163db08d6962d585d Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Thu, 7 Nov 2024 04:05:31 +0900 Subject: [PATCH 8/9] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9D=B4=EB=B8=8C=20?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EB=A6=AC=EB=B0=8D=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/routeTree.gen.ts | 26 ++++++++++++++++++++++++++ apps/web/src/routes/__root.tsx | 4 ++-- apps/web/src/routes/live/$ticleId.tsx | 10 ++++++++++ 3 files changed, 38 insertions(+), 2 deletions(-) create mode 100644 apps/web/src/routes/live/$ticleId.tsx diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts index 37dafbe8..5c23c4d7 100644 --- a/apps/web/src/routeTree.gen.ts +++ b/apps/web/src/routeTree.gen.ts @@ -15,6 +15,7 @@ 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'; @@ -46,6 +47,12 @@ const TicleTicleIdRoute = TicleTicleIdImport.update({ 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', @@ -116,6 +123,13 @@ declare module '@tanstack/react-router' { 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'; @@ -156,6 +170,7 @@ export interface FileRoutesByFullPath { '/auth/oauth': typeof AuthOauthRoute; '/dashboard/apply': typeof DashboardApplyRoute; '/dashboard/open': typeof DashboardOpenRoute; + '/live/$ticleId': typeof LiveTicleIdRoute; '/ticle/$ticleId': typeof TicleTicleIdRoute; '/ticle/open': typeof TicleOpenRoute; } @@ -167,6 +182,7 @@ export interface FileRoutesByTo { '/auth/oauth': typeof AuthOauthRoute; '/dashboard/apply': typeof DashboardApplyRoute; '/dashboard/open': typeof DashboardOpenRoute; + '/live/$ticleId': typeof LiveTicleIdRoute; '/ticle/$ticleId': typeof TicleTicleIdRoute; '/ticle/open': typeof TicleOpenRoute; } @@ -179,6 +195,7 @@ export interface FileRoutesById { '/auth/oauth': typeof AuthOauthRoute; '/dashboard/apply': typeof DashboardApplyRoute; '/dashboard/open': typeof DashboardOpenRoute; + '/live/$ticleId': typeof LiveTicleIdRoute; '/ticle/$ticleId': typeof TicleTicleIdRoute; '/ticle/open': typeof TicleOpenRoute; } @@ -192,6 +209,7 @@ export interface FileRouteTypes { | '/auth/oauth' | '/dashboard/apply' | '/dashboard/open' + | '/live/$ticleId' | '/ticle/$ticleId' | '/ticle/open'; fileRoutesByTo: FileRoutesByTo; @@ -202,6 +220,7 @@ export interface FileRouteTypes { | '/auth/oauth' | '/dashboard/apply' | '/dashboard/open' + | '/live/$ticleId' | '/ticle/$ticleId' | '/ticle/open'; id: @@ -212,6 +231,7 @@ export interface FileRouteTypes { | '/auth/oauth' | '/dashboard/apply' | '/dashboard/open' + | '/live/$ticleId' | '/ticle/$ticleId' | '/ticle/open'; fileRoutesById: FileRoutesById; @@ -222,6 +242,7 @@ export interface RootRouteChildren { DashboardLayoutRoute: typeof DashboardLayoutRouteWithChildren; AuthLoginRoute: typeof AuthLoginRoute; AuthOauthRoute: typeof AuthOauthRoute; + LiveTicleIdRoute: typeof LiveTicleIdRoute; TicleTicleIdRoute: typeof TicleTicleIdRoute; TicleOpenRoute: typeof TicleOpenRoute; } @@ -231,6 +252,7 @@ const rootRouteChildren: RootRouteChildren = { DashboardLayoutRoute: DashboardLayoutRouteWithChildren, AuthLoginRoute: AuthLoginRoute, AuthOauthRoute: AuthOauthRoute, + LiveTicleIdRoute: LiveTicleIdRoute, TicleTicleIdRoute: TicleTicleIdRoute, TicleOpenRoute: TicleOpenRoute, }; @@ -249,6 +271,7 @@ export const routeTree = rootRoute "/dashboard", "/auth/login", "/auth/oauth", + "/live/$ticleId", "/ticle/$ticleId", "/ticle/open" ] @@ -277,6 +300,9 @@ export const routeTree = rootRoute "filePath": "dashboard/open.tsx", "parent": "/dashboard" }, + "/live/$ticleId": { + "filePath": "live/$ticleId.tsx" + }, "/ticle/$ticleId": { "filePath": "ticle/$ticleId.tsx" }, diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx index 7e0160cb..39cad695 100644 --- a/apps/web/src/routes/__root.tsx +++ b/apps/web/src/routes/__root.tsx @@ -2,7 +2,7 @@ import { Outlet, createRootRoute, useLocation } from '@tanstack/react-router'; import Header from '@/components/common/Header'; -const NO_HEADER_PATHS = ['/live', '/auth/oauth', '/auth/login']; +const NO_HEADER_PATHS = ['/live', '/auth']; export const Route = createRootRoute({ component: RootComponent, @@ -11,7 +11,7 @@ export const Route = createRootRoute({ function RootComponent() { const location = useLocation(); const currentPath = location.pathname; - const hasHeader = !NO_HEADER_PATHS.includes(currentPath); + const hasHeader = !NO_HEADER_PATHS.some((path) => currentPath.startsWith(path)); return ( <> diff --git a/apps/web/src/routes/live/$ticleId.tsx b/apps/web/src/routes/live/$ticleId.tsx new file mode 100644 index 00000000..9ded0d41 --- /dev/null +++ b/apps/web/src/routes/live/$ticleId.tsx @@ -0,0 +1,10 @@ +import { createFileRoute } from '@tanstack/react-router'; + +export const Route = createFileRoute('/live/$ticleId')({ + component: RouteComponent, +}); + +function RouteComponent() { + const { ticleId } = Route.useParams(); + return `live ${ticleId}`; +} From 52161cf80b0ee5046e6b5665d81cb93ba3696dee Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sat, 9 Nov 2024 02:05:24 +0900 Subject: [PATCH 9/9] =?UTF-8?q?feat:=20App.tsx=20=EC=B5=9C=EC=83=81?= =?UTF-8?q?=EB=8B=A8=20=ED=83=9C=EA=B7=B8=20=EB=B9=88=ED=83=9C=EA=B7=B8?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/App.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx index 8431b0a4..43bae127 100644 --- a/apps/web/src/App.tsx +++ b/apps/web/src/App.tsx @@ -10,9 +10,9 @@ declare module '@tanstack/react-router' { function App() { return ( -
+ <> -
+ ); }