Nav 컴포넌트 기능 생성
Nav.jsx의 추가 코드 및 변경된 UI입니다.
user정보 있을 시 logout icon을 보여주고, 해당 icon을 클릭하면 로그인 icon보여줍니다.
Nav.jsx의 추가 코드입니다.
장바구니에 담긴 products가 0개보다 많으면 NavBar의 cart icon에 숫자 표시를 해줍니다.
Order 페이지 생성
order.slice.js의 코드입니다.
store폴더에 index.js의 추가코드입니다. 방금 작성한 orderSlice를 등록하려는 겁니다.
OrderPage의 index.jsx의 코드입니다.
여기서 OrderPage 폴더 안에 기존에 존재한 index.jsx말고 order-list폴더 생성 후, 안에 order-item폴더도 생성합니다.
OrderList.jsx와 OrderList.module.scss의 코드입니다.
OrderItem.jsx의 코드입니다.
OrderItem.module.scss의 코드입니다.
'배워서 따라하는 포플 > 쇼핑몰 앱' 카테고리의 다른 글
| react로 쇼핑앱 만들기(7) - NavCartBlock, NotFoundPage (0) | 2023.10.16 |
|---|---|
| react로 쇼핑몰 만들기(5) - 상세페이지, 장바구니, MockAPI (0) | 2023.10.04 |
| react로 쇼핑몰 만들기(4) - Product 불러오기 (0) | 2023.09.30 |
| react로 쇼핑몰 만들기(3) - Category 컴포넌트 (0) | 2023.09.27 |
| react로 쇼핑몰 만들기(2) - 로그인 및 회원가입 (0) | 2023.09.26 |
