[Feature] - 프로필 이미지 수정 기능 및 여행기 등록 시 여행 장소마다 국가 코드 주도록 구현

frontend/src/components/pages/travelogueRegister/TravelogueMultiImageUpload/hooks/useMultiImageUpload.ts

@@ -7,8 +7,6 @@ import { MAX_IMAGE_UPLOAD_COUNT } from "@components/pages/travelogueRegister/Tra
 
 import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
 
-import resizeAndConvertImage from "@utils/resizeAndConvertImage";
-
 interface ImageState {
   url: string;
   isLoading: boolean;
@@ -88,12 +86,9 @@ export const useTravelogueMultiImageUpload = ({
     try {
       addLoadingImageStates(files);
 
-      const processedFiles = await Promise.all(files.map((file) => resizeAndConvertImage(file)));
-
-      const newImageUrls = await mutateAddImage(processedFiles);
+      const newImageUrls = await mutateAddImage(files);
       handleUploadSuccess(newImageUrls);
-    } catch (error) {
-      if (error instanceof Error) alert(error.message);
+    } catch {
       revertImageStates(files.length);
     } finally {
       resetFileInput();

frontend/src/hooks/pages/useTravelogueFormState/useTravelogueThumbnail.ts

@@ -2,25 +2,16 @@ import { useCallback, useState } from "react";
 
 import { usePostUploadImages } from "@queries/usePostUploadImages";
 
-import resizeAndConvertImage from "@utils/resizeAndConvertImage";
-
 const useTravelogueThumbnail = () => {
   const { mutateAsync: mutateAddImage } = usePostUploadImages();
 
   const [thumbnail, setThumbnail] = useState("");
 
   const handleChangeThumbnail = async (files: FileList | null) => {
-    try {
-      const newFiles = Array.from(files as FileList);
-      const processedFiles = await Promise.all(newFiles.map((file) => resizeAndConvertImage(file)));
-      const thumbnail = await mutateAddImage(processedFiles);
-
-      setThumbnail(thumbnail[0]);
-    } catch (error) {
-      if (error instanceof Error) {
-        alert(error.message);
-      }
-    }
+    const newFiles = Array.from(files as FileList);
+    const thumbnail = await mutateAddImage(newFiles);
+
+    setThumbnail(thumbnail[0]);
   };
 
   const handleInitializeThumbnail = useCallback((thumbnailUrl: string) => {

frontend/src/queries/usePostUploadImages.ts

@@ -10,13 +10,16 @@ import { authClient } from "@apis/client";
 import { API_ENDPOINT_MAP } from "@constants/endpoint";
 import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
 
+import resizeAndConvertImage from "@utils/resizeAndConvertImage";
+
 export const usePostUploadImages = () => {
   const { isPaused, ...rest } = useMutation<string[], ApiError | AxiosError<ErrorResponse>, File[]>(
     {
       mutationFn: async (files: File[]) => {
+        const processedFiles = await Promise.all(files.map((file) => resizeAndConvertImage(file)));
         const formData = new FormData();
 
-        files.forEach((file) => {
+        processedFiles.forEach((file) => {
           formData.append("files", file);
         });
 
@@ -28,6 +31,9 @@ export const usePostUploadImages = () => {
 
         return response.data;
       },
+      onError: (error) => {
+        alert(error.message);
+      },
     },
   );