💷제품 상세, 주문 , 주문 내역, 주문 취소 페이지 만들기

gdhi·2023년 12월 18일

⭐Spring Boot(Thymeleaf, JPA) 웹 쇼핑몰 만들기⭐

목록 보기

14/22

💷제품 상세 페이지

📌ItemController 수정

...

@GetMapping(value = "/item/{itemId}")
    public String itemDtl(Model model, @PathVariable("itemId") Long itemId){

        // 상품 수정 페이지에서 사용했던 ItemDtl 메소드를 그대로 사용하여 상품 조회
        // 메소드 오버로딩은 파라미터의 순서가 달라도 적용 됨
        ItemFormDto itemFormDto = itemService.getItemDtl(itemId);
        model.addAttribute("item", itemFormDto);
        return "item/itemDtl";

    }

}

📌itemDtl.html 생성

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

<head>
  	<!-- 스프링 시큐리티로 인해 자동으로 보내지는 html meta 태그 -->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title>상품 상세 정보</title>
</head>

<th:block layout:fragment="script">
    <script th:inline="javascript">
        //totalPrice 를 계산해서 출력하는 calculateTotalPrice() 메소드
        //처음 화면 출력할 때 수행되고, 그 후에 수량 변동 시 수행 됨
        $(document).ready(function(){

            calculateTotalPrice();

            $("#count").change( function(){
                calculateTotalPrice();
            });
        });

        function calculateTotalPrice(){
            var count = $("#count").val();
            var price = $("#price").val();
            var totalPrice = price * count;
            $("#totalPrice").html(totalPrice + '원');
        }

    </script>
</th:block>

<!-- 사용자 CSS 추가 -->
<th:block layout:fragment="css">
    <style>
        .mgb-15{
            margin-bottom:15px;
        }
        .mgt-30{
            margin-top:30px;
        }
        .mgt-50{
            margin-top:50px;
        }
        .repImgDiv{
            margin-right:15px;
            height:auto;
            width:50%;
        }
        .repImg{
            width:100%;
            height:400px;
        }
        .wd50{
            height:auto;
            width:50%;
        }
    </style>
</th:block>

<div layout:fragment="content" style="margin-left:25%; margin-right:25%">

    <input type="hidden" id="itemId" th:value="${item.id}">

    <div class="d-flex">
        <div class="repImgDiv">
            <img th:src="${item.itemImgDtoList[0].imgUrl}" class="img-fluid img-thumbnail repImg" th:alt="${item.itemNm}">
        </div>
        <div class="wd50">
            <span th:if="${item.itemSellStatus == T(com.shop.constant.ItemSellStatus).SELL}"
                  class="badge bg-primary mgb-15">판매중</span>
            <span th:unless="${item.itemSellStatus == T(com.shop.constant.ItemSellStatus).SELL}"
                  class="badge bg-danger mgb-15">품절</span>

            <div class="h4" th:text="${item.itemNm}"></div>

            <hr class="my-4">

            <div class="text-right">
                <div class="h4 text-danger text-left">
                    <input type="hidden" th:value="${item.price}" id="price" name="price">
                    <span th:text="${item.price}"></span>원
                </div>
                <div class="input-group w-50">
                    <div class="input-group-prepend">
                        <span class="input-group-text">수량</span>
                    </div>
                    <input type="number" name="count" id="count" class="form-control" value="1" min="1">
                </div>
            </div>

            <hr class="my-4">

            <div class="text-right mgt-50">
                <h5>결제 금액</h5>
                <h3 name="totalPrice" id="totalPrice" class="font-weight-bold"></h3>
            </div>
            <div th:if="${item.itemSellStatus == T(com.shop.constant.ItemSellStatus).SELL}" class="text-right">
                <button type="button" class="btn btn-light border border-primary btn-lg"
                        onclick="addCart()">장바구니 담기</button>
                <button type="button" class="btn btn-primary btn-lg" onclick="order()">주문하기</button>
            </div>
            <div th:unless="${item.itemSellStatus == T(com.shop.constant.ItemSellStatus).SELL}" class="text-right">
                <button type="button" class="btn btn-danger btn-lg">품절</button>
            </div>
        </div>
    </div>

    <div class="p-3 bg-warning bg-opacity-10 border border-warning rounded">
        <div class="container">
            <h4 class="display-5">상품 상세 설명</h4>
            <hr class="my-4">
            <p class="lead" th:text="${item.itemDetail}"></p>
        </div>
    </div>
    <div th:each="itemImg : ${item.itemImgDtoList}" class="text-center">
        <img th:if="${not #strings.isEmpty(itemImg.imgUrl)}" th:src="${itemImg.imgUrl}"
             class="rounded mgb-15" width="800">
    </div>
