합니다, 개발공부📝 합니다, 개발공부📝

먼저 views>HistoryPage>HistoryPage.js파일을 만들어 준다. import React from 'react' function HistoryPage() { return ( ) } export default HistoryPage app.js에 추가해준다.(로그인 한 사람만 볼 수 있게 true) import HistoryPage from './views/HistoryPage/HistoryPage'; 상단메뉴에 history 메뉴 추가한다. views>Navbars>Sections>RightMenu.js History history페이지에서 데이터를 가져오게끔 요청한다. import Axios from 'axios' import React,{useEffect, useState} from ..

paypal을 이용해서 금액을 지불하는 기능을 만들 것이다 . payment collection을 만들어서 다음의 데이터를 넣을것이다. 결제를 완료하고 나서는 카트를 비우고 결제수단을 user에 저장한다. https://developer.paypal.com/developer/accounts Sandbox accounts - PayPal Developer developer.paypal.com 우선 사이트로 가서 가입하고 paypal id 를 생성한다. 다시 에디터로 와서 models>Payment.js에서 payment collection을 만들어 준다. const mongoose = require('mongoose'); const paymentSchema = mongoose.Schema({ user: {..

이번에는 카트에서 상품을 삭제하는 기능을 구현한다. 삭제 함수는 cartpage에 구현하되 삭제 버튼은 userCardBlock에 있으므로 함수를 prop으로 전달해준다. //카트에서 상품 삭제 const removeFromCart = (productId) => { } userCardBlock에서 아이템정보를 렌더링 할 때 remove 버튼을 누르면 이 함수가 작동하도록 작성 해주자. const renderItems = () => (//아이템들을 화면에 나타나도록 하자. props.removeItem(product._id)} >Remove )) ) cartPage에서 함수를 작성한다. import {getCartItems, removeCartItem} from '../../../_actions/user_..

카트 페이지 템플릿을 만들고 db에서 가져온 데이터를 화면에 보여주도록 하자. cartpage에 템플릿을 추가하자. 여기서 테이터를 보여주는 userCardBlock을 따로 만들것이다. import UserCardBlock from './Sections/UserCartBlock'; import { Result, Empty } from 'antd'; return ( My Cart Total amount: ${Total} //아이템이 있을때 //아이템이 없을 때 No Items In the Cart } {/* Paypal Button */} ) } CartPage>Sections>UserCardBlock.js파일을 만들어준다. import React from 'react' function UserCardBl..

장바구니 페이지를 만들 것이다. 여기서 user컬렉션에는 cart quantity 정보가 있지만 product collection에는 quantity정보가 없다. 그래서 둘의 컬렉션을 종합해서 fetch하고 사용해서 정보를 나타내야 한다. 제일먼저 카트 페이지를 만들어준다. views>CartPage>CartPage.js import React from 'react' function CartPage() { return ( ) } export default CartPage App.js에 가서 route 추가해준다. 로그인 한사람만 자신의 장바구니 볼 수 있게 true로 바꿔준다. import CartPage from './views/CartPage/CartPage'; header부분에 장바구니모양을 추가해..

이번에는 상품 디테일 페이지에서 장바구니에 상품을 담을 수 있는 add to cart 기능을 만든다. cart는 로그인된 유저에 한해서 하나의 장바구니 만을 가질 수 있다. (user 모델에 cart가 존재(카트가 사용자에게 속하므로)) 우리는 이를 구현할 때 리덕스를 이용해서 사용자 정보를 관리하는 식으로 진행한다. 또한 장바구니에 담기를 클릭했을때 이미 장바구니에 존재하는 상품이라면 장바구니 아이콘 위의 수는 변함이없지만 장바구니에 들어가면 상품의 갯수가 증가하는 식으로 진행한다. user모델에 cart 정보를 넣어주자. 추가로 나중에 사용할 history 정보도 넣어주자.(본 제품들 기록할 것) const userSchema = mongoose.Schema({ name: { type: String,..

상품에 대한 디테일 정보를 나타내는 페이지를 만들 것이다. 상품 사진란과 설명을 하는 란 2가지로 나위어서 진행한다. views>DetailProductPage>DetailProductPage.js파일을 만든다. import React from 'react' function DetailProductPage() { return ( ) } export default DetailProductPage 우선 app.js에 route를 만들어준다. import DetailProductPage from './views/DetailProductPage/DetailProductPage'; //아무나 상세페이지 확인 가능하도록 null로 만들어준다. 우리는 이미 랜딩페이지에서 카드를 누르면 다음의 링크로 (productI..

검색해서 상품을 찾는 기능을 만든다. searchFeature 컴포넌트를 먼저 만든다. src>components>views>LandingPage>Sections>SearchFeature.js파일을 만든다. import React from 'react' function SearchFeature() { return ( ) } export default SearchFeature 랜딩페이지에 포함시켜준다. import SearchFeature from './Sections/SearchFeature'; {/* Search */} antd를 이용해서 템플릿을 만들어준다. import React, { useState } from 'react' import { Input } from 'antd'; const { Se..