오롤롤로

client/src/App.js

@@ -40,6 +40,9 @@ function App() {
         <PrivateRoute path="/payment">
           <Payment />
         </PrivateRoute>
+        <PrivateRoute path="/paymentcompleted">
+          <PaymentCompleted />
+        </PrivateRoute>
         <PrivateRoute path="/account">
           <Account />
         </PrivateRoute>

client/src/Pages/Payment.js

@@ -217,7 +217,6 @@ function Payment({ match, location }) {
                     })
                 })
                 const data = await response.json()
-                window.location.href = data.redirect_url
             } else {
                 console.log(response.data)
                 console.log(response2.data)

client/src/Pages/PaymentCompleted.js

@@ -12,6 +12,7 @@ function PaymentCompleted() {
     const [order, setOrder] = useState([])
     const [total, setTotal] = useState(0)
     const [receiverInfo, setReceiverInfo] = useState({})
+    const [num, setNum] = useState('')
 
     useEffect(() => {
         getOrder()
@@ -22,6 +23,7 @@ function PaymentCompleted() {
             setError('')
             const response = await axios.get(`/api/order/showorder/${user}`)
             console.log(response.data)
+            setNum(response.data._id)
             setOrder(response.data.products)
             setTotal(response.data.total)
             setReceiverInfo(response.data.receiverInfo)
@@ -37,6 +39,7 @@ function PaymentCompleted() {
                     <h5 className=" font-weight-bold text-danger" style={{ display: 'inline' }}>주문이 완료</h5>
                     <h5 className=" font-weight-bold " style={{ display: 'inline' }}>되었습니다!</h5>
                 </div>
+                <div className="my-2">주문번호: {num}</div>
                 <div className="mb-0">주문내역 확인은 마이페이지의 </div>
                 <div> "주문/배송조회"에서 하실 수 있습니다.</div>
             </div>

client/src/Pages/Product.js

 import axios from 'axios';
 import React, { useState, useEffect, useRef } from 'react';
-import { Row, Col, Form, Card, Button, Modal } from 'react-bootstrap';
+import { Row, Col, Form, Card, Button, Modal,Image } from 'react-bootstrap';
 import { Redirect, useHistory } from 'react-router-dom';
 import catchErrors from '../utils/catchErrors';
 

client/src/Pages/ProductsList.js

@@ -17,6 +17,8 @@ function ProductsList({ match }) {
     const indexOfLast = currentPage * postsPerPage;
     const indexOfFirst = indexOfLast - postsPerPage;
 
+    const [sortingName, setSortingName] = useState('정렬')
+
     function currentPosts(tmp) {
         let currentPosts = 0;
         currentPosts = tmp.slice(indexOfFirst, indexOfLast);
@@ -71,11 +73,60 @@ function ProductsList({ match }) {
     }
 
     async function handleSort(method) {
-        try {
-            const response = await axios.get(`/api/product/getproduct/?q=${method}`)
-            setProductlist(response.data)
-        } catch (error) {
-            catchError(error, setError)
+        console.log(method)
+        if (method === "purchase") {
+            console.log("thisispurchase")
+            productlist.sort(function (a, b) {
+                if (a.purchase > b.purchase) {
+                  return -1;
+                }
+                if (a.purchase < b.purchase) {
+                  return 1;
+                }
+                // a must be equal to b
+                return 0;
+              });
+              setSortingName("인기상품")
+        } else if(method === "newest"){
+            console.log("thisisnewest")
+            productlist.sort(function (a, b) {
+                if (a.createdAt > b.createdAt) {
+                  return -1;
+                }
+                if (a.createdAt < b.createdAt) {
+                  return 1;
+                }
+                // a must be equal to b
+                return 0;
+              });
+              setSortingName("신상품")
+
+        } else if(method === "lowest"){
+            console.log("thisislowest")
+            productlist.sort(function (a, b) {
+                if (a.price > b.price) {
+                  return 1;
+                }
+                if (a.price < b.price) {
+                  return -1;
+                }
+                // a must be equal to b
+                return 0;
+              });
+              setSortingName("낮은가격")
+        } else {
+            console.log("thisispurchase")
+            productlist.sort(function (a, b) {
+                if (a.price > b.price) {
+                  return -1;
+                }
+                if (a.price < b.price) {
+                  return 1;
+                }
+                // a must be equal to b
+                return 0;
+              });
+              setSortingName("높은가격")
         }
     }
 
@@ -94,6 +145,7 @@ function ProductsList({ match }) {
 
     return (
         <Container>
+            {console.log(productlist)}
             <style type="text/css">
                 {`
                 a, a:hover, a:active {
@@ -120,22 +172,22 @@ function ProductsList({ match }) {
                     </div>
                 </Col>
             </Row>
-            <Row className="justify-content-end mx-0 my-5">
-                <Dropdown>
-                    <Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
-                    <Dropdown.Menu>
-                        <Dropdown.Item onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item>
-                        <Dropdown.Item onClick={() => handleSort('newest')}>신상품</Dropdown.Item>
-                        <Dropdown.Item onClick={() => handleSort('lowest')}>낮은가격</Dropdown.Item>
-                        <Dropdown.Item onClick={() => handleSort('highest')}>높은가격</Dropdown.Item>
-                    </Dropdown.Menu>
-                </Dropdown>
-                <Form inline onSubmit={handleSearch} className="justify-content-end mx-0">
+            <Row className="justify-content-end mx-0 mt-5 mb-3">
+                <Form inline onSubmit={handleSearch} className="justify-content-end mx-0 my-2">
                     <FormControl type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
-                    <Button  type="submit" className="px-2">
+                    <Button  type="submit" className="px-2 mr-2">
                         <img src="/icon/search.svg" width="20" height="20" />
                     </Button>
                 </Form>
+                <Dropdown className="my-2">
+                    <Dropdown.Toggle className="mx-2">{sortingName}</Dropdown.Toggle>
+                    <Dropdown.Menu>
+                        <Dropdown.Item as="button" onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item>
+                        <Dropdown.Item as="button" onClick={() => handleSort('newest')}>신상품</Dropdown.Item>
+                        <Dropdown.Item as="button" onClick={() => handleSort('lowest')}>낮은가격</Dropdown.Item>
+                        <Dropdown.Item as="button" onClick={() => handleSort('highest')}>높은가격</Dropdown.Item>
+                    </Dropdown.Menu>
+                </Dropdown>
             </Row>
             <Row md={8} sm={12} className="justify-content-center m-2">
                 {productlist.map(pro => (