AuthPage.tsx

login 페이지

SearchPage.tsx

1. 안쓰는 코드 지우기, 무분별한 state 사용 줄이기
2. get API useQuery 로 변경하기
3. typescript 로 코드 변경

하위 컴포넌트 :

useQuery

useEffect(() => {
    onGetBooks(bookName);
  }, [bookName, page]);

//책 불러오는 api
const onGetBooks = async (query) => {
  const params = {
    query: query,
    page: page,
    size: limit,
  };
  setLoading(true);
  const resultData = await bookSearch(params);
  setBooks(resultData.data.documents);
  if (resultData.data.documents)
    setEndPage(Math.ceil(resultData.data.meta.pageable_count / limit));
  setLoading(false);
};

useEffect 를 통해 책의 이름과 page 가 변경되면 api 를 호출해오는 식으로 만들었다. bookSearch 는 별도의 파일에서 아래처럼 관리중.

//search book api
export const bookSearch = (params) => {
  return Kakao.get("/v3/search/book", { params });
};