feat: 앨범 사진 관리 UI 구현
- AdminAlbumPhotos 컴포넌트 추가 및 라우트 등록 - 드래그앤드롭 파일 업로드 (깜빡임 방지, 중복 파일 감지) - 파일 순서 변경 (드래그 정렬 + 직접 입력) - 사진 메타데이터 입력 (타입, 멤버 태깅, 컨셉명) - 단체/솔로/유닛 선택에 따른 멤버 태깅 로직 - 삭제 확인 다이얼로그 - 페이지 전환 애니메이션
This commit is contained in:
parent
d4bbf592d5
commit
ee23e5ffa4
2 changed files with 825 additions and 0 deletions
|
|
@ -14,6 +14,7 @@ import AdminLogin from './pages/pc/admin/AdminLogin';
|
|||
import AdminDashboard from './pages/pc/admin/AdminDashboard';
|
||||
import AdminAlbums from './pages/pc/admin/AdminAlbums';
|
||||
import AdminAlbumForm from './pages/pc/admin/AdminAlbumForm';
|
||||
import AdminAlbumPhotos from './pages/pc/admin/AdminAlbumPhotos';
|
||||
|
||||
// PC 레이아웃
|
||||
import PCLayout from './components/pc/Layout';
|
||||
|
|
@ -29,6 +30,7 @@ function App() {
|
|||
<Route path="/admin/albums" element={<AdminAlbums />} />
|
||||
<Route path="/admin/albums/new" element={<AdminAlbumForm />} />
|
||||
<Route path="/admin/albums/:id/edit" element={<AdminAlbumForm />} />
|
||||
<Route path="/admin/albums/:albumId/photos" element={<AdminAlbumPhotos />} />
|
||||
|
||||
{/* 일반 페이지 (레이아웃 포함) */}
|
||||
<Route path="/*" element={
|
||||
|
|
|
|||
823
frontend/src/pages/pc/admin/AdminAlbumPhotos.jsx
Normal file
823
frontend/src/pages/pc/admin/AdminAlbumPhotos.jsx
Normal file
|
|
@ -0,0 +1,823 @@
|
|||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useNavigate, Link, useParams } from 'react-router-dom';
|
||||
import { motion, AnimatePresence, Reorder } from 'framer-motion';
|
||||
import {
|
||||
Upload, Trash2, Image, X, Check, Plus,
|
||||
Home, ChevronRight, LogOut, ArrowLeft, Grid, List,
|
||||
ZoomIn, AlertTriangle, GripVertical, Users, User, Users2,
|
||||
Tag, FolderOpen, Save
|
||||
} from 'lucide-react';
|
||||
import Toast from '../../../components/Toast';
|
||||
|
||||
// 멤버 목록
|
||||
const MEMBERS = ['이서연', '송하영', '장규리', '박지원', '이나경', '이채영', '백지헌'];
|
||||
|
||||
function AdminAlbumPhotos() {
|
||||
const { albumId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
const [album, setAlbum] = useState(null);
|
||||
const [photos, setPhotos] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [user, setUser] = useState(null);
|
||||
const [toast, setToast] = useState(null);
|
||||
const [selectedPhotos, setSelectedPhotos] = useState([]);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [uploadProgress, setUploadProgress] = useState(0);
|
||||
const [deleteDialog, setDeleteDialog] = useState({ show: false, photos: [] });
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [previewPhoto, setPreviewPhoto] = useState(null);
|
||||
const [dragOver, setDragOver] = useState(false);
|
||||
|
||||
// 업로드 대기 중인 파일들
|
||||
const [pendingFiles, setPendingFiles] = useState([]);
|
||||
const [photoType, setPhotoType] = useState('concept'); // 'concept' | 'teaser'
|
||||
const [conceptName, setConceptName] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [pendingDeleteId, setPendingDeleteId] = useState(null); // 삭제 대기 파일 ID
|
||||
|
||||
// Toast 자동 숨김
|
||||
useEffect(() => {
|
||||
if (toast) {
|
||||
const timer = setTimeout(() => setToast(null), 3000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [toast]);
|
||||
|
||||
useEffect(() => {
|
||||
// 로그인 확인
|
||||
const token = localStorage.getItem('adminToken');
|
||||
const userData = localStorage.getItem('adminUser');
|
||||
|
||||
if (!token || !userData) {
|
||||
navigate('/admin');
|
||||
return;
|
||||
}
|
||||
|
||||
setUser(JSON.parse(userData));
|
||||
fetchAlbumData();
|
||||
}, [navigate, albumId]);
|
||||
|
||||
const fetchAlbumData = async () => {
|
||||
try {
|
||||
// 앨범 정보 로드
|
||||
const albumRes = await fetch(`/api/albums/${albumId}`);
|
||||
if (!albumRes.ok) throw new Error('앨범을 찾을 수 없습니다');
|
||||
const albumData = await albumRes.json();
|
||||
setAlbum(albumData);
|
||||
|
||||
// TODO: 기존 사진 목록 로드 (API 구현 후)
|
||||
setPhotos([]);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error('앨범 로드 오류:', error);
|
||||
setToast({ message: error.message, type: 'error' });
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('adminToken');
|
||||
localStorage.removeItem('adminUser');
|
||||
navigate('/admin');
|
||||
};
|
||||
|
||||
// 파일 선택
|
||||
const handleFileSelect = (e) => {
|
||||
const files = Array.from(e.target.files);
|
||||
addFilesToPending(files);
|
||||
e.target.value = ''; // 같은 파일 재선택 가능하도록
|
||||
};
|
||||
|
||||
// 드래그 앤 드롭 (깜빡임 방지를 위해 카운터 사용)
|
||||
const dragCounterRef = useRef(0);
|
||||
|
||||
const handleDragEnter = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragCounterRef.current++;
|
||||
if (e.dataTransfer.types.includes('Files')) {
|
||||
setDragOver(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragOver = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
const handleDragLeave = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragCounterRef.current--;
|
||||
if (dragCounterRef.current === 0) {
|
||||
setDragOver(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrop = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragCounterRef.current = 0;
|
||||
setDragOver(false);
|
||||
const files = Array.from(e.dataTransfer.files).filter(f => f.type.startsWith('image/'));
|
||||
if (files.length > 0) {
|
||||
addFilesToPending(files);
|
||||
}
|
||||
};
|
||||
|
||||
// 대기 목록에 파일 추가 (중복 방지)
|
||||
const addFilesToPending = (files) => {
|
||||
// 기존 파일명 목록으로 중복 체크 (파일명 + 크기로 비교)
|
||||
const existingKeys = new Set(
|
||||
pendingFiles.map(f => `${f.filename}_${f.file.size}`)
|
||||
);
|
||||
|
||||
const uniqueFiles = files.filter(file => {
|
||||
const key = `${file.name}_${file.size}`;
|
||||
if (existingKeys.has(key)) {
|
||||
return false; // 중복
|
||||
}
|
||||
existingKeys.add(key);
|
||||
return true;
|
||||
});
|
||||
|
||||
if (uniqueFiles.length < files.length) {
|
||||
const duplicateCount = files.length - uniqueFiles.length;
|
||||
setToast({
|
||||
message: `${duplicateCount}개의 중복 파일이 제외되었습니다.`,
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
|
||||
if (uniqueFiles.length === 0) return;
|
||||
|
||||
const newFiles = uniqueFiles.map((file, index) => ({
|
||||
id: Date.now() + index,
|
||||
file,
|
||||
preview: URL.createObjectURL(file),
|
||||
filename: file.name,
|
||||
groupType: 'group', // 'group' | 'solo' | 'unit'
|
||||
members: [], // 태깅된 멤버들 (단체일 경우 빈 배열)
|
||||
conceptName: '', // 개별 컨셉명
|
||||
}));
|
||||
setPendingFiles(prev => [...prev, ...newFiles]);
|
||||
};
|
||||
|
||||
// 대기 파일 순서 변경 (Reorder)
|
||||
const handleReorder = (newOrder) => {
|
||||
setPendingFiles(newOrder);
|
||||
};
|
||||
|
||||
// 직접 순서 변경 (입력으로)
|
||||
const moveToPosition = (fileId, newPosition) => {
|
||||
const pos = parseInt(newPosition, 10);
|
||||
if (isNaN(pos) || pos < 1) return;
|
||||
|
||||
setPendingFiles(prev => {
|
||||
const targetIndex = Math.min(pos - 1, prev.length - 1);
|
||||
const currentIndex = prev.findIndex(f => f.id === fileId);
|
||||
if (currentIndex === -1 || currentIndex === targetIndex) return prev;
|
||||
|
||||
const newFiles = [...prev];
|
||||
const [removed] = newFiles.splice(currentIndex, 1);
|
||||
newFiles.splice(targetIndex, 0, removed);
|
||||
return newFiles;
|
||||
});
|
||||
};
|
||||
|
||||
// 대기 파일 삭제 (확인 후)
|
||||
const confirmDeletePendingFile = () => {
|
||||
if (!pendingDeleteId) return;
|
||||
setPendingFiles(prev => {
|
||||
const file = prev.find(f => f.id === pendingDeleteId);
|
||||
if (file) URL.revokeObjectURL(file.preview);
|
||||
return prev.filter(f => f.id !== pendingDeleteId);
|
||||
});
|
||||
setPendingDeleteId(null);
|
||||
};
|
||||
|
||||
// 대기 파일 메타 정보 수정
|
||||
const updatePendingFile = (id, field, value) => {
|
||||
setPendingFiles(prev => prev.map(f =>
|
||||
f.id === id ? { ...f, [field]: value } : f
|
||||
));
|
||||
};
|
||||
|
||||
// 멤버 토글 (솔로일 경우 한 명만, 유닛일 경우 다중 선택)
|
||||
const toggleMember = (fileId, member) => {
|
||||
setPendingFiles(prev => prev.map(f => {
|
||||
if (f.id !== fileId) return f;
|
||||
|
||||
// 솔로일 경우 한 명만 선택 가능
|
||||
if (f.groupType === 'solo') {
|
||||
return { ...f, members: f.members.includes(member) ? [] : [member] };
|
||||
}
|
||||
|
||||
// 유닛일 경우 다중 선택
|
||||
const members = f.members.includes(member)
|
||||
? f.members.filter(m => m !== member)
|
||||
: [...f.members, member];
|
||||
return { ...f, members };
|
||||
}));
|
||||
};
|
||||
|
||||
// 타입 변경 시 멤버 초기화
|
||||
const changeGroupType = (fileId, newType) => {
|
||||
setPendingFiles(prev => prev.map(f => {
|
||||
if (f.id !== fileId) return f;
|
||||
// 단체 선택 시 멤버 비움 (단체는 멤버 태깅 안 함)
|
||||
if (newType === 'group') {
|
||||
return { ...f, groupType: newType, members: [] };
|
||||
}
|
||||
// 솔로/유닛 변경 시 멤버 유지 (솔로인 경우 첫 번째만)
|
||||
if (newType === 'solo' && f.members.length > 1) {
|
||||
return { ...f, groupType: newType, members: [f.members[0]] };
|
||||
}
|
||||
return { ...f, groupType: newType };
|
||||
}));
|
||||
};
|
||||
|
||||
// 업로드 처리 (임시)
|
||||
const handleUpload = async () => {
|
||||
if (pendingFiles.length === 0) {
|
||||
setToast({ message: '업로드할 사진을 선택해주세요.', type: 'warning' });
|
||||
return;
|
||||
}
|
||||
|
||||
// 컨셉명 검증 (각 파일별로)
|
||||
const missingConcept = pendingFiles.some(f => !f.conceptName.trim());
|
||||
if (missingConcept) {
|
||||
setToast({ message: '모든 사진의 컨셉/티저 이름을 입력해주세요.', type: 'warning' });
|
||||
return;
|
||||
}
|
||||
|
||||
// 솔로/유닛인데 멤버 선택 안 한 경우
|
||||
const missingMembers = pendingFiles.some(f =>
|
||||
(f.groupType === 'solo' || f.groupType === 'unit') && f.members.length === 0
|
||||
);
|
||||
if (missingMembers) {
|
||||
setToast({ message: '솔로/유닛 사진에는 멤버를 선택해주세요.', type: 'warning' });
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
setUploadProgress(0);
|
||||
|
||||
try {
|
||||
// 임시 진행률 시뮬레이션
|
||||
for (let i = 0; i <= 100; i += 10) {
|
||||
await new Promise(r => setTimeout(r, 100));
|
||||
setUploadProgress(i);
|
||||
}
|
||||
|
||||
// TODO: 실제 업로드 API 호출
|
||||
// const formData = new FormData();
|
||||
// pendingFiles.forEach((pf, idx) => {
|
||||
// formData.append('photos', pf.file);
|
||||
// formData.append(`meta_${idx}`, JSON.stringify({
|
||||
// order: idx + 1,
|
||||
// groupType: pf.groupType,
|
||||
// members: pf.members,
|
||||
// }));
|
||||
// });
|
||||
// formData.append('photoType', photoType);
|
||||
// formData.append('conceptName', conceptName);
|
||||
|
||||
setToast({ message: `${pendingFiles.length}개의 사진이 업로드되었습니다.`, type: 'success' });
|
||||
|
||||
// 미리보기 URL 해제
|
||||
pendingFiles.forEach(f => URL.revokeObjectURL(f.preview));
|
||||
setPendingFiles([]);
|
||||
setConceptName('');
|
||||
} catch (error) {
|
||||
console.error('업로드 오류:', error);
|
||||
setToast({ message: '업로드 중 오류가 발생했습니다.', type: 'error' });
|
||||
} finally {
|
||||
setSaving(false);
|
||||
setUploadProgress(0);
|
||||
}
|
||||
};
|
||||
|
||||
// 삭제 처리 (기존 사진)
|
||||
const handleDelete = async () => {
|
||||
setDeleting(true);
|
||||
|
||||
// TODO: 실제 삭제 API 호출
|
||||
await new Promise(r => setTimeout(r, 1000));
|
||||
|
||||
setPhotos(prev => prev.filter(p => !deleteDialog.photos.includes(p.id)));
|
||||
setSelectedPhotos([]);
|
||||
setToast({ message: `${deleteDialog.photos.length}개의 사진이 삭제되었습니다.`, type: 'success' });
|
||||
setDeleteDialog({ show: false, photos: [] });
|
||||
setDeleting(false);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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, photos: [] })}
|
||||
>
|
||||
<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.photos.length}개</span>의 사진을 삭제하시겠습니까?
|
||||
<br />
|
||||
<span className="text-sm text-red-500">이 작업은 되돌릴 수 없습니다.</span>
|
||||
</p>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => setDeleteDialog({ show: false, photos: [] })}
|
||||
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>
|
||||
|
||||
{/* 이미지 미리보기 */}
|
||||
<AnimatePresence>
|
||||
{previewPhoto && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
|
||||
onClick={() => setPreviewPhoto(null)}
|
||||
>
|
||||
<button
|
||||
onClick={() => setPreviewPhoto(null)}
|
||||
className="absolute top-4 right-4 p-2 text-white/70 hover:text-white transition-colors"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
<motion.img
|
||||
initial={{ scale: 0.9 }}
|
||||
animate={{ scale: 1 }}
|
||||
exit={{ scale: 0.9 }}
|
||||
src={previewPhoto.preview || previewPhoto.url}
|
||||
alt={previewPhoto.filename}
|
||||
className="max-w-[90vw] max-h-[90vh] object-contain"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</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">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
|
||||
fromis_9
|
||||
</Link>
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
||||
Admin
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-gray-500 text-sm">
|
||||
안녕하세요, <span className="text-gray-900 font-medium">{user?.username}</span>님
|
||||
</span>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="flex items-center gap-2 px-4 py-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
<LogOut size={18} />
|
||||
<span>로그아웃</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 메인 콘텐츠 */}
|
||||
<main className="max-w-7xl mx-auto px-6 py-8">
|
||||
{/* 브레드크럼 */}
|
||||
<motion.div
|
||||
className="flex items-center gap-2 text-sm text-gray-400 mb-8"
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<Link to="/admin/dashboard" className="hover:text-primary transition-colors">
|
||||
<Home size={16} />
|
||||
</Link>
|
||||
<ChevronRight size={14} />
|
||||
<Link to="/admin/albums" className="hover:text-primary transition-colors">앨범 관리</Link>
|
||||
<ChevronRight size={14} />
|
||||
<span className="text-gray-700">{album?.title} - 사진 관리</span>
|
||||
</motion.div>
|
||||
|
||||
{/* 타이틀 */}
|
||||
<motion.div
|
||||
className="flex items-center gap-4 mb-8"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.15 }}
|
||||
>
|
||||
<img
|
||||
src={album?.cover_url}
|
||||
alt={album?.title}
|
||||
className="w-14 h-14 rounded-xl object-cover"
|
||||
/>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">{album?.title}</h1>
|
||||
<p className="text-gray-500">사진 업로드 및 관리</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 업로드 설정 */}
|
||||
<motion.div
|
||||
className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 mb-6"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
>
|
||||
<h2 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<FolderOpen size={20} />
|
||||
업로드 설정
|
||||
</h2>
|
||||
|
||||
{/* 타입 선택 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">사진 타입 *</label>
|
||||
<div className="flex gap-2 max-w-xs">
|
||||
<button
|
||||
onClick={() => setPhotoType('concept')}
|
||||
className={`flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-colors ${
|
||||
photoType === 'concept'
|
||||
? 'bg-primary text-white'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
컨셉 포토
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPhotoType('teaser')}
|
||||
className={`flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-colors ${
|
||||
photoType === 'teaser'
|
||||
? 'bg-primary text-white'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
티저 이미지
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-2">
|
||||
컨셉/티저 이름은 각 사진별로 입력합니다.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 업로드 진행률 */}
|
||||
{saving && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mb-6 bg-white rounded-xl p-4 border border-gray-100 shadow-sm"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm text-gray-600">업로드 중...</span>
|
||||
<span className="text-sm font-medium text-primary">{uploadProgress}%</span>
|
||||
</div>
|
||||
<div className="h-2 bg-gray-100 rounded-full overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${uploadProgress}%` }}
|
||||
className="h-full bg-primary rounded-full"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 드래그 앤 드롭 영역 + 파일 목록 */}
|
||||
<motion.div
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.25 }}
|
||||
className={`relative rounded-2xl border-2 border-dashed transition-colors bg-white ${
|
||||
dragOver
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-gray-200'
|
||||
}`}
|
||||
>
|
||||
{/* 드래그 오버레이 */}
|
||||
{dragOver && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-primary/10 rounded-2xl z-10">
|
||||
<div className="text-center">
|
||||
<Upload size={48} className="mx-auto text-primary mb-2" />
|
||||
<p className="text-primary font-medium">여기에 사진을 놓으세요</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pendingFiles.length === 0 ? (
|
||||
/* 빈 상태 */
|
||||
<div className="py-20 text-center">
|
||||
<Image size={48} className="mx-auto text-gray-300 mb-4" />
|
||||
<p className="text-gray-500 mb-2">사진을 드래그하여 업로드하세요</p>
|
||||
<p className="text-gray-400 text-sm mb-4">JPG, PNG, WebP 지원</p>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors"
|
||||
>
|
||||
<Plus size={18} />
|
||||
파일 선택
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
/* 파일 목록 (드래그 정렬 가능) */
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<p className="text-sm text-gray-500">
|
||||
드래그하여 순서를 변경할 수 있습니다. 순서대로 <code className="bg-gray-100 px-1 rounded">01.webp</code>, <code className="bg-gray-100 px-1 rounded">02.webp</code>... 로 저장됩니다.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="text-sm text-primary hover:text-primary-dark transition-colors"
|
||||
>
|
||||
+ 더 추가
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Reorder.Group
|
||||
axis="y"
|
||||
values={pendingFiles}
|
||||
onReorder={handleReorder}
|
||||
className="space-y-3"
|
||||
>
|
||||
{pendingFiles.map((file, index) => (
|
||||
<Reorder.Item
|
||||
key={file.id}
|
||||
value={file}
|
||||
className="bg-gray-50 rounded-xl p-4 cursor-grab active:cursor-grabbing"
|
||||
>
|
||||
<div className="flex gap-4 items-center">
|
||||
{/* 드래그 핸들 + 순서 번호 (직접 입력 가능) */}
|
||||
<div className="flex items-center gap-2">
|
||||
<GripVertical size={18} className="text-gray-300" />
|
||||
<input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
defaultValue={String(index + 1).padStart(2, '0')}
|
||||
key={`order-${file.id}-${index}`}
|
||||
onBlur={(e) => {
|
||||
const val = e.target.value.trim();
|
||||
if (val && !isNaN(val)) {
|
||||
moveToPosition(file.id, val);
|
||||
}
|
||||
e.target.value = String(pendingFiles.findIndex(f => f.id === file.id) + 1).padStart(2, '0');
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.target.blur();
|
||||
}
|
||||
}}
|
||||
className="w-10 h-8 bg-primary/10 text-primary rounded-lg text-center text-sm font-bold border-0 focus:outline-none focus:ring-2 focus:ring-primary [appearance:textfield]"
|
||||
title="순서를 직접 입력할 수 있습니다"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 썸네일 (정사각형) */}
|
||||
<img
|
||||
src={file.preview}
|
||||
alt={file.filename}
|
||||
draggable="false"
|
||||
className="w-36 h-36 rounded-xl object-cover cursor-pointer hover:opacity-80 transition-opacity flex-shrink-0 select-none"
|
||||
onClick={() => setPreviewPhoto(file)}
|
||||
/>
|
||||
|
||||
{/* 메타 정보 */}
|
||||
<div className="flex-1 space-y-3">
|
||||
{/* 파일명 */}
|
||||
<p className="text-base font-medium text-gray-900 truncate">{file.filename}</p>
|
||||
|
||||
{/* 단체/솔로/유닛 선택 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-500 w-16">타입:</span>
|
||||
<div className="flex gap-1.5">
|
||||
{[
|
||||
{ value: 'group', icon: Users, label: '단체' },
|
||||
{ value: 'solo', icon: User, label: '솔로' },
|
||||
{ value: 'unit', icon: Users2, label: '유닛' },
|
||||
].map(({ value, icon: Icon, label }) => (
|
||||
<button
|
||||
key={value}
|
||||
onClick={() => changeGroupType(file.id, value)}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors ${
|
||||
file.groupType === value
|
||||
? 'bg-primary text-white'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200'
|
||||
}`}
|
||||
>
|
||||
<Icon size={14} />
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 멤버 태깅 (단체는 비활성화) */}
|
||||
<div className="flex items-center gap-2 flex-wrap min-h-8">
|
||||
<span className="text-sm text-gray-500 w-16">멤버:</span>
|
||||
{file.groupType === 'group' ? (
|
||||
<span className="text-sm text-gray-400">단체 사진은 멤버 태깅이 필요 없습니다</span>
|
||||
) : (
|
||||
MEMBERS.map(member => (
|
||||
<button
|
||||
key={member}
|
||||
onClick={() => toggleMember(file.id, member)}
|
||||
className={`px-3 py-1 rounded-full text-sm transition-colors ${
|
||||
file.members.includes(member)
|
||||
? 'bg-primary text-white'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200'
|
||||
}`}
|
||||
>
|
||||
{member}
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
{file.groupType === 'solo' && (
|
||||
<span className="text-xs text-gray-400 ml-2">(한 명만 선택)</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 컨셉/티저 이름 (개별 입력) */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-500 w-16">컨셉명:</span>
|
||||
<input
|
||||
type="text"
|
||||
value={file.conceptName}
|
||||
onChange={(e) => updatePendingFile(file.id, 'conceptName', e.target.value)}
|
||||
className="flex-1 px-3 py-1.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
placeholder="컨셉명을 입력하세요"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 삭제 버튼 */}
|
||||
<button
|
||||
onClick={() => setPendingDeleteId(file.id)}
|
||||
className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors self-start"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</Reorder.Item>
|
||||
))}
|
||||
</Reorder.Group>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* 하단 액션 버튼 */}
|
||||
{pendingFiles.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mt-6 flex justify-end gap-4"
|
||||
>
|
||||
<button
|
||||
onClick={() => {
|
||||
pendingFiles.forEach(f => URL.revokeObjectURL(f.preview));
|
||||
setPendingFiles([]);
|
||||
}}
|
||||
className="px-6 py-2.5 text-gray-600 hover:text-gray-900 transition-colors"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
onClick={handleUpload}
|
||||
disabled={saving}
|
||||
className="flex items-center gap-2 px-6 py-2.5 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors disabled:opacity-50"
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
업로드 중...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save size={18} />
|
||||
{pendingFiles.length}개 사진 업로드
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
<AnimatePresence>
|
||||
{pendingDeleteId && (
|
||||
<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={() => setPendingDeleteId(null)}
|
||||
>
|
||||
<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-sm w-full mx-4 shadow-xl"
|
||||
>
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Trash2 className="text-red-500" size={24} />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-2">사진을 삭제할까요?</h3>
|
||||
<p className="text-gray-500 text-sm mb-6">
|
||||
이 사진을 목록에서 제거합니다.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setPendingDeleteId(null)}
|
||||
className="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
onClick={confirmDeletePendingFile}
|
||||
className="flex-1 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
|
||||
>
|
||||
삭제
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*"
|
||||
onChange={handleFileSelect}
|
||||
className="hidden"
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AdminAlbumPhotos;
|
||||
Loading…
Add table
Reference in a new issue