홈페이지 생성

README.md

@@ -3,7 +3,7 @@
 ## 프로젝트 깃 클론 한 뒤에 할일
 
 ### 프로젝트에 필요한 패키지 설치
-#### test
+
 다음은 터미널에서 **클론 한 후 단 한번만 실행합니다.**
 
 1. 백엔드 패키지 설치

frontend/src/App.tsx

 import React from "react";
+import { Link, Outlet } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
 import "tailwindcss/tailwind.css";
+import { BrowserRouter } from "react-router-dom";
+import HomePage from "./Pages/HomePage";
+import BodyPage from "./Pages/BodyPage";
+import Login from "./Pages/LoginPage";
+import Board from "./Pages/BoardPage";
+import Signup from "./Pages/SignupPage";
+
+
 
 export const App = () => {
   return (
-    <div className="text-slate-300 bg-red-600 text-3xl font-bold underline">
-      App 안녕하세요.
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<HomePage />}>
+          <Route index element={< BodyPage />} />
+          <Route path="board" element={<Board />} />
+        </Route>
+        <Route path="login" element={<Login />} />
+        <Route path="signup" element={<Signup />} />
+      </Routes>
+    </BrowserRouter>
   );
 };

frontend/src/Pages/BoardPage.tsx

+import React from "react";
+
+
+
+function range(start:number, end:number) {
+    return (new Array(end - start + 1)).fill(undefined).map((_, i) => i + start);
+}
+
+export default function BoardPage() {
+    const imgs = range(0,7); //[1,2,3,4,5,6,7]
+    return (
+        <div className="flex flex-col items-center">
+            <div className="flex flex-col items-center mt-6">
+                <div>
+                    `Travel Report's Board`
+                </div>
+                <div>
+                    `여행지 후기를 남겨주세요!`
+                </div>
+            </div>
+            <div className="flex flex-col w-10/12 mt-16 ">
+                <div>
+                    <div className="bg-gray-500 border-y-2 h-10">
+                    Board
+                    </div>
+                    <div>
+                        {imgs.map(img => (
+                            <div className="flex flex-row h-16 divide-x-2 border-2 border-solid ">
+                                <div className="basis-1/12 bg-gray-100">{img}</div>
+                                <div className="basis-full">title</div>
+                                <div className="basis-3/12">date</div>
+                                <div className="basis-2/12">like</div>
+                            </div>
+
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file

frontend/src/Pages/BodyPage.tsx

+import React from "react";
+import { Link, Outlet } from "react-router-dom";
+
+export default function BodyPage() {
+    return (
+        <div className="flex flex-col">
+            <div className="flex px-5 py-5">
+                <div className="flex w-full bg-emerald-400 rounded">Theme</div>
+            </div>
+            <div className="flex flex-col h-96 px-5 py-5 md:flex-row">
+                <div className="flex px-5 py-5">
+                    <div className="w-full h-20 md:h-full bg-gray-400 rounded">Citylist</div>
+                </div>
+                <div className="flex px-5 py-5 md:w-full">
+                    <div className="w-full h-96 bg-red-400 rounded">Pic</div>
+                </div>
+            </div>
+        </div>
+    );
+
+}
\ No newline at end of file

frontend/src/Pages/HomePage.tsx

+import React from "react";
+import { Link, Outlet } from "react-router-dom";
+
+
+export default function HomePage() {
+    return (
+      <div className="flex flex-col">
+        <div className="flex flex-row h-12 place-content-between md:place-content-between xl:place-content-between ">
+        <Link to="/"><div className="w-24 h-11 bg-blue-400 rounded">Travel Report</div></Link>
+          <div className="flex flex-row-reverse">
+            <Link to="/login"><div className="w-12 h-11 text-xs bg-yellow-400 rounded">Login</div></Link>
+            <Link to="/board"><div className="w-12 h-11 text-xs bg-green-300 rounded">Board</div></Link>
+          <div>
+              <label>
+                {/* <span className="sr-only">Search</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>
+        <hr />
+        <Outlet />
+      </div>
+  
+    );
+  
+  }
\ No newline at end of file

frontend/src/Pages/LoginPage.tsx

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

frontend/src/Pages/SignupPage.tsx

+import React from "react";
+
+export default function Signup() {
+    return (
+      <div>signup page</div> // Signup Page
+    );
+  }
\ 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 },
 });