From 4108e4547d5012d878d051f4df463f03e19fd3ab Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Fri, 26 Dec 2025 20:28:26 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=82=AD=EC=A0=9C=20=EB=8B=A4=EC=9D=B4?=
 =?UTF-8?q?=EC=96=BC=EB=A1=9C=EA=B7=B8=20=EB=A1=9C=EB=94=A9=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C,=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EC=86=8C=EC=8B=A4=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 삭제 다이얼로그에 로딩 스피너 표시 및 버튼 비활성화
- 번역/아이콘 업로드 버튼이 로딩 중에도 사라지지 않도록 조건 수정
---
 frontend/src/pages/Admin.jsx | 44 ++++++++++++++++++++++++------------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/Admin.jsx b/frontend/src/pages/Admin.jsx
index 2d9d11b..8bba6cb 100644
--- a/frontend/src/pages/Admin.jsx
+++ b/frontend/src/pages/Admin.jsx
@@ -146,14 +146,14 @@ export default function Admin({ isMobile = false }) {
   // 파일 상태: { name, status: 'pending' | 'processing' | 'success' | 'error', error?: string, progress?: number }
   const [pendingFiles, setPendingFiles] = useState([]);
   const [isModListExpanded, setIsModListExpanded] = useState(false); // 등록된 모드 목록 펼치기/접기
-  const [deleteModDialog, setDeleteModDialog] = useState({ show: false, modId: null }); // 모드 삭제 확인 다이얼로그
+  const [deleteModDialog, setDeleteModDialog] = useState({ show: false, modId: null, loading: false }); // 모드 삭제 확인 다이얼로그
   const [clearingFiles, setClearingFiles] = useState(false); // 완료 항목 삭제 중 (애니메이션용)
 
   // 아이콘 관리 상태
   const [iconMods, setIconMods] = useState([]); // 등록된 아이콘 모드 목록
   const [iconUploading, setIconUploading] = useState(false);
   const [isIconDragging, setIsIconDragging] = useState(false);
-  const [deleteIconDialog, setDeleteIconDialog] = useState({ show: false, modId: null });
+  const [deleteIconDialog, setDeleteIconDialog] = useState({ show: false, modId: null, loading: false });
   const [isIconListExpanded, setIsIconListExpanded] = useState(false);
   const [pendingIconFiles, setPendingIconFiles] = useState([]); // 아이콘 파일 대기열
   const [clearingIconFiles, setClearingIconFiles] = useState(false);
@@ -2103,7 +2103,7 @@ export default function Admin({ isMobile = false }) {
                     </div>
                     
                     {/* 업로드 버튼 */}
-                    {pendingFiles.some(f => f.status === 'pending') && (
+                    {(pendingFiles.some(f => f.status === 'pending') || translationLoading) && (
                       <button
                         onClick={startTranslationUpload}
                         disabled={translationLoading}
@@ -2292,7 +2292,7 @@ export default function Admin({ isMobile = false }) {
                     </div>
 
                     {/* 업로드 시작 버튼 */}
-                    {pendingIconFiles.some(f => f.status === 'pending') && (
+                    {(pendingIconFiles.some(f => f.status === 'pending') || iconUploading) && (
                       <motion.button
                         onClick={startIconUpload}
                         disabled={iconUploading}
@@ -2748,19 +2748,27 @@ export default function Admin({ isMobile = false }) {
               </p>
               <div className="flex gap-3">
                 <button
-                  onClick={() => setDeleteModDialog({ show: false, modId: null })}
-                  className="flex-1 py-2.5 bg-zinc-800 hover:bg-zinc-700 text-white font-medium rounded-xl transition-colors"
+                  onClick={() => setDeleteModDialog({ show: false, modId: null, loading: false })}
+                  disabled={deleteModDialog.loading}
+                  className="flex-1 py-2.5 bg-zinc-800 hover:bg-zinc-700 disabled:opacity-50 text-white font-medium rounded-xl transition-colors"
                 >
                   취소
                 </button>
                 <button
                   onClick={async () => {
+                    setDeleteModDialog(prev => ({ ...prev, loading: true }));
                     await handleDeleteTranslation(deleteModDialog.modId);
-                    setDeleteModDialog({ show: false, modId: null });
+                    setDeleteModDialog({ show: false, modId: null, loading: false });
                   }}
-                  className="flex-1 py-2.5 bg-red-600 hover:bg-red-500 text-white font-medium rounded-xl transition-colors"
+                  disabled={deleteModDialog.loading}
+                  className="flex-1 py-2.5 bg-red-600 hover:bg-red-500 disabled:bg-red-800 text-white font-medium rounded-xl transition-colors flex items-center justify-center gap-2"
                 >
-                  삭제
+                  {deleteModDialog.loading ? (
+                    <>
+                      <Loader2 size={16} className="animate-spin" />
+                      삭제 중...
+                    </>
+                  ) : '삭제'}
                 </button>
               </div>
             </motion.div>
@@ -2791,19 +2799,27 @@ export default function Admin({ isMobile = false }) {
               </p>
               <div className="flex gap-3">
                 <button
-                  onClick={() => setDeleteIconDialog({ show: false, modId: null })}
-                  className="flex-1 py-2.5 bg-zinc-800 hover:bg-zinc-700 text-white font-medium rounded-xl transition-colors"
+                  onClick={() => setDeleteIconDialog({ show: false, modId: null, loading: false })}
+                  disabled={deleteIconDialog.loading}
+                  className="flex-1 py-2.5 bg-zinc-800 hover:bg-zinc-700 disabled:opacity-50 text-white font-medium rounded-xl transition-colors"
                 >
                   취소
                 </button>
                 <button
                   onClick={async () => {
+                    setDeleteIconDialog(prev => ({ ...prev, loading: true }));
                     await deleteIconMod(deleteIconDialog.modId);
-                    setDeleteIconDialog({ show: false, modId: null });
+                    setDeleteIconDialog({ show: false, modId: null, loading: false });
                   }}
-                  className="flex-1 py-2.5 bg-red-600 hover:bg-red-500 text-white font-medium rounded-xl transition-colors"
+                  disabled={deleteIconDialog.loading}
+                  className="flex-1 py-2.5 bg-red-600 hover:bg-red-500 disabled:bg-red-800 text-white font-medium rounded-xl transition-colors flex items-center justify-center gap-2"
                 >
-                  삭제
+                  {deleteIconDialog.loading ? (
+                    <>
+                      <Loader2 size={16} className="animate-spin" />
+                      삭제 중...
+                    </>
+                  ) : '삭제'}
                 </button>
               </div>
             </motion.div>