1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import React, {useState} from 'react';
import {Button, Descriptions} from "antd";
import {useDispatch} from "react-redux";
import {addToCart} from "../../../../_actions/user_actions";

function ProductInfo(props) {
const dispatch = useDispatch();

const clickHandler = () => {
  //필요한 정보를 Cart 필드에다가 넣어준다.
  dispatch(addToCart(props.detail._id))
}

return (
        <div>
          <Descriptions title="Product Info">
            <Descriptions.Item label="Price">{props.detail.price}</Descriptions.Item>
            <Descriptions.Item label="Sold">{props.detail.sold}</Descriptions.Item>
            <Descriptions.Item label="View">{props.detail.views}</Descriptions.Item>
            <Descriptions.Item label="Description">{props.detail.description}</Descriptions.Item>
          </Descriptions>

          <br/>
          <br/>

          <div style={{display: 'flex', justifyContent: "center"}}>
            <Button size="large" shape='round' type='danger' onClick={clickHandler}>
              Add to Cart
            </Button>
          </div>
        </div>
);
}

export default ProductInfo;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

export function addToCart(id){
    let body = {
        productId : id
    }

    const request = axios.post(`${USER_SERVER}/addToCart`,body)
        .then(response => response.data);

    return {
        type: ADD_TO_CART,
        payload: request
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

router.post("/addToCart", auth, (req, res) => {
    //먼저 User Collection에 해당 유저의 정보를 가져오기
    //auth 때문에 req.user._id를 가져올수 있다.
    User.findOne({_id: req.user._id},
        (err, userInfo) => {
            //가져온 정보에서 카트에다 넣으려 하는 상품이 이미 들어 있는지 확인
            let duplicate = false;
            userInfo.cart.forEach((item) => {
                if (item.id === req.body.productId) {
                    duplicate = true
                }
            })

            if (duplicate) {
                //상품이 이미 있을때
                //내부 객체를 사용할때는 다음과 같이 ''로 사용하여 문자로 만들어줘야한다.
                //{new: true} 는 update된 결과값을 받기위해 설정해주는 옵션이다.
                User.findOneAndUpdate({_id: req.user._id, 'cart.id': req.body.productId},
                    {$inc: {'cart.$.quantity': 1}},
                    {new: true},
                    (err, userInfo) => {
                        if (err) return res.status(400).json({success: false, err})
                        return res.status(200).send(userInfo.cart)
                    })
            } else {
                //상품이 이미 있지 않을때때
                User.findOneAndUpdate({_id: req.user._id},
                    {
                        $push: {
                            cart: {
                                id: req.body.productId,
                                quantity: 1,
                                date: Date.now()
                            }
                        }
                    },
                    {new: true},
                    (err, userInfo) => {
                        if (err) return res.status(400).json({success: false, err})
                        return res.status(200).send(userInfo.cart)
                    }
                )
            }
        })


});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import {
    LOGIN_USER,
    REGISTER_USER,
    AUTH_USER,
    LOGOUT_USER, ADD_TO_CART,
} from '../_actions/types';


export default function (state = {}, action) {
    switch (action.type) {
        case REGISTER_USER:
            return {...state, register: action.payload}
        case LOGIN_USER:
            return {...state, loginSucces: action.payload}
        case AUTH_USER:
            return {...state, userData: action.payload}
        case LOGOUT_USER:
            return {...state}
        case ADD_TO_CART:
						//이렇게 해주는 이유는 redux 기존 정보에 cart 정보를 추가해주기 위해서이다.
            return {
                ...state, userData: {
                    ...state.userData,
										//위쪽 즉 action -> 백단 리턴값이 action.payload이다.
                    cart: action.payload
                }
            }
        default:
            return state;
    }
}