본문 바로가기
mini Projects/ToyTalk 키덜트 대화방 서비스 2025. 6. 9.

(25.06.09) 전체 대화방 조회용 Pagenation 구현

대화방 Chatroom 전체 조회 Pagenation 구현

Controller

public class ChatroomController {

    private final ChatroomService chatroomService;

    @GetMapping
    public ResponseEntity<PageResponseDTO> getAllChatrooms(@RequestParam(defaultValue = "1") int page) {
        PageResponseDTO chatrooms = chatroomService.getAllChatrooms(page);
        return ResponseEntity.status(HttpStatus.OK).body(chatrooms);
    }
    
    
    ...
  • 기존의 Specific Chatroom  단일 조회 구현을 단지 List 형태로 반환하는 형태였으나, Model 에 한 페이지당 필요한 만큼 전달을 해줘야하기 때문에, Pagenation 을 적용
  • RequestParam 형식으로 Page 넘버를 전달
    • 단, 기본 default는 1페이지, service 로직에서는 -1을 진행 해서 Pageable 객체의 인덱싱에 맞게 변형

 

public class ChatroomService {

...

    public PageResponseDTO getAllChatrooms(int page) {
        int pageSize = 10;
        int pageNumber = page > 1 ? page - 1 : 0;

        Pageable pageable = PageRequest.of(pageNumber, pageSize, Sort.by("createdAt").descending());
        Page<Chatroom> chatRoomPage = chatroomRepository.findAllActivated(pageable);

        List<ChatroomResponseDTO> content = chatRoomPage.stream()
                .map(chatroom -> {
                    long memberCount = chatroomMemberRepository.countAllJoinedMember(chatroom.getId());
                    ChatroomResponseDTO dto = new ChatroomResponseDTO(chatroom);
                    dto.setMemberCount(memberCount);
                    return dto;
                })
                .toList();

        return new PageResponseDTO(content, page, content.size(), chatRoomPage.getTotalPages(), chatRoomPage.getTotalElements());
    }
    
    ...

Service & PageResponseDTO

public class PageResponseDTO<T> {
    private List<T> content;
    private int page;
    private int size;
    private int totalPages;
    private long totalElements;
    
    ...
  • 기존의 List<ChatroomResponseDTO> 응답 형태에서 구현 문제
    • model로 전달할 때, 전체 페이지수 를 어떻게 전달할 것인가 : 총 8페이지가 있다면 8페이지까지 숫자로 하단에 보여줘야 클릭해서 해당 페이지로 이동하는 방식
    • model로 전달할 때, 총 갯수 를 어떻게 전달할 것인가 : 추후 검색 기능 또는 필터 기능을 추가할때 결과의 수를 보여줘야하기 때문에

- > Pageable 구현체를 통해서 얻어진 Page 객체에서 get 메서드를 통해 전체 페이지, 전체 조회 수 를 추가로 개선

  • 기존의 List<ChatroomResponseDTO>를 content로 넣어 PageResponseDTO가 감싸는 형태로 전달
public class ChatroomService {
...
    public PageResponseDTO getAllChatrooms(int page) {
        int pageSize = 10;
        int pageNumber = page > 1 ? page - 1 : 0;

        Pageable pageable = PageRequest.of(pageNumber, pageSize, Sort.by("createdAt").descending());
        Page<Chatroom> chatRoomPage = chatroomRepository.findAllActivated(pageable);

        List<ChatroomResponseDTO> content = chatRoomPage.stream()
                .map(chatroom -> {
                    long memberCount = chatroomMemberRepository.countAllJoinedMember(chatroom.getId());
                    ChatroomResponseDTO dto = new ChatroomResponseDTO(chatroom);
                    dto.setMemberCount(memberCount);
                    return dto;
                })
                .toList();

        return new PageResponseDTO(content, page, content.size(), chatRoomPage.getTotalPages(), chatRoomPage.getTotalElements());
    }

 

  • Pageable 구현체로 최신순, 10개씩 한페이지가 되도록 기본적으로 설정
  • 커스텀 쿼리를 Repository에 만들어서 채팅방의 가입 수 Member Count 까지 넣어서 DTO 객체를 생성할 수 있도록 구현

로그인 후 랜딩 화면 = 대화방 목록 화면 Template 구현

index.html

  • index.html에 model로 AJAX 형태로 전달을 해서 작동시킬 예정

면접이 여러개 잡혀있어 시간도 부족하고, React가 아니라 Thymleaf기반의 정적리소스 기준으로 만들다 보니, 

Controller의 모든 응답을 바꾸는데 생각보다 오래 시간이 걸리고 있다.

 

React 같을 경우 직접적으로 Request Response하면서 데이터를 주고 받기 때문에

JSP Batis 와 같은 템플릿으로 화면리졸버를 통해 화면을 전달하는 MVC 구조일 경우는 맞겠지만,

기본적인 REST API 기준으로는 FE 화면단 구성으로 만들기 때문에,

 

전자를 염두해두고 컨트롤러를 완성했으면 어떨까 아쉬움이 있다.