이미지 업로드 시 로딩화면 추가

src/pages/Dashboard/AssetManagementContent.tsx

@@ -26,6 +26,7 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
   const { t } = useTranslation();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
   const [uploadError, setUploadError] = useState<string | null>(null);
   const [videoRatio, setVideoRatio] = useState<VideoRatio>('vertical');
   const [displayCount, setDisplayCount] = useState(IMAGES_PER_PAGE);
@@ -50,8 +51,16 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
     if (imageList.length === 0) return;
 
     setIsUploading(true);
+    setUploadProgress(0);
     setUploadError(null);
 
+    const interval = setInterval(() => {
+      setUploadProgress(prev => {
+        if (prev >= 99) return prev;
+        return prev + (prev < 50 ? 0.6 : prev < 80 ? 0.3 : prev < 90 ? 0.15 : 0.11);
+      });
+    }, 300);
+
     try {
       const urlImages: ImageUrlItem[] = imageList
         .filter((item: ImageItem): item is ImageItem & { type: 'url' } => item.type === 'url')
@@ -63,13 +72,17 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
 
       if (urlImages.length > 0 || fileImages.length > 0) {
         const response = await uploadImages(urlImages, fileImages);
+        clearInterval(interval);
+        setUploadProgress(100);
         onNext(response.task_id);
       }
     } catch (error) {
+      clearInterval(interval);
       console.error('Image upload failed:', error);
       setUploadError(error instanceof Error ? error.message : t('assetManagement.uploadFailed'));
     } finally {
       setIsUploading(false);
+      setUploadProgress(0);
     }
   };
 
@@ -104,6 +117,29 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
 
   return (
     <main className="asset-page">
+      {isUploading && (
+        <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.uploading')}</p>
+            <div className="loading-progress-wrapper">
+              <div className="loading-progress-bar">
+                <div
+                  className="loading-progress-fill"
+                  style={{ width: `${uploadProgress}%` }}
+                />
+              </div>
+              <span className="loading-progress-text">{Math.floor(uploadProgress)}%</span>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Fixed Header - 뒤로가기 버튼 */}
       <div className="asset-sticky-header">
         {onBack && (

src/styles/landing.css

@@ -1543,7 +1543,7 @@
 }
 
 .loading-progress-text {
-  font-size: 13px;
+  font-size: 14px;
   color: rgba(255, 255, 255, 0.5);
   font-variant-numeric: tabular-nums;
 }

src/styles/studio-assets.css

@@ -814,6 +814,25 @@
   position: relative;
 }
 
+/* Upload Loading Overlay */
+.asset-upload-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0, 25, 26, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.asset-upload-overlay-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+}
+
+
 /* Fixed Header - 뒤로가기 */
 .asset-sticky-header {
   position: fixed;