[Feat] usepagenation 적용, 버그 및 css 수정 #1498

[siwolee]

📌 개요

• 페이지네이션 받아오는 api 전부 usePageNation 사용해서 받아오도록 수정

  💻 작업사항

  usePageNation 사용법

• 컴포넌트 내부 세팅 : content(data array) 및 페이지네이션 컴포넌트에 들어갈 인자 리턴

  const { content: agendaHistory, PagaNationElementProps } =
  usePageNation<AgendaHistoryItemProps>({ url: '/profile/history/list' });

  • 리턴값에 페이지네이션 컴포넌트 세팅 : 앞에서 받아온 인자를 풀어서 그대로 넣어주면 됩니다.

    <PageNation {...PagaNationElementProps} />

  • 자동으로 세팅됩니다. 아래는 usePageNation에서 받는 매개변수입니다.

    const usePageNation = <T>({
    url: string; // api 받아올 주소. agenda 다음부터
    params?: Record<string, any>; // 쿼리파라미터 있을 경우 추가. 페이지는 필요 없으며, 사이즈는 따로 들어감. 
    size?: number; // 페이지 사이즈
    useIdx?: boolean; // 인덱싱 추가 여부 : 해당 데이터 타입에 idx?: number; 추가하여 보여주는 게 필요할 때
    }) => {

  • 인덱싱 추가 예시 : 아래와 같이 페이지 값 기반으로 자동 파싱해서 데이터 반환

계속 호출하는 문제: api 호출 조건 제한을 통해 해결

  useEffect(() => {
    const fetchData = async () => {
      const data = await getData(currentPage.current);
      totalPages.current = Math.ceil(data.totalSize / size);
      setContent(data.content);
    };
    if (!status.current || status.current / 100 != 2) fetchData();
    console.log(url);
  }, [currentPage, getData, size]);

size, currentPage 변경 시 자동 호출 또한 다른 이유로 불렸을 경우에도 이전 호출 성공했을 경우 (200번대 status) 호출하지 않음

css

💡관련 Issue

• close #1496
• close #1498

[siwolee]

넵 콘솔로그 / 상대경로 처리하는 김에 겸사겸사 다 처리했습니다~! 감사합니다 close #1498