Minju

README.md

@@ -1 +1,2 @@
-#코너톤 4팀
+<<<<<<< HEAD
+#코너톤 4팀 

client/package.json

@@ -2,10 +2,15 @@
   "name": "my-app",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:3002", 
+  "_comment" : "cors Proxy 설정 추가",
+
   "dependencies": {
+    "axios": "^1.7.9",
     "cra-template": "1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.5",
     "react-scripts": "5.0.1",
     "web-vitals": "^4.2.4"
   },

client/src/App.js

@@ -1,26 +1,29 @@
-//App.js
-import './App.css';
-import axios from "axios";
-import {useEffect} from "react";
+import React from "react";
+import { Routes, Route, Link } from "react-router-dom";
 
-function App() {
-  const callApi = async () => {
-    axios.get('/api')
-    .then((res) => {
-      console.log(res.data.test)
-    })
-    .catch((err) => {
-      console.log(err);
-    })
-  };
-
-  useEffect(() => {
-    callApi();
-  }, []);
+import Main from "./pages/Main";
+import Login from "./pages/Login";
+import Account from "./pages/Account";
+import MyDrawer from "./pages/MyDrawer";
+import Test from "./pages/Test";
+import Bestseller from "./pages/Bestseller";
+import Community from "./pages/Community";
+import BookDetail from "./pages/BookDetail";
 
+function App() {
   return (
-   <div>test react</div>
+  <div className="App">
+    <Routes>
+      <Route path="/" element={<Main />} />
+      <Route path="/login" element={<Login />} />
+      <Route path="/account" element={<Account />} />
+      <Route path="/myDrawer" element={<MyDrawer />} />
+      <Route path="/test" element={<Test />} />
+      <Route path="/bestseller" element={<Bestseller />} />
+      <Route path="/book/:title" element={<BookDetail />} />
+      <Route path="/community" element={<Community />} />
+    </Routes>
+    </div>
   );
 }
-
 export default App;

client/src/components/Header.js

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import "../styles/Header.css";
+import bookIcon from "../assets/bookicon.png";
+import lamp from "../assets/lamp.png";
+
+const Bestseller= () => {
+    return (
+        <div className="main-container">
+        <header className="header">
+            <div className="img-group">
+            <img src={lamp} className="lamp" alt="lamp" />
+            <img src={lamp} className="lamp" alt="lamp" />
+            <img src={lamp} className="lamp" alt="lamp" />
+            </div>
+            <div className="nav-group">
+            <div className="nav-item">
+                <Link to="/account">베스트셀러</Link>
+                <img src={bookIcon} className="book-icon" alt="book icon" />
+            </div>
+            <div className="nav-item">
+                <Link to="/account">북루미 테스트</Link>
+                <div className="underline"></div>
+            </div>
+            <div className="nav-item">
+                <Link to="/login">북작북작</Link>
+                <div className="underline"></div>
+            </div>
+            <div className="nav-item">
+                <Link to="/myDrawer">나의 서랍</Link>
+                <div className="underline"></div>
+            </div>
+            </div>
+        </header>
+        </div>
+  );
+};
+export default Bestseller;

client/src/index.js

@@ -2,16 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+import {BrowserRouter} from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// 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();
+<BrowserRouter>
+<App />
+</BrowserRouter>);