Merge pull request #297 from Anifriends/bug/283

fix(shelter): 봉사자 모집글 상세페이지 API 조회가 되지 않는 버그 수정

apps/shelter/src/pages/volunteers/detail/_hooks/useGetVolunteerDetail.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import {
   getRecruitmentDetail,
   RecruitmentDetailResponse,
@@ -51,25 +51,12 @@ const createRecruitmentDetail = (
 };
 
 const useGetVolunteerDetail = (recruitmentId: number) =>
-  useQuery({
+  useSuspenseQuery({
     queryKey: ['recruitment', 'detail', recruitmentId],
     queryFn: async () => {
       const response = (await getRecruitmentDetail(recruitmentId)).data;
       return createRecruitmentDetail(response);
     },
-    initialData: {
-      title: '',
-      content: '',
-      applicant: 0,
-      capacity: 0,
-      startTime: '',
-      endTime: '',
-      deadline: '',
-      createdAt: '',
-      updatedAt: '',
-      imageUrls: [],
-      isClosed: false,
-    },
   });
 
 export default useGetVolunteerDetail;

apps/shelter/src/pages/volunteers/detail/index.tsx

@@ -7,7 +7,7 @@ import {
   useDisclosure,
   VStack,
 } from '@chakra-ui/react';
-import { useEffect, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import AlertModal from 'shared/components/AlertModal';
 import ImageCarousel from 'shared/components/ImageCarousel';
@@ -28,7 +28,7 @@ const handleDeletePost = (postId: number) => {
   console.log('[Delete Volunteer] postId:', postId);
 };
 
-export default function VolunteersDetailPage() {
+function VolunteersDetail() {
   const setOnDelete = useDetailHeaderStore((state) => state.setOnDelete);
 
   useEffect(() => {
@@ -171,3 +171,11 @@ export default function VolunteersDetailPage() {
     </Box>
   );
 }
+
+export default function VolunteersDetailPage() {
+  return (
+    <Suspense fallback={<p>봉사 상세 페이지 로딩 중...</p>}>
+      <VolunteersDetail />
+    </Suspense>
+  );
+}