Header navigation

frontend/src/App.tsx

 import React from "react";
 import HomePage from "./Pages/HomePage";
-// import LoginPage from "./Pages/LoginPage";
-// import SignUpPage from "./Pages/SignUpPage";
+import LoginPage from "./Pages/LoginPage";
+import SignUpPage from "./Pages/SignUpPage";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import "tailwindcss/tailwind.css";
 
@@ -10,8 +10,8 @@ export const App = () => {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<HomePage />}>
-          {/* <Route path="login" element={<LoginPage />} />
-          <Route path="signup" element={<SignUpPage />} /> */}
+          <Route path="login" element={<LoginPage />} />
+          <Route path="signup" element={<SignUpPage />} />
         </Route>
       </Routes>
     </BrowserRouter>

frontend/src/Components/Header.tsx

+import React from "react";
+import { Link } from "react-router-dom";
+import "tailwindcss/tailwind.css";
+
+type HeaderProps = {
+
+};
+
+const Header = ({ }: HeaderProps) => (
+    <div className="bg-white border-b-2 border-b-themeColor px-2 sm:px-4 py-2.5 dark:bg-gray-800">
+        <div className="container flex flex-wrap justify-between items-center mx-auto">
+            <Link to="/" className="font-bold text-2xl text-themeColor"> Simple Survey Form </Link>
+            <div className="md:flex items-center justify-end md:flex-1 lg:w-0">
+                <Link to="/login" className="whitespace-nowrap font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">Login</Link>
+                <Link to="/signup" className="whitespace-nowrap font-bold text-white hover:bg-blue-500 mx-1 py-2 px-3 bg-themeColor rounded-md ">Sign Up</Link>
+            </div>
+        </div>
+    </div>
+);
+
+export default Header;
\ No newline at end of file

frontend/src/Pages/HomePage.tsx

 import React from "react";
+import Header from "../Components/Header";
 import "tailwindcss/tailwind.css";
+import { Outlet } from "react-router-dom";
 
 type HomeProps = {
-    title?: string;
+
 };
 
-const HomePage = ({ title = "Simple Survey Form" }: HomeProps) => (
-    <div className="text-slate-300 text-3xl font-bold">
-        {title}
+const HomePage = ({}: HomeProps) => (
+    <div className="">
+        <Header/>
+        <Outlet />
     </div>
 ); 
  

frontend/src/Pages/LoginPage.tsx

 import React from "react";
 import "tailwindcss/tailwind.css";
 
-type LoginProps = {
+// type LoginProps = {
 
-};
+// };
 
-const LoginPage = ({  }: LoginProps) => (
+const LoginPage = () => (
     <div className="text-slate-300 text-3xl font-bold">
         로그인페이지
     </div>

frontend/tailwind.config.js

@@ -2,7 +2,11 @@
 module.exports = {
   content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'themeColor': '#58ACFA',
+      },
+    },
   },
   plugins: [],
 };