refactor: 커뮤니티 글쓰기 이미지 디바운싱 (#1704)

sopt-makers · Dec 17, 2024 · ad956a2 · ad956a2
1 parent abfd07b
commit ad956a2
Showing 1 changed file with 25 additions and 20 deletions.
diff --git 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();