저번시간에는 회원이 지금까지 주문한 모든 내역에 대한 간략한 정보를
보여주는 주문목록 페이지를 구현했습니다. 이번에는 주문목록에서 특정 주문에 대한
모든 내용을 나타내는 주문 상세페이지를 구현해보도록 하겠습니다
코드를 작성하기 전에 어떤식으로 설계할지 생각해보면 우리는 주문목록 페이지를 구현할때
Dto를 하나 생성하여 모든 주문에 대한 정보를 List로 받아와 화면에 뿌려줬습니다
화면에는 간략한 정보만 나타냈지만 실제로는 주문에 대한 모든 정보를 model에 심어주었기에
주문목록에서 특정 주문에 대한 상세보기 버튼을 클릭할때 상세페이지로 특정 주문번호에
대한 정보만 넘겨주는 방법으로 구현이 가능합니다. 하지만 이경우에는 반드시 주문목록을
통하여 상세페이지로 이동해야하는 문제점이 있습니다
따라서 여기서는 주문번호를 이용하여 특정 주문에 대한 정보만 위에서 사용한 Dto에
받아와서 화면에 뿌려주겠습니다. 주문목록과 차이점은 주문목록은 복수개이므로 List
상세페이지는 단수개이므로 List를 사용할 필요가 없다는점입니다
일단 화면 구현을 위한 jsp, css를 추가해주겠습니다
orderDetail.jsp 전체코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/layout/link.jsp"%>
<link rel="stylesheet" href="/css/order/orderDetail.css">
<!-- <link rel="stylesheet" href="/css/layout/nav.css"> -->
<%@ include file="/WEB-INF/views/layout/header.jsp"%>
<section class="title">
<h1>주문 상세</h1>
</section>
<main>
<div class="detail_box">
<div class="order_cont">
<div>${orderDetail.deliveryStatus }</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 } ${cart[i].amount }개</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.deliveryTip }" 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.deliveryTip - orderDetail.usedPoint }" pattern="###,###" />원</span>
</div>
<div>
<span>결제방법 </span><span>${orderDetail.payMethod }</span>
</div>
</div>
<hr>
<hr>
<div class="address">
<div>배달주소</div>
<ul>
<li>${orderDetail.deliveryAddress1 }</li>
<li>${orderDetail.deliveryAddress2 }</li>
<li>${orderDetail.deliveryAddress3 }</li>
</ul>
<hr>
</div>
<div>
<div>전화번호</div>
<div>${orderDetail.phone }</div>
<hr>
</div>
<div>
<div>요청사항</div>
<div>${orderDetail.request }</div>
<hr>
</div>
</div>
</main>
<!-- 하단 메뉴 -->
<%-- <%@ layout file="/WEB-INF/views/layout/nav.jsp"%> --%>
<!-- 하단 메뉴 -->
<!-- 푸터 -->
<%@ include file="/WEB-INF/views/layout/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) {
}이제 특정 주문 번호로 상세페이지 주소에 접근할 경우 위의 jsp를 뿌려주기 위해
기존 OrderController에 다음의 코드를 추가해주겠습니다
OrderController.java 추가코드
@GetMapping("/orderDetail/{orderNum}")
public String orderDetail(@PathVariable String orderNum, Model model, @AuthenticationPrincipal CustomUserDetails principal) {
OrderListDto orderListDto = orderService.orderListDetail(orderNum);
if (principal != null && (principal.getId() != orderListDto.getUserId())) {
System.out.println("다른 사용자");
return "redirect:/";
} else if (principal == null) {
System.out.println("비로그인");
return "redirect:/";
}
List<CartDto> CartDtolist = FoodInfoFromJson.foodInfoFromJson(orderListDto.getFoodInfo());
model.addAttribute("orderDetail", orderListDto);
model.addAttribute("cart", CartDtolist);
return "order/orderDetail";
}주문 상세페이지에는 본인이 요청한 주문에만 접근할수 있어야합니다. 다른 사람의 주문내역에
접근하면 안되므로 현재 로그인된 사용자와 테이블에서 가져온 사용자가 일치하는지를
확인합니다. 주문 목록에서와 마찬가지로 주문메뉴에 대한 정보를 JSON -> Object로
변환하여 model에 심어 화면에 뿌려줍니다
OrderService.java 추가코드
// 주문목록 상세보기
public OrderListDto orderListDetail(String orderNum) {
return orderMapper.orderListDetail(orderNum);
}
OrderMapper.java 추가코드
// 주문목록 상세보기 페이지
public OrderListDto orderListDetail(String orderNum);OrderMapper.xml 추가코드
<select id="orderListDetail" resultType="com.han.delivery.dto.OrderListDto">
SELECT o.order_num,
o.user_id,
o.order_date,
o.pay_method,
o.delivery_status,
o.phone,
o.delivery_address1,
o.delivery_address2,
o.delivery_address3,
o.store_id,
o.total_price,
o.used_point,
o.request,
d.food_info,
s.store_name,
s.delivery_tip
FROM dl_order_user o
LEFT JOIN (SELECT ORDER_NUM,
LISTAGG(FOOD_INFO, '/') food_info
FROM dl_ORDER_DETAIL_USER
GROUP BY ORDER_NUM) d
ON o.order_num = d.order_num
LEFT JOIN dl_store s
ON o.store_id = s.id
WHERE o.order_num = #{orderNum}
ORDER BY o.order_date desc
</select>주문목록을 구현할때와 코드가 거의 동일하니 설명은 생략하도록 하겠습니다
이메일 : ehfvndcjstk@naver.com