쇼핑몰 프로젝트(11) 회원 MY PAGE

쇼핑몰 프로젝트(11) 회원 MY PAGE - 장바구니 목록

2023. 4. 5. 16:24ㆍSpring

화면 상단의 MY PAGE 눌렀을 때 회원이 보면 화면창 구성

personal_layout.html 생성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
   xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- bootstrap css 로딩 -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- admin_layout과 열리는 모든 페이지에 열리는 공통 적용되는 css 로딩 -->
<link rel="stylesheet" href="/css/common.css">
<!-- header에 적용되는 css -->
<link rel="stylesheet" href="/css/fragment/header.css">
<!-- content 페이지가 열릴 때 같이 열리는 css (페이지마다 바뀌는 css) -->
<th:block layout:fragment="content_css"></th:block>
</head>
<body>
<div class="container">
			<!-- 행 -->
	<div class="row" style="margin-bottom: 30px;">
				<!-- 열 -->
		<div class="col">
			 <!-- headerFragment라는 이름으로 지정된 layout 페이지로 대체됨 -->
      		<th:block th:replace="~{fragment/header::headerFragment}"></th:block>
		</div>
	</div>
	<div class="row">
		<div class="col-3"> <!-- 행은 12 부분임 사이즈 지정 가능  -->
			 <!-- adminSideFragment라는 이름으로 지정된 layout 페이지로 대체됨 -->
      		<th:block th:replace="~{fragment/personal_side::personalSideFragment}"></th:block>
		</div>
		<div class="col-9">	   
   			<!-- content라는 이름으로 지정된 layout 페이지 열림 (바뀌는 화면) -->
     		 <th:block layout:fragment="content"></th:block>
		</div>
	</div>
</div>

<!-- Jquery 문법 로딩 -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- bootstrap js 로딩  -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!-- header.js 로딩 -->
<script type="text/javascript" src="/js/fragment/header.js"></script>
<!-- 우편번호 api -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<!-- content 페이지가 열릴 때 같이 열리는 js  -->
<th:block layout:fragment="content_js"></th:block>
</body>
</html>

personal_side.html 생성 두 html 연결 fragment로 화면 구성

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">


<th:block th:fragment="personalSideFragment">
	<div class="row">
		<div class="col">    <!-- active -->
			<div class="list-group">
					<!-- 회원 사이드 메뉴 --> 
					<a href="" 
					class="list-group-item list-group-item-action">
						장바구니 목록
					</a>
					<a href="" 
					class="list-group-item list-group-item-action">
						구매 내역
					</a>
					<a href="" 
					class="list-group-item list-group-item-action">
						개인정보수정
					</a>
			</div>
		</div>
	</div>
</th:block>	
</html>

MY PAGE 누르면 장바구니 목록 화면으로 이동

header.html의 MY PAGE a태그 감싸서 controller 이동

<a th:href="@{/cart/cartList}">MY PAGE</a>

controller 작성. 페이지 이동 경로 설정

	//장바구니 페이지
	@GetMapping("/cartList")
	public String cartList() {
		
		return "content/cart/cart_list";
	}

cart_list.html 생성

personal_layout과 같이 열리기 때문에 fragment 설정

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
   xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
   layout:decorate="~{fragment/personal_layout}">

<!-- 연결해야 할 외부 css 파일 -->
<th:block layout:fragment="content_css">
	<!--<link rel="stylesheet" href="/css/test.css(변경)">--> <!-- 외부 css 연결하는 코드를 block 안에 작성 layout에서 같이 열어줌 -->
</th:block>


<th:block layout:fragment="content">
	장바구니 목록
</th:block>

<!-- 연결해야 할 외부 js 파일-->
<th:block layout:fragment="content_js">
	<!--<script type="text/javascript" src="/js/test.js(변경)"></script> --> <!-- 외부 js 연결하는 코드를 block 안에 작성 layout에서 같이 열어줌 -->
</th:block>


</html>

MY PAGE 클릭 시 위처럼 personal_side 뜨고 장바구니 페이지로 이동

메뉴에 카테고리 목록 안 뜸. > 매번 컨트롤러에서 목록 조회 쿼리 반복 해야함.

카테고리 목록 조회하는 인터셉트 생성하여 처리

CategoryInterceptor 클래스 생성하여 HandlerInterceptor 구현

메소드 실행을 위해 그 전에 itemService 의존성 주입.

