[Thymeleaf] 게시물 날짜 기반 검색 구현 (with 페이징)

# 서론

[ek tour 리뉴얼 프로젝트 중 기록]

이전 페이징 처리에서 검색기능을 추가하여 검색된 게시물들을 페이징해서 내려주는 로직을 작성해본다.

날짜를 기반으로 검색을 처리하는 로직을 핵심적으로 다룬다.

 

*Thymeleaf 페이징 처리

https://mopil.tistory.com/56

[Spring] Thymeleaf 게시판 페이징 처리 구현

 

# 검색 폼

 

다음 폼을 구현한 코드는 아래와 같다.

<form th:action="@{/admin/search}" th:object="${adminSearchForm}" method="POST" style="display: flex; justify-content: flex-end; padding: 10px 0;">
    <input type="date" th:field="*{start}">
    ~
    <input type="date" th:field="*{end}">
    <select th:field="*{searchType}">
        <option value="name">요청자</option>
        <option value="phone">연락처</option>
    </select>
    <input th:field="*{keyword}" type="text" placeholder="검색어를 입력하세요."/>
    <input type="submit" value="검색"/>
</form>

th:object로 해당 폼에서 사용할 객체를 지정해준다. 컨트롤러에서 model로 내려온 adminSearchForm에 데이터를 담아가지고 POST 요청을 날릴 것이다. (주의! 반드시 해당 html을 렌더링 하기전에 adminSearchForm을 model로 내려줘야 한다!)

 

th:field 를 통해서 해당 객체의 멤버변수를 각각 할당해 준다. 이때 꼭 *{} 를 사용한다.

select 태그는 option이 아닌 select 태그 내에 th:field를 선언해 준다. 이러면 드롭다운을 선택했을 때, value가 해당 멤버변수로 들어간다.

 

*주의!

input="date" 로 태그를 생성하면 달력이 생성되는데, 이를 받기 위해선 특별한 처리를 해줘야한다.

 

# 달력 폼 처리

@Data
public class AdminSearchForm {

    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private LocalDate start;

    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private LocalDate end;

    private String searchType;
    private String keyword;
}

LocalDate 타입으로 해당 값을 지정해주고, 꼭 @DateTimeFormat으로 패턴을 지정해줘야 오류가 나지 않는다!

(만약, 어노테이션 처리를 안 하면 TypeMismatch 오류가 뜬다.)

 

@Query("SELECT e FROM Estimate e WHERE e.createdDate BETWEEN :start AND :end AND e.name = :name")
Page<Estimate> searchAllByName(Pageable pageable, @Param("start") String start, @Param("end") String end, @Param("name") String name);

@Query("SELECT e FROM Estimate e WHERE e.createdDate BETWEEN :start AND :end AND e.phone = :phone")
Page<Estimate> searchAllByPhone(Pageable pageable, @Param("start") String start, @Param("end") String end, @Param("phone") String phone);

레포지토리는 다음과 같이 작성한다. 이때, BETWEEN을 사용할거면 파라미터를 꼭 String으로 받아야한다!!!

따라서 서비스단에서, LocalDate를 String으로 변환해서 넘겨주자.

 

// 관리자페이지 검색
public Page<Estimate> searchByPageAdmin(Pageable pageable, AdminSearchForm form) {
    if (form.getSearchType().equals("phone")) {
        return repository.searchAllByPhone(pageable, form.getStart().toString(), form.getEnd().toString(), form.getKeyword());
    } else {
        return repository.searchAllByName(pageable, form.getStart().toString(), form.getEnd().toString(), form.getKeyword());
    }
}

간단하게 toString() 을 사용하면 된다.