feat(shelter): 봉사자 모집글 수정 페이지 진입 시, 기존 이미지 리스트 보여주는 기능 추가

apps/shelter/src/mocks/browser.ts

@@ -1,6 +1,7 @@
 import { setupWorker } from 'msw/browser';
 
 import { handlers as authHandlers } from './handlers/auth';
+import { handlers as imageHandlers } from './handlers/image';
 import { handlers as manageHandlers } from './handlers/manage';
 import { handlers as recruitmentHandler } from './handlers/recruitment';
 import { handlers as recruitmentDetailHandler } from './handlers/recruitmentDetail';
@@ -9,9 +10,10 @@ import { handlers as volunteerHandlers } from './handlers/volunteers';
 
 export const worker = setupWorker(
   ...authHandlers,
-  ...shelterHandlers,
+  ...imageHandlers,
+  ...manageHandlers,
   ...recruitmentHandler,
   ...recruitmentDetailHandler,
-  ...manageHandlers,
+  ...shelterHandlers,
   ...volunteerHandlers,
 );

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

@@ -0,0 +1,14 @@
+import { delay, http, HttpResponse } from 'msw';
+
+export const handlers = [
+  http.post('/images', async () => {
+    await delay(200);
+
+    return HttpResponse.json(
+      {
+        imageUrls: ['https://source.unsplash.com/random'],
+      },
+      { status: 200 },
+    );
+  }),
+];

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

@@ -4,7 +4,23 @@ import {
   RecruitmentDetailResponse,
 } from 'shared/apis/common/Recruitments';
 
-const createRecruitmentDetail = (recruitment: RecruitmentDetailResponse) => {
+export type RecruitmentDetail = {
+  title: string;
+  content: string;
+  applicant: number;
+  capacity: number;
+  startTime: string;
+  endTime: string;
+  deadline: string;
+  createdAt: string;
+  updatedAt: string;
+  imageUrls: string[];
+  isClosed: boolean;
+};
+
+const createRecruitmentDetail = (
+  recruitment: RecruitmentDetailResponse,
+): RecruitmentDetail => {
   const {
     recruitmentTitle: title,
     recruitmentContent: content,

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

@@ -13,7 +13,7 @@ import {
 } from '@chakra-ui/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
 import EditPhotoList from 'shared/components/EditPhotoList';
@@ -23,7 +23,9 @@ import * as z from 'zod';
 import { updateShelterRecruitment } from '@/apis/recruitment';
 import type { RecruitmentUpdateRequest } from '@/types/apis/recruitment';
 
-import useGetVolunteerDetail from '../detail/_hooks/useGetVolunteerDetail';
+import useGetVolunteerDetail, {
+  RecruitmentDetail,
+} from '../detail/_hooks/useGetVolunteerDetail';
 
 const recruitmentSchema = z
   .object({
@@ -74,7 +76,7 @@ export default function VolunteersUpdatePage() {
   } = useForm<RecruitmentSchema>({
     resolver: zodResolver(recruitmentSchema),
   });
-  const { photos, handleUploadPhoto, handleDeletePhoto } =
+  const { photos, setImageUrls, handleUploadPhoto, handleDeletePhoto } =
     useUploadPhoto(UPLOAD_LIMIT);
 
   const contentLength = watch('content')?.length ?? 0;
@@ -118,15 +120,23 @@ export default function VolunteersUpdatePage() {
     });
   };
 
+  const setVolunteersRecruitmentFormvalues = useCallback(
+    (recruitment: RecruitmentDetail) => {
+      setValue('title', recruitment.title);
+      setValue('startTime', new Date(recruitment.startTime));
+      setValue('endTime', new Date(recruitment.endTime));
+      setValue('deadline', new Date(recruitment.deadline));
+      setValue('capacity', recruitment.capacity);
+      setValue('content', recruitment?.content ?? '');
+      setImageUrls(recruitment.imageUrls);
+    },
+    [],
+  );
+
   useEffect(() => {
-    setValue('title', recruitment.title);
-    setValue('startTime', new Date(recruitment.startTime));
-    setValue('endTime', new Date(recruitment.endTime));
-    setValue('deadline', new Date(recruitment.deadline));
-    setValue('capacity', recruitment.capacity);
-    setValue('content', recruitment?.content ?? '');
     setFocus('title');
-  }, [recruitment, setFocus, setValue]);
+    setVolunteersRecruitmentFormvalues(recruitment);
+  }, [recruitment, setVolunteersRecruitmentFormvalues, setFocus]);
 
   if (isRecruitFetchLoading) {
     return <p>...로딩중</p>;