style(aerial): 위성 요청 헤더+탭 한줄 배치 + 지도 높이 확대

- 헤더(🛰 위성 촬영 요청) + 탭(요청목록/히스토리지도) + 새요청 버튼을 한 줄로 통합
- 지도 뷰 높이 calc(100vh - 160px)로 확대하여 영상 중첩 표시 공간 확보
- 헤더/탭 사이즈 축소로 컴팩트 레이아웃

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nan Kyung Lee 2026-03-17 10:41:37 +09:00
부모 5191e606a1
커밋 f0fee9d92b

파일 보기

@ -192,37 +192,32 @@ export function SatelliteRequest() {
const bsInputStyle = { border: '1px solid #21262d', background: '#161b22', color: '#e2e8f0' } const bsInputStyle = { border: '1px solid #21262d', background: '#161b22', color: '#e2e8f0' }
return ( return (
<div className="overflow-y-auto py-5 px-6"> <div className="overflow-y-auto py-5 px-6" style={{ height: mainTab === 'map' ? '100%' : undefined }}>
{/* 헤더 */} {/* 헤더 + 탭 + 새요청 한 줄 */}
<div className="flex items-center justify-between mb-5"> <div className="flex items-center gap-4 mb-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-2.5 shrink-0">
<div className="w-10 h-10 rounded-[10px] flex items-center justify-center text-xl" style={{ background: 'linear-gradient(135deg,rgba(59,130,246,.2),rgba(168,85,247,.2))', border: '1px solid rgba(59,130,246,.3)' }}>🛰</div> <div className="w-8 h-8 rounded-lg flex items-center justify-center text-base" style={{ background: 'linear-gradient(135deg,rgba(59,130,246,.2),rgba(168,85,247,.2))', border: '1px solid rgba(59,130,246,.3)' }}>🛰</div>
<div> <div className="text-[13px] font-bold font-korean text-text-1"> </div>
<div className="text-base font-bold font-korean text-text-1"> </div>
<div className="text-[11px] text-text-3 font-korean mt-0.5"> </div>
</div>
</div> </div>
<button onClick={() => setModalPhase('provider')} className="px-4 py-2.5 text-white border-none rounded-sm text-[13px] font-semibold cursor-pointer font-korean flex items-center gap-1.5" style={{ background: 'linear-gradient(135deg,var(--blue),var(--purple))' }}>🛰 </button> <div className="flex gap-1.5">
</div> <button
onClick={() => setMainTab('list')}
{/* 요청목록 / 지도 뷰 탭 */} className="px-3 py-1.5 rounded text-[10px] font-bold font-korean cursor-pointer border transition-colors"
<div className="flex gap-1.5 mb-4"> style={mainTab === 'list'
<button ? { background: 'rgba(59,130,246,.12)', borderColor: 'rgba(59,130,246,.3)', color: 'var(--blue)' }
onClick={() => setMainTab('list')} : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' }
className="px-4 py-2 rounded text-[11px] font-bold font-korean cursor-pointer border transition-colors" }
style={mainTab === 'list' >📋 </button>
? { background: 'rgba(59,130,246,.12)', borderColor: 'rgba(59,130,246,.3)', color: 'var(--blue)' } <button
: { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' } onClick={() => setMainTab('map')}
} className="px-3 py-1.5 rounded text-[10px] font-bold font-korean cursor-pointer border transition-colors"
>📋 </button> style={mainTab === 'map'
<button ? { background: 'rgba(59,130,246,.12)', borderColor: 'rgba(59,130,246,.3)', color: 'var(--blue)' }
onClick={() => setMainTab('map')} : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' }
className="px-4 py-2 rounded text-[11px] font-bold font-korean cursor-pointer border transition-colors" }
style={mainTab === 'map' >🗺 </button>
? { background: 'rgba(59,130,246,.12)', borderColor: 'rgba(59,130,246,.3)', color: 'var(--blue)' } </div>
: { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' } <button onClick={() => setModalPhase('provider')} className="ml-auto px-4 py-2 text-white border-none rounded-sm text-[11px] font-semibold cursor-pointer font-korean flex items-center gap-1.5 shrink-0" style={{ background: 'linear-gradient(135deg,var(--blue),var(--purple))' }}>🛰 </button>
}
>🗺 </button>
</div> </div>
{mainTab === 'list' && (<> {mainTab === 'list' && (<>
@ -380,7 +375,7 @@ export function SatelliteRequest() {
const dateFiltered = requests.filter(r => r.dateKey === mapSelectedDate) const dateFiltered = requests.filter(r => r.dateKey === mapSelectedDate)
const dateHasDots = [...new Set(requests.map(r => r.dateKey).filter(Boolean))] const dateHasDots = [...new Set(requests.map(r => r.dateKey).filter(Boolean))]
return ( return (
<div className="bg-bg-2 border border-border rounded-md overflow-hidden relative" style={{ height: 'calc(100vh - 240px)' }}> <div className="bg-bg-2 border border-border rounded-md overflow-hidden relative" style={{ height: 'calc(100vh - 160px)' }}>
<Map <Map
initialViewState={{ longitude: 127.5, latitude: 34.5, zoom: 7 }} initialViewState={{ longitude: 127.5, latitude: 34.5, zoom: 7 }}
mapStyle={SAT_MAP_STYLE} mapStyle={SAT_MAP_STYLE}