perf: 이미지 미리보기를 축소 썸네일로 전환

- 원본 대신 400px 썸네일을 렌더해 디코딩/메모리 부담 감소
- 중복 파일은 추가하지 않고 안내
- 이미지 개수 카운터(n/100) 표시
- objectURL 해제 누락 지점 보완

src/locales/en.json

@@ -260,10 +260,11 @@
     "selectedImages": "Selected Images",
     "imageAlt": "Image",
     "uploadBadge": "Uploaded",
+    "previewUnavailable": "No preview",
     "imageUpload": "Image Upload",
     "dragAndDrop": "Drag & drop or\nclick to upload",
     "videoRatio": "Video Ratio",
-    "minImages": "Min. 5 images",
+    "minImages": "Recommended 30+ images",
     "youtubeShorts": "YouTube Shorts",
     "youtubeVideo": "YouTube Video",
     "back": "Go Back",
@@ -271,6 +272,9 @@
     "uploadFailed": "Image upload failed.",
     "uploadErrorTitle": "Image Upload Error",
     "uploadErrorConfirm": "OK",
+    "duplicateSkippedTitle": "Duplicate Images Skipped",
+    "duplicateSkippedMessage": "Skipped {{count}} image(s) that were already added.",
+    "preparingPreviews": "Preparing previews ({{done}} / {{total}})",
     "uploading": "Uploading... (30 sec – 1 min)",
     "nextStep": "Next Step"
   },

src/locales/ko.json

@@ -259,17 +259,21 @@
     "selectedImages": "선택된 이미지",
     "imageAlt": "이미지",
     "uploadBadge": "업로드",
+    "previewUnavailable": "미리보기 없음",
     "imageUpload": "이미지 업로드",
     "dragAndDrop": "이미지를 끌어다 놓거나\n클릭하여 업로드",
     "videoRatio": "영상 비율",
-    "minImages": "최소 5장",
+    "minImages": "권장 30장 이상",
     "youtubeShorts": "유튜브 쇼츠",
     "youtubeVideo": "유튜브 일반",
     "back": "뒤로가기",
     "loadMore": "더보기",
     "uploadFailed": "이미지 업로드에 실패했습니다.",
-    "uploadErrorTitle": "이미지 업로드 오류",
+    "uploadErrorTitle": "이미지 업로드 초과",
     "uploadErrorConfirm": "확인",
+    "duplicateSkippedTitle": "중복 이미지 제외",
+    "duplicateSkippedMessage": "이미 추가된 이미지 {{count}}장을 제외했습니다.",
+    "preparingPreviews": "미리보기 준비 중 ({{done}} / {{total}})",
     "uploading": "업로드 중 (30~60초 소요)",
     "nextStep": "다음 단계"
   },

src/pages/Dashboard/AssetManagementContent.tsx

@@ -4,13 +4,18 @@ import { useTranslation } from 'react-i18next';
 import { ImageItem, ImageUrlItem } from '../../types/api';
 import { uploadImages } from '../../utils/api';
 import { isImageInputFile } from '../../utils/imageCompression.ts';
+import { MAX_IMAGES_PER_UPLOAD_TASK } from '../../utils/imageUpload.ts';
+import { splitDuplicateFiles } from '../../utils/imageDedup.ts';
 
 interface AssetManagementContentProps {
   onNext: (imageTaskId: string) => void;
   onBack?: () => void;
   imageList: ImageItem[];
   onRemoveImage: (index: number) => void;
-  onAddImages: (files: File[]) => void;
+  onAddImages: (
+    files: File[],
+    onProgress: (done: number, total: number) => void
+  ) => Promise<void>;
 }
 
 type VideoRatio = 'vertical' | 'horizontal';
