Feat/pagination 페이지네이션 컴포넌트

[Ko-Eunseo]

18

• [x] 페이지네이션 컴포넌트 아직 미완. < | 현재페이지 | > 형태임. 전체 페이지를 받아올 수 있을 때 수정 예정.

  사용법

  
  //1. 페이지네이션 컴포넌트는 page(현재 페이지) setPage, lastPage를 받습니다.
  const [page, setPage] = useState(1); //2. page를 상태로 관리
  const lastPage = null; //3. 총 페이지 수 혹은 총 데이터 수. 현재는 null로 처리해 둔 상태
  
  useEffect(() => {
  mutate(`api/artist/search/${keyword}`, page);
  }, [keyword, page]); //4. keyword, page가 바뀔 때마다 렌더링합니다.
  
  const { data, error, isLoading } = useSWR(
  `api/artist/search/${keyword}`,
  () => {
    return artistApi.getSearchArtists({
  name: keyword,
  page,
  size: 10,
  });
  },
  {
    revalidateOnMount: page !== 1, //5. 컴포넌트가 마운트되었을 때 자동 갱신. (page가 1이 아닐 때 갱신)
  }
  );

- [x] 키워드 검색시 검색 결과만 나오도록 수정