- {menu.image_url ? (
- 
- ) : (
- menu.icon || '📋'
- )}
+
@@ -45,16 +39,10 @@ function AddCard({ to, icon, label }) {
}
export default function AdminHome() {
- const [menus, setMenus] = useState([])
- const [loading, setLoading] = useState(true)
-
- useEffect(() => {
- // TODO: 백엔드 구현 후 실제 API 호출
- api('/api/admin/menus')
- .then(setMenus)
- .catch(() => setMenus([]))
- .finally(() => setLoading(false))
- }, [])
+ const { data: menus = [], isLoading: loading } = useQuery({
+ queryKey: ['admin', 'menus'],
+ queryFn: () => api('/api/admin/menus').catch(() => []),
+ })
return (
+ 
-
- {menu.title}
-{menu.description}
-
- →
+
{menu.title}
+{menu.description}
+{menu.url}
diff --git a/frontend/src/features/admin/AdminImages.jsx b/frontend/src/features/admin/AdminImages.jsx
index 52e5761..10455c6 100644
--- a/frontend/src/features/admin/AdminImages.jsx
+++ b/frontend/src/features/admin/AdminImages.jsx
@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { api } from '../../api/client'
/* ── 공용 모달 ── */
@@ -232,42 +233,127 @@ function ImageCard({ image, selected, selectMode, onToggle, onCopyUrl, copied })
)
}
+/* ── 페이지네이션 ── */
+function Pagination({ page, totalPages, onChange }) {
+ if (totalPages <= 1) return null
+
+ const pages = []
+ const maxButtons = 7
+ let start = Math.max(1, page - Math.floor(maxButtons / 2))
+ let end = Math.min(totalPages, start + maxButtons - 1)
+ if (end - start + 1 < maxButtons) start = Math.max(1, end - maxButtons + 1)
+ for (let i = start; i <= end; i++) pages.push(i)
+
+ const btn = "min-w-9 h-9 px-3 rounded-lg text-sm transition flex items-center justify-center"
+
+ return (
+
- ) : filtered.length === 0 ? (
+ ) : images.length === 0 ? (
+
+
+ {start > 1 && (
+ <>
+
+ {start > 2 && …}
+
+ )}
+
+ {pages.map((p) => (
+
+ ))}
+
+ {end < totalPages && (
+ <>
+ {end < totalPages - 1 && …}
+
+
+ )}
+
+
+
+ )
+}
+
+const PAGE_SIZE = 24
+
/* ── 메인 ── */
export default function AdminImages() {
- const [images, setImages] = useState([])
- const [loading, setLoading] = useState(true)
- const [uploadOpen, setUploadOpen] = useState(false)
- const [uploading, setUploading] = useState(false)
+ const queryClient = useQueryClient()
+ const [page, setPage] = useState(1)
const [search, setSearch] = useState('')
+ const [debouncedSearch, setDebouncedSearch] = useState('')
+ const [uploadOpen, setUploadOpen] = useState(false)
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)
- try {
- const data = await api('/api/admin/images')
- setImages(data)
- } catch {
- setImages([])
- } finally {
- setLoading(false)
- }
+ // 검색어 디바운싱
+ useEffect(() => {
+ const t = setTimeout(() => {
+ setDebouncedSearch(search)
+ setPage(1)
+ }, 300)
+ return () => clearTimeout(t)
+ }, [search])
+
+ // 이미지 목록 (페이징 + 검색)
+ const { data: imagesData, isLoading } = useQuery({
+ queryKey: ['admin', 'images', { page, search: debouncedSearch }],
+ queryFn: async () => {
+ const params = new URLSearchParams({
+ page,
+ limit: PAGE_SIZE,
+ ...(debouncedSearch && { search: debouncedSearch }),
+ })
+ return api(`/api/admin/images?${params}`)
+ },
+ placeholderData: (prev) => prev,
+ })
+
+ const images = imagesData?.items || []
+ const totalPages = imagesData?.total_pages || 1
+
+ // 전체 이름 (중복 체크용)
+ const { data: allNamesArray = [] } = useQuery({
+ queryKey: ['admin', 'images', 'names'],
+ queryFn: () => api('/api/admin/images/names'),
+ })
+ const allNames = new Set(allNamesArray)
+
+ const invalidateImages = () => {
+ queryClient.invalidateQueries({ queryKey: ['admin', 'images'] })
}
- useEffect(() => { fetchImages() }, [])
-
- const handleUpload = async (items) => {
- setUploading(true)
- try {
+ // 업로드
+ const uploadMutation = useMutation({
+ mutationFn: async (items) => {
const formData = new FormData()
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', {
method: 'POST',
@@ -276,19 +362,17 @@ export default function AdminImages() {
})
const result = await res.json()
if (!res.ok) throw new Error(result.error || '업로드 실패')
-
+ return result
+ },
+ onSuccess: (result) => {
if (result.errors?.length > 0) {
alert(`일부 업로드 실패:\n${result.errors.map((e) => `- ${e.name}: ${e.error}`).join('\n')}`)
}
-
setUploadOpen(false)
- await fetchImages()
- } catch (err) {
- alert(err.message)
- } finally {
- setUploading(false)
- }
- }
+ invalidateImages()
+ },
+ onError: (err) => alert(err.message),
+ })
const toggleSelect = (id) => {
setSelectedIds((prev) => {
@@ -303,15 +387,11 @@ export default function AdminImages() {
setSelectedIds(new Set())
}
- const filtered = images.filter((img) =>
- img.name.toLowerCase().includes(search.toLowerCase())
- )
-
const selectAll = () => {
- if (selectedIds.size === filtered.length) {
+ if (selectedIds.size === images.length) {
setSelectedIds(new Set())
} else {
- setSelectedIds(new Set(filtered.map((img) => img.id)))
+ setSelectedIds(new Set(images.map((img) => img.id)))
}
}
@@ -323,23 +403,17 @@ export default function AdminImages() {
})
}
- const handleDeleteConfirm = async () => {
- setDeleting(true)
- try {
- await api('/api/admin/images/delete', {
- method: 'POST',
- body: { ids: confirmDelete.ids },
- })
+ // 삭제
+ const deleteMutation = useMutation({
+ mutationFn: (ids) => api('/api/admin/images/delete', { method: 'POST', body: { ids } }),
+ onSuccess: () => {
setConfirmDelete(null)
setSelectedIds(new Set())
setSelectMode(false)
- await fetchImages()
- } catch (err) {
- alert(err.message)
- } finally {
- setDeleting(false)
- }
- }
+ invalidateImages()
+ },
+ onError: (err) => alert(err.message),
+ })
const copyUrl = (image) => {
navigator.clipboard.writeText(image.url)
@@ -362,7 +436,7 @@ export default function AdminImages() {
onClick={selectAll}
className="rounded-lg border border-white/10 px-3 py-2 text-sm hover:bg-white/5 transition"
>
- {selectedIds.size === filtered.length && filtered.length > 0 ? '전체 해제' : '전체 선택'}
+ {selectedIds.size === images.length && images.length > 0 ? '전체 해제' : '전체 선택'}
🖼️
- {images.length === 0 ? '업로드된 이미지가 없습니다' : '검색 결과가 없습니다'} + {debouncedSearch ? '검색 결과가 없습니다' : '업로드된 이미지가 없습니다'}
- {images.length === 0 && ( + {!debouncedSearch && (
- {filtered.map((image) => (
-
+ <>
+
+ {images.map((image) => (
+
+