</div>
</html>

📌결과

💷상품 주문 페이지

👉 예외 처리 할 패키지 생성

📌OutOfStockException 클래스 생성

...

package com.shop.exception;

// 상품 주문 수량 보다 현재 재고의 수가 적을 때 발생 시킬 Exception 정의
public class OutOfStockException extends RuntimeException{ // 에러 message 를 지정할 수 있는 RuntimeException 클래스

    public OutOfStockException(String message) {
        super(message);
    }

}

📌Item 엔티티 클래스 수정

...

public void removeStock(int stockNumber){

        // 기존 재고 - 주문 수량 재고
        int restStock = this.stockNumber - stockNumber; // 10, 5 / 10, 20

        // 주문 수량 재고가 더 많으면 재구 부족 에러 발생
        if (restStock < 0){
            throw new OutOfStockException("상품의 재고가 부족합니다. (현재 재고 수량: " + this.stockNumber + ")");
        }

        this.stockNumber = restStock; // 5
    }
}

📌OrderItem 엔티티 클래스 수정

...

// 주문 상품과 주문 수량 정보를 가지고 있는 OrderItem Entity 에 객체 생성 메소드 추가
// Item(상품) 👉 OrderItem(주문 상품) 두 개는 다른 것임
public static OrderItem createOrderItem(Item item, int count){
        OrderItem orderItem = new OrderItem();
        orderItem.setItem(item);
        orderItem.setCount(count);
        orderItem.setOrderPrice(item.getPrice());
        item.removeStock(count);

        return orderItem;
    }

    public int getTotalPrice(){
        return orderPrice * count;
    }

}

📌Order 엔티티 클래스 추가

// OrderItem 객체를 연결하고 OrderItem 객체에 자신을 연결하는 메소드
    // 내 아이템 리스트에 추가하고 주문에 리스트를 추가한다.
    public void addOrderItem(OrderItem orderItem){
        orderItems.add(orderItem); // 주문 객체에 주문 상품 객체 연결
        orderItem.setOrder(this);  // 주문 상품 객체에 주문 객체 연결 (연관 관계 주인)
    }

    // OrderItem 객체를 이용하여 주문 객체를 만드는 메소드 추가
    public static Order createOrder(Member member, List<OrderItem> orderItemList){

        // 주문서 생성
        Order order = new Order();

        // 현재 로그인 된 멤버 주문서에 추가
        order.setMember(member);

        // 주문 아이템 리스트를 반복문으로 주문서에 추가
        for (OrderItem orderItem : orderItemList){
            order.addOrderItem(orderItem);
        }

        order.setOrderStatus(OrderStatus.ORDER); // 상태는 ORDER로 설정 👉 주문 완료
        order.setOrderDate(LocalDateTime.now());

        return order; // 주문서 반환

    }

    // 각 주문 상품의 TotalPrice 를 구한뒤 모두 더하는 메소드 추가
    public int getTotalPrice(){

        int totalPrice = 0;

        // 주문서에 있는 주문 아이템 리스트를 반복
        // 주문 아이템마다 총 각격을 totalPrice에 추가
        for (OrderItem orderItem : orderItems){
            totalPrice += orderItem.getTotalPrice();
        }

        return totalPrice; // 장바구니 총액

    }

}

📌OrderDto 클래스 생성

package com.shop.dto;

