diff --git a/frontend/src/pages/pc/admin/logs/Logs.jsx b/frontend/src/pages/pc/admin/logs/Logs.jsx index 4bbda5d..efae69c 100644 --- a/frontend/src/pages/pc/admin/logs/Logs.jsx +++ b/frontend/src/pages/pc/admin/logs/Logs.jsx @@ -27,6 +27,7 @@ function Logs() { const [dateFrom, setDateFrom] = useState(''); const [dateTo, setDateTo] = useState(''); const [currentPage, setCurrentPage] = useState(1); + const [pageInput, setPageInput] = useState('1'); const [actorDropdownOpen, setActorDropdownOpen] = useState(false); const [categoryDropdownOpen, setCategoryDropdownOpen] = useState(false); const [selectedLog, setSelectedLog] = useState(null); @@ -65,6 +66,20 @@ function Logs() { const total = data?.total || 0; const totalPages = data?.totalPages || 0; + // 페이지 변경 시 입력 필드 동기화 + useEffect(() => { setPageInput(String(currentPage)); }, [currentPage]); + + const goToPageFromInput = () => { + const n = parseInt(pageInput, 10); + if (!Number.isFinite(n) || n < 1) { + setPageInput(String(currentPage)); + return; + } + const clamped = Math.min(totalPages, n); + setCurrentPage(clamped); + setPageInput(String(clamped)); + }; + // 카테고리 토글 const toggleCategory = (cat) => { setSelectedCategories((prev) => @@ -343,52 +358,74 @@ function Logs() { {/* 페이지네이션 */} {totalPages > 1 && ( -
- - {Array.from({ length: totalPages }, (_, i) => i + 1) - .filter((page) => { - if (totalPages <= 7) return true; - if (page === 1 || page === totalPages) return true; - if (Math.abs(page - currentPage) <= 2) return true; - return false; - }) - .reduce((acc, page, i, arr) => { - if (i > 0 && page - arr[i - 1] > 1) { - acc.push({ type: 'ellipsis', key: `e-${page}` }); - } - acc.push({ type: 'page', value: page, key: page }); - return acc; - }, []) - .map((item) => - item.type === 'ellipsis' ? ( - ... - ) : ( - - ) - )} - +
+
+
+ + {Array.from({ length: totalPages }, (_, i) => i + 1) + .filter((page) => { + if (totalPages <= 7) return true; + if (page === 1 || page === totalPages) return true; + if (Math.abs(page - currentPage) <= 2) return true; + return false; + }) + .reduce((acc, page, i, arr) => { + if (i > 0 && page - arr[i - 1] > 1) { + acc.push({ type: 'ellipsis', key: `e-${page}` }); + } + acc.push({ type: 'page', value: page, key: page }); + return acc; + }, []) + .map((item) => + item.type === 'ellipsis' ? ( + ... + ) : ( + + ) + )} + +
+
+ setPageInput(e.target.value.replace(/\D/g, ''))} + onBlur={goToPageFromInput} + onKeyDown={(e) => { + if (e.key === 'Enter') { + e.preventDefault(); + goToPageFromInput(); + e.currentTarget.blur(); + } + }} + className="w-12 h-9 text-center tabular-nums border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" + aria-label="페이지 번호 입력" + /> + / {totalPages} +
)}