REQUIREMENTS.md

Step 1

Router

• react-router-dom을 사용하여 라우팅을 구현한다.
  • /: ProductList 컴포넌트
  • /product/${id}: ProductDetail 컴포넌트
  • /cart: Cart 컴포넌트
  • /order: Order 컴포넌트
  • /order/list : OrderList 컴포넌트
  • /order/${id}: OrderDetails 컴포넌트

상태관리

• react-query를 사용하여 서버 상태를 동기화 하고 업데이트한다.

  • 상품 목록을 조회할 수 있다
  • 상품 상세 정보를 조회할 수 있다.
  • 주문 목록을 조회할 수 있다.
  • 주문 상세 정보를 조회할 수 있다.
  • 주문을 POST 하면 장바구니를 초기화 한다.

• zustand를 사용하여 장바구니의 상품 목록을 관리한다.

  • 장바구니 목록을 조회한 후 상태에 추가한다.
  • 유저가 변경하는 상품의 수량을 zustand로 관리한다.

GNB

• 로고를 클릭하면 상품목록 페이지(/)로 이동한다.
• 장바구니 버튼을 클릭하면 장바구니 페이지(/cart)로 이동한다.
• 장바구니에 상품이 존재하면 장바구니 버튼에 마크가 표시된다.
• 주문목록 버튼을 클릭하면 주문목록 페이지(/order/list)로 이동한다.

상품 목록

• 상품 목록 API를 조회할 수 있다.
• 상품이 없을 경우 "상품이 존재하지 않습니다." 메시지를 표시한다.
• 장바구니 버튼을 클릭하면 장바구니에 상품이 추가된다.
  • 장바구니 페이지로 이동 선택 모달을 표시한다.
  • 확인 버튼을 클릭하면 장바구니 페이지로 이동한다.

상품 상세

• 상품 상세 정보 API를 조회할 수 있다.
• 상품 사진, 이름, 금액이 화면에 표시된다.
• 장바구니 버튼을 클릭하면 상품이 추가되며 장바구니 페이지로 이동한다.

장바구니

• 장바구니에 담긴 상품들이 조회되며 상품의 수량을 변경할 수 있다.
• 상품을 장바구니에서 삭제할 수 있다.
• 주문하기 버튼을 클릭하면 주문 페이지로 이동한다.

주문

• 결제하기 버튼을 누르면 상품 목록 페이지로 이동한다.

주문 목록

• 주문 목록 API를 조회할 수 있다.
• 주문이 없을 경우 "주문이 존재하지 않습니다." 메시지를 표시한다.
• 상품의 장바구니 버튼을 클릭하면 장바구니에 상품이 추가된다.
  • 장바구니 페이지로 이동 선택 모달을 표시한다.
  • 확인 버튼을 클릭하면 장바구니 페이지로 이동한다.