From ad956a22dcfde2fbf6074b0858a506b6b05d3e36 Mon Sep 17 00:00:00 2001
From: seojisoosoo <76681519+seojisoosoo@users.noreply.github.com>
Date: Wed, 18 Dec 2024 00:14:29 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=BB=A4=EB=AE=A4=EB=8B=88?=
 =?UTF-8?q?=ED=8B=B0=20=EA=B8=80=EC=93=B0=EA=B8=B0=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EB=94=94=EB=B0=94=EC=9A=B4=EC=8B=B1=20(#1704)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useImageUploader.ts | 45 +++++++++++++++++++----------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/hooks/useImageUploader.ts b/src/hooks/useImageUploader.ts
index 0b21de781..15445cb9f 100644
--- a/src/hooks/useImageUploader.ts
+++ b/src/hooks/useImageUploader.ts
@@ -1,3 +1,4 @@
+import debounce from 'lodash-es/debounce';
 import { useRef } from 'react';
 
 import { getPresignedUrl, putPresignedUrl } from '@/api/endpoint/common/image';
@@ -25,29 +26,33 @@ export default function useImageUploader({ onSuccess, resizeHeight }: Options) {
       //     : await Promise.all(Array.from(inputEl.files).map((file) => tryResizeFile(file, resizeHeight)));
       const files = inputEl.files;
 
-      const urls: string[] = [];
+      const uploadFiles = debounce(async () => {
+        const urls: string[] = [];
 
-      await Promise.all(
-        Array.from(files).map(async (file) => {
-          try {
-            const { filename, signedUrl } = await getPresignedUrl.request({ filename: file.name });
-            if (!signedUrl) {
-              throw new Error('presigned-url을 받아오는데 실패하였습니다.');
-            }
+        await Promise.all(
+          Array.from(files).map(async (file) => {
+            try {
+              const { filename, signedUrl } = await getPresignedUrl.request({ filename: file.name });
+              if (!signedUrl) {
+                throw new Error('presigned-url을 받아오는데 실패하였습니다.');
+              }
+
+              await putPresignedUrl({
+                signedUrl: decodeURIComponent(signedUrl),
+                file,
+              });
 
-            await putPresignedUrl({
-              signedUrl: decodeURIComponent(signedUrl),
-              file,
-            });
+              const s3Url = `https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal/${filename}`;
+              urls.push(s3Url);
+            } catch (error) {
+              console.error(error);
+            }
+          }),
+        );
+        onSuccess?.(urls);
+      }, 500);
 
-            const s3Url = `https://s3.ap-northeast-2.amazonaws.com/sopt-makers-internal/${filename}`;
-            urls.push(s3Url);
-          } catch (error) {
-            console.error(error);
-          }
-        }),
-      );
-      onSuccess?.(urls);
+      uploadFiles();
     };
 
     inputEl.click();