feat: 봉사자앱의 봉사모집상세조회 msw 연결 (#168)

* feat(shared): 봉사모집상세조회 api response에 shelterId 추가

* feat(volunteer): 봉사모집상세조회 fetch useQuery 추가

* feat(volunteer): 봉사모집상세조회 mock api 추가

* feat(volunteer): 보호소 간단 정보 조회 mock api 추가

* feat(volunteer): 봉사모집상세조회 msw 연결

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

@@ -49,6 +49,7 @@ const useGetVolunteerDetail = (recruitmentId: number) => {
       recruitmentCreatedAt: '',
       recruitmentUpdatedAt: '',
       recruitmentImageUrls: [],
+      shelterId: 0,
     },
   });
 };

apps/volunteer/src/mocks/browser.ts

@@ -2,6 +2,12 @@ import { setupWorker } from 'msw/browser';
 
 import { handlers as authHandlers } from './handlers/auth';
 import { handlers as recruitmentHandler } from './handlers/recruitment';
+import { handlers as shelterHandler } from './handlers/shelter';
 import { handlers as volunteerHandlers } from './handlers/volunteer';
 
-export const worker = setupWorker(...authHandlers, ...recruitmentHandler, ...volunteerHandlers );
+export const worker = setupWorker(
+  ...authHandlers,
+  ...recruitmentHandler,
+  ...shelterHandler,
+  ...volunteerHandlers,
+);

apps/volunteer/src/mocks/handlers/recruitment.ts

@@ -31,4 +31,27 @@ export const handlers = [
       { status: 200 },
     );
   }),
+  http.get('/recruitments/:id', async () => {
+    await delay(200);
+    return HttpResponse.json(
+      {
+        recruitmentTitle: '강아지봉사자를 모집합니다.',
+        recruitmentApplicantCount: 5,
+        recruitmentCapacity: 10,
+        recruitmentContent: '가짜 데이터 내용입니다!!! '.repeat(50),
+        recruitmentStartTime: '2023-12-17T14:00:00',
+        recruitmentEndTime: '2023-12-17T16:00:00',
+        recruitmentIsClosed: false,
+        recruitmentDeadline: '2023-12-18T18:00:00',
+        recruitmentCreatedAt: '2023-12-15T14:00:00',
+        recruitmentUpdatedAt: '2023-12-15T14:00:00',
+        recruitmentImageUrls: [
+          'https://source.unsplash.com/random/?person',
+          'https://source.unsplash.com/random/300X500',
+        ],
+        shelterId: 3,
+      },
+      { status: 200 },
+    );
+  }),
 ];

apps/volunteer/src/mocks/handlers/shelter.ts

@@ -0,0 +1,16 @@
+import { delay, http, HttpResponse } from 'msw';
+
+export const handlers = [
+  http.get('/shelters/:shelterId/profile/simple', async () => {
+    await delay(200);
+    return HttpResponse.json(
+      {
+        shelterName: '양천구 보호소',
+        shelterImageUrl: 'https://source.unsplash.com/random/?person',
+        shelterAddress: '서울특별시 양천구',
+        shelterEmail: '[email protected]',
+      },
+      { status: 200 },
+    );
+  }),
+];

apps/volunteer/src/pages/volunteers/detail/_hooks/useFetchVolunteerDetail.ts

