💷상품 관리 페이지

조회

• 상품 등록일 : All / 1w / 1m / 6m 까지 조회 가능
• 상품 판매 상태 : SELL/SOLD OUT
  상품명 또는 상품 등록자 아이디

📌Querydsl

👉 Querydsl 설정 완료

📌ItemSearchDto 클래스 생성

package com.shop.dto;

import com.shop.constant.ItemSellStatus;
import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class ItemSearchDto {

    private String searchDateType; // 조회 날짜 All / 1w / 1m / 6m

    private ItemSellStatus searchSellStatus; // 상품 판매 상태 (constant) SELL/SOLD OUT
    
    private String searchBy; // 조회 유형 createBy...

    private String searchQuery = ""; // 검색 단어

}

📌1. ItemRepositoryCustom 인터페이스 생성

Querydsl 과 JPA 를 함께 사용하기 위해 맏들어지는 사용자 정의 Repository는 다음 단계를 거쳐 구현
1. 사용자 정의 인터페이스 작성
2. 사용자 정의 인터페이스 구현
3. JPA Repository에서 사용자 정의 인터페이스 상속

package com.shop.repository;

import com.shop.dto.ItemSearchDto;
import com.shop.entity.Item;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;


public interface ItemRepositoryCustom {
    Page<Item> getAdminItemPage(ItemSearchDto itemSearchDto, Pageable pageable);
}

📍2. ItemRepositoryCustomImpl 클래스 생성

package com.shop.repository;

import com.querydsl.core.QueryResults;
import com.querydsl.core.types.dsl.BooleanExpression;
import com.querydsl.jpa.impl.JPAQueryFactory;
import com.shop.constant.ItemSellStatus;
import com.shop.dto.ItemSearchDto;
import com.shop.entity.Item;
import com.shop.entity.QItem;
import jakarta.persistence.EntityManager;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageImpl;
import org.springframework.data.domain.Pageable;
import org.thymeleaf.util.StringUtils;

import java.time.LocalDateTime;
import java.util.List;

public class ItemRepositoryCustomImpl implements ItemRepositoryCustom {

    // 동적 쿼리를 사용하기 위해 JPAQueryFactory 변수 선언
    private JPAQueryFactory queryFactory;

    // 생성자
    public ItemRepositoryCustomImpl(EntityManager em){
        // JPAQueryFactory의 실질적인 객체 생성
        this.queryFactory = new JPAQueryFactory(em);
    }

    // BooleanExpression(메소드화 가능. BooleanBuilder 는 바로 써서 안씀) 을 통해 where 절에 적용될 조회 조건을 생성

    // 상품 판매 상태 조건
    private BooleanExpression searchSellStatusEq(ItemSellStatus searchSellStatus){
        // 상품 판매 조건이 전체일 경우, null 리턴 (where 절에서 조건이 무시됨)
        // 상품 판매 조건이 판매중 or 품절일 경우, where 조건 활성화
        return searchSellStatus == null ? null : QItem.item.itemSellStatus.eq(searchSellStatus);
    }

    // 상품 등록일 조건
    private BooleanExpression regDtsAfter(String searchDateType){ // all, 1d, 1w, 1m, 6m
        LocalDateTime dateTime = LocalDateTime.now(); // 현재 시간 추출

        // BooleanExpresiion 값이 null 이면 해당 조회 조건을 사용하지 않겠다는 의미 👉 all
        if (StringUtils.equals("all", searchDateType) || searchDateType == null){
            return null;
        }
        else if(StringUtils.equals("1d", searchDateType)){
            dateTime = dateTime.minusDays(1);
        }
        else if(StringUtils.equals("1w", searchDateType)){
            dateTime = dateTime.minusWeeks(1);
        }
        else if(StringUtils.equals("1m", searchDateType)){
            dateTime = dateTime.minusMonths(1);
        }
        else if(StringUtils.equals("6m", searchDateType)){
            dateTime = dateTime.minusMonths(6);
        }

        // dateTime을 시간에 맞게 설정 후 시간이 맞는 등록된 상품이 조회 되도록 조건 값 반환
        return QItem.item.regTime.after(dateTime);
    }

    // 상품명 또는 상품 등록자 아이디 조건
    private BooleanExpression searchByLike(String searchBy, String searchQuery){
        // searchBy 값에 따라 (where 조건으로) 상품을 조회 하도록 조건값을 반환함

        if(StringUtils.equals("itemNm", searchBy)){ // 상품명
            return QItem.item.itemNm.like("%" + searchQuery + "%");
        } else if(StringUtils.equals("createdBy", searchBy)){ // 작성자
            return QItem.item.createdBy.like("%" + searchQuery + "%");
        }

        return null;
    }

