[Trouble Shoothing] 🛠️ 페이지를 매긴 데이터가 Front에 제대로 표시되지 않음

📜 문제 상황

• 페이지당 8개의 기록을 표시완료, "다음" 및 "이전" 버튼을 사용하여 데이터를 통해 페이징 예상.

• 그러나 다음 페이지가 조회되지 않음.

📜 문제 원인

• 백엔드 컨트롤러 메소드가 전체 Page 객체가 아닌 Page 객체에서 content(레코드 목록)만 반환했기 때문에 문제가 발생.

• 결과적으로 중요한 페이지 매기기 메타데이터(예: totalPages, number, size)가 API 응답에서 누락되어 프런트엔드에서 페이지 매기기 처리에 필요한 정보가 부족.

• Front에서 'totalPages'가 제대로 설정되지 않아 페이지 탐색 및 후속 페이지의 기록 표시에 문제가 발생.

📜 문제 해결

📄 기존 API

@GetMapping
    public ResponseEntity<ApiResponse> getAllWasteRecords(
        Pageable pageable) {
        // 인증된 사용자의 ID를 이용하여 기록 조회
        List<WasteRecordResponseDto> records = wasteRecordService.getAllWasteRecords(pageable).getContent();
        ApiResponse response = ApiResponse.builder()
            .msg(ResponseText.WASTE_RECORD_FETCH_SUCCESS.getMsg())
            .statuscode(String.valueOf(HttpStatus.OK.value()))
            .data(records) // 조회된 기록 리스트를 응답 데이터에 포함
            .build();
        return ResponseEntity.ok(response);
    }
  

📄 리팩토링 API

@GetMapping
    public ResponseEntity<ApiResponse> getAllWasteRecords(Pageable pageable) {
        Page<WasteRecordResponseDto> recordsPage = wasteRecordService.getAllWasteRecords(pageable);
        ApiResponse response = ApiResponse.builder()
            .msg(ResponseText.WASTE_RECORD_FETCH_SUCCESS.getMsg())
            .statuscode(String.valueOf(HttpStatus.OK.value()))
            .data(recordsPage)
            .build();
        return ResponseEntity.ok(response);
    }

📄 Front 수정

• totalPages 정의

const [totalPages, setTotalPages] = useState(1);

• 기존 관련 함수

  // 백엔드에서 record 가져오는 코드
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await apiClient.get('/api/waste/records');
        const recordsData = response.data.data || [];

        if (Array.isArray(recordsData)) {
          setRecords(recordsData);
          setFilteredRecords(recordsData);
          aggregateDataForCharts(recordsData);
        } else {
          console.error('Unexpected response structure:', recordsData);
          setRecords([]);
        }
      } catch (error) {
        console.error('Error fetching waste records:', error);
      }
    };
    fetchData();
  }, []);

• 리팩토링 함수

  // 백엔드에서 record 가져오는 코드
  const fetchData = async (page) => {
    try {
      const response = await apiClient.get('/api/waste/records', {
        params: {page: page - 1, size: recordsPerPage}
      });
      const recordsData = response.data.data;

      if (recordsData) {
        setRecords(recordsData.content);
        setFilteredRecords(recordsData.content);
        aggregateDataForCharts(recordsData.content);
        setTotalPages(recordsData.totalPages);
      } else {
        console.error('Unexpected response structure:', recordsData);
        setRecords([]);
      }
    } catch (error) {
      console.error('Error fetching waste records:', error);
    }
  };

  useEffect(() => {
    fetchData(currentPage);
  }, [currentPage]);
  

• 기존 관련 전체 코드

   useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await apiClient.get('/api/waste/records');
        const recordsData = response.data.data || [];

        if (Array.isArray(recordsData)) {
          setRecords(recordsData);
          setFilteredRecords(recordsData);
          aggregateDataForCharts(recordsData);
        } else {
          console.error('Unexpected response structure:', recordsData);
          setRecords([]);
        }
      } catch (error) {
        console.error('Error fetching waste records:', error);
      }
    };
    fetchData();
  }, []);

  // 페이지네이션을 위한 현재 페이지에 해당하는 레코드
  const indexOfLastRecord = currentPage * recordsPerPage;
  const indexOfFirstRecord = indexOfLastRecord - recordsPerPage;
  const currentRecords = filteredRecords.slice(indexOfFirstRecord, indexOfLastRecord);

  const handleNextPage = () => {
    if (currentPage < Math.ceil(filteredRecords.length / recordsPerPage)) {
      setCurrentPage(currentPage + 1);
    }
  };

  const handlePrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

• 리팩토링 버전의 관련 전체 코드

  const fetchData = async (page) => {
    try {
      const response = await apiClient.get('/api/waste/records', {
        params: {page: page - 1, size: recordsPerPage}
      });
      const recordsData = response.data.data;

      if (recordsData) {
        setRecords(recordsData.content);
        setFilteredRecords(recordsData.content);
        aggregateDataForCharts(recordsData.content);
        setTotalPages(recordsData.totalPages);
      } else {
        console.error('Unexpected response structure:', recordsData);
        setRecords([]);
      }
    } catch (error) {
      console.error('Error fetching waste records:', error);
    }
  };

  useEffect(() => {
    fetchData(currentPage);
  }, [currentPage]);

  const handleNextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage((prevPage) => prevPage + 1);
    }
  };

  const handlePrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage((prevPage) => prevPage - 1);
    }
  };