import jakarta.validation.constraints.Max;
import jakarta.validation.constraints.Min;
import jakarta.validation.constraints.NotNull;
import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
// 제품 상세 페이지 화면에서 보내는 주문 정보(상품, 수량)를 위한 Dto 객체 생성
public class OrderDto {
    
    @NotNull(message = "상품 아이디는 필수 입력 값입니다.")
    private Long itemId;
    
    @Min(value = 1, message = "최소 주문 수량은 1개 입니다.")
    @Max(value = 999, message = "최대 주문 수량은 999개 입니다.")
    private int count;
    
}

📌OrderService 클래스 생성

package com.shop.service;

import com.shop.dto.OrderDto;
import com.shop.dto.OrderItemDto;
import com.shop.entity.Item;
import com.shop.entity.Member;
import com.shop.entity.Order;
import com.shop.entity.OrderItem;
import com.shop.repository.ItemRepository;
import com.shop.repository.MemberRepository;
import com.shop.repository.OrderRepository;
import jakarta.persistence.EntityNotFoundException;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.ArrayList;
import java.util.List;

@Service
@Transactional
@RequiredArgsConstructor
// 상품과 주문한 고객을 조회
// 주문 상품 객체 생성 👉 주문 객체 생성
public class OrderService {

    private final ItemRepository itemRepository; // 상품을 불러 와서 재고를 변경
    private final MemberRepository memberRepository; // 멤버를 불러 와서 연결
    private final OrderRepository orderRepository; // 주문 객체를 저장

    public Long order(OrderDto orderDto, String email){

        Item item = itemRepository.findById(orderDto.getItemId())
                .orElseThrow(EntityNotFoundException::new);

        Member member = memberRepository.findByEmail(email);

        List<OrderItem> orderItemList = new ArrayList<>();

        // OrderItem.createOrderItem 👉 static 메소드
        OrderItem orderItem = OrderItem.createOrderItem(item, orderDto.getCount());
        orderItemList.add(orderItem);

        // Order.createOrder 👉 static 메소드
        Order order = Order.createOrder(member, orderItemList);
        orderRepository.save(order);

        return order.getId();

    }

}

📌⚡OrderController 클래스 생성⚡

AJAX를 사용한다.

package com.shop.controller;

import com.shop.dto.OrderDto;
import com.shop.service.OrderService;
import jakarta.validation.Valid;
import lombok.RequiredArgsConstructor;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;

import java.security.Principal;
import java.util.List;

@Controller
@RequiredArgsConstructor
public class OrderController {

    private final OrderService orderService;

    @PostMapping(value = "/order")
    // 비동기 방식으로 Json 데이터를 주고 받음 👉 AJAX
    // @ResponseBody : 자바 객체를 http 응답 body 부분으로 보냄 (ResponseEntity 자료형)
    // @RequestBody : http 요청의 body 부분 데이터를 자바 객체로 변환해서 받음
    public @ResponseBody ResponseEntity order(@RequestBody @Valid OrderDto orderDto,
                                              BindingResult bindingResult,
                                              Principal principal){

        // 입력값에 문제가 있을 시 필드 에러 정보들을 ResponseEntity 객체에 담아서 반환
        if (bindingResult.hasErrors()){

            // String은 "ABC" + "123" 으로 붙여 "ABC123"으로 만들지만
            // StringBuilder 는 a = append.("ABC");, b = append.("123"); 이렇게 붙여 만든다
            StringBuilder sb = new StringBuilder();

            List<FieldError> fieldErrors = bindingResult.getFieldErrors();

            for (FieldError fieldError : fieldErrors){
                sb.append(fieldError.getDefaultMessage());
            }

            return new ResponseEntity<String>(sb.toString(), HttpStatus.BAD_REQUEST);

        }

        // 현재 로그인한 유저의 정보(principal.getName();)를 담고 있는 Principal 객체에서 유저의 email 추출
        String email = principal.getName();

        Long orderId;

        try {

            orderId = orderService.order(orderDto, email);

        }catch (Exception e){

            // OutOfStockNumber 이 받는다
            return new ResponseEntity<String>(e.getMessage(), HttpStatus.BAD_REQUEST);

        }

        // 정상적으로 동작 시 생성된 주문 객체의 Id 와 상태코드 200을 보냄
        // 👉 AJAX로 보낸다
        return new ResponseEntity<Long>(orderId, HttpStatus.OK);

    }

}

