From ab92e3117efe69680503199d72bf054d222a9b75 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Fri, 2 Jan 2026 10:24:45 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=EC=97=90=20=ED=99=95=EC=9D=B8=20=EB=8B=A4=EC=9D=B4?=
 =?UTF-8?q?=EC=96=BC=EB=A1=9C=EA=B7=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 업로드 전 사진 타입, 파일 개수, 파일명 범위 확인
- 실수로 업로드 방지
---
 .../src/pages/pc/admin/AdminAlbumPhotos.jsx   | 66 ++++++++++++++++++-
 1 file changed, 64 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/pc/admin/AdminAlbumPhotos.jsx b/frontend/src/pages/pc/admin/AdminAlbumPhotos.jsx
index 28b3a74..d40dd07 100644
--- a/frontend/src/pages/pc/admin/AdminAlbumPhotos.jsx
+++ b/frontend/src/pages/pc/admin/AdminAlbumPhotos.jsx
@@ -38,6 +38,7 @@ function AdminAlbumPhotos() {
     const [processingStatus, setProcessingStatus] = useState(''); // 처리 상태 메시지
     const [processingProgress, setProcessingProgress] = useState({ current: 0, total: 0 }); // 서버 처리 진행률
     const [pendingDeleteId, setPendingDeleteId] = useState(null); // 삭제 대기 파일 ID
+    const [uploadConfirmDialog, setUploadConfirmDialog] = useState(false); // 업로드 확인 다이얼로그
 
     // 일괄 편집 도구 상태
     const [bulkEdit, setBulkEdit] = useState({
@@ -645,8 +646,8 @@ function AdminAlbumPhotos() {
                                 취소
                             </button>
                             <button
-                                onClick={handleUpload}
-                                disabled={saving}
+                                onClick={() => setUploadConfirmDialog(true)}
+                                disabled={pendingFiles.length === 0 || saving}
                                 className="flex items-center gap-2 px-5 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors disabled:opacity-50"
                             >
                                 {saving ? (
@@ -1132,6 +1133,67 @@ function AdminAlbumPhotos() {
                     )}
                 </AnimatePresence>
 
+                {/* 업로드 확인 다이얼로그 */}
+                <AnimatePresence>
+                    {uploadConfirmDialog && (
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+                            onClick={() => setUploadConfirmDialog(false)}
+                        >
+                            <motion.div
+                                initial={{ scale: 0.9, opacity: 0 }}
+                                animate={{ scale: 1, opacity: 1 }}
+                                exit={{ scale: 0.9, opacity: 0 }}
+                                onClick={(e) => e.stopPropagation()}
+                                className="bg-white rounded-2xl p-6 max-w-md w-full mx-4 shadow-xl"
+                            >
+                                <div className="text-center">
+                                    <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                                        <Upload className="text-primary" size={24} />
+                                    </div>
+                                    <h3 className="text-lg font-bold text-gray-900 mb-2">사진을 업로드할까요?</h3>
+                                    <div className="text-gray-500 text-sm mb-6 text-left bg-gray-50 rounded-lg p-4">
+                                        <div className="flex justify-between mb-1">
+                                            <span>사진 타입:</span>
+                                            <span className="font-medium text-gray-700">{photoType === 'concept' ? '컨셉 포토' : '티저 이미지'}</span>
+                                        </div>
+                                        <div className="flex justify-between mb-1">
+                                            <span>파일 개수:</span>
+                                            <span className="font-medium text-gray-700">{pendingFiles.length}개</span>
+                                        </div>
+                                        <div className="flex justify-between">
+                                            <span>파일명 범위:</span>
+                                            <span className="font-medium text-gray-700">
+                                                {String(startNumber).padStart(2, '0')}.webp ~ {String(startNumber + pendingFiles.length - 1).padStart(2, '0')}.webp
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div className="flex gap-3">
+                                        <button
+                                            onClick={() => setUploadConfirmDialog(false)}
+                                            className="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
+                                        >
+                                            취소
+                                        </button>
+                                        <button
+                                            onClick={() => {
+                                                setUploadConfirmDialog(false);
+                                                handleUpload();
+                                            }}
+                                            className="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors"
+                                        >
+                                            업로드
+                                        </button>
+                                    </div>
+                                </div>
+                            </motion.div>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+
                 <input
                     ref={fileInputRef}
                     type="file"