Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Skip to content
This repository has been archived by the owner on Feb 3, 2024. It is now read-only.
/ Shopping_Mall Public archive

[SpringBoot] 쇼핑몰 홈페이지 개발 프로젝트

Notifications You must be signed in to change notification settings

chihyeonwon/Shopping_Mall

Repository files navigation

Cart

장바구니 담기

CartItemDto

image

장바구니에 담을 상품 클래스 CartItemDto를 작성합니다.
상품 아이디와 수량을 전달 받습니다.

Cart

image

회원의 장바구니를 생성하는 createCart 메서드를 Cart 클래스에 작성합니다.

CartItem

image

장바구니에 담을 상품 엔티티를 생성하는 createCartItem 메소드와 장바구니에 담을 수량을 증가시켜 주는 addCount
메소드를 작성합니다.

CartRepository

image

현재 로그인한 회원의 Cart 엔티티를 찾기 위해서 쿼리메소드를 추가합니다.

CartItemRepository

image

장바구니에 들어갈 상품을 저장하거나 조회하기 위해서 CartItemRepository 인터페이스를 작성합니다.

CartService

image

장바구니에 상품을 담는 addCart 로직을 작성합니다.

CartController

image

장바구니와 관련된 요청들을 처리하기 위해서 CartController 클래스를 작성합니다.

itemDtl.html script

image image

장바구니 담기 로직을 호출하는 addCart 스크립트 함수를 작성합니다.

image

장바구니 담기 onclick 속성에 작성한 addCart 함수를 추가합니다.

상품 장바구니 담기 구현

image

장바구님 담기 버튼을 클릭하면 상품을 장바구니에 담았다는 메시지가 나타나고 확인을 누르면 메인 페이지로 이동합니다.

장바구니 조회하기

CartItemDto

image

장바구니 조회 페이지에 전달할 장바구니 상품 Dto 클래스를 작성합니다.
JPQL로 쿼리 작성시 생성자를 이용해서 DTO로 바로 변환하는 방법을 사용합니다.

CartItemRepository

image

장바구니 페이지에 전달할 CartDetailDto 리스트를 쿼리 하나로 조회하는 JPQL문을 작성합니다.
성능최적화가 필요할 때 DTO의 생성자를 이용하여 반환 값으로 DTO 객체를 생성할 수 있습니다.

CartService

image

현재 로그인한 회원의 정보를 이용하여 장바구니에 들어있는 상품을 조회하는 getCartList를 작성합니다.

CartController

image

장바구니 페이지로 이동할 수 있도록 CartController 클래스에 orderHist 메소드를 작성합니다.

cartList.html script

조회한 장바구니 상품 정보를 이용하여 장바구니 목록을 보여주는 페이지를 구현합니다.
화면에서 구현해야 하는 이벤트가 많아서 자바스크립트 함수가 많습니다.

image

총 주문 금액을 구하는 함수 입니다.
주문 상품을 체크하거나 해제할 경우 총 주문 금액을 구하는 getOrderTotalPrice 함수를 호출하도록 합니다.

image

장바구니 상품의 수량 변경 시 수량과 가격을 곱해서 상품금액을 변경하는 changeCount 함수입니다.
상품 금액을 변경 한 후 총 주문 금액을 변경하는 getOrderTotalPrice 함수를 호출합니다.

image

장바구니에 들어있는 전체 상품을 체크하거나 체크 해제하는 함수입니다.
변경된 총 주문 금액을 계산하기 위해서 getOrderTotalPrice 함수를 호출합니다.

장바구니 목록 조회 페이지 구현

image

CartItem

image

현재 장바구니에 담겨있는 수량을 변경하는 updateCount 메소드를 작성합니다. 

CartService

image

현재 로그인한 회원과 해당 장바구니 상품을 저장한 회원이 같은지 검사하는 validateCartItem 메소드와
장바구니 상품의 수량을 업데이트하는 updateCartItem 메소드를 작성합니다.

CartController

image

장바구니 상품의 수량을 업데이트하는 요청을 처리할 수 있도록 로직을 추가합니다.

cartList.html

image image

장바구니 상품의 수량을 수정할 경우 업데이트 요청을 하도록하는 updateCartItemCount 자바스크립트 함수를
추가해줬습니다. 작성한 updateCartItem 함수를 기존에 작성한 changeCount()함수 마지막에 추가합니다.

장바구니 목록

image image

장바구니 상품의 수량을 변경 후 페이지를 새로고침하면 변경된 수량이 유지되는 것을 볼 수 있습니다.

장바구니 목록 페이지에서 장바구니 상품의 수량을 변경할 수 있게 되었습니다.

CartService

image

상품 정보에 있는 X 버튼을 클릭할 때 장바구니에 넣어놓은 상품을 삭제하기 위해서
장바구니 상품 번호를 파라미터로 받아서 삭제하는 deleteCartItem 메소드를 작성합니다.

CartController

image

장바구니 상품을 삭제하는 요청을 처리할 수 있도록 로직을 추가합니다.

cartList.html

image

x 버튼을 클릭하면 해당 상품을 삭제하는 deleteCartItem 자바스크립트 함수를 작성합니다.

image

삭제 버튼의 onclick 속성에 deleteCartItem() 함수가 호출되도록 추가합니다.

image

삭제 버튼 x를 눌러서 해당 상품이 삭제되는 것을 확인할 수 있습니다.

장바구니 상품 주문하기

CartOrderDto

image

주문할 상품 데이터를 전달할 DTO 클래스를 작성합니다.

OrderService

image

장바구니에서 주문할 상품 데이터를 전달받아서 주문하는 Orders 메서드 작성합니다.

CartService

image

orderDto 리스트 생성 및 주문 로직 호출, 주문한 상품은 장바구니에서 제거하는 orderCartItem 메서드를 작성합니다.

CartController

image

CartController 클래스에 장바구니 상품의 수량을 업데이트하는 요청을 처리할 수 있도록 로직을 작성합니다.

cartList.html

image image

장바구니에서 선택한 상품 주문을 요청하는 orders() 자바스크립트 함수를 추가합니다.

image

주문하기 버튼의 onclick 속성에 orders()함수가 실행될 수 있도록 추가합니다.

장바구니 상품 선택

image

장바구니 상품 주문 성공

image

구매 이력 확인

image

Releases

No releases published

Packages

No packages published