✨ NABI-387 업로드 컴포넌트 리팩토링

src/app/(root)/(routes)/(home)/components/CategorySection.tsx

@@ -21,8 +21,6 @@ const CategorySection = () => {
             className="w-8 h-8"
             alt={`category-${v.key}`}
             src={v.image}
-            quality={50}
-            sizes="32px"
             loading="eager"
           />
           <p className={` w-max ${TYPOGRAPHY.description}`}>{v.value}</p>

src/components/domain/image-uploader/ImageUploader.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import React, { useState } from 'react'
+import { useMutation } from '@tanstack/react-query'
 import { MAX_IMAGE_NUMBER } from '@/constants/image'
 import { useToast } from '@/hooks/useToast'
 import { postImageFile } from '@/services/images'
-import { isNotNull } from '@/utils/isNotNull'
 import ImageBlock from './components/ImageBlock'
 import UploadBlock from './components/UploadBlock'
 
@@ -24,29 +24,25 @@ const ImageUploader = ({
   const { toast } = useToast()
   const [images, setImages] = useState<string[]>(defaultImages)
 
-  async function uploadImages(files: FileList) {
-    const uploadPromises = Array.from(files).map(async (file) => {
-      try {
-        const res = await postImageFile(file)
-        return res.data
-      } catch (e) {
-        toast({
-          title: '이미지 업로드 실패',
-          description: '이미지 업로드에 실패했습니다. 다시 시도해주세요.',
-        })
-        return null
-      }
-    })
-
-    const uploadedImages = await Promise.all(uploadPromises)
-
-    const successfulUploads = uploadedImages
-      .filter((imageUrl) => imageUrl != null)
-      .map((imageUrl) => imageUrl)
-      .filter(isNotNull)
+  const uploadImageMutation = useMutation({
+    mutationFn: postImageFile,
+    mutationKey: ['postImage'],
+    onSuccess: (data) => {
+      setImages((currentImages) => [...currentImages, data.data])
+      onFilesChanged([...images, data.data])
+    },
+    onError: () => {
+      toast({
+        title: '이미지 업로드 실패',
+        description: '이미지 업로드에 실패했습니다. 다시 시도해주세요.',
+      })
+    },
+  })
 
-    setImages((images) => [...images, ...successfulUploads])
-    onFilesChanged([...images, ...successfulUploads])
+  const uploadImages = (files: FileList) => {
+    Array.from(files).forEach((file) => {
+      uploadImageMutation.mutate(file)
+    })
   }
 
   const onUploadHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -74,6 +70,7 @@ const ImageUploader = ({
         onUploadHandler={onUploadHandler}
         currentPhotoNumber={images.length}
         maxPhotoNumber={maxImageNumber}
+        isUploading={uploadImageMutation.isPending}
       />
       {images.map((image, index) => {
         const isThumbnail = index === 0

src/components/domain/image-uploader/components/UploadBlock.tsx

@@ -9,12 +9,14 @@ type UploadBlockType = {
   onUploadHandler: (_e: React.ChangeEvent<HTMLInputElement>) => void
   currentPhotoNumber: number
   maxPhotoNumber: number
+  isUploading: boolean
 }
 
 const UploadBlock = ({
   onUploadHandler,
   currentPhotoNumber = 0,
   maxPhotoNumber,
+  isUploading,
 }: UploadBlockType) => {
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -35,7 +37,11 @@ const UploadBlock = ({
             TYPOGRAPHY.description,
             'text-text-secondary-color',
           )}
-        >{`${currentPhotoNumber}/${maxPhotoNumber}`}</span>
+        >
+          {isUploading
+            ? `업로드 중`
+            : `${currentPhotoNumber}/${maxPhotoNumber}`}
+        </span>
       </div>
       <Input
         ref={inputRef}

src/services/images/index.ts

@@ -5,11 +5,11 @@ const postImageFile = async (file: File) => {
   const formData = new FormData()
   formData.append('file', file)
 
-  const response = await apiClient.post(
-    ApiEndPoint.postImageFile(),
-    formData,
-    {},
-  )
+  const response: Promise<{
+    code: string
+    data: string
+    messages: string
+  }> = await apiClient.post(ApiEndPoint.postImageFile(), formData, {})
 
   return response
 }