🤦‍♀️OrderService 상품 주문 테스트 하기

package com.shop.service;

import com.shop.constant.ItemSellStatus;
import com.shop.dto.OrderDto;
import com.shop.entity.Item;
import com.shop.entity.Member;
import com.shop.entity.Order;
import com.shop.entity.OrderItem;
import com.shop.repository.ItemRepository;
import com.shop.repository.MemberRepository;
import com.shop.repository.OrderRepository;
import jakarta.persistence.EntityNotFoundException;
import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.TestPropertySource;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

import static org.junit.jupiter.api.Assertions.*;

@SpringBootTest
@Transactional
@TestPropertySource(locations = "classpath:application-test.properties")
class OrderServiceTest {

    @Autowired
    private OrderService orderService;

    @Autowired
    private OrderRepository orderRepository;

    @Autowired
    ItemRepository itemRepository;

    @Autowired
    MemberRepository memberRepository;

    public Item saveItem(){

        Item item = new Item(); // JPA DB에 왔다갔다하는 객체 객체
        item.setItemNm("테스트 상품");
        item.setPrice(10000);
        item.setItemDetail("테스트 상품 상세 설명");
        item.setItemSellStatus(ItemSellStatus.SELL);
        item.setStockNumber(100);

        return itemRepository.save(item);

    }

    public Member saveMember(){

        Member member = new Member();

        member.setEmail("test@test.com");

        return memberRepository.save(member);

    }

    @Test
    @DisplayName("주문 테스트")
    public void order(){

        Item item = saveItem();

        Member member = saveMember();

        // 상품 상세 페이지 화면에서 넘어 오는 값 설정
        OrderDto orderDto = new OrderDto();
        orderDto.setCount(10);
        orderDto.setItemId(item.getId());

        // 주문 객체 DB에 저장
        Long orderId = orderService.order(orderDto, member.getEmail());

        // 지정된 주문 객체 조회
        Order order = orderRepository.findById(orderId)
                .orElseThrow(EntityNotFoundException::new);

        // 1. DB에 저장된 주문 객체에서 주문 상품 추출 (1개)
        List<OrderItem> orderItems = order.getOrderItems();

        // 2. 위에서 만든 주문 상품 총 가격 (1개)
        int totalPrice = orderDto.getCount() * item.getPrice();

        // 1의 가격과 2가 같은지 테스트
        assertEquals(totalPrice, order.getTotalPrice());
        
        System.out.println(totalPrice);

    }


}

📍결과

❗

create 로 변경해야함 cart 테이블을 아직 만들지 않았음

📌itemDtl.html 수정


...

        // 주문하기 버튼을 누르면 실행
        function order(){

            // Ajax 통신할 때, csrf 토큰 값을 조회해서 직접 보내야함
            var token = $("meta[name = '_csrf']").attr("content");
            var header = $("meta[name = '_csrf_header']").attr("content");

            var url = "/order";
            var paramData = {
                itemId : $("#itemId").val(),
                count : $("#count").val()
            };

            // JSON 👉 String
            var param = JSON.stringify(paramData);

            $.ajax({

                url : url,
                type : "POST",
                contentType : "application/json",
                data : param,
                beforeSend : function(xhr){
                    // 데이터를 전송하기 전에 헤더의 csrf 값을 설정
                    xhr.setRequestHeader(header, token);
                },
                dataType : "json",
                cache : false,
                success : function(result, status){
                    alert("주문이 완료 되었습니다.");
                    location.href = '/';
                },
                error : function(jqXHR, status, error){
                    if(jqXHR.status == '401'){
                        alert('로그인 후 이용해주세요');
                        location.href = '/members/login';
                    }
                    else{
                        alert(jqXHR.responseText);
                    }
                }

            });

        }

    </script>

📌결과

