최종 프로젝트 - 페이지네이션 totalItems 데이터 오류

다른 폴더를 클릭한 후 “전체” 폴더로 가면 발생한 오류

냅다 이미지 하나 박고 시작하는 오늘의 포스팅...
분명 데이터가 있는데 이렇게 아무것도 없다고 떠버렸다.
위 사진이 실제 문제가 발생했을 때의 사진은 아니지만 이해를 돕기위해...

아무튼 데이터가 잘 담겨있는데 스크랩한 레시피가 없다는 화면이 나오고 있는게 문제였다.

각 폴더마다 사용자가 저장한 데이터가 있고 8개씩 끊어서 페이지네이션으로 볼 수 있게 구현했다.
"전체" 폴더에는 사용자가 스크랩한 모든 레시피 데이터가 들어있어야했다.

01. supabase 데이터 확인하기

첫번째로 백엔드에서 데이터를 받아오는 과정에서 문제가 없는지 확인하고자 했다.

여기서 잘못됐다면 불러오는 로직부터 수정이 필요하다는 뜻이다.

폴더 이름과 그 안에 데이터는 잘 담겨있는걸 확인했다. 따라서 프론트 쪽 문제라는 뜻!

02. 페이지네이션 변수 확인하기

다음으로는 프론트 쪽 문제를 확인했다.

페이지네이션 컴포넌트로 가서 Props 로 내려주는 값들이 어떤 걸 내려주는지 체크해보았다.

이렇게 코드를 작성하고 체크해보니 totalItems 가 폴더의 모든 레시피를 담고 있어야했는데 0으로 찍히고 있었다.

때문에 전체 폴더로 왔을 때 담겨진 데이터가 없으므로 보이는 데이터가 없다고 떴던 것!

브라우저에서 콘솔 확인하기

처음부터 데이터가 전부 있어야했는데 여기서 0이 찍혀버리니까 다른 폴더에 데이터가 있는데도 없다고 떴던 것이다.

따라서 이 totalItem 변수에 모든 레시피 데이터를 넣어주는 로직이 필요했다.

03.totalItems 업데이트 로직 작성하기

“전체” 폴더의 개수 업데이트 로직

const [totalItems, setTotalItems] = useState(0); // 페이지네이션에 적용할 상태관리 / 전체 아이템

// "전체" 레시피 개수 설정
  useEffect(() => {
    const loadTotalScraps = async () => {
      if (userId) {
        const allScrapCount = await fetchTotalScrapCount(userId);
        setTotalItems(allScrapCount);

        // 각 폴더별 레시피 개수 가져오기
        const folders = await fetchFolders(userId);
        const folderCounts: { [key: string]: number } = {};

        for (const folder of folders) {
          const folderCount = await fetchFolderScrapCount(userId, folder);
          folderCounts[folder] = folderCount;
        }

        folderCounts["전체"] = allScrapCount; // 전체 개수도 저장
        setFolderScrapCounts(folderCounts);
      }
    };
    loadTotalScraps();
  }, [userId]);

폴더 클릭 시 totalItems 업데이트

const handleFolderClick = async (folder: string | null) => {
    setSelectedFolder(folder); // 폴더 변경
    setPage(1); // 페이지 초기화 - 전체 폴더로 돌아올 때 1페이지로 설정

    // 폴더 별 레시피 개수 업데이트
    const folderTotal = folder ? await fetchFolderScrapCount(userId as string, folder) : totalItems;
    setTotalItems(folderTotal);

    // 페이지네이션을 위해 데이터 리패치
    refetchScraps();
  };

스크랩 페이지 변경

"use client";

import { useScrapStore } from "@/store/scrapStore";
import { useScrapData } from "@/hooks/useScrapData";
import Pagination from "@/components/common/Pagination";

const ScrapPage = () => {
  const { selectedFolder, userId, setSelectedFolder } = useScrapStore();
  const {
    folderScrapCounts,
    existingFolders,
    scraps,
    deleteScrap,
    page,
    totalItems, // ✅ 추가
    handlePageChange,
    handleFolderClick,
    refetchScraps
  } = useScrapData();

  // 데이터 로딩 상태 관리
  useEffect(() => {
    if (scraps !== undefined) {
      // 데이터가 존재할 때 로딩 완료 상태로 전환
      setIsLoading(false);
    }
  }, [scraps]);

  useEffect(() => {
    if (userId) {
      if (!selectedFolder) {
        setSelectedFolder("전체");
      } else {
        console.log(`폴더확인 - ScrapPage: ${selectedFolder}`);
        refetchScraps();
      }
    }
  }, [userId, selectedFolder, page, setSelectedFolder, refetchScraps]);

  const toggleEditMode = () => {
    setIsEditMode((prev) => !prev);
  };

  const handleDeleteClick = (scrapId: string) => {
    setScrapToDelete(scrapId);
    setIsDeleteModalOpen(true);
  };


  const filteredScraps = Array.isArray(scraps)
    ? selectedFolder === "전체"
      ? scraps
      : scraps.filter((scrap) => scrap.folder_name === selectedFolder)
    : [];

  return (
    // 생략
    <div className="flex items-center justify-center pt-7">
     {/* ✅ totalItems 에 전체 레시피 개수 넘겨받은 변수 넣어주기 */}
      <Pagination
        currentPage={page}
        pageSize={8}
        totalItems={totalItems}
        onPageChange={handlePageChange}
        className="ssm:w-[336px] sm:w-[336px] sm:text-body-14 md:w-[438px] lg:w-[438px]"
      />
    </div>
  );
};

export default ScrapPage;

결과확인

전체 폴더 페이지 / 개수 확인

다른 폴더 페이지 / 개수 확인