search 페이지에서 검색을 하더라도 기존 beerList filter 유지되도록 설정

[cyjo9603]

🍺 이슈 내용

• search 페이지에서 검색을 하더라도 기존 beerList filter 유지되도록 설정
• 현재는 search 페이지에서 검색을 할 경우 아래로직으로 바로 라우팅하기 때문에 기존 filter가 유지되지 않음

 router.push(`/beers?query=${encodeURI(searchText)}`).then(() => {});

📆 개발기간 산정 (subtask)

• [ ]

[hoo00nn]

@cyjo9603 아래 처럼 사용할 수 있을거 같아요~ react-query에서 데이터 fetch할 때 받을 인자는 useSearchQueryObject에서 받아서 queryKey에 넣어주고, 필터링 또는 검색값 변경될때는 setSearchQuery 함수 받아서 사용하는 방식일거 같네요. 더 좋은 방법있으면 그걸로 하셔도 ㅎㅎ

export const useSearchQuery = () => {
  const router = useRouter();
  const { pathname } = useLocation();
  const setSearchQuery = (queryObject: SiteQueryObject) => {
    router.push({
      pathname,
      search: qs.stringify(
        chain(queryObject)
          .omitBy((v) => !v)
          .value()
      ),
    });
  };

  return {
    setSearchQuery,
  };
};

export const useSearchQueryObject = () => {
  const { search } = useLocation();

  return {
    queryObject: queryString.parse(search) as SiteQueryObject,
  };
};