주제

피규어 쇼핑몰

기술

• html
• css
• Vanilla Javascript
• axios
• json-live-server

초기 기획

페이지 기획 단계

1. 기능을 페이지 사용 흐름에 따라 그려본다.

• 로그인 버튼
  • 로그인 페이지 이동
    • 로그인 성공 시 메인 페이지로 이동

(로그인 중)

• 카테고리 클릭
  • 해당 카테고리 상품 목록 페이지 이동
    • 상품 선택
      • 해당 상품 상세페이지 이동
        • 장바구니
          • 장바구니 페이지로 이동
            • 상품 제거 기능
            • 전체 주문
              • 주문 내역 페이지로 이동
        • 즉시 주문
          • 주문 내역으로 바로 이동

2. 1번을 토대로 페이지를 나누고, 각 페이지에 필요한(원하는) 요소를 생각한다.

• 메인 페이지

  • new arrival
  • 이미지만

• 로그인 페이지

  • 로그인 폼

• 상품 목록 페이지

  • 해당 카테고리 아이템들 모두 정렬
  • 이미지, 이름, 가격 표시

• 상품 상세페이지

  • 이미지와 상품 이름, 상세 정보
  • 상세 정보
    • 디테일한 상품 이름
    • 주문 수량 선택 기능
    • 주문 수량에 맞춰 금액 표시
    • 장바구니 담기 버튼
    • 주문하기 버튼

• 장바구니 페이지

  • 이미지, 상품 이름, 선택한 수량, 수량에 따른 금액 표시
  • 해당 상품 제거 버튼
  • 수량 변경 기능

• 주문 내역 페이지

  • 장바구니 페이지에서 주문한 뭉탱이 그대로 표시(수량변경, 제거버튼 제외)
  • 주문 건 별로 정렬