처음

frontend/src/App.tsx

 import React from "react";
+import { Route, Routes, BrowserRouter} from "react-router-dom";
 import "tailwindcss/tailwind.css";
 
+import  Layout  from "./Layout";
+import  Home  from "./Home";
+import  Theme  from "./Theme";
+import  List  from "./list";
+import  Board  from "./Board";
+import  Login  from "./Login";
+import  Signup  from "./Signup";
+import  Forgot  from "./Forgot";
+
 export const App = () => {
   return (
-    <div className="text-slate-300 bg-red-600 text-3xl font-bold underline">
-      App 안녕하세요.
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route>
+          <Route path="/" element={<Layout />}>
+            <Route index element={<Home />} />
+            <Route path="board" element={<Board />} />
+            <Route path="theme" element={<Theme />} />
+            <Route path="list" element={<List />} />
+          </Route>
+        </Route>
+        <Route path="login" element={<Login />} >
+          <Route path="/" element={<Home />} />
+          <Route path="signup" element={<Signup />} />
+          <Route path="forgot" element={<Forgot />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
   );
 };
+

frontend/src/Board.tsx

+import React from "react";
+
+export default function Board () {
+    return (
+      <div>
+        
+        <p>리액트 라우터 실습 프로젝트입니다.</p>
+        
+      </div> // Board Page
+    );
+  }
\ No newline at end of file

frontend/src/Forgot.tsx

+import React from "react";
+
+export default function Forgot () {
+    return (
+      <div>
+        
+        <p>리액트 라우터 실습 프로젝트입니다.</p>
+        
+      </div> // Board Page
+    );
+  }
\ No newline at end of file

frontend/src/Home.tsx

+import React from "react";
+
+export default function Home(){
+    return (
+          <div > pic2 </div>
+      
+    );
+  
+  }
\ No newline at end of file

frontend/src/Layout.tsx

+import { Link, Outlet } from "react-router-dom";
+import React from "react";
+
+export default function Layout(){
+    return (
+      
+      <div className="flex flex-col">
+        
+        <div className="flex flex-row px-5 py-20 place-content-between">
+        
+          <div className="px-5 py-2 bg-amber-400 rounded">
+            
+            <Link to="/">Travel Report</Link>
+            
+          </div>
+          <div className="flex flex-row-reverse">
+          
+            <div className="px-5 py-2 bg-teal-400 rounded">
+             
+              <Link to="/login">Login</Link>
+              
+            </div>
+            <div className="px-5 py-2 bg-purple-400 rounded">
+              <Link to="/board">Board</Link>
+              
+            </div>
+            
+            <div>
+              <label>
+                {/* <span className="sr-only">Search</span> */}
+                <span className="absolute inset-y-0 left-0 flex items-center pl-2">
+                  <svg className="h-5 w-5 fill-slate-300" viewBox="0 0 20 20"></svg>
+                </span>
+                <input className="placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 
+                rounded-md py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-sky-500
+                 focus:ring-sky-500 focus:ring-1 sm:text-sm" placeholder="Search for anything..." type="text" name="search" />
+              </label>
+            </div>
+          </div>
+          
+        </div>
+        
+          <div className="flex px-5 py-5">
+            <div className="flex w-full bg-emerald-400 rounded"> <Link to="/theme">Theme</Link> </div>
+            
+          </div>
+          <div className="flex flex-row px-5 py-40 place-content-between">
+            <div className="px-20 py-40 bg-gray-400 rounded"> <Link to="/list">List</Link> </div>
+            
+            <div className="w-60 px-80 py-60 mr-16 bg-red-400 rounded"> pic<Outlet /> </div>
+          </div>
+        
+      </div>
+      
+    );
+  }
\ No newline at end of file

frontend/src/Login.tsx

+import { Link, Outlet } from "react-router-dom";
+import React from "react";
+
+export default function Login () {
+    return (
+    <div>
+        <div className="flex flex-col grid grid-rows-2 place-items-center">
+        
+            <div className="w-40 h-40 bg-red-400 place-self-center ">
+            <Link to="/">Travel Report</Link>
+            </div>
+
+            <div className="flex-row w-full h-80 md:w-1/2 bg-amber-300 grid place-items-center">
+                
+                <div className="flex flex-col w-full md:flex-row ">
+
+                    <div className="flex flex-col w-full">
+
+                        <input className="placeholder:italic placeholder:text-slate-300 block
+                        bg-white border border-slate-500 rounded-md 
+                        py-2 pl-9 pr-3 shadow-sm 
+                        focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-2 
+                        " placeholder="Id" type="text" name="Id"/>
+                        <input className="placeholder:italic placeholder:text-slate-300 block 
+                        bg-white border border-slate-500 rounded-md 
+                        py-2 pl-9 pr-3 shadow-sm 
+                        focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 
+                        " placeholder="Password" type="text" name="Password"/>
+
+                    </div>
+
+                    <button className="w-full bg-sky-600 hover:bg-sky-700 ...">
+                    Log-in
+                    </button>
+                </div>
+            
+            </div>
+        
+        
+        </div>
+        <div className="flex-row relative w-full h-20 grid place-items-center">
+            <button className="bg-white  left-1 top-0">
+                <Link to="/signup">회원가입</Link>
+            </button>
+            <button className="bg-white  left-2 top-0">
+                <Link to="/forgot">비밀번호 찾기</Link>
+            </button>
+        </div>
+    </div> // Login Page
+    );
+  }
\ No newline at end of file

frontend/src/Signup.tsx

+import React from "react";
+
+export default function Signup () {
+    return (
+      <div>
+        
+        <p>리액트 라우터 실습 프로젝트입니다.</p>
+        
+      </div> // Board Page
+    );
+  }
\ No newline at end of file

frontend/src/Theme.tsx

+import React from "react";
+
+
+export default function Theme() {
+    return (
+          <div > Theme</div>
+      
+    );
+  
+  }
\ No newline at end of file

frontend/src/list.tsx

+import React from "react";
+
+
+export default function List() {
+    return (
+          <div > list </div>
+      
+    );
+  
+  }
\ No newline at end of file

frontend/webpack.dev.js

@@ -6,5 +6,5 @@ const common = require("./webpack.common.js");
 module.exports = merge(common, {
   mode: "development",
   devtool: "inline-source-map",
-  devServer: {},
+  devServer: {historyApiFallback: true},
 });