@@ -28,9 +33,11 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isUploading, setIsUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
-  const [uploadError, setUploadError] = useState<string | null>(null);
+  // 업로드 실패와 중복 제외 안내가 같은 다이얼로그 마크업을 공유한다.
+  const [dialog, setDialog] = useState<{ title: string; message: string } | null>(null);
   const [videoRatio, setVideoRatio] = useState<VideoRatio>('vertical');
   const [displayCount, setDisplayCount] = useState(IMAGES_PER_PAGE);
+  const [thumbnailProgress, setThumbnailProgress] = useState<{ done: number; total: number } | null>(null);
 
   useEffect(() => {
     const savedRatio = localStorage.getItem('castad_video_ratio') as VideoRatio;
@@ -40,25 +47,25 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
   }, []);
 
   useEffect(() => {
-    if (!uploadError) return;
+    if (!dialog) return;
 
     const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         event.preventDefault();
-        setUploadError(null);
+        setDialog(null);
       }
     };
 
     window.addEventListener('keydown', handleEscape);
     return () => window.removeEventListener('keydown', handleEscape);
-  }, [uploadError]);
+  }, [dialog]);
 
   const handleVideoRatioChange = (ratio: VideoRatio) => {
     setVideoRatio(ratio);
     localStorage.setItem('castad_video_ratio', ratio);
   };
 
