상품 디테일 페이지

상품 디테일 페이지 생성하기

UI 완성본 

 

 

npm install react-image-gallery --save

 

 

상세페이지 UI 및 백엔드에서 해당 데이터 가져오기

 

reactGallery을 사용해서 사진 UI 띄우기

 

Product Info 컴포넌트 생성하기

productinfo 페이지 컴포넌트

 

 

유저관련 데이터는 redux로 상태관리를 하고 있다.

그래서 dispatch를 사용해서 thunk함수를 만들어 갯수에 대한데이터를 받아온다.

 

카트에 상품이 있던건지 새로 장바구니에 넣은것 인지 확인하고 카트의 객체를 반환한다.

 

쇼핑 카트 페이지 데이터 가져오기

 

위와같은 구조를 만들기 위해 

쿼리의 키와 벨류를 추가하여 데이터 베이스에 있는 상품들 정보 가져오기

 

 

아래와 같이 분기 처리 추가

 

  if (type === "array") {
    // id=32423423423,345345345345345,345345345
    // productIds = ['32423423423', '345345345345345345', '345345345345345']

    let ids = productIds.split(",");
    productIds = ids.map((item) => {
      return item;
    });
  }

 

 

 

쇼핑 카트 페이지 생성하기

완성 UI 예시

cartpage UI 만들기

 

 

계산 로직 작성

 

 

 

CartTable 컴포넌트 생성하기

UI 작성

 

 

로직 작성

 

Cart Item 삭제 기능 생성하기

1. Redux의 cartdetail에서 지워주기

2. 몽고 디비의 uesr 콜렉션의 의 card 

 

 

 

 

 

 

 

 

 

결제 기능 생성하기

 

 

 

 

npm install async

버튼 생성

 

dispatch 함수 생성

thunk와 addcase 추가

 

route 생성

 

 

History 페이지 생성하기

 

npm install dayjs