postHandle 오버라이딩하여 카테고리 목록 조회 메소드 실행.

//카테고리 목록 조회 
public class CategoryInterceptor implements HandlerInterceptor{
	
	//의존성 주입
	@Resource(name = "itemService")
	private ItemService itemService;

	@Override
	public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
			ModelAndView modelAndView) throws Exception {
		//사용중인 카테고리 목록 조회
		modelAndView.addObject("categoryList", itemService.getCateListInUse());
	}

}

IntercepterConfig 클래스에서 인터셉터 언제 쓸 지 설정.

상품 목록, 상품 상세 조회, 장바구니 페이지 이동할 때 인터셉터 필요.

카테고리 인터셉터에 대한 객체 생성하여 데이터 리턴

@Bean
public CategoryInterceptor getCategoryInterceptor() {
    return new CategoryInterceptor();
}

인터셉터 언제 실행될 지 설정

//카테고리 목록 조회
registry.addInterceptor(getCategoryInterceptor())
        .addPathPatterns("/item/**") //상품 관련 페이지 들어갈 때마다
        .addPathPatterns("/cart/**") //장바구니 관련 
        .excludePathPatterns("/**/*Ajax"); //모든 컨트롤러의 Ajax로 끝나는 이동경로 제외

컨트롤러에서 사용중인 상품 목록 조회하는 메소드 삭제해주고 인터셉터로 다 처리되게 함.

장바구니 목록 화면 그리기

장바구니 목록 조회 기능.

조인 사용하여 장바구니 목록 조회 쿼리 작성

	<!-- 장바구니 목록 조회 -->
	<select id="getCartList" resultMap="cart">
		SELECT CART_CODE 
			, ITEM.ITEM_CODE
			, ITEM_NAME
			, ITEM_PRICE
			, CART_CNT
			, ATTACHED_FILE_NAME
			, CART_CNT * ITME_PRICE AS TOTAL_PRICE
		FROM SHOP_ITEM ITEM, SHOP_CART CART, ITEM_IMG IMG
		WHERE ITEM.ITEM_CODE = IMG.ITEM_CODE
		AND ITEM.ITEM_CODE = CART.ITEM_CODE
		WHERE IS_MAIN = 'Y'
		AND MEM_ID = #{memId}
		
			
	</select>

장바구니 목록 조회 시 상품 정보와 총가격 데이터 담아올 곳이 필요.

CartVO에 변수 추가

private int totalPrice;
private ItemVO itemVO; //CartVO는 상품 정보 하나를 가짐.

CartMapper resultMap 작성 시 주의!

itemVO는 association사용하여 resultMap 작성

itemVO는 imgList 가지고 있기 때문에 이미지 데이터까지 다 받아옴.

TOTAL_PRICE는 어떤 resultMap에도 없기 때문에 추가 작성.

<mapper namespace="cartMapper">
	<resultMap type="com.study.shop.cart.vo.CartVO" id="cart">
		<id column="CART_CODE" property="cartCode"/>
		<result column="ITEM_CODE" property="itemCode"/>
		<result column="MEM_ID" property="memId"/>
		<result column="REG_DATE" property="regDate"/>
		<result column="CART_CNT" property="cartCnt"/>
		<result column="TOTAL_PRICE" property="totalPrice"/>
		<association property="itemVO" resultMap="itemMapper.item"></association>
	</resultMap>

CartService 작성

//장바구니 목록 조회
List<CartVO> getCartList(String memId);

CartServiceImpl 작성

//장바구니 목록 조회
@Override
public List<CartVO> getCartList(String memId) {
    return sqlSession.selectList("cartMapper.getCartList", memId);
}

CartController 작성

//장바구니 페이지
@GetMapping("/cartList")
public String cartList(Model model, HttpSession session) {
    //세션에서 memId 빼기
    MemberVO loginInfo = (MemberVO)session.getAttribute("loginInfo");

    //장바구니 목록 조회
    List<CartVO> cartList = cartService.getCartList(loginInfo.getMemId());
    model.addAttribute("cartList", cartList);

    //총 구매금액 계산
    int finalPrice = 0;
    for(CartVO cart : cartList) {
        finalPrice += cart.getTotalPrice();
    }

    model.addAttribute("finalPrice", finalPrice);

    return "content/cart/cart_list";
	}
}

구매금액은 장바구니 상품들에 체크박스를 체크한 것들의 가격 합이 들어옴.

