+
+ {description}
+
+
+
+
+ selectMode && onToggle(image.id)}
+ className={`group relative rounded-xl border overflow-hidden transition ${
+ selected
+ ? 'border-emerald-500/60 bg-emerald-500/5 ring-2 ring-emerald-500/30'
+ : 'border-white/5 bg-gray-900/40 hover:border-white/15'
+ } ${selectMode ? 'cursor-pointer' : ''}`}
+ >
+ {/* 체크박스 (선택모드) */}
+ {selectMode && (
+
- {/* 액션 버튼 */}
-
- {/* 정보 */}
)
}
+/* ── 메인 ── */
export default function AdminImages() {
const [images, setImages] = useState([])
const [loading, setLoading] = useState(true)
- const [modalOpen, setModalOpen] = useState(false)
+ const [uploadOpen, setUploadOpen] = useState(false)
const [uploading, setUploading] = useState(false)
const [search, setSearch] = useState('')
+ const [selectMode, setSelectMode] = useState(false)
+ const [selectedIds, setSelectedIds] = useState(new Set())
+ const [confirmDelete, setConfirmDelete] = useState(null) // {ids, names}
+ const [deleting, setDeleting] = useState(false)
+ const [copiedId, setCopiedId] = useState(null)
const fetchImages = async () => {
setLoading(true)
@@ -167,16 +257,16 @@ export default function AdminImages() {
}
}
- useEffect(() => {
- fetchImages()
- }, [])
+ useEffect(() => { fetchImages() }, [])
- const handleUpload = async ({ file, name }) => {
+ const handleUpload = async (items) => {
setUploading(true)
try {
const formData = new FormData()
- formData.append('file', file)
- formData.append('name', name)
+ items.forEach((it) => {
+ formData.append('files', it.file)
+ formData.append('names', it.name.trim())
+ })
const adminKey = localStorage.getItem('maple-admin-key')
const res = await fetch('/api/admin/images', {
@@ -184,11 +274,14 @@ export default function AdminImages() {
headers: { 'x-admin-key': adminKey },
body: formData,
})
- if (!res.ok) {
- const err = await res.json().catch(() => ({}))
- throw new Error(err.error || '업로드 실패')
+ const result = await res.json()
+ if (!res.ok) throw new Error(result.error || '업로드 실패')
+
+ if (result.errors?.length > 0) {
+ alert(`일부 업로드 실패:\n${result.errors.map((e) => `- ${e.name}: ${e.error}`).join('\n')}`)
}
- setModalOpen(false)
+
+ setUploadOpen(false)
await fetchImages()
} catch (err) {
alert(err.message)
@@ -197,20 +290,63 @@ export default function AdminImages() {
}
}
- const handleDelete = async (image) => {
- if (!confirm(`"${image.name}" 이미지를 삭제하시겠습니까?`)) return
- try {
- await api(`/api/admin/images/${image.id}`, { method: 'DELETE' })
- await fetchImages()
- } catch (err) {
- alert(err.message)
- }
+ const toggleSelect = (id) => {
+ setSelectedIds((prev) => {
+ const next = new Set(prev)
+ next.has(id) ? next.delete(id) : next.add(id)
+ return next
+ })
+ }
+
+ const toggleSelectMode = () => {
+ setSelectMode((prev) => !prev)
+ setSelectedIds(new Set())
}
const filtered = images.filter((img) =>
img.name.toLowerCase().includes(search.toLowerCase())
)
+ const selectAll = () => {
+ if (selectedIds.size === filtered.length) {
+ setSelectedIds(new Set())
+ } else {
+ setSelectedIds(new Set(filtered.map((img) => img.id)))
+ }
+ }
+
+ const requestDelete = () => {
+ const items = images.filter((img) => selectedIds.has(img.id))
+ setConfirmDelete({
+ ids: items.map((i) => i.id),
+ names: items.map((i) => i.name),
+ })
+ }
+
+ const handleDeleteConfirm = async () => {
+ setDeleting(true)
+ try {
+ await api('/api/admin/images/delete', {
+ method: 'POST',
+ body: { ids: confirmDelete.ids },
+ })
+ setConfirmDelete(null)
+ setSelectedIds(new Set())
+ setSelectMode(false)
+ await fetchImages()
+ } catch (err) {
+ alert(err.message)
+ } finally {
+ setDeleting(false)
+ }
+ }
+
+ const copyUrl = (image) => {
+ navigator.clipboard.writeText(image.url)
+ setCopiedId(image.id)
+ setTimeout(() => setCopiedId(null), 1500)
+ }
+
return (
+ {selected && ✓}
+
+ )}
+
-
-
-
+ {!selectMode && (
+
+
+
+ )}
{image.name}
- {image.url}
@@ -218,13 +354,50 @@ export default function AdminImages() {
-
+ 이미지 관리
공용 이미지를 업로드하고 관리합니다
+ {selectMode ? (
+ <>
+ {selectedIds.size}개 선택
+
+
+
+
+ ) : (
+ <>
+ {images.length > 0 && (
+
+ )}
+
+
+ )}
+