[FE][refactor] React-Query 로직 분리

[Palwol]

개요

react-query 로직을 컴포넌트에서 custom hook으로 분리했습니다.

작업사항

• react-query 로직 custom hook으로 분리
• query key 객체로 관리

리뷰 요청사항

query문을 queries 폴더에 custom hook으로 분리했습니다. query option들을 query hook에서 설정하되, query hook을 사용하는 컴포넌트에서 state 등을 이용한 option을 사용해야 하는 경우 hook의 파라미터로 option을 넘길 수 있도록 했습니다.

// queries.ts
export const useAutoCompleteQuery = (params: string, options?: object) => {
  return useQuery<IAutoCompletedItem[]>(
    [queryKey.AUTO_COMPLETE, params],
    () => api.getAutoComplete({ keyword: params }),
    {
      suspense: false,
      ...options,
    },
  );
};

//Search.tsx
  const { isLoading, data: autoCompletedItems } = useAutoCompleteQuery(debouncedValue, {
   // isFocused state를 option에서 사용해야 함
    enabled: !!(debouncedValue && debouncedValue.length >= 2 && isFocused),
  });

이런식으로 사용이 가능하도록 했는데, 혹시 option을 유연하게 사용할 수 있는 더 좋은 방법이 있을지 조언 부탁드립니다. 이 외에도 전반적으로 다른 좋은 리팩토링 아이디어가 있다면 조언 주시면 감사하겠습니다.