TIL : 최종프로젝트 21일차

pagenation 커스텀 훅 만들기

pagenation이 사용되는 곳마다 같은 코드가 반복되서 custom hook을 만들었다. 만들다보니 pagenation이 증가하면 버튼도 그만큼 증가되고 있다는 사실을 깨달았다. 그래서 페이지를 일정 갯수만 보여주는 코드를 만들었다.

기존에 구현했었던 페이지네이션 코드를 넣고, 보여지는 page들의 묶음은 어떻게 구현해야하나 고민을 많이 했다. 구글링도 많이 했지만, 잘 작동이 안돼서 기존 코드를 활용해서 아래 코드를 작성했다.

import { useState } from "react";

const usePagenation = (
  data: any[] | undefined,
  tatalPage: number,
  showPage: number,
  windowY: number
) => {
  //post
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(tatalPage);
  const lastPostIndex = currentPage * postsPerPage;
  const firstPostIndex = lastPostIndex - postsPerPage;
  const totalContents: any = data?.length;
  const pages = [];
  for (let i = 1; i <= Math.ceil(totalContents / postsPerPage); i++) {
    pages.push(i);
  }

  //page
  //배열 묶음 번호
  const [pageArr, setPageArr] = useState(1);
  //한번에 보여질 페이지 갯수
  const [pageNumber] = useState(showPage);

  //보여지는 마지막 페이지
  const lastPage = pageArr * pageNumber;
  //보여지는 첫번째 페이지
  const firstPage = lastPage - pageNumber;
  const currentPages = pages ? pages.slice(firstPage, lastPage) : null;

  const totalPages = pages.length;
  const showPages = [];
  for (let i = 1; i <= Math.ceil(totalPages / pageNumber); i++) {
    showPages.push(i);
  }

  return {
    firstPostIndex,
    lastPostIndex,
    pages,
    currentPage,
    setCurrentPage,
    pageArr,
    setPageArr,
    lastPage,
    firstPage,
    showPages,
    currentPages,
  };
};

export default usePagenation;

여기까지가 만들었던 커스텀 훅이고, 사용되는 페이지네이션 컴포넌트에는 아래와 같이

  <div className="flex justify-center gap-2 sm:gap-4 mt-10">
      {currentPages?.includes(1) ? null : (
        <>
          <button
            onClick={() => {
              setPageArr(pageArr - 1);
              setCurrentPage(firstPage - 4);
            }}
            className="w-auto p-1 text-[16px] sm:text-xl hover:font-semibold"
          >
            &lt;
          </button>
          <button
            onClick={() => {
              setPageArr(1);
              setCurrentPage(1);
            }}
            className="w-auto p-1 text-[16px] sm:text-xl hover:font-semibold hover:tracking-tight"
          >
            1
          </button>
          <span>...</span>
        </>
      )}
      {currentPages?.map((page, index) => {
        return (
          <button
            key={index}
            style={page === currentPage ? { fontWeight: 600 } : undefined}
            onClick={() => {
              setCurrentPage(page);
              window.scrollTo({ top: positionY, behavior: "smooth" });
            }}
            className="w-auto p-1  text-[16px] sm:text-xl hover:font-semibold hover:tracking-tight"
          >
            {page}
          </button>
        );
      })}
      {currentPages?.includes(pages.length) ? null : (
        <>
          <span>...</span>
          <button
            onClick={() => {
              setPageArr(showPages.length);
            }}
            className="w-auto p-1  text-[16px] sm:text-xl hover:font-semibold hover:tracking-tight"
          >
            {pages.length}
          </button>
          <button
            onClick={() => {
              setPageArr(pageArr + 1);
              setCurrentPage(lastPage + 1);
            }}
            className="w-auto p-1  text-[16px] sm:text-xl hover:font-semibold hover:tracking-tight"
          >
            &gt;
          </button>
        </>
      )}
    </div>

기존 페이지네이션 버튼을 페이지를 이동할 수 있는 버튼과, 가장 첫번째 페이지와 마지막페이지로 가는 버튼으로 감싸주었다.
어떤게 더 사용하기 편할지는 직접 사용자의 입장에서 더 고민해볼 필요가 있는 것 같다.

오늘은 반응형 최최최최최종마무리하고, 유저피드백을 바탕으로 버그를 수정하고, 직접 돌아다니면서 마주치게 되는 버그들을 수정했더니 하루가 다 갔다. 마음이 급해서 그런지 시간이 정말 빨리 지나가는 것 같다. 급해도 여기저기 꼼꼼히 확인하면서 작업해야지