👉 로그인 안하고 주문

👉 바로 넘어온다

👉 재고가 없을 때

👉 주문 성공

❓어떤 구조로 실행?

💷구매 내역 페이지

📌OrderItemDto 클래스 생성

package com.shop.dto;

// 주문 상품 정보

import com.shop.entity.OrderItem;
import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class OrderItemDto {

    private String itemNm;
    private int count;
    private int orderPrice;
    private String imgUrl;

    public OrderItemDto(OrderItem orderItem, String imgUrl) {
        this.itemNm = orderItem.getItem().getItemNm();
        this.count = orderItem.getCount();
        this.orderPrice = orderItem.getOrderPrice();
        this.imgUrl = imgUrl;
    }
}

📌OrderHistDto 클래스 생성

package com.shop.dto;

import com.shop.constant.OrderStatus;
import com.shop.entity.Order;
import lombok.Getter;
import lombok.Setter;

import java.time.format.DateTimeFormatter;
import java.util.ArrayList;
import java.util.List;

@Getter
@Setter
public class OrderHistDto {
    
    private Long orderId;
    private String orderDate;
    private OrderStatus orderStatus;
    private List<OrderItemDto> orderItemDtoList = new ArrayList<>();
    
    public OrderHistDto(Order order){
        
        this.orderId = order.getId();
        this.orderDate = order.getOrderDate()
                .format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm"));
        this.orderStatus = order.getOrderStatus();
        
    }
    
    public void addOrderItemDto(OrderItemDto orderItemDto){
        orderItemDtoList.add(orderItemDto);
    }
    
}

📌OrderRepository 인터페이스 수정

package com.shop.repository;

import com.shop.entity.Order;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;

import java.awt.print.Pageable;
import java.util.List;

public interface OrderRepository extends JpaRepository<Order, Long> {

    // 구매 내역 조회
    @Query("select o from Order o where o.member.email = :email order by o.orderDate desc")
    List<Order> findOrders(@Param("email") String email, Pageable pageable);

    @Query("select count(o) from Order o where o.member.email = :email")
    Long countOrder(@Param("email") String email);

}

📌ItemImgRepository 인터페이스 수정

package com.shop.repository;

import com.shop.entity.ItemImg;
import org.springframework.data.jpa.repository.JpaRepository;

import java.util.List;

// 상품 이미지 정보 쿼리문 날리는 Repository
public interface ItemImgRepository extends JpaRepository<ItemImg,Long> {
    // 이미지가 잘 저장되었는지 확인하기 위해 쿼리 조회문 추가
    List<ItemImg> findByItemIdOrderByIdAsc(Long itemId);

    // 구매 내역 페이지에서 주문 상품의 대표 이미지를 위한 조회
    ItemImg findByItemIdAndRepImgYn(Long itemId, String repImgYn);
}

📌OrderService 클래스 수정

...
    private final ItemImgRepository itemImgRepository;
...

// 주문 목록 조회 메소드
    @Transactional(readOnly = true)
    public Page<OrderHistDto> getOrderList(String email, Pageable pageable){

        // 유저 email과 페이징 조건을 이용하여 주문 목록을 조회
        List<Order> orders = orderRepository.findOrders(email, pageable);
        // 유저의 주문 총 개수
        Long totalCount = orderRepository.countOrder(email);

        List<OrderHistDto> orderHistDtos = new ArrayList<>();

        // 주문 리스트를 순회하면서 구매 이력 페이지에 전달할 DTO를 생성
        for (Order order : orders){

            OrderHistDto orderHistDto = new OrderHistDto(order);
            List<OrderItem> orderItems = order.getOrderItems();

            for (OrderItem orderItem : orderItems){

                // 주문한 상품의 대표 이미지를 조회
                ItemImg itemImg = itemImgRepository.findByItemIdAndRepImgYn(orderItem.
                        getItem().getId(), "Y");
                OrderItemDto orderItemDto = new OrderItemDto(orderItem, itemImg.getImgUrl());
                orderHistDto.addOrderItemDto(orderItemDto);

            }

            orderHistDtos.add(orderHistDto);

        }
        
        // 페이지 구현 객체를 생성하여 반환
        // 👉 order, orderItem Entity 객체를 각각 OrderHistDto, OrderItemDto 객체로 변환
        return new PageImpl<OrderHistDto>(orderHistDtos, pageable, totalCount);

    }

}

