diff --git a/frontend/src/pages/pc/admin/AdminAlbums.jsx b/frontend/src/pages/pc/admin/AdminAlbums.jsx index d14e140..179c74f 100644 --- a/frontend/src/pages/pc/admin/AdminAlbums.jsx +++ b/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 (
+ "{deleteDialog.album?.title}" 앨범을 삭제하시겠습니까?
+
+ 이 작업은 되돌릴 수 없으며, 모든 트랙과 커버 이미지가 함께 삭제됩니다.
+