🥞 오늘 한 일

• 최종 프로젝트
  • 자취템 댓글 페이지네이션 제작

기술적 의사결정

자취템 댓글 페이지네이션 제작

// CommentList.tsx
const [page, setPage] = useState(1);

const {
  data: commentsData,
  isPending,
  isError,
} = useQuery({
  queryKey: ["comments", postId, page],
  queryFn: () => getComments(postId, page),
});
const comments = commentsData?.data || [];
const totalComments = commentsData?.count || 0;
const totalPages = Math.ceil(totalComments / commentsData?.limit);

// 생략

<div className="flex justify-center mt-[14px] gap-2">
  {[...Array(totalPages)].map((_, index) => {
    return (
      <button
        className={`w-4 h-4 border-[0.5px] border-gray-2 flex justify-center items-center text-[10px]
${page === index + 1 ? "text-main-8" : "text-gray-2"}`}
        key={index + 1}
        onClick={() => setPage(index + 1)}
        >
        {index + 1}
      </button>
    );
  })}
</div>

기존 로직에서 변경하여, commentsData에 data 뿐만이 아니라 총 갯수 및 limit 등을 가져올 수 있도록 제작했다. 그리고 totalPages의 수만큼 버튼을 제작하여 클릭 시 해당 index + 1의 페이지로 이동하도록 했다.

// mustpost.ts
export async function getComments(postId: string, page: number = 1) {
  const response = await fetch(`/api/mustpost/comments/${postId}?page=${page}`);
  const data = await response.json();
  return data;
}

기존에는 postId만 넘겨주던 것을 page도 넘겨주도록 변경했다.

// route.ts
export async function GET(
  request: NextRequest,
  { params }: { params: { postId: string } }
) {
  const { postId } = params;
  const supabase = createClient();
  const page = parseInt(request.nextUrl.searchParams.get("page") || "1");
  const limit = 5;
  const offset = (page - 1) * limit;

  try {
    const { data, count } = await supabase
      .from("must_comments")
      .select("*, must_posts(*), profiles(*)", { count: "exact" })
      .eq("post_id", postId)
      .order("created_at", { ascending: false })
      .range(offset, offset + limit - 1);

    return NextResponse.json({ data, count, page, limit });
  } catch (error) {
    return NextResponse.json({ error: "댓글을 가져오는데 실패했습니다." });
  }
}

page를 가져와서 정해준 limit만큼 해당 page의 comments를 가져오도록 변경했다. 동시에 totalPages를 지정해주기 위한 count도 넘겨주도록 했다.

이런 방식으로 페이지네이션을 구현했다. 사실 지금까지 해왔던 무한 스크롤, 더보기 기능보다 훨씬 간단하여 쉽게 제작할 수 있었다.

🍴 돌아보기

앞서 말했듯이 페이지네이션은 처음 해봤지만 사실 무한 스크롤, 더보기 기능보다 간단하다고 볼 수 있어서 수월했다. 다만, 그 어떤 것도 참고하지 않고는 아직 만들 수 없을 것 같아서, 아직 내 것이 되진 못한 것 같다. 더 많은 학습이 필요할 것 같다.

🍳 내일 목표

• 최종 프로젝트
  • 상세 페이지 인기템 슬라이드 제작