스프링부트+jsp로 배달사이트 만들기-18 주문상세 페이지

OrderController에 추가 합니다

@GetMapping("/orderListDetail/{orderNum}")
public String orderDetail(@PathVariable String orderNum, Model model, @AuthenticationPrincipal LoginService user) {

    OrderList orderDetail = orderService.orderListDetail(orderNum);
    
    if (user != null && (user.getUser().getId() != orderDetail.getUserId())) {
        System.out.println("다른 사용자");
        return "redirect:/";
    } else if (user == null) {
        System.out.println("비로그인");
        return "redirect:/";
    }
    
    List<Cart> list = FoodInfoFromJson.foodInfoFromJson(orderDetail.getFoodInfo());

    model.addAttribute("orderDetail", orderDetail);
    model.addAttribute("cart", list);

    return "order/orderListDetail";
}

주문번호로 주문상세를 불러오고 비로그인 사용자나, 주문자의 아이디가 일치하지 않으면 접근할 수 없도록 구현했습니다

 

주문상세의 json형태의 메뉴정보를 리스트로 변환해 화면에 출력합니다

 

 

OrderService

// 주문목록 상세보기
OrderList orderListDetail(String orderNum);

 

OrderServiceImp

@Override
public OrderList orderListDetail(String orderNum) {
	return orderDAO.orderListDetail(orderNum);
}

 

OrderDAO

// 주문목록 상세보기 페이지
OrderList orderListDetail(String orderNum);

 

OrderDAOImp

@Override
public OrderList orderListDetail(String orderNum) {
	return sql.selectOne("order.orderListDetail", orderNum);
}

 

orderMapper

<select id="orderListDetail" resultType="OrderList">
		SELECT	o.order_num,
		    	o.user_id,
		    	o.order_date,
		    	o.pay_method,
		    	o.delevery_status,
		    	o.phone,
		    	o.delevery_address1,
		    	o.delevery_address2,
		    	o.delevery_address3,
		    	o.store_id,
		    	o.total_price,
		    	o.used_point,
                o.request,
                d.food_info,
		    	s.store_name,
			    s.delevery_tip
	FROM		bm_order_user o
	LEFT JOIN   (SELECT  ORDER_NUM, 
                         LISTAGG(FOOD_INFO, '/') food_info
                FROM     BM_ORDER_DETAIL_USER 
                GROUP BY ORDER_NUM) d
	ON		  	o.order_num = d.order_num
	LEFT JOIN	bm_store s
	ON		 	o.store_id = s.id 
    LEFT JOIN	bm_review r
    ON			o.order_num = r.order_num
	WHERE		o.order_num = #{orderNum }
	ORDER BY	o.order_date desc
	</select>

 

화면을 출력할 jsp와 css입니다

orderListDetail.jsp 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/include/link.jsp"%>
<link rel="stylesheet" href="/css/order/orderDetail.css">
<!-- <link rel="stylesheet" href="/css/layout/nav.css"> -->
<%@ include file="/WEB-INF/view/include/header.jsp"%>



<section class="title">
	<h1>주문 상세</h1>
</section>

