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

[cweedlee]

📌 개요

• 페이지네이션 받아오는 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 [Bug] 대회 상세내역 참여자 클릭 시 오류 #1496
• close [Feat] usePageNation반영 / 버그 / css #1498

[irenee-14]

받아오는 데이터 형식이 pagenation으로 변경되어 기능들이 작동이 잘 되지 않았었는데 그에 맞추어 잘 수정된 것 같아요~~ LGTM! 자잘한 부분들도 수정되어 좋습니당◡̈

[irenee-14]

상대경로

[irenee-14]

상대경로

[irenee-14]

이전에 제대로 처리되지 않은 부분 수정해주셔서 감사합니당 ㅎㅎ

[irenee-14]

상대경로

[irenee-14]

console.log~

[JeongRon]

참여자, 공지사항 등의 map 에러들이 paegnation 코드로 인해 에러가 발생했었는데, 확인해보니 모두 정상 작동되는 것을 확인했습니다! LGTM! 👍

[cweedlee]

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