@@ -0,0 +1,74 @@
+import { useQuery } from '@tanstack/react-query';
+import { getRecruitmentDetail } from 'shared/apis/common/Recruitments';
+import {
+  createFormattedTime,
+  createWeekDayLocalString,
+} from 'shared/utils/date';
+
+import { getSimpleShelterProfile } from '@/apis/shelter';
+
+const useFetchVolunteerDetail = (recruitmentId: number) =>
+  useQuery({
+    queryKey: ['volunteer', recruitmentId],
+    queryFn: async () => {
+      const { shelterId, ...recruitmentInfo } = (
+        await getRecruitmentDetail(recruitmentId)
+      ).data;
+      const shelterSimpleInfo = (await getSimpleShelterProfile(shelterId)).data;
+
+      return {
+        ...recruitmentInfo,
+        shelterInfo: { shelterId, ...shelterSimpleInfo },
+      };
+    },
+    select: (data) => {
+      const startDate = new Date(data.recruitmentStartTime);
+      const endDate = new Date(data.recruitmentEndTime);
+      const deadLine = new Date(data.recruitmentDeadline);
+
+      return {
+        imageUrls: data.recruitmentImageUrls,
+        title: data.recruitmentTitle,
+        content: data.recruitmentContent,
+        applicant: data.recruitmentApplicantCount,
+        capacity: data.recruitmentCapacity,
+        volunteerDay: `${createFormattedTime(
+          startDate,
+        )}(${createWeekDayLocalString(startDate)})`,
+        recruitmentDeadline: `${createFormattedTime(
+          deadLine,
+        )}(${createWeekDayLocalString(deadLine)}) ${createFormattedTime(
+          deadLine,
+          'hh:mm',
+        )}`,
+        volunteerStartTime: createFormattedTime(startDate, 'hh:mm'),
+        volunteerEndTime: createFormattedTime(endDate, 'hh:mm'),
+        recruitmentCreatedAt: createFormattedTime(
+          new Date(data.recruitmentCreatedAt),
+        ),
+        recruitmentIsClosed: data.recruitmentIsClosed,
+        shelterInfo: data.shelterInfo,
+      };
+    },
+    initialData: {
+      recruitmentTitle: '',
+      recruitmentApplicantCount: 0,
+      recruitmentCapacity: 0,
+      recruitmentContent: '',
+      recruitmentStartTime: '',
+      recruitmentEndTime: '',
+      recruitmentIsClosed: false,
+      recruitmentDeadline: '',
+      recruitmentCreatedAt: '',
+      recruitmentUpdatedAt: '',
+      recruitmentImageUrls: [],
+      shelterInfo: {
+        shelterId: 0,
+        shelterName: '',
+        shelterImageUrl: '',
+        shelterAddress: '',
+        shelterEmail: '',
+      },
+    },
+  });
+export default useFetchVolunteerDetail;

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

@@ -17,38 +17,20 @@ import LabelText from 'shared/components/LabelText';
 import ProfileInfo from 'shared/components/ProfileInfo';
 import { getDDay } from 'shared/utils/date';
 
-const DUMMY_DATA = {
-  imageUrls: [
-    'https://source.unsplash.com/random/?animal',
-    'https://source.unsplash.com/random/300X500',
-  ],
-  title: '강아지 봉사자를 모집합니다',
-  content: '강아지 목욕봉사입니다.',
-  applicant: 5,
-  capacity: 10,
-  volunteerDay: '2023.12.24',
-  recruitmentDeadline: '2023.12.03',
-  volunteerStartTime: '14:00',
-  volunteerEndTime: '16:00',
-  recruitmentCreatedAt: '2023.11.25',
-  recruitmentIsClosed: true,
-};
-
-const DUMMY_SHELTERINFO = {
-  name: '양천구 보호소',
-  profileImage: 'https://source.unsplash.com/random/?animal',
-  address: '경기도 남양주시',
-  email: '[email protected]',
-};
+import useFetchVolunteerDetail from './_hooks/useFetchVolunteerDetail';
 
 export default function VolunteersDetailPage() {
   const navigate = useNavigate();
-  const { id: recruitmentId } = useParams();
+  const { id } = useParams();
+  const recruitmentId = Number(id);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [label, setLabel] = useState<LabelProps>({
     labelTitle: '모집중',
     type: 'GREEN',
   });
+
+  const { data } = useFetchVolunteerDetail(3);
+
   const {
     imageUrls,
     title,
@@ -61,9 +43,10 @@ export default function VolunteersDetailPage() {
     volunteerEndTime,
     recruitmentCreatedAt,
     recruitmentIsClosed,
-  } = DUMMY_DATA;
-
-  const { name, profileImage, address, email } = DUMMY_SHELTERINFO;
+    shelterInfo,
+  } = data;
+  const { shelterName, shelterImageUrl, shelterAddress, shelterEmail } =
+    shelterInfo;
 
   useEffect(() => {
     if (recruitmentIsClosed) {
@@ -78,6 +61,7 @@ export default function VolunteersDetailPage() {
 
   const onApplyRecruitment = () => {
     onClose();
+    //TODO 봉사신청 API
     //TODO 봉사신청완료 toast
   };
 
@@ -115,9 +99,9 @@ export default function VolunteersDetailPage() {
       </Text>
       <Divider />
       <ProfileInfo
-        infoImage={profileImage}
-        infoTitle={name}
-        infoTexts={[email, address]}
+        infoImage={shelterImageUrl}
+        infoTitle={shelterName}
+        infoTexts={[shelterEmail, shelterAddress]}
       />
       <Divider />
 

packages/shared/apis/common/Recruitments.ts

@@ -12,6 +12,7 @@ type RecruitmentDetailResponse = {
   recruitmentCreatedAt: string;
   recruitmentUpdatedAt: string;
   recruitmentImageUrls: string[];
+  shelterId: number;
 };
 
 export const getRecruitmentDetail = (recruitmentId: number) =>