📌OrderController 클래스 수정

...

    // 구매 내역 조회
    @GetMapping(value = {"/orders", "/orders/{page}"})
    public String orderHist(@PathVariable("page")Optional<Integer> page, Principal principal, Model model){

        Pageable pageable = PageRequest.of(page.isPresent() ? page.get() : 0, 5);

        // 현재 로그인한 회원은 이메일과 페이징 객체를 파라미터로 전달하여 화면에 전달한 주문 목록 데이터를 반환
        Page<OrderHistDto> orderHistDtoList = orderService.getOrderList(principal.getName(), pageable);

        model.addAttribute("orders", orderHistDtoList);
        model.addAttribute("page", pageable.getPageNumber());
        model.addAttribute("maxPage", 5);

        return "/order/orderHist";

    }

}

📌orderHist.html 생성

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

<head>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
</head>
  
<th:block layout:fragment="css">
    <style>
        .content-mg{
            margin-left:30%;
            margin-right:30%;
            margin-top:2%;
            margin-bottom:100px;
        }
        .repImgDiv{
            margin-right:15px;
            margin-left:15px;
            height:auto;
        }
        .repImg{
            height:100px;
            width:100px;
        }
        .card{
            width:750px;
            height:100%;
            padding:30px;
            margin-bottom:20px;
        }
        .fs18{
            font-size:18px
        }
        .fs24{
            font-size:24px
        }
    </style>
</th:block>

<div layout:fragment="content" class="content-mg p-3 bg-info bg-opacity-10 border border-info border rounded">

    <h2 class="mb-4">주문 내역</h2>

    <div th:each="order : ${orders.getContent()}">

        <div class="d-flex mb-3 align-self-center">
            <h4 th:text="${order.orderDate} + ' 주문'"></h4>
            <div class="ms-3">
                <th:block th:if="${order.orderStatus == T(com.shop.constant.OrderStatus).ORDER}">
                    <button type="button" class="btn btn-outline-success"
                            th:value="${order.orderId}" onclick="cancelOrder(this.value)">주문취소</button>
                </th:block>
                <th:block th:unless="${order.orderStatus == T(com.shop.constant.OrderStatus).ORDER}">
                    <h6 style="margin-top : 6px">(취소 완료)</h6>
                </th:block>
            </div>
        </div>
        <div class="card d-flex">
            <div th:each="orderItem : ${order.orderItemDtoList}" class="d-flex mb-3">
                <div class="repImgDiv">
                    <img th:src="${orderItem.imgUrl}" class = "rounded repImg" th:alt="${orderItem.itemNm}">
                </div>
                <div class="align-self-center w-75">
                    <span th:text="${orderItem.itemNm}" class="fs24 font-weight-bold"></span>
                    <div class="fs18 font-weight-light">
                        <span th:text="${orderItem.orderPrice} +'원'"></span>
                        <span th:text="${orderItem.count} +'개'"></span>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div th:with="start=${(orders.number/maxPage)*maxPage + 1}, end=(${(orders.totalPages == 0) ? 1 : (start + (maxPage - 1) < orders.totalPages ? start + (maxPage - 1) : orders.totalPages)})" >
        <ul class="pagination justify-content-center">

            <li class="page-item" th:classappend="${orders.number eq 0}?'disabled':''">
                <a th:href="@{'/orders/' + ${orders.number-1}}" aria-label='Previous' class="page-link">
                    <span aria-hidden='true'>Previous</span>
                </a>
            </li>

            <li class="page-item" th:each="page: ${#numbers.sequence(start, end)}" th:classappend="${orders.number eq page-1}?'active':''">
                <a th:href="@{'/orders/' + ${page-1}}" th:inline="text" class="page-link">[[${page}]]</a>
            </li>

            <li class="page-item" th:classappend="${orders.number+1 ge orders.totalPages}?'disabled':''">
                <a th:href="@{'/orders/' + ${orders.number+1}}" aria-label='Next' class="page-link">
                    <span aria-hidden='true'>Next</span>
                </a>
            </li>

        </ul>
    </div>

