[최유리] sprint5

[ChoiYuRi-FS]

요구사항

기본

• PC, Tablet, Mobile 디자인에 해당하는 중고마켓 페이지를 만들어 주세요.
• 중고마켓 페이지 url path는 별도로 설정하지 않고, '/'에 보이도록 합니다.
• 상단 네비게이션 바, 푸터는 랜딩 페이지와 동일한 스타일과 규칙으로 만들어주세요.
• 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 "/products" 를 활용해주세요.
• 상품 목록 페이지네이션 기능을 구현합니다.
• 드롭 다운으로 "최신 순" 또는 "좋아요 순"을 선택해서 정렬을 구현하세요.
• 상품 목록 검색 기능을 구현합니다.
• 베스트 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 "/products"의 정렬 기준 favorite을 사용해주세요.

심화

• 커스텀 hook을 만들어 필요한 곳에 활용해 보세요.
• 반형에 따른 페이지 네이션 기능을 구현합니다.
• 반응형으로 보여지는 물품들의 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.

주요 변경사항

멘토에게

• 페이지네이션 기능을 구현 할 때 최대 페이지 수를 어떻게 구현해야 될지 모르곘습니다.
  (이해하여 구현하려고 했던 내용 : 화면에 5개씩 표현을 할 때 5/전체페이지 해서 나머지 값이 생길 때를 마지막 페이지로 인식 받아서 나머지 값인 빈 공간에 상품 준비 중 표현 후 다음페이지가 없도록 구현하라는 거 같은데 전체페이지를 API서버에서 어떤 데이터를 가지고 만들어야되는지를 모르겠습니다...
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[junguksim]

페이지네이션은 구현 방식으로 들어가기 전에 먼저 개념에 대해 이해하는 게 중요합니다.
백만개의 데이터를 한번에 불러오는 것 보다, 10개씩 N 번을 하는게 속도도 빠르고 고효율이니까 하는 거죠. ( 애초에 백만개가 다 필요하지도 않을 가능성이 높고 )

그래서 API 서버에 이미 페이지네이션 기능이 구현되어 있어서, page 와 pageSize 를 query parameter 로 주면 해당하는 갯수의 product 만 가지고 오는거죠.

그럼 클라이언트에서 구현되어야할 것은,

1. 현재 page 값을 state 로 가지고 있어야 하고,
2. pageSize 를 반응형으로 ( pc 사이즈면 4개, 태블릿이면 2개 이런식으로 )
3. 그 두 값을 통해 서버에서 해당하는 데이터만 가져와서 렌더링

만 해주면 되는 겁니다!
한 번 시도해보시면 좋겠습니다. ㅎㅎ