fix: reject, pending 폴백 수정 및 suspenseQuery 에서 query 로 수정

src/components/searchPlant/SearchedPlantList.tsx

@@ -11,23 +11,22 @@ import HeightBox from '@/components/common/HeightBox';
 import PlusGreen from '@/assets/icon/PlusGreen.svg';
 import CenterBottomSheet from '@/components/common/CenterBottomSheet';
 import TextFieldV2 from '@/components/common/TextFieldV2';
+import ListSkeleton from '@/components/common/Skeleton/ListSkeleton.tsx';
 
 interface SearchedPlantListProps {
   query: string;
   onClose: () => void;
 }
 
 const SearchedPlantList = ({ query, onClose }: SearchedPlantListProps) => {
-  const response = useSearchPlant(query);
+  const { data, isLoading } = useSearchPlant(query);
   const { setPlantType, plantType } = usePlantTypeSearchParams();
   const { openToast } = useToast();
 
   const [customPlant, setCustomPlant] = useState('');
 
   const [open, setOpen] = useState(false);
 
-  const data = response.data;
-
   const onClick = (name: string, id?: number) => {
     setPlantType(name, id);
     onClose();
@@ -46,11 +45,15 @@ const SearchedPlantList = ({ query, onClose }: SearchedPlantListProps) => {
     });
   };
 
-  let content: JSX.Element | JSX.Element[] | null;
+  if (isLoading) {
+    return <ListSkeleton />;
+  }
+
+  let content: JSX.Element | JSX.Element[] | null | undefined;
 
   if (query === '') {
     content = null;
-  } else if (response.data.length === 0) {
+  } else if (data?.length === 0) {
     content = (
       <div className="mt-[80px] flex flex-col items-center w-full">
         <EmptyListIcon />
@@ -95,7 +98,7 @@ const SearchedPlantList = ({ query, onClose }: SearchedPlantListProps) => {
       </div>
     );
   } else {
-    content = data.map((plant) => (
+    content = data?.map((plant) => (
       <List
         name={plant.name}
         image={plant.imageUrl}

src/pages/SearchPlantPage.tsx

@@ -6,9 +6,6 @@ import HeightBox from '@/components/common/HeightBox';
 import { useCallback, useState } from 'react';
 import SearchedPlantList from '@/components/searchPlant/SearchedPlantList.tsx';
 import { debounce } from 'es-toolkit';
-import { AsyncBoundary } from '@toss/async-boundary';
-import ListSkeleton from '@/components/common/Skeleton/ListSkeleton.tsx';
-import CTAButton from '@/components/common/CTAButton';
 
 interface SearchPlantPageProps {
   onClose: () => void;
@@ -33,24 +30,7 @@ const SearchPlantPage = ({ onClose }: SearchPlantPageProps) => {
       <HeightBox height={30} />
       <SearchField placeholder={'검색'} onSearch={debouncedSetQuery} />
       <HeightBox height={30} />
-      <AsyncBoundary
-        pendingFallback={<ListSkeleton />}
-        rejectedFallback={({ error, reset }) => (
-          <div className={'flex flex-col items-center'}>
-            <p className={'text-small-title font-semibold text-center text-Gray900'}>
-              에러가 발생했어요!
-            </p>
-            <p className={'pt-4 text-center text-regular-body text-Gray500'}>{error.message}</p>
-            <CTAButton
-              text={'다시시도'}
-              className={'bg-BloomingGreen500 w-fit mt-8'}
-              onClick={() => reset()}
-            />
-          </div>
-        )}
-      >
-        <SearchedPlantList query={query} onClose={onClose} />
-      </AsyncBoundary>
+      <SearchedPlantList query={query} onClose={onClose} />
     </Screen>
   );
 };

src/queries/useSearchPlant.ts

@@ -1,9 +1,11 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { keyStore } from '@/queries/keyStore.ts';
 import { searchPlant } from '@/apis/plantGuide/searchPlant.ts';
 
 export const useSearchPlant = (query: string) =>
-  useSuspenseQuery({
+  useQuery({
     queryKey: keyStore.plantGuide.searchPlant(query).queryKey,
     queryFn: async () => await searchPlant(query),
+    retry: false,
+    refetchInterval: false,
   });