-  const getImageSrc = (item: ImageItem): string => {
+  const getImageSrc = (item: ImageItem): string | null => {
     return item.type === 'url' ? item.preview_url : item.preview;
   };
 
@@ -67,7 +74,7 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
 
     setIsUploading(true);
     setUploadProgress(0);
-    setUploadError(null);
+    setDialog(null);
 
     const interval = setInterval(() => {
       setUploadProgress(prev => {
@@ -100,13 +107,37 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
     } catch (error) {
       clearInterval(interval);
       console.error('Image upload failed:', error);
-      setUploadError(error instanceof Error ? error.message : t('assetManagement.uploadFailed'));
+      setDialog({
+        title: t('assetManagement.uploadErrorTitle'),
+        message: error instanceof Error ? error.message : t('assetManagement.uploadFailed'),
+      });
     } finally {
       setIsUploading(false);
       setUploadProgress(0);
     }
   };
 
+  const runAddImages = async (files: File[]) => {
+    const { newFiles, duplicateCount } = splitDuplicateFiles(imageList, files);
+
+    if (newFiles.length > 0) {
+      setThumbnailProgress({ done: 0, total: newFiles.length });
+      try {
+        await onAddImages(newFiles, (done, total) => setThumbnailProgress({ done, total }));
+      } finally {
+        setThumbnailProgress(null);
+      }
+    }
+
+    // 썸네일 생성 오버레이에 가려지지 않도록 작업이 끝난 뒤에 안내한다.
+    if (duplicateCount > 0) {
+      setDialog({
+        title: t('assetManagement.duplicateSkippedTitle'),
+        message: t('assetManagement.duplicateSkippedMessage', { count: duplicateCount }),
+      });
+    }
+  };
+
   const handleDragOver = (e: React.DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -116,7 +147,7 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
     e.preventDefault();
     e.stopPropagation();
     const files = Array.from(e.dataTransfer.files).filter(isImageInputFile);
-    if (files.length > 0) onAddImages(files);
+    if (files.length > 0) void runAddImages(files);
   };
 
   const handleFileSelect = () => {
@@ -126,7 +157,7 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (files && files.length > 0) {
-      onAddImages(Array.from(files));
+      void runAddImages(Array.from(files));
       e.target.value = '';
     }
   };
@@ -136,6 +167,25 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
 
   return (
     <main className="asset-page">
+      {thumbnailProgress && (
+        <div className="asset-upload-overlay">
+          <div className="asset-upload-overlay-content">
+            <div className="loading-spinner">
+              <div className="loading-ring"></div>
+              <div className="loading-dot">
+                <div className="loading-dot-inner"></div>
+              </div>
+            </div>
+            <p className="comp2-loading-text">
+              {t('assetManagement.preparingPreviews', {
+                done: thumbnailProgress.done,
+                total: thumbnailProgress.total,
+              })}
+            </p>
+          </div>
+        </div>
+      )}
+
       {isUploading && (
         <div className="asset-upload-overlay">
           <div className="asset-upload-overlay-content">
@@ -159,10 +209,10 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
         </div>
       )}
 
-      {uploadError && (
+      {dialog && (
         <div
           className="asset-upload-error-overlay"
-          onClick={() => setUploadError(null)}
+          onClick={() => setDialog(null)}
         >
           <div
             className="asset-upload-error-dialog"
@@ -173,15 +223,15 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
             onClick={(event) => event.stopPropagation()}
           >
             <h2 id="asset-upload-error-title" className="asset-upload-error-title">
-              {t('assetManagement.uploadErrorTitle')}
+              {dialog.title}
             </h2>
             <p id="asset-upload-error-message" className="asset-upload-error-message">
-              {uploadError}
+              {dialog.message}
             </p>
             <button
               type="button"
               className="asset-upload-error-confirm"
-              onClick={() => setUploadError(null)}
+              onClick={() => setDialog(null)}
               autoFocus
             >
               {t('assetManagement.uploadErrorConfirm')}
@@ -213,6 +263,13 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
               <div className="asset-section-header-left">
                 <h3 className="asset-section-title">{t('assetManagement.selectedImages')}</h3>
                 <span className="asset-section-subtitle">{t('assetManagement.minImages')}</span>
+                <span
+                  className={`asset-section-count${
+                    imageList.length > MAX_IMAGES_PER_UPLOAD_TASK ? ' asset-section-count-over' : ''
+                  }`}
+                >
+                  {imageList.length} / {MAX_IMAGES_PER_UPLOAD_TASK}
+                </span>
               </div>
               <button onClick={handleFileSelect} className="asset-mobile-upload-btn">
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
@@ -226,27 +283,46 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
             <div className="asset-image-list">
               {visibleImages.length > 0 && (
                 <div className="asset-image-grid">
-                  {visibleImages.map((item, i) => (
+                  {visibleImages.map((item, i) => {
-                    <div key={i} className="asset-image-item">
+                    const src = getImageSrc(item);
-                      <img
+                    const fileName = item.type === 'file' ? item.file.name : '';
-                        src={getImageSrc(item)}
+                    return (
-                        alt={`${t('assetManagement.imageAlt')} ${i + 1}`}
+                      <div key={i} className="asset-image-item">
-                        referrerPolicy="no-referrer"
+                        {src ? (
-                      />
+                          <img
-                      {item.type === 'file' && (
+                            src={src}
-                        <div className="asset-image-badge">{t('assetManagement.uploadBadge')}</div>
+                            alt={`${t('assetManagement.imageAlt')} ${i + 1}`}
-                      )}
+                            referrerPolicy="no-referrer"
-                      <button
+                            loading="lazy"
-                        onClick={() => onRemoveImage(i)}
+                            decoding="async"
-                        className="asset-image-remove"
+                          />
-                      >
+                        ) : (
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                          <div className="asset-image-placeholder" title={fileName}>
-                          <line x1="18" y1="6" x2="6" y2="18"/>
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                          <line x1="6" y1="6" x2="18" y2="18"/>
+                              <rect x="3" y="3" width="18" height="18" rx="2"/>
-                        </svg>
+                              <circle cx="8.5" cy="8.5" r="1.5"/>
-                      </button>
+                              <path d="M21 15l-5-5L5 21"/>
-                    </div>
+                            </svg>
-                  ))}
+                            <span className="asset-image-placeholder-name">
+                              {fileName || t('assetManagement.previewUnavailable')}
+                            </span>
+                          </div>
+                        )}
+                        {item.type === 'file' && (
+                          <div className="asset-image-badge">{t('assetManagement.uploadBadge')}</div>
+                        )}
+                        <button
+                          onClick={() => onRemoveImage(i)}
+                          className="asset-image-remove"
+                        >
+                          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                            <line x1="18" y1="6" x2="6" y2="18"/>
+                            <line x1="6" y1="6" x2="18" y2="18"/>
+                          </svg>
+                        </button>
+                      </div>
+                    );
+                  })}
                 </div>
               )}
             </div>

src/pages/Dashboard/GenerationFlow.tsx

@@ -20,6 +20,7 @@ import { useTutorial } from '../../components/Tutorial/useTutorial';
 import { TUTORIAL_KEYS } from '../../components/Tutorial/tutorialSteps';
 import TutorialOverlay, { TutorialRestartPopup } from '../../components/Tutorial/TutorialOverlay';
 import WizardStepper from '../../components/WizardStepper';
+import { createPreviewThumbnail } from '../../utils/imageCompression.ts';
 
 const WIZARD_STEP_KEY = 'castad_wizard_step';
 const ACTIVE_ITEM_KEY = 'castad_active_item';
@@ -28,6 +29,15 @@ const IMAGE_TASK_ID_KEY = 'castad_image_task_id';
 const ANALYSIS_DATA_KEY = 'castad_analysis_data';
 import { saveSearchHistory } from '../../components/SearchHistory/useSearchHistory';
 
+/** 파일 이미지의 썸네일 objectURL 을 일괄 해제한다. preview 가 null 인 항목은 건너뛴다. */
+const revokeAllPreviews = (items: ImageItem[]) => {
+  items.forEach(item => {
+    if (item.type === 'file' && item.preview) {
+      URL.revokeObjectURL(item.preview);
+    }
+  });
+};
+
 // 다른 컴포넌트에서 사용하는 storage key들 (초기화용)
 const SONG_GENERATION_KEY = 'castad_song_generation';
 const VIDEO_GENERATION_KEY = 'castad_video_generation';
@@ -175,6 +185,15 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
   };
 
   const [imageList, setImageList] = useState<ImageItem[]>(getInitialImageList());
+  const imageListRef = useRef<ImageItem[]>(imageList);
+  imageListRef.current = imageList;
+
+  // 의존성 배열에 imageList 를 넣으면 이미지를 추가할 때마다 cleanup 이 돌아
+  // 방금 만든 썸네일이 즉시 revoke 된다. 반드시 빈 배열이어야 한다.
+  useEffect(() => {
+    return () => revokeAllPreviews(imageListRef.current);
+  }, []);
+
   const prevAnalysisMIdRef = useRef<number | null | undefined>(analysisData?.m_id);
 
   // analysisData 변경 시 m_id가 바뀐 경우(새로운 분석)에만 imageList 업데이트
@@ -183,6 +202,8 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
     console.log('[GenerationFlow] analysisData updated, m_id:', analysisData?.m_id);
     if (analysisData?.image_list && analysisData.image_list.length > 0) {
       if (prevAnalysisMIdRef.current !== analysisData.m_id) {
+        // 목록을 통째로 교체하므로 기존 파일 썸네일을 먼저 해제한다.
+        revokeAllPreviews(imageListRef.current);
         setImageList(analysisData.image_list.map(item => ({ type: 'url' as const, url: item.original, preview_url: item.preview })));
       }
     }
@@ -192,21 +213,35 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
   const handleRemoveImage = (index: number) => {
     setImageList(prev => {
       const item = prev[index];
-      // 파일 이미지인 경우 메모리 해제
+      // 파일 이미지인 경우 썸네일 메모리 해제 (생성 실패 시 preview 는 null)
-      if (item.type === 'file') {
+      if (item.type === 'file' && item.preview) {
         URL.revokeObjectURL(item.preview);
       }
       return prev.filter((_, i) => i !== index);
     });
   };
 
-  const handleAddImages = (files: File[]) => {
+  const handleAddImages = async (
-    const newImages: ImageItem[] = files.map(file => ({
+    files: File[],
-      type: 'file',
+    onProgress: (done: number, total: number) => void
-      file,
+  ) => {
-      preview: URL.createObjectURL(file),
+    const total = files.length;
-    }));
+    const newImages: ImageItem[] = [];
-    // 새로 업로드된 이미지를 배열 앞에 추가 (최신 이미지가 상단에 표시)
+
+    onProgress(0, total);
+
+    // 반드시 순차 처리한다. Promise.all 로 동시에 돌리면 원본 크기 비트맵이
+    // 한꺼번에 메모리에 올라가, 이 작업이 없애려던 문제가 그대로 재현된다.
+    for (const file of files) {
+      const preview = await createPreviewThumbnail(file);
+      newImages.push({ type: 'file', file, preview });
+      onProgress(newImages.length, total);
+      // 진행률이 실제로 화면에 그려지도록 매 장마다 렌더링 기회를 넘긴다.
+      await new Promise(resolve => setTimeout(resolve, 0));
+    }
+
+    // 장마다 setState 하면 그리드가 N 번 재조정된다. 전부 끝난 뒤 한 번만 반영한다.
+    // 새로 추가된 이미지를 배열 앞에 둔다 (최신 이미지가 상단에 표시)
     setImageList(prev => [...newImages, ...prev]);
   };
 
@@ -218,6 +253,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
     setSongTaskId(null);
     setImageTaskId(null);
     setAnalysisData(null);
+    revokeAllPreviews(imageListRef.current);
     setImageList([]);
     onHome();
   };

src/styles/studio-assets.css

@@ -1098,6 +1098,20 @@
   letter-spacing: -0.006em;
 }
 
+.asset-section-count {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #9BCACC;
+  line-height: 1.19;
+  letter-spacing: -0.006em;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 업로드 상한(100장)을 넘긴 상태. 추가 자체는 막지 않고 시각적으로만 경고한다. */
+.asset-section-count-over {
+  color: #fca5a5;
+}
+
 /* Asset Section Title */
 .asset-section-title {
   font-size: 1.5rem;
@@ -1200,6 +1214,30 @@
   object-fit: cover;
 }
 
+.asset-image-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px;
+  background-color: #001416;
+  color: #379599;
+  text-align: center;
+}
+
+.asset-image-placeholder-name {
+  width: 100%;
+  font-size: 0.6875rem;
+  line-height: 1.2;
+  color: #9BCACC;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .asset-image-badge {
   position: absolute;
   top: 8px;

src/types/api.ts

@@ -61,8 +61,8 @@ export interface UrlImage {
 // 업로드된 파일 이미지
 export interface FileImage {
   type: 'file';
-  file: File;
+  file: File;             // 업로드용 원본. 썸네일로 대체하지 않는다.
-  preview: string; // createObjectURL로 생성된 미리보기 URL
+  preview: string | null; // 미리보기용 축소 썸네일 objectURL. 생성 실패 시 null.
 }
 
 export type ImageItem = UrlImage | FileImage;

src/utils/imageCompression.ts

@@ -247,3 +247,59 @@ export async function compressImageForUpload(file: File): Promise<File> {
     decoded.dispose();
   }
 }
+
+export const MAX_PREVIEW_DIMENSION = 400;
+export const PREVIEW_QUALITY = 0.7;
+
+/**
+ * 그리드 미리보기 전용 축소 썸네일을 만든다.
+ *
+ * 업로드에는 원본 File 을 그대로 쓰고, 여기서 만든 objectURL 은 <img> 에만 쓰인다.
+ * 핵심은 finally 의 dispose() 로, createImageBitmap 경로에서 원본 비트맵을 즉시
+ * 해제해 메모리에 원본 크기 비트맵이 남지 않게 한다.
+ *
+ * 실패해도 예외를 던지지 않고 null 을 돌려준다. 호출부가 자리표시자를 그린다.
+ */
+export async function createPreviewThumbnail(file: File): Promise<string | null> {
+  if (!isImageInputFile(file)) {
+    return null;
+  }
+
+  let decoded: DecodedImage;
+  try {
+    decoded = await decodeImage(file);
+  } catch (error) {
+    console.warn(`미리보기 썸네일 디코딩 실패: ${file.name}`, error);
+    return null;
+  }
+
+  try {
+    const { width, height } = calculateTargetDimensions(
+      decoded.width,
+      decoded.height,
+      MAX_PREVIEW_DIMENSION
+    );
+
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+
+    const context = canvas.getContext('2d');
+    if (!context) {
+      return null;
+    }
+
+    // JPEG 에는 알파 채널이 없다. 투명 픽셀이 검게 나오지 않도록 흰 배경을 깐다.
+    context.fillStyle = '#ffffff';
+    context.fillRect(0, 0, width, height);
+    context.drawImage(decoded.source, 0, 0, width, height);
+
+    const blob = await canvasToBlob(canvas, PREVIEW_QUALITY);
+    return URL.createObjectURL(blob);
+  } catch (error) {
+    console.warn(`미리보기 썸네일 생성 실패: ${file.name}`, error);
+    return null;
+  } finally {
+    decoded.dispose();
+  }
+}

src/utils/imageDedup.ts

@@ -0,0 +1,49 @@
+import type { ImageItem } from '../types/api';
+
+/**
+ * 같은 파일을 가리키는지 판별하기 위한 키.
+ *
+ * 브라우저는 동일한 파일에 대해 name/size/lastModified 를 항상 동일하게 주므로,
+ * 내용 해시를 계산하지 않고도 비용 없이 중복을 걸러낼 수 있다.
+ */
+export function getFileIdentity(file: Pick<File, 'name' | 'size' | 'lastModified'>): string {
+  return `${file.name}|${file.size}|${file.lastModified}`;
+}
+
+export interface FileDedupResult {
+  /** 목록에 새로 넣어야 할 파일 */
+  newFiles: File[];
+  /** 중복이라 제외된 파일 수 */
+  duplicateCount: number;
+}
+
+/**
+ * 이미 목록에 있는 파일, 그리고 이번 배치 안에서 서로 겹치는 파일을 걸러낸다.
+ *
+ * url 타입 이미지(크롤링으로 가져온 원격 이미지)는 로컬 파일과 비교할 수단이
+ * 없으므로 비교 대상에서 제외한다.
+ */
+export function splitDuplicateFiles(existing: ImageItem[], incoming: File[]): FileDedupResult {
+  const seen = new Set<string>();
+
+  for (const item of existing) {
+    if (item.type === 'file') {
+      seen.add(getFileIdentity(item.file));
+    }
+  }
+
+  const newFiles: File[] = [];
+  let duplicateCount = 0;
+
+  for (const file of incoming) {
+    const identity = getFileIdentity(file);
+    if (seen.has(identity)) {
+      duplicateCount += 1;
+      continue;
+    }
+    seen.add(identity);
+    newFiles.push(file);
+  }
+
+  return { newFiles, duplicateCount };
+}

src/utils/imageUpload.ts

@@ -45,7 +45,7 @@ export async function uploadImagesSequentially(
 ): Promise<ImageUploadResponse> {
   const totalImageCount = imageUrls.length + files.length;
   if (totalImageCount > MAX_IMAGES_PER_UPLOAD_TASK) {
-    throw new Error(`이미지는 한 번에 최대 ${MAX_IMAGES_PER_UPLOAD_TASK}장까지 업로드할 수 있습니다.`);
+    throw new Error(`이미지는 최대 ${MAX_IMAGES_PER_UPLOAD_TASK}장까지 업로드할 수 있습니다.`);
   }
 
   if (files.length === 0) {