diff --git a/frontend/src/tabs/aerial/components/SatelliteRequest.tsx b/frontend/src/tabs/aerial/components/SatelliteRequest.tsx index 2edead9..1baf214 100644 --- a/frontend/src/tabs/aerial/components/SatelliteRequest.tsx +++ b/frontend/src/tabs/aerial/components/SatelliteRequest.tsx @@ -82,10 +82,18 @@ const SAT_MAP_STYLE: StyleSpecification = { layers: [{ id: 'carto-dark-layer', type: 'raster', source: 'carto-dark', minzoom: 0, maxzoom: 22 }], } +/** 좌표 문자열 파싱 ("33.24°N 126.50°E" → {lat, lon}) */ +function parseCoord(coordStr: string): { lat: number; lon: number } | null { + const m = coordStr.match(/([\d.]+)°N\s+([\d.]+)°E/) + if (!m) return null + return { lat: parseFloat(m[1]), lon: parseFloat(m[2]) } +} + type SatModalPhase = 'none' | 'provider' | 'blacksky' | 'up42' export function SatelliteRequest() { const [requests, setRequests] = useState(satRequests) + const [mainTab, setMainTab] = useState<'list' | 'map'>('list') const [statusFilter, setStatusFilter] = useState('전체') const [modalPhase, setModalPhase] = useState('none') const [selectedRequest, setSelectedRequest] = useState(null) @@ -190,6 +198,27 @@ export function SatelliteRequest() { + {/* 요청목록 / 지도 뷰 탭 */} +
+ + +
+ + {mainTab === 'list' && (<> {/* 요약 통계 */}
{stats.map((s, i) => ( @@ -337,6 +366,78 @@ export function SatelliteRequest() {
+ )} + + {/* ═══ 촬영 히스토리 지도 뷰 ═══ */} + {mainTab === 'map' && ( +
+ + {/* 촬영 구역 폴리곤 + 마커 */} + {requests.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 statusColor = r.status === '촬영중' ? '#eab308' : r.status === '완료' ? '#22c55e' : r.status === '취소' ? '#ef4444' : '#3b82f6' + return ( + + + + + ) + })} + + + {/* 지도 위 범례 */} +
+
촬영 이력
+ {[ + { label: '촬영중', color: '#eab308' }, + { label: '대기', color: '#3b82f6' }, + { label: '완료', color: '#22c55e' }, + { label: '취소', color: '#ef4444' }, + ].map(item => ( +
+
+ {item.label} +
+ ))} +
총 {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}
+
+ ) + })} +
+
+ )} {/* ═══ 모달: 제공자 선택 ═══ */} {modalPhase !== 'none' && (