Sujin

package.json

@@ -3,13 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.12.4",
+    "@mui/icons-material": "^5.14.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
+    "bootstrap": "^5.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
     "react-speech-recognition": "^3.10.0",
+    "reactstrap": "^9.2.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,12 +1,17 @@
 import React from 'react';
-import Header from './components/header';
-import Dictaphone from './components/Speech';
+import {BrowserRouter, Routes, Route} from 'react-router-dom';
+import Main from './pages/Main';
+
+
+
 const App = () =>{
     return(
-      <>
-      <Header />
-      <Dictaphone />
-      </>
+      <BrowserRouter>
+
+      <Routes>
+        <Route path='/' element={<Main />}></Route>
+      </Routes>
+      </BrowserRouter>
     )
 }
 export default App

src/components/Nav.js

@@ -0,0 +1,59 @@
+import React from "react";
+
+
+
+const Nav = () => {
+
+    return( 
+
+        <nav className="navbar">
+            <ul className="navmenu">
+                <li>
+                    <span>펀드</span>
+                    <ul>
+                        <li className="submenu">
+                            <span>세부</span>
+                            <span>세부</span>
+                            <span>세부</span>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <span>신탁</span>
+                    <ul>
+                        <li className="submenu">
+                            <span>세부</span>
+                            <span>세부</span>
+                            <span>세부</span>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <span>예/적금</span>
+                    <ul>
+                        <li className="submenu">
+                            <span>세부</span>
+                            <span>세부</span>
+                            <span>세부</span>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <span>대출</span>
+                    <ul>
+                        <li className="submenu">
+                            <span>세부</span>
+                            <span>세부</span>
+                            <span>세부</span>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </nav>
+
+    )
+}
+
+
+
+export default Nav

src/components/css/component.css

@@ -0,0 +1,73 @@
+.head {
+    width: 100%;
+    background-color: blanchedalmond;
+    padding: 15px 0px;
+    text-align: right;
+}
+
+.headMenu {
+    color: white;
+    margin: 9px;
+    text-decoration: none;
+}
+
+.navbar {
+    background-color: yellow;
+    display: flex;
+    position: relative;
+    width: 200px;
+    height: 600px;
+    padding: 15px 0px;
+    display: flex;
+
+}
+
+.navmenu {
+    position: absolute;
+    right: 0;
+    height: calc(100% - 16px);
+    width: 25vw;
+    max-width: 300px;
+    background-color: yellow;
+    z-index: 999;
+    float: right;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    padding-top: 16px;
+}
+
+
+li {
+    list-style: none;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+nav > ul > li {
+    border-left: 2px solid #606060;
+    width: 100;
+    cursor: pointer;
+    justify-content:space-between;
+
+  }
+
+ul > li > span {
+    display: flex;
+    margin: 8px;
+    font-size: 13px;
+  }
+
+nav > ul > li > span {
+    display: flex;
+    margin: 8px;
+    font-size: 15px;
+  }
+
+  ul > li > span:hover {
+    padding-bottom: 5px;
+    background-color: #fbfed3;
+    border: none;
+    font-weight: 600;
+  }

src/components/header.js

@@ -1,9 +1,13 @@
 import React from "react";
 const Header = () => {
+
     return(
-        <>
-        헤더
-        </>
+        <div>
+            <div className="head">
+                <div className="headMenu" alt="logo" src="img/logo.jpg"></div>
+                <div className="headMenu" alt="kb_logo" src="img/kb_logo.jpg"></div>
+            </div>
+        </div>
     )
 }
 export default Header

src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+// import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -14,4 +14,4 @@ root.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+// reportWebVitals();

src/pages/Main.js

@@ -0,0 +1,15 @@
+import React from "react";
+import '../components/css/component.css'
+import Nav from "../components/Nav";
+import Header from "../components/Header";
+
+
+const Main = () => {
+    return (
+        <>
+            <Header />
+            <Nav />
+        </>
+    )
+}
+export default Main

src/styles/Header.css

@@ -0,0 +1,29 @@
+.head {
+  width: 100%;
+  height: 20%;
+  background-color: white;
+  padding: 15px 0px;
+  text-align: right;
+}
+
+.headMenu {
+  color: white;
+  margin: 9px;
+  text-decoration: none;
+}
+
+.logo {
+
+  width: 10%;
+  height: 5%;
+}
+
+.img {
+
+  display: flex;
+  justify-content:space-between;
+  width: 100%;
+  height: 5%;
+}
+
+

src/styles/Nav.css

@@ -0,0 +1,47 @@
+
+
+  .navmenu {
+    background-color: rgb(242, 222, 121);
+    position: absolute;
+    height: 90%;
+    width: 25%;
+    float: left;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    gap: 20px;
+    padding-top: 20px;
+  }
+
+
+  li {
+    list-style: none;
+  }
+
+  nav > ul > li {
+
+    justify-content:space-between;
+    border-left: 2px solid #606060;
+
+  }
+
+  ul > li > span {
+    display: flex;
+    margin: 8px;
+    font-size: 17px;
+  }
+
+  nav > ul > li > span {
+    display: flex;
+    margin: 8px;
+    font-size: 20px;
+  }
+
+  ul > li > span:hover {
+    padding-bottom: 5px;
+    background-color: #fbfed3;
+    border: none;
+    font-weight: 600;
+  }
+
+