페이지네이션

@ApiOperation(value = "스케치북 캐릭터 모션 조회", notes = "스케치북 ID에 따른 캐릭터 모션의 페이지네이션된 리스트를 조회합니다.")
@GetMapping("/sketchbooks/{sketchId}/character-motions")
public ResponseEntity<Page<SketchbookCharacterMotionGetListDto>> getSketchSelect2(
        @ApiParam(value = "스케치북 ID", required = true) @PathVariable Long sketchId,
        @ApiParam(value = "페이지 정보", required = true) Pageable pageable) {
    Page<SketchbookCharacterMotionGetListDto> motions = sketchbookService.getSketchSelect2(sketchId, pageable);
    return ResponseEntity.ok(motions);
}

import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageImpl;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Service;
import com.querydsl.jpa.impl.JPAQueryFactory;

@Service
public class SketchbookService {

    private final JPAQueryFactory query;

    public SketchbookService(JPAQueryFactory query) {
        this.query = query;
    }

    public Page<SketchbookCharacterMotionGetListDto> getSketchSelect2(Long sketchId, Pageable pageable) {
        if (sketchId == null) {
            throw new CustomException(ErrorCode.BAD_REQUEST);
        }

        // 캐릭터 모션의 페이지네이션 적용 쿼리
        List<SketchbookCharacterMotionGetListDto> sketchbookCharacterMotions = query
                .select(Projections.constructor(SketchbookCharacterMotionGetListDto.class,
                        sketchbookCharacterMotion.id,
                        Projections.constructor(CharacterMotionToSketchbookDto.class,
                                characterMotion.id,
                                characterMotion.motion.id,
                                characterMotion.url,
                                characters.nickname)))
                .from(sketchbookCharacterMotion)
                .leftJoin(sketchbookCharacterMotion.characterMotion, characterMotion)
                .leftJoin(characterMotion.characters, characters)
                .where(sketchbookCharacterMotion.sketchbook.id.eq(sketchId))
                .offset(pageable.getOffset())
                .limit(pageable.getPageSize())
                .fetch();

        // 총 갯수 조회
        long total = query
                .select(sketchbookCharacterMotion.count())
                .from(sketchbookCharacterMotion)
                .where(sketchbookCharacterMotion.sketchbook.id.eq(sketchId))
                .fetchOne();

        // 각 캐릭터 모션에 대한 추가 데이터 로딩
        sketchbookCharacterMotions.forEach(motionDto -> {
            List<LetterToSketchbookDto> letters = query
                    .select(Projections.constructor(LetterToSketchbookDto.class,
                            letter.id,
                            Projections.fields(UserGetDto.class,
                                    letter.sender.nickname,
                                    letter.sender.nicknameTag),
                            Projections.fields(UserGetDto.class,
                                    letter.receiver.nickname,
                                    letter.receiver.nicknameTag),
                            letter.content,
                            letter.createdAt))
                    .from(letter)
                    .leftJoin(letter.sender)
                    .leftJoin(letter.receiver)
                    .where(letter.sketchbookCharacterMotion.id.eq(motionDto.getId()))
                    .fetch();
            motionDto.setLetterList(letters);

            Long characterMotionId = motionDto.getCharacterMotion() != null ? motionDto.getCharacterMotion().getId() : null;
            if (characterMotionId != null) {
                CharacterMotionToSketchbookDto characterMotions = query
                        .select(Projections.constructor(CharacterMotionToSketchbookDto.class,
                                characterMotion.id,
                                characterMotion.motion.id,
                                characterMotion.url,
                                characters.nickname))
                        .from(characterMotion)
                        .where(characterMotion.id.eq(characterMotionId))
                        .fetchOne();
                motionDto.setCharacterMotion(characterMotions);
            }
        });

        return new PageImpl<>(sketchbookCharacterMotions, pageable, total);
    }
}

import axios from 'axios';

function fetchCharacterMotions(sketchId, page, size) {
  const params = {
    page: page,
    size: size,
    sort: 'id,desc'
  };

  return axios.get(`/api/sketchbooks/${sketchId}/character-motions`, { params });
}

<Pagination
  count={totalPages}
  page={currentPage}
  onChange={(event, newPage) => {
    // 새 페이지 번호로 데이터를 다시 불러오는 로직
    fetchCharacterMotions(sketchId, newPage - 1, size);
  }}
/>