diff --git a/frontend/src/tabs/aerial/components/SatelliteRequest.tsx b/frontend/src/tabs/aerial/components/SatelliteRequest.tsx index bc28272..76b42db 100644 --- a/frontend/src/tabs/aerial/components/SatelliteRequest.tsx +++ b/frontend/src/tabs/aerial/components/SatelliteRequest.tsx @@ -18,16 +18,18 @@ interface SatRequest { provider?: string purpose?: string requester?: string + /** ISO 날짜 (필터용) */ + dateKey?: string } const satRequests: SatRequest[] = [ - { id: 'SAT-004', zone: '제주 서귀포 해상 (유출 해역 중심)', zoneCoord: '33.24°N 126.50°E', zoneArea: '15km²', satellite: 'KOMPSAT-3A', requestDate: '02-20 08:14', expectedReceive: '02-20 14:30', resolution: '0.5m', status: '촬영중', provider: 'KARI', purpose: '유출유 확산 모니터링', requester: '방제과 김해양' }, - { id: 'SAT-005', zone: '가파도 북쪽 해안선', zoneCoord: '33.17°N 126.27°E', zoneArea: '8km²', satellite: 'KOMPSAT-3', requestDate: '02-20 09:02', expectedReceive: '02-21 09:00', resolution: '1.0m', status: '대기', provider: 'KARI', purpose: '해안선 오염 확인', requester: '방제과 이민수' }, - { id: 'SAT-006', zone: '마라도 주변 해역', zoneCoord: '33.11°N 126.27°E', zoneArea: '12km²', satellite: 'Sentinel-2', requestDate: '02-20 09:30', expectedReceive: '02-21 11:00', resolution: '10m', status: '대기', provider: 'ESA Copernicus', purpose: '수질 분석용 다분광 촬영', requester: '환경분석팀 박수진' }, - { id: 'SAT-007', zone: '대정읍 해안 오염 확산 구역', zoneCoord: '33.21°N 126.10°E', zoneArea: '20km²', satellite: 'KOMPSAT-3A', requestDate: '02-20 10:05', expectedReceive: '02-22 08:00', resolution: '0.5m', status: '대기', provider: 'KARI', purpose: '확산 예측 모델 검증', requester: '방제과 김해양' }, - { id: 'SAT-003', zone: '제주 남방 100해리 해상', zoneCoord: '33.00°N 126.50°E', zoneArea: '25km²', satellite: 'Sentinel-1', requestDate: '02-19 14:00', expectedReceive: '02-19 23:00', resolution: '20m', status: '완료', provider: 'ESA Copernicus', purpose: 'SAR 유막 탐지', requester: '환경분석팀 박수진' }, - { id: 'SAT-002', zone: '여수 오동도 인근 해역', zoneCoord: '34.73°N 127.68°E', zoneArea: '18km²', satellite: 'KOMPSAT-3A', requestDate: '02-18 11:30', expectedReceive: '02-18 17:45', resolution: '0.5m', status: '완료', provider: 'KARI', purpose: '유출 초기 범위 확인', requester: '방제과 김해양' }, - { id: 'SAT-001', zone: '통영 해역 남측', zoneCoord: '34.85°N 128.43°E', zoneArea: '30km²', satellite: 'Sentinel-1', requestDate: '02-17 09:00', expectedReceive: '02-17 21:00', resolution: '20m', status: '완료', provider: 'ESA Copernicus', purpose: '야간 SAR 유막 모니터링', requester: '환경분석팀 박수진' }, + { id: 'SAT-004', zone: '제주 서귀포 해상 (유출 해역 중심)', zoneCoord: '33.24°N 126.50°E', zoneArea: '15km²', satellite: 'KOMPSAT-3A', requestDate: '03-17 08:14', expectedReceive: '03-17 14:30', resolution: '0.5m', status: '촬영중', provider: 'KARI', purpose: '유출유 확산 모니터링', requester: '방제과 김해양', dateKey: '2026-03-17' }, + { id: 'SAT-005', zone: '가파도 북쪽 해안선', zoneCoord: '33.17°N 126.27°E', zoneArea: '8km²', satellite: 'KOMPSAT-3', requestDate: '03-17 09:02', expectedReceive: '03-18 09:00', resolution: '1.0m', status: '대기', provider: 'KARI', purpose: '해안선 오염 확인', requester: '방제과 이민수', dateKey: '2026-03-17' }, + { id: 'SAT-006', zone: '마라도 주변 해역', zoneCoord: '33.11°N 126.27°E', zoneArea: '12km²', satellite: 'Sentinel-2', requestDate: '03-16 09:30', expectedReceive: '03-16 23:00', resolution: '10m', status: '완료', provider: 'ESA Copernicus', purpose: '수질 분석용 다분광 촬영', requester: '환경분석팀 박수진', dateKey: '2026-03-16' }, + { id: 'SAT-007', zone: '대정읍 해안 오염 확산 구역', zoneCoord: '33.21°N 126.10°E', zoneArea: '20km²', satellite: 'KOMPSAT-3A', requestDate: '03-16 10:05', expectedReceive: '03-17 08:00', resolution: '0.5m', status: '완료', provider: 'KARI', purpose: '확산 예측 모델 검증', requester: '방제과 김해양', dateKey: '2026-03-16' }, + { id: 'SAT-003', zone: '제주 남방 100해리 해상', zoneCoord: '33.00°N 126.50°E', zoneArea: '25km²', satellite: 'Sentinel-1', requestDate: '03-15 14:00', expectedReceive: '03-15 23:00', resolution: '20m', status: '완료', provider: 'ESA Copernicus', purpose: 'SAR 유막 탐지', requester: '환경분석팀 박수진', dateKey: '2026-03-15' }, + { id: 'SAT-002', zone: '여수 오동도 인근 해역', zoneCoord: '34.73°N 127.68°E', zoneArea: '18km²', satellite: 'KOMPSAT-3A', requestDate: '03-14 11:30', expectedReceive: '03-14 17:45', resolution: '0.5m', status: '완료', provider: 'KARI', purpose: '유출 초기 범위 확인', requester: '방제과 김해양', dateKey: '2026-03-14' }, + { id: 'SAT-001', zone: '통영 해역 남측', zoneCoord: '34.85°N 128.43°E', zoneArea: '30km²', satellite: 'Sentinel-1', requestDate: '03-13 09:00', expectedReceive: '03-13 21:00', resolution: '20m', status: '완료', provider: 'ESA Copernicus', purpose: '야간 SAR 유막 모니터링', requester: '환경분석팀 박수진', dateKey: '2026-03-13' }, ] const satellites = [ @@ -104,6 +106,11 @@ export function SatelliteRequest() { const [up42SelPass, setUp42SelPass] = useState(null) const [satPasses, setSatPasses] = useState([]) const [satPassesLoading, setSatPassesLoading] = useState(false) + // 히스토리 지도 — 캘린더 + 선택 항목 + const [mapSelectedDate, setMapSelectedDate] = useState(() => { + const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}` + }) + const [mapSelectedItem, setMapSelectedItem] = useState(null) const modalRef = useRef(null) @@ -369,20 +376,24 @@ export function SatelliteRequest() { )} {/* ═══ 촬영 히스토리 지도 뷰 ═══ */} - {mainTab === 'map' && ( -
+ {mainTab === 'map' && (() => { + const dateFiltered = requests.filter(r => r.dateKey === mapSelectedDate) + const dateHasDots = [...new Set(requests.map(r => r.dateKey).filter(Boolean))] + return ( +
- {/* 촬영 구역 폴리곤 + 마커 */} - {requests.map(r => { + {/* 선택된 날짜의 촬영 구역 폴리곤 */} + {dateFiltered.map(r => { const coord = parseCoord(r.zoneCoord) if (!coord) return null const areaKm = parseFloat(r.zoneArea) || 10 const delta = Math.sqrt(areaKm) * 0.005 + const isSelected = mapSelectedItem?.id === r.id const statusColor = r.status === '촬영중' ? '#eab308' : r.status === '완료' ? '#22c55e' : r.status === '취소' ? '#ef4444' : '#3b82f6' return ( - - + + ) })} + + {/* 선택된 항목의 위성 영상 오버레이 (시뮬레이션) */} + {mapSelectedItem && mapSelectedItem.status === '완료' && (() => { + const coord = parseCoord(mapSelectedItem.zoneCoord) + if (!coord) return null + const areaKm = parseFloat(mapSelectedItem.zoneArea) || 10 + const delta = Math.sqrt(areaKm) * 0.006 + return ( + + + + ) + })()} - {/* 지도 위 범례 */} + {/* 좌상단: 캘린더 + 날짜별 리스트 */} +
+ {/* 캘린더 헤더 */} +
+
📅 촬영 날짜 선택
+ { setMapSelectedDate(e.target.value); setMapSelectedItem(null) }} + className="w-full px-2.5 py-1.5 bg-bg-3 border border-border rounded text-[11px] font-mono text-text-1 outline-none focus:border-[var(--cyan)] transition-colors" + /> + {/* 촬영 이력 있는 날짜 점 표시 */} +
+ {dateHasDots.map(d => ( + + ))} +
+
+ + {/* 날짜별 촬영 리스트 */} +
+
+ {mapSelectedDate} · {dateFiltered.length}건 +
+ {dateFiltered.length === 0 ? ( +
이 날짜에 촬영 이력이 없습니다
+ ) : dateFiltered.map(r => { + const statusColor = r.status === '촬영중' ? '#eab308' : r.status === '완료' ? '#22c55e' : r.status === '취소' ? '#ef4444' : '#3b82f6' + const isSelected = mapSelectedItem?.id === r.id + return ( +
setMapSelectedItem(isSelected ? null : r)} + className="px-3 py-2 border-b cursor-pointer transition-colors" + style={{ + borderColor: 'rgba(255,255,255,.04)', + background: isSelected ? 'rgba(6,182,212,.1)' : 'transparent', + }} + > +
+ {r.id} + {r.status} +
+
{r.zone}
+
{r.satellite} · {r.resolution}
+ {r.status === '완료' && ( +
📷 클릭하여 영상 보기
+ )} +
+ ) + })} +
+
+ + {/* 우상단: 범례 */}
촬영 이력
{[ @@ -419,25 +515,30 @@ export function SatelliteRequest() {
총 {requests.length}건
- {/* 지도 위 요청 리스트 (좌하단) */} -
-
📋 촬영 요청 ({requests.length})
- {requests.map(r => { - const statusColor = r.status === '촬영중' ? '#eab308' : r.status === '완료' ? '#22c55e' : r.status === '취소' ? '#ef4444' : '#3b82f6' - return ( -
-
- {r.id} - {r.status} -
-
{r.zone}
-
{r.satellite} · {r.resolution}
+ {/* 선택된 항목 상세 (하단) */} + {mapSelectedItem && ( +
+
+
+
{mapSelectedItem.zone}
+
{mapSelectedItem.satellite} · {mapSelectedItem.resolution} · {mapSelectedItem.zoneCoord}
- ) - })} -
+
+
요청
+
{mapSelectedItem.requestDate}
+
+ {mapSelectedItem.status === '완료' && ( +
+ 📷 영상 표출중 +
+ )} + +
+
+ )}
- )} + ) + })()} {/* ═══ 모달: 제공자 선택 ═══ */} {modalPhase !== 'none' && (