[LAB-5] 페이지네이션 UI 이슈

[HYBEN09]

질문 작성자

변혜빈

문제 상황

<질문> 추천페이지에서 검색을 하면 검색한 것에 해당되는 모든 값들이 나오게 출력되게 되는데, 그게 2페이지까지의 양이라면 페이지네이션의 UI가 2까지 나와야한다고 생각했습니다.

그런데 현재는 항상 1-7까지의 페이지네이션 번호가 표시가 되어서, 그 부분을 구현하는데에 어려움이 있어서 이슈를 남깁니다.

프로젝트 저장소 URL

[현재 파일 위치]

로그인은 구글로그인 혹은 아이디 : babjo@naver.com / 비번: aaaa1111 입니다.

src파일 : src.zip

.env파일에 작성하시면 되는 코드를 아래에 적어드립니다. VITE_API_KEY = AIzaSyDBWIctC8FjPlqPiJllfsIX_HveGYDD1ao VITE_AUTH_DOMAIN = babjo-life.firebaseapp.com VITE_PROJECT_ID = babjo-life VITE_STORAGE_BUCKET = babjo-life.appspot.com VITE_MESSAGE_SENDER_ID = 1065462580105 VITE_APP_ID = 1:1065462580105:web:a78b340517d5f108ee5758 VITE_MEASUREMENT_ID = G-YFM830245Z VITE_SERVICE_KEY=M4E1Vdrm%2Ba%2FjVfatJPdEbBibLbYBeDaGm7tgF%2BxisSinPYTEEBDkFgSO0gmqjAZGOzfrSffYbsOF3XshtdL6lg%3D%3D VITE_KAKAO_API_KEY=ebf9334d7db030f4f026a0d53f08a62a

환경 정보

운영체제 : Windows Node.js : v16.14.0 라이브러리 : React v18.2.0

[yamoo9]

로그인 이슈

babjo@naver.com / aaaa1111 계정으로 로그인이 안될 뿐더러, 오류 메시지 또한 무엇을 다시 입력 하라는 것인지 알 수 없습니다. 😳 페이지네이션 문제를 검토하기 위해서는 로그인 이슈 해결이 필요합니다. 확인 후, 코멘트 달아 주세요.

[HYBEN09]

죄송합니다 다시 등록해놨습니다! 로그인은 아이디 : 아이디 babjo@naver.com / 비번: aaaa1111 입니다.!!

[yamoo9]

문제 분석

FoodList 컴포넌트의 filteredPosts 배열 갯수를 Recommend 컴포넌트 렌더 영역의 ReactPaginate 컴포넌트 pageCount prop에 전달되는 totalPageNum 값으로 전달해야 합니다.

문제 해결

아래는 문제가 해결된 영상입니다.

https://user-images.githubusercontent.com/1850554/231630847-7a2fbc85-b903-4007-b219-467c2de2738e.mp4

문제 해결을 위해 Recoil을 사용하는 것이 효과적이지만, 부모-자식 관계이기도 하고 코드를 크게 고치는 방법보다 최소한의 방법으로 해결하도록 안내하겠습니다.

해결 방법이 적용된 압축 파일을 첨부합니다. (src.zip) 그리고 아래 이미지에 표시된 부분을 참고합니다.

Recommend.tsx

const [totalPageNum, setTotalPageNum] = useState<number>(posts.length);

<FoodList
  posts={currentPosts}
  totalPosts={posts}
  updateFilteredPostsNum={setTotalPageNum}
/>

FoodList.tsx

interface Props {
  posts: Food[];
  totalPosts: Food[];
  updateFilteredPostsNum: Dispatch<SetStateAction<number>>;
}

export function FoodList({ posts, totalPosts, updateFilteredPostsNum }: Props) {
  // ...

  useEffect(() => {
    updateFilteredPostsNum(Math.ceil(filteredPosts.length / postsPerPage));
  }, [filteredPosts, updateFilteredPostsNum]);

  // ...
}