WEB (60) 썸네일형 리스트형 코드 수정 & 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.. Add To Cart 구현하기 #1 현재 server/models에서 Product 모델이나 User 모델을 보면 Cart에 관한 필드나 모델이 존재하지 않는다. 이 상태면 DB에 카트에 관한 정보를 저장할 수 없다. 이러면 카트에 관한 모델을 만들거나 따로 처리를 해줘야한다. 강의에서는 User 모델에 Cart 필드를 만들어서 관리를 했다. 가이드 라인은 다음과 같다. 위 이미지에서 history 필드는 결제를 하고 나면 어떤 상품을 샀는지 등등이 남을 건데 이것을 관리한다. User 모델에 Cart 필드랑 history 필드를 넣어주자. 더보기 const mongoose = require('mongoose'); const bcrypt = require('bcrypt'); const saltRounds = 10; const jwt .. 상품의 상세정보를 데이터베이스에서 가져오기 들어가기 전에 CheckBox 컴포넌트랑 RadioBox 컴포넌트에서 Collapse를 이용하는 부분이 있는데 여기서 dafaultActiveKey를 0으로 설정해서 처음 사이트를 들어갔을 때 패널이 접혀있도록 해주고 header도 이름에 맞춰서 바꿔주자. 그리고 카드 컴포넌트를 클릭했을 때 해당 상품의 id에 맞는 상세페이지로 갈 수 있도록 card 컴포넌트의 cover부분에 있는 imageSlider를 a태그로 감싸주자. const renderCards = Products.map((product, index) => { return ( ) }) LandingPage.js에 있는 renderCards 함수 부분이다. 빈 상품 상세 페이지 만들기 & Proudct detail page를 위한 Route 만.. 이전 1 2 3 4 5 6 ··· 8 다음
