💷메인 페이지

등록된 상품의 사진과 정보를 보여주는 메인 페이지를 만들어보자

📌MainItemDto 클래스 생성

package com.shop.dto;

import com.querydsl.core.annotations.QueryProjection;
import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
// 메인화면에 출력할 데이터를 위한 DTO 객체
public class MainItemDto {

    // 사용자에게 보여질 내용 (등록날짜, 수정날짜, 등록자 등 제외)
    private Long id;
    private String itemNm;
    private String itemDetail;
    private String imgUrl;
    private Integer price;

    // Entity 객체를 DTO 객체로 바로 반환하도록 지원하는 어노테이션. 보통 생성자에 사용
    // @QueryProjection 기능을 사용하기 위해선 QDto 파일 필요
    @QueryProjection // Querydsl 결과 조회 시 MainItemDto 객체로 바로 오도록 활용
    public MainItemDto(Long id, String itemNm, String itemDetail, String imgUrl, Integer price) {
        this.id = id;
        this.itemNm = itemNm;
        this.itemDetail = itemDetail;
        this.imgUrl = imgUrl;
        this.price = price;
    }
}

📌ItemRepositoryCustom 인터페이스 수정

package com.shop.repository;

import com.shop.dto.ItemSearchDto;
import com.shop.dto.MainItemDto;
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);
    
    // 메인에서도 검색이 되게끔 ItemSearchDto을 불러온다
    Page<MainItemDto> getMainItemPage(ItemSearchDto itemSearchDto, Pageable pageable);
    
}

📌ItemRepositoryCustomImpl 클래스 수정

...

    private BooleanExpression itemNmLike(String searchQuery){
        return StringUtils.isEmpty(searchQuery)
                ? null : QItem.item.itemNm.like("%" + searchQuery + "%");
    }

    @Override
    public Page<MainItemDto> getMainItemPage(ItemSearchDto itemSearchDto, Pageable pageable){

        QItem item = QItem.item;
        QItemImg itemImg = QItemImg.itemImg;

        //QmainItemDto @QueryProjection을 사용 하면 DTO로 바로 조회가 가능
        QueryResults<MainItemDto> results = queryFactory
                // MainItemDto 객체를 반환
                // 멤버변수 초기화는 조회된 결과값에서 MainItemDto 객체 생성자를 통해 지정
                // 즉, db 조회 결과는 itemImg-item 조인된 결과가 반환되지만 그 중 일부만 사용
                .select(new QMainItemDto(item.id,
                                         item.itemNm,
                                         item.itemDetail,
                                         itemImg.imgUrl,
                                         item.price)
                       )
                .from(itemImg)
                // 내부 조인. itemImg 테이블의 item 필드가 참조하는 item 테이블 조인 
                .join(itemImg.item, item)
                // regTime.eq("Y") 대표이미지만 가져 옴
                .where(itemImg.repImgYn.eq("Y"))
                .where(itemNmLike(itemSearchDto.getSearchQuery()))
                .orderBy(item.id.desc())
                .offset(pageable.getOffset())
                .limit(pageable.getPageSize())
                .fetchResults();

        List<MainItemDto> content = results.getResults();

        long total = results.getTotal();

        return new PageImpl<>(content, pageable, total);

    }

}

📌ItemService 클래스 수정

...

@Transactional(readOnly = true)
    public Page<MainItemDto> getMainItemPage(ItemSearchDto itemSearchDto, Pageable pageable){
        return itemRepository.getMainItemPage(itemSearchDto, pageable);
    }

}

📌MainController 클래스 수정

package com.shop.controller;

import com.shop.dto.ItemSearchDto;
import com.shop.dto.MainItemDto;
import com.shop.service.ItemService;
import lombok.RequiredArgsConstructor;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Optional;

@Controller
@RequiredArgsConstructor
public class MainController {

    private final ItemService itemService;

