feat: add basic file structure and routing

src/App.tsx

@@ -1,10 +1,33 @@
+import { createHashRouter, RouterProvider } from 'react-router-dom';
+
+import MainLayout from '@/layouts/MainLayout';
+import LoginPage from '@pages/LoginPage';
+import MainPage from '@pages/MainPage';
+import WelcomePage from '@pages/WelcomePage';
+
+const router = createHashRouter([
+  {
+    path: '/',
+    element: <MainLayout />,
+    children: [
+      {
+        path: '/',
+        element: <WelcomePage />,
+      },
+      {
+        path: 'login',
+        element: <LoginPage />,
+      },
+      {
+        path: 'mainpage',
+        element: <MainPage />,
+      },
+    ],
+  },
+]);
+
 function App() {
-  return (
-    <div className="h-[100dvh] bg-[green] text-3xl">
-      <div>Hello, I&apos;m the future graphiql app!</div>
-      <div>Trulala</div>
-    </div>
-  );
+  return <RouterProvider router={router} />;
 }
 
 export default App;

src/layouts/MainLayout.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from 'react-router-dom';
+
+export default function MainLayout() {
+  return (
+    <main>
+      <header>Here will be header</header>
+      <section>
+        <Outlet />
+      </section>
+      <footer>Here will be footer</footer>
+    </main>
+  );
+}

src/pages/LoginPage.tsx

@@ -0,0 +1,3 @@
+export default function LoginPage() {
+  return <section>Here is my fancy login page!</section>;
+}

src/pages/MainPage.tsx

@@ -0,0 +1,3 @@
+export default function LoginPage() {
+  return <section>Here is my fancy main page!</section>;
+}

src/pages/WelcomePage.tsx

@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom';
+
+export default function LoginPage() {
+  return (
+    <section>
+      Here is my fancy welcome page!
+      <div className="flex flex-col">
+        <Link to="../login">login</Link>
+        <Link to="../mainpage">main page</Link>
+      </div>
+    </section>
+  );
+}