<main>
	<div class="detail_box">
		<div class="order_cont">
			<div>${orderDetail.deleveryStatus }</div>
			<div class="store_name">${orderDetail.storeName }</div>

			<div class="order_info">
				<div>
					주문일시 :
					<fm:formatDate value="${orderDetail.orderDate }"
						pattern="yyyy년 MM월 dd일 (E) a hh:mm" />
				</div>
				<div>주문번호 : ${orderDetail.orderNum }</div>
			</div>
		</div>

		<ul class="order_menu">
			<c:forEach begin="0" end="${fn:length(cart) -1 }" var="i">
				<li>
					<div><span>${cart[i].foodName } ${amount[i] }개</span></div>
					
					<ul>
						<li>기본가격 <fm:formatNumber value="${cart[i].foodPrice }" />원</li>

						<c:set var="foodTotalPrice" value="${cart[i].foodPrice }" />
						<c:if test="${fn:length(cart[i].optionName) != 0}">
							<c:forEach begin="0" end="${fn:length(cart[i].optionName) -1 }" var="j">
								<li>
									<span>${cart[i].optionName[j] }</span> 
									<span><fm:formatNumber value="${cart[i].optionPrice[j] }" pattern="###,###" />원</span>
								</li>
								
								
								<c:set var="foodTotalPrice" value="${foodTotalPrice + cart[i].optionPrice[j] }" />
							</c:forEach>
						</c:if>
						<li class="menu_price_sum"><fm:formatNumber value="${foodTotalPrice }" pattern="###,###" />원</li>
					</ul>
					<hr>
				</li>
			</c:forEach>
		</ul>


		<div class="price">
			<div>
				<span>총 주문금액 </span><span><fm:formatNumber value="${orderDetail.totalPrice }" pattern="###,###" />원</span>
			</div>
			<div>
				<span>배달팁 </span><span><fm:formatNumber value="${orderDetail.deleveryTip }" pattern="###,###" />원</span>
			</div>
			<div>
				<c:if test="${orderDetail.usedPoint != 0 }">
					<span>포인트 사용 </span>
					<span>-<fm:formatNumber value="${orderDetail.usedPoint }" pattern="###,###" />원</span>
				</c:if>
			</div>
			<hr>
		</div>

		<div class="total">
			<div>
				<span>총 결제금액 </span>
				<span class="sum"><fm:formatNumber value="${orderDetail.totalPrice + orderDetail.deleveryTip - orderDetail.usedPoint  }" pattern="###,###" />원</span>
			</div>
			
			<div>
				<span>결제방법 </span><span>${orderDetail.payMethod }</span>
			</div>
		</div>
		<hr>
		<hr>


		<div class="address">
			<div>배달주소</div>
			<ul>
				<li>${orderDetail.deleveryAddress1 }</li>
				<li>${orderDetail.deleveryAddress2 }</li>
				<li>${orderDetail.deleveryAddress3 }</li>
			</ul>
			<hr>

		</div>

		<div>
			<div>전화번호</div>
			<div>${orderDetail.phone }</div>
			<hr>

		</div>

		<div>
			<div>요청사항</div>
			<div>${orderDetail.request }</div>
			<hr>

		</div>
	</div>
</main>



<!-- 하단 메뉴 -->
	<%-- <%@ include file="/WEB-INF/view/include/nav.jsp"%> --%>
<!-- 하단 메뉴 -->

<!-- 푸터 -->
	<%@ include file="/WEB-INF/view/include/footer.jsp"%>
<!-- 푸터 -->


</body>
</html>

 

orderDetail.css

main {
	width: 800px;
	margin : 0 auto 50px ;
} 

.detail_box {
	width: 95%;
	margin-left: auto;
}

section.title {
    width: 100%;
}

section.title h1 {
    text-align: center;
    margin : 30px 0 50px 0 ;
}

main .order_cont {
	margin-bottom: 30px;
}

main div {
    font-size: 1.5rem;
}

main .order_cont .store_name {
	font-size: 2rem;
	font-weight: bold;
	
}

main .order_cont .order_info {
	margin-top: 10px;
	font-size: 1.5rem;
	
}

main .order_menu  {
    margin-bottom: 30px;
}

main .order_menu li {
    position: relative;
}

main .order_menu li div,
main .price div,
main .total div {
    display: flex;
    justify-content: space-between;

}

main .order_menu li .menu_price,
main .price div span:last-child,
main .total div span:last-child {
    position: relative;
    right: 0;
}

main .order_menu li ul li {
    font-size: 1.5rem;
    list-style: disc;
    margin-left: 20px;
    color: #a5a5a5;
}

main .order_menu li ul li.menu_price_sum {
	list-style: none;
	margin: 0;
	color: black;
	font-weight: bold;
	
}

main .price {
    margin-bottom: 30px;
}


main .price div {
    font-size: 1.8rem;
    font-weight: bold;
}

main .total{
    margin-bottom: 30px;
}

main .total div {
	font-size: 2rem;
	font-weight: bold;
}



main .address li {
    color: #a5a5a5;
}




@media (max-width:1024px) {
	main {
		width: 95%;
	}
	.detail_box {
		margin: 0 auto;
		
	}
}
@media  (max-width:767px) {
	
}