    //화면 header Navbar 안에 있는 "search" 부분에서 검색 조건 입력
    // 👉 QueryString 넘어오는 searchQuery 변수를 ItemSearchDto 객체의 멤버변수에 초기화
    //QueryString 으로 넘어오는 "page" 변수를 page 파라미터에 넘김
    @GetMapping(value = "/")
    public String main (ItemSearchDto itemSearchDto, Optional<Integer> page, Model model){

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

        if (itemSearchDto.getSearchQuery() == null){
            itemSearchDto.setSearchQuery("");
        }

        // itemSearchDto: 조회 조건, pageable: 페이징 정보
        Page<MainItemDto> items = itemService.getMainItemPage(itemSearchDto, pageable);
        System.out.println(items.getNumber() + "!!!!!!!!!!!!!!!!!");
        System.out.println(items.getTotalPages() + "#################");

        model.addAttribute("items", items);
        model.addAttribute("itemSearchDto", itemSearchDto);
        model.addAttribute("maxPage", 5);

        return "main";

    }
}

📌main.html 수정

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

<!-- 사용자 css 추가 -->
<th:block layout:fragment="css">
    <style>
        .carousel-inner > .item {
            height: 350px;
        }
        .margin{
            margin-bottom:30px;
        }
        .banner{
            height: 300px;
            position: absolute; top:0; left: 0;
            width: 100%;
            height: 100%;
        }
        .card-text{
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        a:hover{
            text-decoration:none;
        }
        .center{
            text-align:center;
        }
        .carousel-item{
            padding-bottom:60px;
        }
    </style>
</th:block>

<th:block layout:fragment="script">
    <script type="text/javascript">
        $(document).ready(function () {
            $('.carousel').carousel({
                interval: 4000,
                pause: "hover",
                wrap: true,
                keyboard : true
            });
        });
    </script>
</th:block>

<div layout:fragment="content" style="min-width: 700px; max-width: 900px; margin: 50px auto 100px auto;">

    <div id="carouselController" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100"
                     src="https://user-images.githubusercontent.com/13268420/112147492-1ab76200-8c20-11eb-8649-3d2f282c3c02.png"
                     alt="First slide">
            </div>
        </div>
    </div>

    <input type="hidden" name="searchQuery" th:value="${itemSearchDto.searchQuery}">
    <div th:if="${not #strings.isEmpty(itemSearchDto.searchQuery)}" class="center">
        <p class="h3 font-weight-bold" th:text="${itemSearchDto.searchQuery} + ' 검색 결과'"></p>
    </div>

    <div class="row">
        <th:block th:each="item, status: ${items.getContent()}">
            <div class="col-md-4 margin">
                <div class="card">
                    <a th:href="'/item/' +${item.id}" class="text-dark">
                        <!-- 상품 이미지를 요청하는 URL 은 상품 이미지 정보에 담긴 imgUrl 로 지정 👉 대표이미지 -->
                        <img th:src="${item.imgUrl}" class="card-img-top" th:alt="${item.itemNm}" height="300">
                        <div class="card-body">
                            <h4 class="card-title">[[${item.itemNm}]]</h4>
                            <p class="card-text">[[${item.itemDetail}]]</p>
                            <h3 class="card-title text-danger">[[${item.price}]]원</h3>
                        </div>
                    </a>
                </div>
            </div>
        </th:block>
    </div>

    <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">

            <li class="page-item" th:classappend="${items.number eq 0}?'disabled':''">
                <a th:href="@{'/' + '?searchQuery=' + ${itemSearchDto.searchQuery} + '&page=' + ${items.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="${items.number eq page-1}?'active':''">
                <a th:href="@{'/' +'?searchQuery=' + ${itemSearchDto.searchQuery} + '&page=' + ${page-1}}"
                   th:inline="text" class="page-link">[[${page}]]</a>
            </li>

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

        </ul>
    </div>

</div>
</html>

📌결과

👉 메인 패이지

👉 4페이지

👉 3 검색

❓어떤 구조로 실행?

👉 페이지나 검색 같은 세부 사항은 따로 공부하는게 나을 듯. 일단 나무를 보지말고 숲을 먼저 보자