쇼핑몰 토이 프로젝트 정리 - DAY 5

오늘 끝낼 수 있겠지..?

 

ProductInfo

F

제품의 상세페이지에서 Add to cart 버튼을 누르면 된다.

dispatch(addtocart(제품의 id)) > actions에서

const request = axios.post(`${USER_SERVER}/addToCart`, body)

로 productId를 넘겨준다.

 

B

users.js

user collection에 존재하는 해당 유저의 정보를 가져오기 위해 auth를 필요로 한다.

router.post("/addToCart", auth, (req, res) => {

 

findOne()을 통해 F에서 받은 req.id와 auth 속의 user id를 비교한다.

req의 id가 user의 cart에 있다면 findOneAndUpdate()를 통해 해당 제품의 수량을 +1을 하고,

만약 없다면 새로 cart에 제품을 추가한다.

 

 

CartItem Load

F

cartpage가 로드 되면서 리덕스의 user state의 cart에 상품이 있는지 확인하여 cart 정보를 가져온다.

dispatch(getcartItems(userdata.cart, cartItem)) > actions

const request = axios.get(`/api/product/products_by_id?id=${cartItems}&type=array`)

cartItem에 해당하는 정보들을 product collection에서 가져온 후에 quantity 정보를 넣어준다.

 

B

product.js

router.get('/products_by_id', (req, res) => {

에서 find(product Id)를 이용해 DB에서 상품을 가져온다.

 

 

Remove CartItem

F

dispatch(remove(productId)) > actions

const request = axios.get(`/api/users/removeFromCart?id=${productId}`)

에서 productInfo, cart 정보를 조합해 cartDetail을 만든다.

B로 productId를 넘겨주면 B에서 조합

 

B

users.js

findOneAndUpdate(req.id)를 사용해 cart 안에 원하는 상품을 지운다.

해당 함수에서는 auth도 추가적으로 사용한다 (해당 id의 장바구니를 지우는 거기 때문에)

제품을 지운 후에 Product.find()를 사용해 장바구니 정보를 다시 저장한 후 productInfo, cart를 리턴한다.

 

 

Buy

F

paypal을 사용하여 결제한다.

dispatch(buy(paymentData, cartDetail)) > actions

const request = axios.post(`/api/users/successBuy`, data)

결제에 필요한 결제 테이터와, 장바구니를 넘겨준다.

 

B

users.js

router.post('/successBuy', auth, (req, res) => {

User collection의 History 필드 안에 간단한 결제 정보를 저장하고

(구매 날짜, 상품 이름, 상품 코드, 가격, 수량, 결제한 사람의 id 등을 저장 >> 결제 내역 페이지를 위함)

Payment Collection에 자세한 결제 정보를 저장한다 (id, name, email)

후에 history를 User.findOneAndUpdate()를 통해 저장한다.

이때 Product Collection의 sold 필드 정보를 업데이트 한다.

(ex. A 상품이 팔린 개수는 n개 임을 나타내기 위함)

 

 

History

props를 받아서 userData.history를 출력한다.

결제 하면서 history를 채워놨기 때문에 axios 사용 없이 userData에서 데이터를 받아 사용할 수 있다.