react-shop-web/front & back (26) 썸네일형 리스트형 결제 내역 페이지 만들기 client/src/components/views/HistoryPage/HistoryPage.js 폴더와 파일을 만든다. import React from 'react' function HistoryPage(props) { return ( History Payment Id Price Quantity Date of Purchase {props.user.userData && props.user.userData.history && props.user.userData.history.map(item => ( {item.id} {item.price} {item.quantity} {item.dateOfPurchase} ))} ) } export default HistoryPage 리덕스에 이미 history 배열이 존.. Paypal로 결제 성공 후 할 일들 카트를 비우기 결제 정보 저장하기 Payment Collection (Detailed) User Collection (Simple) 더보기 import React, {useEffect, useState} from 'react' import {useDispatch} from 'react-redux'; import {getCartItems, removeCartItem, onSuccessBuy} from '../../../_actions/user_actions'; import UserCardBlock from './Sections/UserCardBlock'; import {Empty, Result} from 'antd' import Paypal from '../../utils/Paypal'; function .. 코드 수정 & PayPal 버튼 만들기 CartPage.js 코드 수정 더보기 import React, {useEffect, useState} from 'react' import {useDispatch} from 'react-redux'; import {getCartItems, removeCartItem} from '../../../_actions/user_actions'; import UserCardBlock from './Sections/UserCardBlock'; import {Empty} from 'antd' import Paypal from '../../utils/Paypal'; function CartPage(props) { const dispatch = useDispatch(); const [Total, setTotal] = us.. 카트에 들어있는 상품들 가격 계산 & 카트에 들어있는 상품 지우기 더보기 import React, {useEffect, useState} from 'react' import {useDispatch} from 'react-redux'; import {getCartItems, removeCartItem} from '../../../_actions/user_actions'; import UserCardBlock from './Sections/UserCardBlock'; function CartPage(props) { const dispatch = useDispatch(); const [Total, setTotal] = useState(0); useEffect(() => { let cartItems = [] // 리덕스 user state에서 cart안에 상품이 들어있는지 확.. 카트에 담긴 상품 정보 가져오는 부분 코드 수정 강사님께서 product.js의 products_by_id 라우터 부분을 구현하실 때 클라이언트에다가 json 형식으로 {success: true, product} 이렇게 보내도록 구현하셨었는데 이렇게되면 redux-dev tools에서 볼 때 cartDetail > product > 이런식으로 한 단계 더 들어가야 product 모델 데이터에 접근할 수 있다. 후에 계속 이 부분을 활용할 텐데 이렇게 한 단계 더 깊이 들어가면 코드가 더러워 질 것 같다고 하셔서 코드를 수정하셨다. json 부분을 send로 바꿔주고 product만 보내주자. router.get('/products_by_id', (req, res) => { // /api/product/products_by_id?id=${productI.. 데이터베이스에서 가져온 상품 정보들을 화면에서 보여주기 표를 만들어주기 위해 새로운 컴포넌트를 만들자. CartPage 폴더에서 Sections 폴더를 만들고 UserCarBlcok.js 와 css 파일을 만든다. 더보기 import React, {useEffect} from 'react' import {useDispatch} from 'react-redux'; import {getCartItems} from '../../../_actions/user_actions'; import UserCardBlock from './Sections/UserCardBlock'; function CartPage(props) { const dispatch = useDispatch(); useEffect(() => { let cartItems = [] // 리덕스 user st.. 카트에 담긴 상품 정보들을 데이터베이스에서 가져오기 위 이미지는 현재 mongoDB에 있는 products 모델과 users 모델의 내용이다. 현재 상품 상세페이지를 들어가보면 나오는 내용은 위 이미지에서 오른쪽 내용이다. 보면 상품의 이미지나 설명 등등은 있지만 Cart 내용이 존재하지 않는다. 이렇게 되면 products 모델만으로는 cart 페이지를 만들 수 없다. 그러므로 users 모델과 products 모델을 합쳐줘야한다. 더보기 import React, {useEffect} from 'react' import {useDispatch} from 'react-redux'; import {getCartItems} from '../../../_actions/user_actions'; function CartPage(props) { const disp.. Add To Cart 기능 개선 및 카트 Tab 만들기 어떤 페이지를 이동할 때마다 auth라는 액션을 취해준다. auth가 취해지면 server/routes/users.js를 통과하게 된다. 이때 이 라우터가 auth 미들웨어로 가서 이 사람이 인증이 된 사람인지 ,로그인이 된 사람인지, 올바른 토큰을 갖고 있는 사람인지 등등 체크를 하고 올바른 사람이라면 이것에 대한 정보(user)를 다시 위 라우터에 전달을 해서 리덕스 스토어에 넣어준다. 하지만 현재까지 구현된 상태에서 보면 router.get("/auth", auth, (req, res) => { res.status(200).json({ _id: req.user._id, isAdmin: req.user.role === 0 ? false : true, isAuth: true, email: req.use.. 이전 1 2 3 4 다음
