피규어 쇼핑몰
- html
- css
- Vanilla Javascript
- axios
- json-live-server
- 기능을 페이지 사용 흐름에 따라 그려본다.
- 로그인 버튼
- 로그인 페이지 이동
- 로그인 성공 시 메인 페이지로 이동
- 로그인 페이지 이동
(로그인 중)
- 카테고리 클릭
- 해당 카테고리 상품 목록 페이지 이동
- 상품 선택
- 해당 상품 상세페이지 이동
- 장바구니
- 장바구니 페이지로 이동
- 상품 제거 기능
- 전체 주문
- 주문 내역 페이지로 이동
- 장바구니 페이지로 이동
- 즉시 주문
- 주문 내역으로 바로 이동
- 장바구니
- 해당 상품 상세페이지 이동
- 상품 선택
- 해당 카테고리 상품 목록 페이지 이동
- 1번을 토대로 페이지를 나누고, 각 페이지에 필요한(원하는) 요소를 생각한다.
-
메인 페이지
- new arrival
- 이미지만
-
로그인 페이지
- 로그인 폼
-
상품 목록 페이지
- 해당 카테고리 아이템들 모두 정렬
- 이미지, 이름, 가격 표시
-
상품 상세페이지
- 이미지와 상품 이름, 상세 정보
- 상세 정보
- 디테일한 상품 이름
- 주문 수량 선택 기능
- 주문 수량에 맞춰 금액 표시
- 장바구니 담기 버튼
- 주문하기 버튼
-
장바구니 페이지
- 이미지, 상품 이름, 선택한 수량, 수량에 따른 금액 표시
- 해당 상품 제거 버튼
- 수량 변경 기능
-
주문 내역 페이지
- 장바구니 페이지에서 주문한 뭉탱이 그대로 표시(수량변경, 제거버튼 제외)
- 주문 건 별로 정렬