caadiq/fromis_9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: 업로드 버튼에 확인 다이얼로그 추가

Browse source 
- 업로드 전 사진 타입, 파일 개수, 파일명 범위 확인
- 실수로 업로드 방지
This commit is contained in:
caadiq 2026-01-02 10:24:45 +09:00
parent 57fa0e1393
commit ab92e3117e
1 changed files with 64 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
frontend/src/pages/pc/admin/AdminAlbumPhotos.jsx
View file

@ -38,6 +38,7 @@ function AdminAlbumPhotos() {
const [processingStatus, setProcessingStatus] = useState(''); // 처리 상태 메시지 const [processingStatus, setProcessingStatus] = useState(''); // 처리 상태 메시지
const [processingProgress, setProcessingProgress] = useState({ current: 0, total: 0 }); // 서버 처리 진행률 const [processingProgress, setProcessingProgress] = useState({ current: 0, total: 0 }); // 서버 처리 진행률
const [pendingDeleteId, setPendingDeleteId] = useState(null); // 삭제 대기 파일 ID const [pendingDeleteId, setPendingDeleteId] = useState(null); // 삭제 대기 파일 ID
const [uploadConfirmDialog, setUploadConfirmDialog] = useState(false); // 업로드 확인 다이얼로그
// 일괄 편집 도구 상태 // 일괄 편집 도구 상태
const [bulkEdit, setBulkEdit] = useState({ const [bulkEdit, setBulkEdit] = useState({
@ -645,8 +646,8 @@ function AdminAlbumPhotos() {
취소 취소
</button> </button>
<button <button
onClick={handleUpload} onClick={() => setUploadConfirmDialog(true)}
disabled={saving} 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" 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 ? ( {saving ? (
@ -1132,6 +1133,67 @@ function AdminAlbumPhotos() {
)} )}
</AnimatePresence> </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 <input
ref={fileInputRef} ref={fileInputRef}
type="file" type="file"