Refactor: 포켓몬 전체 데이터를 불러오는 로직 변경

src/components/cardMaker/CardEditPage.tsx

@@ -10,12 +10,14 @@ import Inner from '../Inner';
 import { addDocument, getCountDocument } from '@/lib/firebaseQuery';
 import useUserStore from '@/store/useUsersStore';
 import { MouseEvent, useState } from 'react';
-import { filteredPokemonData } from '@/lib/type';
-import { useGetAllPokemon } from '@/query/qeuries';
+import { PokemonType, filteredPokemonData } from '@/lib/type';
+import { usePokemonQueries } from '@/query/qeuries';
 import SearchPokemon from './searchPokemon/SearchPokemon';
 import { useEffect } from 'react';
 import SelectPokemonMobile from './selectPokemon/SelectPokemonMobile';
 import { useRouter } from 'next/navigation';
+import { UseQueryResult } from 'react-query';
+import useFlatData from '@/hook/useFlatData';
 
 const CardEditPage = () => {
   const [isSaving, setIsSaving] = useState<boolean>(false);
@@ -28,7 +30,8 @@ const CardEditPage = () => {
     setPokemonData,
     pokemonName,
   } = useSelectedPokemonForCard();
-  const { data } = useGetAllPokemon(1017);
+  const queries = usePokemonQueries(1017);
+  const data = useFlatData(queries as UseQueryResult<PokemonType>[]);
   const filteredPokemonData = {} as filteredPokemonData;
 
   useEffect(() => {

src/components/cardMaker/searchPokemon/SearchPokemon.tsx

@@ -3,10 +3,12 @@ import styles from './search.module.scss';
 import { POKEMON_NAME } from '@/lib/pokemonName';
 import { reverseObject } from '@/lib/util/reverseObject';
 import { POKEMON_TYPES } from '@/lib/constants';
-import { useGetAllPokemon } from '@/query/qeuries';
+import { usePokemonQueries } from '@/query/qeuries';
 import { IoSearch } from '@react-icons/all-files/io5/IoSearch';
 import { PokemonType, TypesType } from '@/lib/type';
 import SearchDropdown from './SearchDropdown';
+import useFlatData from '@/hook/useFlatData';
+import { UseQueryResult } from 'react-query';
 
 const SearchPokemon = () => {
   const [text, setText] = useState<string>('');
@@ -15,7 +17,8 @@ const SearchPokemon = () => {
   const [foundPokemon, setFoundPokemon] = useState<
     (PokemonType | undefined)[] | null
   >(null);
-  const { data } = useGetAllPokemon(1017);
+  const queries = usePokemonQueries(1017);
+  const data = useFlatData(queries as UseQueryResult<PokemonType>[]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {

src/components/cardMaker/selectPokemon/SelectPokemonRandom.tsx

@@ -1,12 +1,15 @@
 import { PokemonType } from '@/lib/type';
-import { useGetAllPokemon } from '@/query/qeuries';
+import { usePokemonQueries } from '@/query/qeuries';
 import { useCallback, useEffect, useState } from 'react';
 import SelectPokemonLayout from './SelectPokemonLayout';
 import styles from './select.module.scss';
 import useCalculateInnerWidth from '@/hook/useCalculateInnerWidth';
+import useFlatData from '@/hook/useFlatData';
+import { UseQueryResult } from 'react-query';
 
 const SelectPokemonRandom = () => {
-  const { data } = useGetAllPokemon(1017);
+  const queries = usePokemonQueries(1017);
+  const data = useFlatData(queries as UseQueryResult<PokemonType>[]);
   const [randomPokemons, setRandomPokemons] = useState<PokemonType[]>([]);
   const windowWidth = useCalculateInnerWidth();
   let POKEMONS_PER_PAGE = 3;

src/hook/useFilteredPokemonData.ts

@@ -3,20 +3,22 @@ import { POKEMON_NAME } from '@/lib/pokemonName';
 import { PokemonType, TypesType } from '@/lib/type';
 import { reverseObject } from '@/lib/util/reverseObject';
 import { useMemo } from 'react';
-import { useGetAllPokemon } from '@/query/qeuries';
+import { usePokemonQueries } from '@/query/qeuries';
 import useSelectedStore from '@/store/useSelectedStore';
 import useSearchInputText from '@/store/useSearchInputText';
+import useFlatData from './useFlatData';
+import { UseQueryResult } from 'react-query';
 
 const useFilteredPokemonData = () => {
-  const { data: allPokemonData, isLoading } = useGetAllPokemon(1017);
+  const queries = usePokemonQueries(1017);
+  const allData = useFlatData(queries as UseQueryResult<PokemonType>[]);
   const { selectedPlate } = useSelectedStore();
   const { inputText } = useSearchInputText();
   const reversedPokemonNameObject = reverseObject(POKEMON_NAME);
 
   const filteredData = useMemo(() => {
-    if (!allPokemonData) return [];
-
-    return allPokemonData.filter((data: PokemonType) => {
+    if (!allData.length) return [];
+    return allData.filter((data: PokemonType) => {
       if (inputText) {
         return reversedPokemonNameObject[data?.name]?.includes(inputText);
       }
@@ -30,8 +32,9 @@ const useFilteredPokemonData = () => {
         ),
       );
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allPokemonData, inputText, selectedPlate]);
+  }, [allData, inputText, selectedPlate]);
+
+  const isLoading = !allData.length;
 
   return { filteredData, isLoading };
 };