주제

피규어 쇼핑몰

기술

html
css
Vanilla Javascript
axios
json-live-server

초기 기획

페이지 기획 단계

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

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

(로그인 중)

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

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

메인 페이지
- new arrival
- 이미지만
로그인 페이지
- 로그인 폼
상품 목록 페이지
- 해당 카테고리 아이템들 모두 정렬
- 이미지, 이름, 가격 표시
상품 상세페이지
- 이미지와 상품 이름, 상세 정보
- 상세 정보
  - 디테일한 상품 이름
  - 주문 수량 선택 기능
  - 주문 수량에 맞춰 금액 표시
  - 장바구니 담기 버튼
  - 주문하기 버튼
장바구니 페이지
- 이미지, 상품 이름, 선택한 수량, 수량에 따른 금액 표시
- 해당 상품 제거 버튼
- 수량 변경 기능
주문 내역 페이지
- 장바구니 페이지에서 주문한 뭉탱이 그대로 표시(수량변경, 제거버튼 제외)
- 주문 건 별로 정렬