front-navbar-first

@@ -6,7 +6,9 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.1.3",
     "react": "^18.1.0",
     "react": "^18.1.0",
+    "react-bootstrap": "^2.4.0",
     "react-dom": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
     "web-vitals": "^2.1.4"

-import logo from './logo.svg';
-import './App.css';
-import axios from "axios";
-import { useEffect } from 'react';
-
-function App() {
-  const callApi = async()=>{
-    axios.get("/api").then((res)=>{console.log(res.data.test)});
-  };
-
-  useEffect(()=>{
-    callApi();
-  }, []);
-  
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;
\ No newline at end of file

+import './App.css';
+import axios from "axios";
+import { useEffect } from 'react';
+import { Navbar, Container, NavDropdown, Nav} from 'react-bootstrap'
+import khuimg from '../img/khumeal.png'
+
+function App() {
+  const callApi = async()=>{
+    axios.get("/api").then((res)=>{console.log(res.data.test)});
+  };
+
+  useEffect(()=>{
+    callApi();
+  }, []);
+  
+  return (
+    
+    <Navbar bg="#ff0000" expand="lg" style={{ background:'#9E1915'}} >
+            <Container>
+            <img src = {khuimg} height="40px" width="40px" />
+            <Navbar.Brand href="#home">제2긱 학식 커뮤니티</Navbar.Brand>
+            <Navbar.Toggle aria-controls="basic-navbar-nav" />
+            <Navbar.Collapse id="basic-navbar-nav">
+                <Nav className="me-auto">
+                <Nav.Link href="#home">메뉴</Nav.Link>
+                <Nav.Link href="#link">메뉴에 대한 이야기</Nav.Link>
+                <Nav.Link href="#link">글 작성</Nav.Link>
+                </Nav>
+            </Navbar.Collapse>
+            </Container>
+        </Navbar>
+  );
+}
+
+export default App;
\ No newline at end of file

 import React from 'react';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import './index.css';
-import App from './App';
+import App from './Component/App';
 import reportWebVitals from './reportWebVitals';
 import reportWebVitals from './reportWebVitals';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
 root.render(

@@ -6,9 +6,11 @@
   },
   },
   "dependencies": {
   "dependencies": {
     "axios": "^0.27.2",
     "axios": "^0.27.2",
+    "bootstrap": "^5.1.3",
     "concurrently": "^7.2.1",
     "concurrently": "^7.2.1",
     "express": "^4.18.1",
     "express": "^4.18.1",
     "http-proxy-middleware": "^2.0.6",
     "http-proxy-middleware": "^2.0.6",
-    "nodemon": "^2.0.16"
+    "nodemon": "^2.0.16",
+    "react-bootstrap": "^2.4.0"
   }
   }
 }
 }