From 83194c353886b61b1318c9494575c2cc9962f024 Mon Sep 17 00:00:00 2001
From: oaoong <pizzachicken@kakao.com>
Date: Mon, 1 Jan 2024 14:45:18 +0900
Subject: [PATCH] =?UTF-8?q?:sparkles:=20NABI-387=20=EC=97=85=EB=A1=9C?=
 =?UTF-8?q?=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(home)/components/CategorySection.tsx     |  2 -
 .../domain/image-uploader/ImageUploader.tsx   | 43 +++++++++----------
 .../image-uploader/components/UploadBlock.tsx |  8 +++-
 src/services/images/index.ts                  | 10 ++---
 4 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/app/(root)/(routes)/(home)/components/CategorySection.tsx b/src/app/(root)/(routes)/(home)/components/CategorySection.tsx
index b2884bf0..85adcd7d 100644
--- a/src/app/(root)/(routes)/(home)/components/CategorySection.tsx
+++ b/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>
diff --git a/src/components/domain/image-uploader/ImageUploader.tsx b/src/components/domain/image-uploader/ImageUploader.tsx
index b4df1041..33d40283 100644
--- a/src/components/domain/image-uploader/ImageUploader.tsx
+++ b/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
diff --git a/src/components/domain/image-uploader/components/UploadBlock.tsx b/src/components/domain/image-uploader/components/UploadBlock.tsx
index e6aebc65..e6851de6 100644
--- a/src/components/domain/image-uploader/components/UploadBlock.tsx
+++ b/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}
diff --git a/src/services/images/index.ts b/src/services/images/index.ts
index cd6729b5..3cb2c30a 100644
--- a/src/services/images/index.ts
+++ b/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
 }