합쳐주세요..

package.json

@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
     "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",
     "web-vitals": "^2.1.4"

src/App.js

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

src/components/Dash.js

@@ -0,0 +1,20 @@
+import React from "react";
+import "../styles/Dash.css";
+const Dash = () => {
+    return(
+        <div className="dashboard">
+            <div className="chatting">
+                <>채팅하는 곳 ㅎ,ㅎ</>
+            </div>
+            <input
+                type="text"
+                className="chat-input"
+            />
+            <button
+                type="button"
+                className="btn-send"
+            />
+        </div>      
+    )
+}
+export default Dash

src/components/Deposit.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Header from "./Header";
+import Nav from "./Nav";
+const Deposit = () =>{
+    return (
+        <>
+        <Header />
+        <Nav />
+        예적금
+        </>
+    )
+}
+export default Deposit

src/components/Fund.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Header from "./Header";
+import Nav from "./Nav";
+const Fund = () =>{
+    return (
+        <>
+        <Header />
+        <Nav />
+         펀드
+        </>
+    )
+}
+export default Fund

src/components/Loan.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Header from "./Header";
+import Nav from "./Nav";
+const Loan = () =>{
+    return (
+        <>
+        <Header />
+        <Nav />
+         대출
+        </>
+    )
+}
+export default Loan

src/components/Nav.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { useNavigate } from "react-router-dom"; // 수정된 import 문입니다
+import '../styles/component.css';
+
+const Nav = () => {
+    const navigate = useNavigate(); // useNavigate 훅을 사용합니다
+
+    return (
+        <nav className="navbar">
+            <ul className="navmenu">
+                <li>
+                    <span onClick={() => navigate('/fund')}>펀드</span>
+                    <ul>
+                        <li className="submenu">
+                            <span onClick={() => navigate('/fund/details')}>세부</span>
+                            <span onClick={() => navigate('/fund/details')}>세부</span>
+                            <span onClick={() => navigate('/fund/details')}>세부</span>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <span onClick={() => navigate('/trust')}>신탁</span>
+                    <ul>
+                        <li className="submenu">
+                            <span onClick={() => navigate('/trust/details')}>세부</span>
+                            <span onClick={() => navigate('/trust/details')}>세부</span>
+                            <span onClick={() => navigate('/trust/details')}>세부</span>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <span onClick={() => navigate('/deposit')}>예/적금</span>
+                    <ul>
+                        <li className="submenu">
+                            <span onClick={() => navigate('/deposit/details')}>세부</span>
+                            <span onClick={() => navigate('/deposit/details')}>세부</span>
+                            <span onClick={() => navigate('/deposit/details')}>세부</span>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <span onClick={() => navigate('/loan')}>대출</span>
+                    <ul>
+                        <li className="submenu">
+                            <span onClick={() => navigate('/loan/details')}>세부</span>
+                            <span onClick={() => navigate('/loan/details')}>세부</span>
+                            <span onClick={() => navigate('/loan/details')}>세부</span>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </nav>
+    )
+}
+
+export default Nav;

src/components/Trust.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Header from "./Header";
+import Nav from "./Nav";
+const Trust = () =>{
+    return (
+        <>
+        <Header />
+        <Nav />
+        신탁
+        </>
+    )
+}
+export default Trust;