Skip to content

[설계] 스토리

Jump to bottom
junamee edited this page May 1, 2021 · 1 revision

-1. 헤더 메뉴에 마우스 호버 시, navBar 보여주기 (기능은 없음)

  1. 공통컴포넌트 작업

    0-1. 상품 이미지/정보 마크업: 할인가격이 있으면 정상가격 과 함께 표시 & 이벤트 뱃지 부착 (할인가격이 아닌 경우 정상가격 표시)

    0-2. 이미지 호버 효과 (모든 이미지 해당, 검정60% 새벽배송/전국택배)

  2. 메인메뉴 Tab클릭 시 상품 3종 랜덤 노출

    1-1. 메인메뉴 TAB & BOX 마크업

    1-2. get 요청으로 5개 메인 Tab에 필요한 정보를 모두 받아온다( 랜덤 3개씩 )

  3. 카테고리 좌/우버튼 클릭 시 상품 4종 노출

    2-1. 카테고리 fetch 요청으로 받은 data 들 4개 묶음으로 데이터 정제

    2-2.카테고리 좌우 버튼 클릭 이벤트 발생 ⇒ 슬라이드 애니매이션

    2-3. 카테고리 다음 데이터 없을 시 버튼 disable

  4. 카테고리 더보기 → 카테고리 2개를 더 볼 수 있음

    3-1. 더보기 버튼을 클릭하면 카테고리 2개(국물요리/밑반찬)에 해당하는

    데이터를 GET요청으로 받아온다.

    3-2. 스토리 2와 동일하게 동작한다.

  5. 상품을 클릭하면 상세페이지를 보여준다.

    4-1. 클릭 상품에 해당되는 데이터 요청 후 상세페이지를 POPUP 창 만들기

    4-2. 주문 수량을 조절

    • 선택 수량만큼 총 주문금액이 변경된다.\최고 수량은 데이터에 받아지고 최고 수량 만큼만 수량을 조절하게 해준다.

    • 재고가 0개라면 수량은 0개 고정[주문하기] 버튼 대신에 [임시 품절] 주문 불가 (버튼 비활성화)

    4-4. 함께하면 더욱 맛있는 상품 만들기

    4-5. 상세페이지에서 detail section의 이미지를 보여준다

  6. 상품상세 페이지에서 상품을 장바구니에 추가한다

    • 장바구니 버튼을 누르면 선택상품 로컬 스토리지 저장, (로그인상태일 경우 DB저장은 백엔드 판단)
    1. 장바구니 조회하기

    6-1. 장바구니 popup 창 생성

    • 헤더에서 장바구니를 조회한다. (여건이 된다면 장바구니 킵 후에, '장바구니 확인하시겠습니까' 알람주기)

  7. 상품상세 페이지/장바구니에서 상품을 결제한다.

    6-1. 결제하기 버튼 클릭시 로그인 유무 확인

    6-2. 미로그인 상태 ⇒ 로그인창 pop up

    6-3. 로그인 상태 ⇒ 결제창 pop up (결제창에 배달비 추가)

  8. 로그인 기능

    7-1. 로그인 페이지를 모달 창으로 띄워 보여준다.

    7-2. 로그인 기능 구현하기 (백엔드 협업)

    [로그인 경로]

    1. 헤더에서 로그인을 클릭하여 로그인한다.

    2. 상품 상세페이지에서 [결제/주문하기]를 눌렀을 때, 미로그인 상태라면 로그인 안내.

    3. 장바구니 화면에서 [결제/주문하기] 를 눌렀을 때, 미로그인 상태라면 로그인 안내

  9. 결제 성공

    8-1. 결제 popup창 생성, 주문성공

    8-2. 주문하기 성공 : '주문이 완료되었습니다' 메시지 (2초) ⇒ 이전 페이지(메인 화면)

Clone this wiki locally