feat: record patch api연동

packages/react-native/src/apis/mutations/useRecordMutation.ts

@@ -2,7 +2,6 @@ import { useRef } from 'react';
 import { Asset } from 'react-native-image-picker';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { City, Region } from '@/constants/CITY';
-import { CitySelectValue } from '@/components/common/CitySelect';
 import useAuthAxios from '../useAuthAxios';
 import { KoreaLocationName } from '@/types/map';
 import QUERY_KEYS from '@/constants/QUERY_KEYS';
@@ -21,11 +20,15 @@ interface PostRecordRequest {
 }
 
 interface PatchRecordRequest {
-  name?: string;
-  description?: string;
-  region: Region;
-  city?: CitySelectValue;
-  image?: string[];
+  id: number;
+  record: {
+    name?: string;
+    description?: string;
+    region: Region;
+    city?: City;
+  };
+  addImages?: Asset[];
+  deleteImages?: string[];
 }
 
 interface DeleteRecordRequest {
@@ -81,7 +84,25 @@ export default function useRecordMutation({
 
   const { mutateAsync: patchMutate, isPending: isPatchPending } = useMutation({
     mutationFn: async (requestParams: PatchRecordRequest) => {
-      return requestParams;
+      const customForm = new CustomForm();
+
+      customForm.append('title', requestParams.record.name);
+      customForm.append('description', requestParams.record.description);
+      customForm.append('deleteImages', requestParams.deleteImages);
+
+      requestParams.addImages?.forEach((image) => {
+        customForm.appendImage('addImages', image);
+      });
+
+      await authAxios.patch(
+        `/api/record/${requestParams.id}`,
+        customForm.getForm(),
+        {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        },
+      );
     },
     onSuccess: invalidateRecords,
   });

packages/react-native/src/components/maps/RecordModifyForm.tsx

@@ -1,29 +1,50 @@
+import { useState } from 'react';
 import { View } from 'react-native';
 import { Button, Font } from 'design-system';
+import { Asset } from 'react-native-image-picker';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import RecordFormDescription from '@/components/maps/RecordFormDescription';
 import RecordFormTitle from '@/components/maps/RecordFormTitle';
 import useRecordFormState from '@/hooks/useRecordFormState';
 import useRecordMutation from '@/apis/mutations/useRecordMutation';
 import { StackNavigation, StackRouteProps } from '@/types/navigation';
-import RecordFormImages from './RecordFormImages';
 import useGallery from '@/hooks/useGallery';
 import RecordFormCitySelect from './RecordFormCitySelect';
 import { REGION_MAPPER } from '@/constants/CITY';
+import ImageSelect from '../common/ImageSelect';
 
-export default function RecordModifyForm() {
-  const { validate, title, description, images, resetImages, selectedCity } =
-    useRecordFormState();
+interface RecordModifyFormProps {
+  id: number;
+}
+
+export default function RecordModifyForm({ id }: RecordModifyFormProps) {
+  const {
+    validate,
+    title,
+    description,
+    images,
+    resetImages,
+    selectedCity,
+    removeImages,
+  } = useRecordFormState();
   const { getPhoto } = useGallery();
   const { params } = useRoute<StackRouteProps<'Maps/ModifyRecord'>>();
   const navigate = useNavigation<StackNavigation<'Maps/ModifyRecord'>>();
   const { patchMutate } = useRecordMutation({ location: params.location });
+  const [deleteImages, setDeleteImage] = useState<string[]>([]);
+  const [addImages, setAddImages] = useState<Asset[]>();
 
   const handlePressAddPhoto = async () => {
     const photos = await getPhoto({
       selectionLimit: 10,
+      fullObject: true,
     });
-    if (photos && Array.isArray(photos)) resetImages(photos);
+
+    if (photos && Array.isArray(photos)) {
+      const photoUris = photos.map((photo) => photo.uri) as string[];
+      resetImages([...images, ...photoUris]);
+      setAddImages([...photos]);
+    }
   };
 
   const handlePress = async () => {
@@ -32,11 +53,15 @@ export default function RecordModifyForm() {
     }
 
     await patchMutate({
-      name: title,
-      description,
-      image: images,
-      city: selectedCity,
-      region: REGION_MAPPER[params.location],
+      id,
+      record: {
+        name: title,
+        description,
+        city: selectedCity?.value,
+        region: REGION_MAPPER[params.location],
+      },
+      addImages,
+      deleteImages,
     });
 
     navigate.navigate('Maps/Record', {
@@ -56,7 +81,14 @@ export default function RecordModifyForm() {
         </View>
 
         <View>
-          <RecordFormImages handlePressAddPhoto={handlePressAddPhoto} />
+          <ImageSelect
+            image={images}
+            handlePressAddPhoto={handlePressAddPhoto}
+            onDelete={(image: string) => {
+              removeImages(image);
+              setDeleteImage((prev) => [...prev, image]);
+            }}
+          />
         </View>
 
         <View>

packages/react-native/src/components/maps/RecordPostForm.tsx

@@ -11,13 +11,21 @@ import useRecordFormState from '@/hooks/useRecordFormState';
 import useGallery from '@/hooks/useGallery';
 import useRecordMutation from '@/apis/mutations/useRecordMutation';
 import RecordFormDescription from './RecordFormDescription';
-import RecordFormImages from './RecordFormImages';
 import RecordFormCitySelect from './RecordFormCitySelect';
 import { REGION_MAPPER } from '@/constants/CITY';
+import ImageSelect from '../common/ImageSelect';
 
 export default function RecordPostForm() {
-  const { description, title, validate, resetImages, selectedCity, date } =
-    useRecordFormState();
+  const {
+    description,
+    title,
+    validate,
+    resetImages,
+    selectedCity,
+    date,
+    images,
+    removeImages,
+  } = useRecordFormState();
 
   const { params } = useRoute<StackRouteProps<'Maps/PostRecord'>>();
   const navigate = useNavigation<StackNavigation<'Maps/Record'>>();
@@ -93,7 +101,16 @@ export default function RecordPostForm() {
         </View>
 
         <View>
-          <RecordFormImages handlePressAddPhoto={handlePressAddPhoto} />
+          <ImageSelect
+            image={images}
+            handlePressAddPhoto={handlePressAddPhoto}
+            onDelete={(image: string) => {
+              removeImages(image);
+              setImageAssets((prev) =>
+                prev?.filter((asset) => asset.uri !== image),
+              );
+            }}
+          />
         </View>
         <View>
           <RecordFormDescription />

packages/react-native/src/hooks/useRecordFormState.tsx

@@ -2,6 +2,7 @@ import { createContext, ReactNode, useContext, useMemo, useState } from 'react';
 import { RecordGetResponse } from '@/apis/queries/records/useRecordDetailQuery';
 import { CitySelectValue } from '@/components/common/CitySelect';
 import { DateSelectProps } from '@/components/common/DateSelect';
+import { getDisplayRegion } from '@/utils/getDisplayRegionName';
 
 type RecordFormContextState = DateSelectProps & {
   title: string;
@@ -32,7 +33,19 @@ export function RecordFormProvider({
   const [description, setDescription] = useState(
     defaultProps?.description || '',
   );
-  const [selectedCity, setSelectedCity] = useState<CitySelectValue>();
+  const [selectedCity, setSelectedCity] = useState<CitySelectValue | undefined>(
+    defaultProps
+      ? {
+          value: defaultProps?.city,
+          label:
+            getDisplayRegion({
+              locationEnum: defaultProps.region,
+              cityEnum: defaultProps.city,
+              onlyCity: true,
+            }) || '',
+        }
+      : undefined,
+  );
 
   const [images, setImages] = useState<string[]>(defaultProps?.images || []);
 

packages/react-native/src/pages/Maps/ModifyRecord.tsx

@@ -17,7 +17,7 @@ export default withSuspense(function ModifyLog() {
     <BackGroundGradient>
       <Header title="로그 수정" />
       <RecordFormProvider defaultProps={recordDetail}>
-        <RecordModifyForm />
+        <RecordModifyForm id={route.params.recordId} />
       </RecordFormProvider>
     </BackGroundGradient>
   );