Delete Router.js, Modifiy APP.js

frontend/package-lock.json

@@ -22,7 +22,7 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
-        "react-scripts": "5.0.1"
+        "react-scripts": "^5.0.1"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {

frontend/package.json

@@ -17,7 +17,7 @@
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
-    "react-scripts": "5.0.1"
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

frontend/src/App.js

 import "./App.css";
+import {Routes, Route } from 'react-router-dom';
+import Header from "./Header.js";
+import Main from "./Main.js";
 import GoogleLoginButton from "./GoogleLoginButton.js";
 
 function App() {
-  return <GoogleLoginButton/>;
+  return(
+    <div className="App">
+      <Header/>
+      <Routes>
+        <Route path="/" element={<Main/>}></Route>
+        <Route path="/search" element={<h1>검색</h1>}></Route>
+    {/* <Route path="/postwrite" element={<PostWrite/>}></Route> */}
+      </Routes>
+      <GoogleLoginButton/>
+      {/* <Footer/> */}
+    </div>
+    );
 }
 
 export default App;
\ No newline at end of file

frontend/src/Header.css

+.header {
+    /* background-color:$white; */
+    /* z-index: 999; */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    /* height: 70px; */
+    border-bottom: 1px solid;
+    /* overflow: auto */
+}
+
+.logo_image {
+    width: 350px;
+    /* height: ; */
+    float: left;
+    margin-bottom: 10px;
+}
+
+.menu_list{
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+    margin: 0px;
+    /* margin-left: 500px; */
+    float: right;
+}
+
+li{
+    /* font-family: '', cursive; */
+    list-style-type: none;
+    margin-right: 3rem;
+    font-size: 1.2rem;
+    font-weight: 100;
+}
\ No newline at end of file

frontend/src/Header.js

 import {Link} from "react-router-dom";
 import logo from './logo.png';
+import './Header.css';
 
 function Header(){
     return(

frontend/src/Router.js

-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Main from './Main.js';
-
-function Router() {
-  return (
-    <div className="Router">
-            <BrowserRouter>
-                {/* <Header/> */}
-                <Routes>
-                    <Route path="/" element={<Main/>}></Route>
-                    {/* <Route path="/search" element={<Search/>}></Route> */}
-                    {/* <Route path="/postwrite" element={<PostWrite/>}></Route> */}
-                </Routes>
-                {/* <Footer/> */}
-            </BrowserRouter>
-    </div>
-  );
-}
-
-export default Router;

frontend/src/index.js

@@ -3,16 +3,12 @@ import ReactDOM from "react-dom/client";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import "./index.css";
 import App from "./App";
-import Main from "./Main";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<App />} />
-		    <Route path="/main" element={<Main />} />
-      </Routes>
+      <App/>
     </BrowserRouter>
   </React.StrictMode>
 );