</div>

</html>

📌결과

👉 1페이지

👉 2페이지

❓어떤 구조로 실행?

🔥Todo

포트폴리오에 네이버 글쓰기 처럼 이미지를 첨부하면 글 안에 들어가서 작성하는 것을 만들어 보면 좋겠다.

💷주문 취소 페이지

📌Item 엔티티 수정

...

public void addStock(int stockNumber){
        // 주문 취소 시 상품의 재고를 상품 주문 수량 만큼 다시 더함
        this.stockNumber += stockNumber;
    }
}

📌OrderItem 엔티티 수정

...

public void cancel(){
        // 주문 상품 수량을 파라미터로 넘김
        this.getItem().addStock(count);
    }

}

📌Order 엔티티 수정

...

    public void cacncelOrder(){

        // 주문 상태를 CANCEL 로 변경
        this.orderStatus = OrderStatus.CANCEL;

        // 모든 OrderItem 객체가 cancel() 메소드 실행
        for (OrderItem orderItem : orderItems){

            orderItem.cancel();

        }

    }

}

📌OrderService 클래스 수정

...

@Transactional(readOnly = true)
    // 상품을 주문한 유저와 주문 취소를 요청한 유저가 동일한지 검증
    public boolean validateOrder(Long orderId, String email){

        Member curMember = memberRepository.findByEmail(email);
        Order order = orderRepository.findById(orderId).orElseThrow(EntityNotFoundException::new);
        Member savedMember = order.getMember();

        // 현재 로그인된 멤버와 세이브된 멤버와 비교
        if(!StringUtils.equals(curMember.getEmail(), savedMember.getEmail())){

            return false;

        }

        return true;

    }

    // 주문 취소 메소드 (변경 감지)
    public void cancelOrder(Long orderId){

        Order order = orderRepository.findById(orderId).orElseThrow(EntityNotFoundException::new);
        order.cacncelOrder();

    }

}

📌OrderController 클래스 수정

...

    @PostMapping("/order/{orderId}/cancel")
    // AJAX 형태!!!!
    public @ResponseBody ResponseEntity cancelOrder(@PathVariable("orderId")
                                                        Long orderId, Principal principal){

        // 상품을 주문한 유저가 맞는 지 검증 후 orderService.cancelOrder() 메소드 실행
        if (!orderService.validateOrder(orderId, principal.getName())){

            return new ResponseEntity<String>("주문 취소 권한이 없습니다.", HttpStatus.FORBIDDEN);

        }

        orderService.cancelOrder(orderId);
        return new ResponseEntity<Long>(orderId, HttpStatus.OK);

    }

}

📌orderHist.html AJAX 추가

<th:block layout:fragment="script">
    <script th:inline="javascript">
        function cancelOrder(orderId) {
            var token = $("meta[name='_csrf']").attr("content");
            var header = $("meta[name='_csrf_header']").attr("content");

            var url = "/order/" + orderId + "/cancel";
            var paramData = {
                orderId : orderId,
            };

            var param = JSON.stringify(paramData);

            $.ajax({
                url      : url,
                type     : "POST",
                contentType : "application/json",
                data     : param,
                beforeSend : function(xhr){
                    /* 데이터를 전송하기 전에 헤더에 csrf값을 설정 */
                    xhr.setRequestHeader(header, token);
                },
                dataType : "json",
                cache   : false,
                success  : function(result, status){
                    alert("주문이 취소 되었습니다.");
                    location.href='/orders/' + [[${page}]];
                },
                error : function(jqXHR, status, error){
                    if(jqXHR.status == '401'){
                        alert('로그인 후 이용해주세요');
                        location.href='/members/login';
                    } else{
                        alert(jqXHR.responseText);
                    }
                }
            });
        }
    </script>
</th:block>