diff --git a/frontend/src/tabs/aerial/components/SatelliteRequest.tsx b/frontend/src/tabs/aerial/components/SatelliteRequest.tsx index 766a10c..7641a0c 100644 --- a/frontend/src/tabs/aerial/components/SatelliteRequest.tsx +++ b/frontend/src/tabs/aerial/components/SatelliteRequest.tsx @@ -99,7 +99,8 @@ export function SatelliteRequest() { const [statusFilter, setStatusFilter] = useState('전체') const [modalPhase, setModalPhase] = useState('none') const [selectedRequest, setSelectedRequest] = useState(null) - const [showMoreCompleted, setShowMoreCompleted] = useState(false) + const [currentPage, setCurrentPage] = useState(1) + const PAGE_SIZE = 5 // UP42 sub-tab const [up42SubTab, setUp42SubTab] = useState<'optical' | 'sar' | 'elevation'>('optical') const [up42SelSat, setUp42SelSat] = useState(null) @@ -141,9 +142,7 @@ export function SatelliteRequest() { if (modalPhase === 'up42') loadSatPasses() }, [modalPhase, loadSatPasses]) - const allRequests = showMoreCompleted ? requests : requests.filter(r => (r.status !== '완료' && r.status !== '취소') || r.id === 'SAT-003') - - const filtered = allRequests.filter(r => { + const filtered = requests.filter(r => { if (statusFilter === '전체') return true if (statusFilter === '대기') return r.status === '대기' if (statusFilter === '진행') return r.status === '촬영중' @@ -151,6 +150,8 @@ export function SatelliteRequest() { if (statusFilter === '취소') return r.status === '취소' return true }) + const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE)) + const pagedItems = filtered.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE) const statusBadge = (s: SatRequest['status']) => { if (s === '촬영중') return ( @@ -257,8 +258,8 @@ export function SatelliteRequest() { ))} - {/* 데이터 행 */} - {filtered.map(r => ( + {/* 데이터 행 (페이징) */} + {pagedItems.map(r => (
setSelectedRequest(selectedRequest?.id === r.id ? null : r)} @@ -321,11 +322,36 @@ export function SatelliteRequest() {
))} -
setShowMoreCompleted(!showMoreCompleted)} - className="text-center py-2.5 text-[10px] text-text-3 font-korean cursor-pointer hover:text-text-2 transition-colors" - > - {showMoreCompleted ? '▲ 완료 목록 접기' : '▼ 이전 완료 목록 더보기 (6건)'} + {/* 페이징 */} +
+
+ 총 {filtered.length}건 중 {(currentPage - 1) * PAGE_SIZE + 1}–{Math.min(currentPage * PAGE_SIZE, filtered.length)} +
+
+ + {Array.from({ length: totalPages }, (_, i) => i + 1).map(p => ( + + ))} + +