    // queryFactory 로 쿼리 동적 생성
    @Override
    public Page<Item> getAdminItemPage(ItemSearchDto itemSearchDto, Pageable pageable) {

        QueryResults<Item> results = queryFactory
                .selectFrom(QItem.item)
                .where(regDtsAfter(itemSearchDto.getSearchDateType()),
                        searchSellStatusEq(itemSearchDto.getSearchSellStatus()),
                        searchByLike(itemSearchDto.getSearchBy(),
                                itemSearchDto.getSearchQuery())) // , 는 and 조건임
                .orderBy(QItem.item.id.desc())
                .offset(pageable.getOffset()) // 데이터를 가지고 올 시작 인덱스를 지정
                .limit(pageable.getPageSize()) // 한 번에 가지고 올 최대 개수 지정
                .fetchResults(); //  QueryResults 를 반환 (상품 데이터 리스트 조회 , 상품 데이터 전체 개수 조회함)

        List<Item> content = results.getResults();
        long total = results.getTotal();

        return new PageImpl<>(content, pageable, total); // 조회한 데이터를 Page 클래스의 구현체인 PageImpl 객체로 반환 (?)
    }

}

📍3. ItemRepository 클래스 상속 받기

public interface ItemRepository extends JpaRepository<Item, Long>, QuerydslPredicateExecutor<Item>, ItemRepositoryCustom {

📌ItemService 클래스 수정

...

    // 조회 기능이므로 읽기 전용 상태로 지정
    @Transactional(readOnly = true)
    public Page<Item> getAdminItemPage(ItemSearchDto itemSearchDto, Pageable pageable){
        return itemRepository.getAdminItemPage(itemSearchDto, pageable);
    }

}

📌ItemController 클래스 수정

...

// 요청 URL이 페이지 번호가 없는 경우와 있는 경우 2가지를 매핑
    // Mapping 파라미터로 객체를 지정하면(ItemSearchDto) 자동으로 new 객체 생성
    @GetMapping(value = {"/admin/items", "/admin/items/{page}"})
    public String itemManage(ItemSearchDto itemSearchDto,
                             // URL을 통해 페이지 번호가 넘어오는 경우 @PathVariable 로 변수 값 매핑
                             @PathVariable("page") Optional<Integer> page, // null이어도 문제 ❌
                             Model model){

        // PageRequest.of() 를 통해서 페이지의 유무를 확인한 후에 Pageable 객체 생성
        // 첫 번째 파라미터는 조회할 페이지 번호, 두 번째는 한 번에 가져올 데이터 수
        Pageable pageable = PageRequest.of(page.isPresent() ? page.get() : 0, 5);

        // itemSearchDto: 조회 조건 pageable: 페이징 정보
        Page<Item> items = itemService.getAdminItemPage(itemSearchDto, pageable);

        // item: 조회한 상품 데이터
        model.addAttribute("items", items);
        // 페이지 전환 시 기존 검색 조건을 유지한 채 이동할 수 있게 뷰에 전달
        model.addAttribute("itemSearchDto", itemSearchDto);
        // 최대 5개의 이동할 페이지 번호를 보여줌
        model.addAttribute("maxPage", 5);

        // 조회한 상품 데이터 전달받는 페이지
        return "item/itemMng";

    }

❗ ItemRepository 는 ItemRepositoryCustom 를 상속 받았는데 ItemRepositoryCustom 의 자식인 ItemRepositoryCustomImpl 의 메소드 getAdminItemPage 를 쓰고 있네?
형제 건 못 쓰는 게 아닌가??? 어떻게 쓴거지?? 어노테이션도 없고 뭐지???

👉 스프링이 해준다.

클래스명에 Impl을 붙인 이유...
이런식으로 숨기면 보안이 강화된다.

📌itemMng.html 생성

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

<!-- 사용자 스크립트 추가 -->
<th:block layout:fragment="script">
    <script th:inline="javascript">
        <!--제이쿼리 선택자 -->
        $(document).ready(function () {
            // "검색" 버튼이 눌리면
            $("serachBtn").on("click", function (e) {
                e.preverntDefault(); // form 태그의 전송을 막음 (페이지 번호가 그대로 넘어갈 수 있음)
                                     // (  <form th:action="@{'/admin/items/' ... 이거를 막음)
                page(0); // 페이지 번호를 0으로 설정한 뒤 page 함수 수행
                         // 검색 누르면 무조건 첫 번째 페이지로 가야하기 때문에 파라미터가 0
            });
        });
        function page(page) {
            var searchDateType = $("#searchDateType").val();
            var searchSellStatus = $("#searchSellStatus").val();
            var searchBy = $("#searchBy").val();
            var searchQuery = $("#searchQuery").val();
            location.href = "/admin/items/" + page + "?searchDateType=" + searchDateType
                + "&searchSellStatus=" + searchSellStatus + "&searchBy=" + searchBy
                + "&searchQuery=" + searchQuery;
        }
    </script>
</th:block>

<!-- 사용자  CSS 추가-->
<th:block layout:fragment="css">
    <style>
        select {
          margin-right: 10px
        }
    </style>
</th:block>