controller에서 총 구매금액 계산하여 html에 전달

cart_list.html에 데이터 뿌려주기.

데이터 뿌릴 때 이미지 데이터 코드 주의!

cartVO 안의 itemVO 안의 itemList의 0번째 데이터의 attachedFileName 불러와야 함.

0번째 데이터인 이유 : IS_MIAN = 'Y'인 것 하나뿐임.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
   xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
   layout:decorate="~{fragment/personal_layout}">

<!-- 연결해야 할 외부 css 파일 -->
<th:block layout:fragment="content_css">
	<!--<link rel="stylesheet" href="/css/test.css(변경)">--> <!-- 외부 css 연결하는 코드를 block 안에 작성 layout에서 같이 열어줌 -->
</th:block>


<th:block layout:fragment="content">
	<div class="row">
		<div class="col">
			<div class="row mb-3">
				<div class="col">
						<table class="table table-hover text-center align-middle">
						<colgroup>
							<col width="7%">
							<col width="15%">
							<col width="*">
							<col width="15%">
							<col width="15%">
							<col width="15%">
							<col width="7%">
						</colgroup>
						<thead class="table-head">
							<tr>
								<td>
									<input type="checkbox" class="form-check-input" checked>
								</td>
								<td>상품 이미지</td>
								<td>상품명</td>
								<td>가 격</td>
								<td>수 량</td>
								<td>총 가격</td>
								<td></td>
							</tr>
						</thead>
						<tbody>
							<th:block th:if="${#lists.size(cartList) == 0}">
								<tr>
									<td colspan="7">장바구니에 담긴 상품이 없습니다.</td>
								</tr>
							</th:block>
							<th:block th:if="${#lists.size(cartList) != 0}">
							
							<tr th:each="cart : ${cartList}">
								<td>
									<input type="checkbox" class="form-check-input" checked>
								</td>
								<td>
									<img width="70px;" th:src="${'/upload/' + cart.itemVO.imgList[0].attachedFileName}">
								</td>   <!-- 왼쪽 정렬  -->
								<td class="text-start">[[${cart.itemVO.itemName}]]</td>
								<td>[[${#numbers.formatCurrency(cart.itemVO.itemPrice)}]]</td>
								<td>
									<div class="row">
										<div class="col-7">
											<input type="number" class="form-control" min="1" th:value="${cart.cartCnt}">
										</div>
										<div class="col-5 d-grid">
											<input type="button" class="btn btn-secondary" value="수정">
										</div>
									</div>
								</td>
								<td>[[${#numbers.formatCurrency(cart.totalPrice)}]]</td>
								<td>
									<div class="row">
										<div class="col d-grid">
											<input type="button"  class="btn btn-secondary" value="삭제">
										</div>
									</div>
								</td>
							</tr>
							</th:block>
						</tbody>
					</table>
				</div>
			</div>
			<div class="row mb-3">
						<!--offset-10 : 12등분 10등분 비우고 시작 -->
				<div class="offset-9 col-2">구매금액</div>
				<div class="col-1">[[${#numbers.formatCurrency(finalPrice)}]]</div>
			</div>
			<div class="row mb-3">
				<div class="offset-5 col-1 d-grid">
					<input type="button" class="btn btn-primary" value="선택구매">
				</div>
				<div class="col-1 d-grid">
					<input type="button" class="btn btn-primary" value="선택삭제">
				</div>
				
			</div>
		</div>
	</div>
</th:block>

<!-- 연결해야 할 외부 js 파일-->
<th:block layout:fragment="content_js">
	<!--<script type="text/javascript" src="/js/test.js(변경)"></script> --> <!-- 외부 js 연결하는 코드를 block 안에 작성 layout에서 같이 열어줌 -->
</th:block>


</html>

'Spring' 카테고리의 다른 글

쇼핑몰 프로젝트(11) 회원 MY PAGE - 장바구니 목록 (2) (0)	2023.04.07
json 데이터 java로 보내기 (0)	2023.04.07
쇼핑몰 프로젝트(10) 장바구니 (0)	2023.04.04
쇼핑몰 프로젝트(10) 상품 목록 화면 (0)	2023.04.04
쇼핑몰 프로젝트(9) - 상품 관리 (검색 기능) (0)	2023.04.03

📚개발 복습 노트

📚개발 복습 노트

태그

최근글

댓글

공지사항

아카이브

'Spring' 카테고리의 다른 글

관련글

티스토리툴바