Merge pull request #201 from Step3-kakao-tech-campus/feat/#171

보호소에서 데이터 못 불러오는 문제 해결

src/commons/modals/CategoryModal.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { useRecoilState } from 'recoil';
 import regionState, { RegionType } from 'recoil/regionState';
 import speciesState, { SpeciesType } from 'recoil/speciesState';

src/pages/shelterInfo/ShelterInfoPage.tsx

@@ -1,10 +1,14 @@
+import { Suspense } from 'react';
 import ErrorBoundary from 'layouts/ErrorBoundary';
 import ShelterInfo from './components/ShelterInfo';
+import ShelterInfoSkeleton from './components/ShelterInfoSkeleton';
 
 const ShelterInfoPage = () => {
   return (
     <ErrorBoundary>
-      <ShelterInfo />
+      <Suspense fallback={<ShelterInfoSkeleton />}>
+        <ShelterInfo />
+      </Suspense>
     </ErrorBoundary>
   );
 };

src/pages/shelterInfo/components/ShelterInfo.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import useFetch from 'commons/apis/useFetch';
 import VShelterInfo from './VShelterInfo';
-import ShelterInfoSkeleton from './ShelterInfoSkeleton';
 import { ShelterInfoPageProps } from '../shelterInfoType';
 
 const ShelterInfo = () => {
@@ -17,6 +16,8 @@ const ShelterInfo = () => {
   const { data, isLoading, isError } = useQuery({
     queryKey: ['page', currentPage],
     queryFn: () => useFetch(`/shelter/${shelterId}?page=${currentPage}`),
+    suspense: true,
+    refetchOnMount: true,
   });
 
   useEffect(() => {
@@ -49,10 +50,6 @@ const ShelterInfo = () => {
     }
   }, [data, isLoading, isError]);
 
-  if (isLoading) {
-    return <ShelterInfoSkeleton />;
-  }
-
   if (isError) {
     return <div>Error: {isError}</div>;
   }