<!-- 상품 목록 테이블 -->
<div layout:fragment="content">
    <!-- ${items} 변수는 Controller 에서 전달 받은 Page 객체 -->
    <form th:action="@{'/admin/items/'+${items.number}}" role="form" method="get" th:object="${items}">
        <table class="table">
            <thead>
            <tr>
                <td>상품아이디</td>
                <td>상품명</td>
                <td>상태</td>
                <td>등록자</td>
                <td>등록일</td>
            </tr>
            </thead>
            <tbody>
            <!-- .getContent() 메소드를 이용하여 Page 객체의 content 부분을 추출 -->
            <tr th:each="item, status : ${items.getContent()}">
                <td th:text="${item.id}"></td>
                <td>
                    <a th:href="'/admin/item/'+${item.Id}" th:text="${item.itemNm}"></a>
                </td>
                <!--  Thymeleaf 의 T("fully qualified class name") 표현식을 사용한다면 스프링 내에 존재하는 클래스에 접근 가능 -->
                <td th:text="${item.itemSellStatus == T(com.shop.constant.ItemSellStatus).SELL} ? '판매중' : '품절'"></td>
                <td th:text="${item.createdBy}"></td>
                <td th:text="${item.regTime}"></td>
            </tr>
            </tbody>
        </table>

        <!-- 페이지 객체의 페이지 index 는 0부터 시작, 페이지 표시 번호는 1부터 시작 -->
        <!-- th:with 을 통해서 변수값을 정의 -->
        <!-- start (페이지 시작 번호) : ((현재 페이지번호 / 보여줄 페이지 수) * 보여줄 페이지수) + 1 -->
        <!-- end (페이지 끝 번호) : start + (보여줄 페이지 수 - 1) -->
        <!-- 페이지의 총 개수가 0개면 end = 1, start + (보여줄 페이지 수 - 1) 보다 작다면 end = 페이지 총 개수 -->
        <div th:with="start=${(items.number/maxPage)*maxPage +1},
        end=(${(items.totalPages == 0) ? 1 : (start + (maxPage-1) < items.totalPages ? start + (maxPage - 1) : items.totalPages)})">
            <ul class="pagination justify-content-center">
                <!-- 이전(Previous) 버튼 -->
                <!-- 첫 페이지면 class 식별자를 추가(classappend) 하여 disabled 적용 -->
                <!-- 첫 페이지에선 Previous 비활성화, 마지막 페이지에선 Next 비활성화 -->
                <li class="page-item" th:classappend="${items.first}?'disabled'">
                    <a th:onclick="'javascript:page('+${items.number - 1} + ')'" aria-label="Previous" class="page-link">
                        <span aria-hidden="true">Previous</span>
                    </a>
                </li>
                <!-- 등록된 상품들 -->
                <!-- 페이지 번호를 클릭하면 위에 존재하는 스크립트의 page() 함수 수행 -->
                <!-- 현재 페이지 표시 active -->
                <li class="page-item" th:each="page: ${#numbers.sequence(start, end)}" th:classappend="${items.number eq page-1}?'active':''">
                    <a th:onclick="'javascript:page(' + ${page - 1} + ')'" th:inline="text" class="page-link" style="cursor : pointer;">[[${page}]]</a>
                </li>
                <!-- 다음(Next) 버튼 -->
                <!-- 마지막 페이지면 class 식별자를 추가(classappend) 하여 disabled 적용 -->
                <li class="page-item" th:classappend="${items.last}?'disabled'">
                    <a th:onclick="'javascript:page('+${items.number + 1 } + ')'" aria-label="Next" class="page-link">
                        <span aria-hidden="true">Next</span>
                    </a>
                </li>
            </ul>
        </div>

        <!-- 검색 조건 -->
        <!-- th:object ${itemSearchDto} 객체와 th:field 매핑 -->
        <div class="row gy-2 gx-3 align-items-center" th:object="${itemSearchDto}">
            <select th:field="*{searchDateType}" class="form-select" style="width:auto;">
                <option value="all">전체기간</option>
                <option value="1d">1일</option>
                <option value="1w">1주</option>
                <option value="1m">1개월</option>
                <option value="6m">6개월</option>
            </select>
            <select th:field="*{searchSellStatus}" class="form-select" style="width:auto;">
                <option value="">판매상태(전체)</option>
                <option value="SELL">판매</option>
                <option value="SOLD_OUT">품절</option>
            </select>
            <select th:field="*{searchBy}" class="form-control" style="width:auto;">
                <option value="itemNm">상품명</option>
                <option value="createdBy">등록자</option>
            </select>
            <input th:field="*{searchQuery}" type="text" class="form-select" placeholder="검색어를 입력해주세요">
            <button id="searchBtn" type="submit" class="btn btn-primary">검색</button>
        </div>

    </form>

</div>

</html>

📌결과

👉 26개 상품 등록, 1 페이지

👉 2 페이지, 2 클릭 이동 / Next, Previous 이동 전부 잘 작동 한다

👉 6페이지

👉 상품명 3 검색

👉 품절 검색

👉 등록자 1 검색

❗ 자잘한 버그가 좀 있다. 2페이지에서 검색 할 경우 1페이지로 넘어가지 않는 경우 등 고쳐 나가야 한다.

❓어떤 구조로 실행?