From 26ae58828570d7095ba6cc10bae19e13cf332c34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=84=B1=EA=B2=BD?= <skkim@o2o.kr>
Date: Fri, 26 Jun 2026 16:00:42 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EC=8B=9C=20=EB=A1=9C=EB=94=A9=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dashboard/AssetManagementContent.tsx      | 36 +++++++++++++++++++
 src/styles/landing.css                        |  2 +-
 src/styles/studio-assets.css                  | 19 ++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/src/pages/Dashboard/AssetManagementContent.tsx b/src/pages/Dashboard/AssetManagementContent.tsx
index 6ce9388..a1db487 100755
--- a/src/pages/Dashboard/AssetManagementContent.tsx
+++ b/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 && (
diff --git a/src/styles/landing.css b/src/styles/landing.css
index 7f07141..41e77e2 100644
--- a/src/styles/landing.css
+++ b/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;
 }
diff --git a/src/styles/studio-assets.css b/src/styles/studio-assets.css
index 62aad40..3f8e91f 100644
--- a/src/styles/studio-assets.css
+++ b/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;