쇼핑몰 사이트 만들기 - 섹션 4. 카트 페이지 만들기(#1~8)

JeongHun·2022년 9월 14일
0

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기
REACT-SHOP-KO 작성 코드


섹션 4. 카트 페이지 만들기

1. Add to Cart 기능 개선 및 카트 Tab 만들기

  1. 빈쇼핑카드 페이지 만들기

    → client/src/components/views 안에 CartPage folder 만들고 그 안에 CartPage.js 생성

  2. Cart Page route 만들기

    → client/src/components/App.js

    login user만 사용 가능하도록 true로 설정

    <Route exact path="/user/cart" component={Auth(CartPage, true)} />
  3. Cart 페이지를 위한 탭 만들기
    ant.design-badge


2. 카트에 담긴 상품 정보들을 데이터베이스에서 가져오기 #1

3. 카트에 담긴 상품 정보들을 데이터베이스에서 가져오기 #2


4. 데이터베이스에서 가져온 상품 정보들을 화면에서 보여주기

5. 카트에 담긴 상품 정보 가져오는 부분 코드 수정

Redux 부분의 cart의 success부분을 삭제

  1. sever/routes/product.js 부분 수정

  2. client/src/components/views/DetailProductPage/DetailProductPage.js 부분 수정

  3. client/src/_actions/user_actions.js 부분 수정

  4. client/src/components/views/CartPage/CartPage.js 부분 수정


6. 카트에 들어있는 상품들 가격 계산


7. 카트에 들어있는 상품 지우기


8. 카트에 있는 모든 상품 지운 다음 처리할 것들

카트에 아무것도 없다면 total을 삭제하고 Icon을 보여준다

profile
coding study

0개의 댓글