thymeleaf 기간별 검색 기능

와 하루종일 걸려서 너무 뿌듯해서 영상까지 업로드!ㅋㅋㅋㅋㅋㅋㅋㅋ
날짜나 월별 검색은 input으로 바로 받아서 가능한데, 기간별은 어떻게 해야하나 구글링하던 중에
date range picker라는 오픈소스를 찾았다!!!
설명은 frontbackend라는 페이지에서 볼 수 있다.

해당 페이지를 보면서 차근차근 따라해봤는데
gradle에 추가해주면서,버전때문에도 애먹고 빌드가 안되서도 애먹었다ㅠㅠ

//for date range picker
	implementation group: 'org.webjars', name: 'jquery', version: '3.0.0'
	implementation group: 'org.webjars', name: 'bootstrap', version: '4.0.0-2'
	implementation 'org.webjars:popper.js:1.12.9-1'
	implementation 'org.webjars:webjars-locator:0.45'
	implementation 'org.webjars:font-awesome:5.11.2'

총 다섯개의 디펜던시를 추가해줬는데, bootstrap이 5버전 이하라면 jquery를 추가해줘야 한다고 한다.
빌드를 한 열번 하면서 정상적으로 불러와질 때까지 해봤다.

그리고, controller와 index페이지를 똑같이 생성해서 실행해봤는데, 달력 모양이 나오지 않았다🙄
깃허브에 들어가서 css, js 파일을 복붙해주니 샘플 페이지는 정상적으로 작동되었다.

내가 사용하는 페이지에 적용하기 위해서 검색에 해당하는 div태그를 전체적으로 옮겨주고
script 부분과 css를 옮겨줬는데, 또 달력모양이 안나온다!
파일이 이제 다 static 내부에 있는데, 뭐가 문제인지 한참을 삽질하다가 경로 문제인 것을 확인했다.
나는 templates에 하위 디렉토리를 두고서 작업중인데, 그러면 static에 접근하기 위해 한 번 더 상위로 (../)나갔어야 했다! 너무 당연한 소리지만 css를 지이이이이잉이인짜 오랜만에 봐서 아예 생각도 못하던 부분이다.

이제 검색 껍데기는 보이는데, 날짜를 선택하고 검색할 때 검색 결과가 보일 수 있도록 변경해야 한다.
미리 만들어둔 period에 해당하는 메소드와 연결을 해야하는데, 나는 LocalDate를 사용했고, 오픈 소스에서는 Date를 사용한다.

public LocalDate convertFromDateToLocalDate(Date date) {
        return date.toInstant()
                .atZone(ZoneId.systemDefault())
                .toLocalDate();
}

Date를 LocalDate로 타입 변환을 할 수 있도록 메소드를 만들어주고, 기간별 매출조회에 해당하는 메소드와 연결해줬다.
그랬더니 계속 아래와 같은 오류가 발생했다....
Failed to convert from type [java.lang.String] to type [@org.springframework.format.annotation.DateTimeFormat java.util.Date]
에러 코드를 보면, 날짜가 DD/MM/YYYY 형식으로 보이는데 내가 Format으로 맞춰준 날짜의 형식은 모두
YYYY-MM-DD 타입이다. 보이는 모든 부분은 수정했는데도 문제가 안나와서 command + shift + F로 (dd/mm/yyyy)를 검색했다ㅋㅋㅋㅋㅋ
그랬더니 script부분에서 picker.startDate.format 내부가 DD/MM/YYYY로 적혀있었다.
startDate, endDate 부분을 모두 수정하고 나니 정상적으로 검색된다!!

    var $dateRange = $('#dateRange');

    $dateRange.daterangepicker();
    $dateRange.on('apply.daterangepicker', function (ev, picker) {
        $('input[name="dateFrom"]').val(picker.startDate.format('YYYY-MM-DD'));
        $('input[name="dateTo"]').val(picker.endDate.format('YYYY-MM-DD'));
    });

java에서는 dateFormat을 YYYY-MM-dd라고 적어주지만, js에서 동일하게 적었더니
dd에서 일자가 아닌 요일이 불러와졌다. js에서는 YYYY-MM-DD로 적어야 하는 것 같다.