feat: 앨범 삭제 기능 - 삭제 다이얼로그, Toast 알림

frontend/src/pages/pc/admin/AdminAlbums.jsx

@@ -1,10 +1,11 @@
 import { useState, useEffect } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import { 
     Plus, Search, Edit2, Trash2, Image, Music,
-    Home, ChevronRight, LogOut, Calendar
+    Home, ChevronRight, LogOut, Calendar, AlertTriangle, X
 } from 'lucide-react';
+import Toast from '../../../components/Toast';
 
 function AdminAlbums() {
     const navigate = useNavigate();
@@ -12,6 +13,17 @@ function AdminAlbums() {
     const [loading, setLoading] = useState(true);
     const [searchQuery, setSearchQuery] = useState('');
     const [user, setUser] = useState(null);
+    const [toast, setToast] = useState(null);
+    const [deleteDialog, setDeleteDialog] = useState({ show: false, album: null });
+    const [deleting, setDeleting] = useState(false);
+
+    // Toast 자동 숨김
+    useEffect(() => {
+        if (toast) {
+            const timer = setTimeout(() => setToast(null), 3000);
+            return () => clearTimeout(timer);
+        }
+    }, [toast]);
 
     useEffect(() => {
         // 로그인 확인
@@ -24,8 +36,10 @@ function AdminAlbums() {
         }
 
         setUser(JSON.parse(userData));
+        fetchAlbums();
+    }, [navigate]);
 
-        // 앨범 목록 로드
+    const fetchAlbums = () => {
         fetch('/api/albums')
             .then(res => res.json())
             .then(data => {
@@ -36,7 +50,7 @@ function AdminAlbums() {
                 console.error('앨범 로드 오류:', error);
                 setLoading(false);
             });
-    }, [navigate]);
+    };
 
     const handleLogout = () => {
         localStorage.removeItem('adminToken');
@@ -44,6 +58,34 @@ function AdminAlbums() {
         navigate('/admin');
     };
 
+    const handleDelete = async () => {
+        if (!deleteDialog.album) return;
+        
+        setDeleting(true);
+        try {
+            const token = localStorage.getItem('adminToken');
+            const response = await fetch(`/api/admin/albums/${deleteDialog.album.id}`, {
+                method: 'DELETE',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error('삭제 실패');
+            }
+
+            setToast({ message: `"${deleteDialog.album.title}" 앨범이 삭제되었습니다.`, type: 'success' });
+            setDeleteDialog({ show: false, album: null });
+            fetchAlbums(); // 목록 새로고침
+        } catch (error) {
+            console.error('삭제 오류:', error);
+            setToast({ message: '앨범 삭제 중 오류가 발생했습니다.', type: 'error' });
+        } finally {
+            setDeleting(false);
+        }
+    };
+
     // 날짜 포맷팅
     const formatDate = (dateStr) => {
         if (!dateStr) return '';
@@ -58,6 +100,70 @@ function AdminAlbums() {
 
     return (
         <div className="min-h-screen bg-gray-50">
+            {/* Toast */}
+            <Toast toast={toast} onClose={() => setToast(null)} />
+
+            {/* 삭제 확인 다이얼로그 */}
+            <AnimatePresence>
+                {deleteDialog.show && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+                        onClick={() => !deleting && setDeleteDialog({ show: false, album: null })}
+                    >
+                        <motion.div
+                            initial={{ scale: 0.9, opacity: 0 }}
+                            animate={{ scale: 1, opacity: 1 }}
+                            exit={{ scale: 0.9, opacity: 0 }}
+                            className="bg-white rounded-2xl p-6 max-w-md w-full mx-4 shadow-xl"
+                            onClick={(e) => e.stopPropagation()}
+                        >
+                            <div className="flex items-center gap-3 mb-4">
+                                <div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
+                                    <AlertTriangle className="text-red-500" size={20} />
+                                </div>
+                                <h3 className="text-lg font-bold text-gray-900">앨범 삭제</h3>
+                            </div>
+                            
+                            <p className="text-gray-600 mb-6">
+                                <span className="font-medium text-gray-900">"{deleteDialog.album?.title}"</span> 앨범을 삭제하시겠습니까?
+                                <br />
+                                <span className="text-sm text-red-500">이 작업은 되돌릴 수 없으며, 모든 트랙과 커버 이미지가 함께 삭제됩니다.</span>
+                            </p>
+                            
+                            <div className="flex justify-end gap-3">
+                                <button
+                                    onClick={() => setDeleteDialog({ show: false, album: null })}
+                                    disabled={deleting}
+                                    className="px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50"
+                                >
+                                    취소
+                                </button>
+                                <button
+                                    onClick={handleDelete}
+                                    disabled={deleting}
+                                    className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors disabled:opacity-50 flex items-center gap-2"
+                                >
+                                    {deleting ? (
+                                        <>
+                                            <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                                            삭제 중...
+                                        </>
+                                    ) : (
+                                        <>
+                                            <Trash2 size={16} />
+                                            삭제
+                                        </>
+                                    )}
+                                </button>
+                            </div>
+                        </motion.div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
             {/* 헤더 */}
             <header className="bg-white shadow-sm border-b border-gray-100">
                 <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
@@ -196,6 +302,7 @@ function AdminAlbums() {
                                                     <Edit2 size={18} />
                                                 </button>
                                                 <button
+                                                    onClick={() => setDeleteDialog({ show: true, album })}
                                                     className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                                                     title="삭제"
                                                 >