[WEEK2] Merge branch 'frontend' of https://github.com/boostcampaitech…

…4lv23recsys1/final-project-level3-recsys-05 into frontend(#3)

frontend/package.json

@@ -12,7 +12,7 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "axios": "^1.2.2",
+    "axios": "^1.2.3",
     "bootstrap": "^5.2.3",
     "react": "^17.0.2",
     "react-awesome-modal": "^2.0.5",

frontend/src/App.js

@@ -5,6 +5,8 @@ import Landing from "./landing/Landing";
 import ProductList from "./products/ProductList";
 import Login from "./pages/Login"
 import Join from "./pages/Register"
+import History from './pages/History'
+import Mypage from "./pages/Mypage";
 
 
 function App() {
@@ -26,6 +28,12 @@ function App() {
         <Route path="/register" exact>
           <Join />
         </Route>
+        <Route path="/history" exact>
+          <History />
+        </Route>
+        <Route path="/mypage" exact>
+          <Mypage />
+        </Route>
       </Switch>
     </Template>
   );

frontend/src/pages/History.js

@@ -0,0 +1,59 @@
+import { Navbar, NavDropdown, Nav, Container } from 'react-bootstrap';	
+import { useState } from 'react';	
+import axios from 'axios';	
+import product from '../products/Product';
+import datas from '../products/dummy.json'
+
+function History() {	
+  const [ products, setProducts ] = useState(datas.posts);	
+  const [ pageIdx, setPageIdx ]= useState(2);	
+
+  console.log(products.posts)
+
+  return (	
+    <div>	
+      {/* jumbotron */}	
+      <div class="bg-light p-5 rounded-lg">	
+        <h1 class="display-4">안녕하세요</h1>	
+        <p class="lead">반가워요</p>	
+        <hr class="my-4" />	
+      </div>	
+      {/* card contents */}	
+      <div className='container'>	
+        <div className='row'>	
+          {	
+            products.map((obj, i) => {	
+              return <Card i={i} thepd={obj} />	
+            })	
+          }	
+        </div>
+      </div>
+      {/* more button */}
+      <a class="btn btn-secondary btn" role="button" onClick={() => {
+        axios.get('http://localhost:5785/items').then((resp) => {
+          console.log([...products])
+          setProducts(
+            [...products, ...resp.data.posts]
+          );
+          setPageIdx(pageIdx + 1);
+        }).catch((e) => {
+          console.log(e);
+        });
+      }}>더보기</a>
+    </div>	
+  );	
+}	
+
+function Card(props) {	
+  return (	
+    <>	
+      <div className='col-md-4'>	
+        <img src={ props.thepd.image } width="100%" />	
+        <h3>{ props.thepd.title }</h3>	
+        <p>{ props.thepd.star } & { props.thepd.price }</p>	
+      </div>	
+    </>	
+  )	
+}	
+
+export default History;

frontend/src/pages/Mypage.js

@@ -0,0 +1,56 @@
+import { Navbar, NavDropdown, Nav, Container } from 'react-bootstrap';	
+import { useEffect, useState } from 'react';	
+import axios from 'axios';	
+
+function Mypage() {	
+  const [ products, setProducts ] = useState([]);	
+  const [ displayProducts, setDisplayProducts ]= useState(3);	
+
+  useEffect(() => {
+    axios.get('http://localhost:5785/jims').then((resp) => {
+        setProducts([...resp.data.posts])
+      }).catch((e) => {
+        console.log(e);
+      });
+  }, [])
+
+  return (	
+    <div>	
+      {/* jumbotron */}	
+      <div class="bg-light p-5 rounded-lg">	
+        <h1 class="display-4">마이페이지입니다</h1>	
+        <p class="lead">반가워요</p>	
+        <hr class="my-4" />	
+      </div>	
+      {/* card contents */}	
+      <div className='container'>	
+        <div className='row'>	
+          {	
+            products.slice(0, displayProducts).map((obj, i) => {	
+              return <Card i={i} thepd={obj} />	
+            })	
+          }	
+        </div>
+      </div>
+      {/* more button */}
+      <a class="btn btn-secondary btn" role="button" onClick={() => {
+        setDisplayProducts(displayProducts+3)
+      }}>더보기</a>
+    </div>	
+
+  );	
+}	
+
+function Card(props) {	
+  return (	
+    <>	
+      <div className='col-md-4'>	
+        <img src={ props.thepd.image } width="100%" />	
+        <h3>{ props.thepd.title }</h3>	
+        <p>{ props.thepd.star } & { props.thepd.price }</p>	
+      </div>	
+    </>	
+  )	
+}	
+
+export default Mypage;

frontend/src/products/dummy.json

@@ -0,0 +1 @@
+{"posts": [{"id": 312929, "title": "스틸 접이식 실내화걸이 3단", "price": 8900, "star": 4.646537842190017, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-productions-158986131070336023.jpg/2560/2560"}, {"id": 232064, "title": "샤워볼 20g, 40g, 60g", "price": 1800, "star": 4.728155339805825, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-productions-157914105876069540.jpg/2560/2560"}, {"id": 445798, "title": "우디 싱글헤드타입 침대프레임 패브릭 SS Q K LK EK 맞춤제작", "price": 897000, "star": 5.0, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-productions-159712998576931440.png/2560/2560"}, {"id": 357961, "title": "라탄 타원 테이블매트", "price": 14000, "star": 4.550819672131149, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-productions-159160278578441748.jpg/2560/2560"}, {"id": 124697, "title": "[10%쿠폰] 럭스 무타공 비누 받침대", "price": 6900, "star": 4.593406593406592, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-productions-1558060795170_VZ63.jpg/2560/2560"}, {"id": 227006, "title": "[주말특가]대추나무 천연 옻칠 우드 수저 4인세트", "price": 15900, "star": 4.7827133479212245, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-openapi-1612782-1669627547285.jpg/2560/2560"}, {"id": 32125, "title": "프리미엄 블루투스 올인원 오디오시스템 모델 L Model L", "price": 2700000, "star": 4.884615384615385, "image": "https://image.ohou.se/image/central_crop/bucketplace-v2-development/uploads-productions-162564216772871795.jpg/2560/2560"}]}