배경
사용자들이 등록한 그룹을 필터링을 통해 원하는 그룹만 볼 수 있어야 한다.
구현한 기능
쿼리는 page(페이지), status(모집상태), area(지역), sort(정렬), title(검색)이 있습니다.
FE
react-router-dom의 useSearchParams()를 사용
새로고침을 하면 사용자가 선택한 쿼리가 초기화 되는것이 아니라, searchParams.get(’옵션’)을 통해 동일한 쿼리의 데이터를 보여줍니다.
데이터 정렬 & 필터
그룹 데이터는 지역별로, 그룹의 모집 현황별로 필터가 가능합니다.
그룹 데이터의 최신순, 마감순 정렬을 지원합니다.
페이지네이션
사용자가 현재 어디까지 봤는지 기억하고 다른 모집글과 비교할 수 있도록 무한 스크롤링이 아니라
페이지네이션 방식을 채택하였습니다.
BE
QueryDSL을 사용하여 복잡한 검색 및 필터 조건을 처리합니다.
이를 통해 동적 쿼리를 생성하여, 다양한 사용자 요구에 맞춘 데이터를 제공할 수 있으며
가독성, 컴파일 시 문법 오류 등 장점으로 인해 사용했습니다.
Spring Data JPA Pageable 인터페이스 및 커스텀 페이지네이션 커스텀 DTO 사용
- Pageable 인터페이스를 사용하여 페이지 번호, 페이지 크기, 정렬 순서 등의 정보 등을 사용했습니다.
- Page 객체 대신에 커스텀 DTO(Data Transfer Object)를 사용하여 필요한 정보만 전달 할 수 있도록 페이지네이션 응답을 설정했습니다.