주문현황

client/src/Components/OrderCard.js

+import React from 'react'
+import { Card, Col, Row } from 'react-bootstrap'
+
+
+
+function OrderCard(props) {
+
+    return (
+        <Card >
+            <Card.Title className="font-weight-bold mt-4 text-center"> 주문 현황</Card.Title>
+            {
+                props.ordered.map((e) => (
+                    <Card.Body className='m-1'>
+                        {e.products.length > 1 ?
+                            <Card.Header className="font-weight-bold mb-3 text-center" style={{ background: '#F7F3F3' }}>
+                                {e.products[0].productId.pro_name} 외 {e.products.length - 1}개
+                                </Card.Header>
+                            : (
+                                <Card.Header className="font-weight-bold mb-3 text-center" style={{ background: '#F7F3F3' }}>
+                                    {e.products[0].productId.pro_name}
+                                </Card.Header>)}
+                        <Col>
+                            <Row>
+                                <Card.Text> 주문번호 : <strong>{e._id}</strong>  </Card.Text>
+                            </Row>
+                            <Row>
+                                <Card.Text> 결제금액 : <strong>{e.total}원</strong> </Card.Text>
+                            </Row>
+                            <Row>
+                                <Card.Text> 배송지 : <strong> {e.receiverInfo.address} - {e.receiverInfo.address2}</strong> </Card.Text>
+                            </Row>
+                            <Row>
+                                <Card.Text> 주문날짜 : <strong> {e.createdAt.substring(0, 10)}</strong> </Card.Text>
+                            </Row>
+                        </Col>
+                    </Card.Body>
+                )
+                )
+            }
+        </Card>
+    )
+}
+
+export default OrderCard

client/src/Pages/Account.js

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import axios from 'axios';
 import catchError from '../utils/catchErrors';
 import { isAuthenticated } from '../utils/auth';
+import OrderCard from '../Components/OrderCard';
 
 const INIT_ACCOUNT = {
     name: "",
@@ -16,7 +17,7 @@ function Account() {
     const [proshow, setProshow] = useState(false)
     const [error, setError] = useState("")
     const userId = isAuthenticated()
-    const [ordered, setOrdered] = useState('')
+    const [ordered, setOrdered] = useState([])
 
     async function getUsername(user) {
         try {
@@ -29,7 +30,7 @@ function Account() {
 
     useEffect(() => {
         getUsername(userId)
-        getOrdered(userId)
+        getOrdered()
     }, [userId])
 
     const handleChange = (event) => {
@@ -77,11 +78,15 @@ function Account() {
         }
     }
 
-    async function getOrdered({}) {
+    async function getOrdered() {
         console.log("object")
         try {
-            const response = await axios.get(`/api/users/addorder`)
-            setOrdered(response.data)
+            const response = await axios.post(`/api/users/addorder`,{
+                userId:userId
+            })
+            const a=response.data
+            setOrdered(a)
+            console.log("what=", response.data)
         } catch (error) {
             catchError(error, setError)
         }
@@ -181,35 +186,9 @@ function Account() {
                     </Col>
                 </Row>
             </Card>
-            <Accordion>
-                <Row className="my-3 px-3">
-                    <Table>
-                        <thead className="text-center" style={{ background: '#F7F3F3' }}>
-                            <tr>
-                                <th scope="col">주문현황</th>
-                                <th scope="col">배송중</th>
-                                <th scope="col">배송완료</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <th scope="row">케이시앵글부츠(SH)</th>
-                                <td>Mark</td>
-                                <td>Otto</td>
-                            </tr>
-                            <tr>
-                                <th scope="row">2</th>
-                                <td>Jacob</td>
-                                <td>Thornton</td>
-                            </tr>
-                            <tr>
-                                <th scope="row">3</th>
-                                <td colspan="2">Larry the Bird</td>
-                            </tr>
-                        </tbody>
-                    </Table>
-                </Row>
-            </Accordion>
+            <Card>
+                <OrderCard ordered ={ordered}/>
+            </Card>
         </Container >
     )
 }

server/controllers/user.controller.js

@@ -3,6 +3,7 @@ import User from "../schemas/User.js";
 import isLength from 'validator/lib/isLength.js';
 import bcrypt from 'bcryptjs';
 import multer from "multer";
+import Order from "../schemas/Order.js";
 
 const uploadimg = multer({ dest: 'uploads/' });
 
@@ -85,4 +86,20 @@ const update = async (req, res) => {
     }
 }
 
-export default { signup, username, imgUpload, userById, update }
\ No newline at end of file
+const addorder = async (req, res) => {
+    const {userId}=req.body
+    try {
+        const order = await Order.find({ userId: userId }).populate({
+            path: 'products.productId',
+            model: 'Product'
+        })
+        console.log("hey", order)
+        res.status(200).json(order)
+    } catch (error) {
+        console.log(error)
+        res.status(500).send('주문현황을 불러오지 못했습니다.')
+    }
+}
+
+
+export default { signup, username, imgUpload, userById,update, addorder }
\ No newline at end of file

server/routes/user.routes.js

@@ -10,6 +10,9 @@ router.route('/account/:userId')
     .get(userCtrl.username)
     .put(userCtrl.imgUpload, userCtrl.update)
 
+router.route('/addorder')
+    .post(userCtrl.addorder)
+
 router.param('userId', userCtrl.userById)
 
 export default router
\ No newline at end of file