From f0fee9d92bc75ba6f5198e7f9a53e572fccff196 Mon Sep 17 00:00:00 2001
From: Nan Kyung Lee <nankyunglee@Nanui-Macmini.local>
Date: Tue, 17 Mar 2026 10:41:37 +0900
Subject: [PATCH] =?UTF-8?q?style(aerial):=20=EC=9C=84=EC=84=B1=20=EC=9A=94?=
 =?UTF-8?q?=EC=B2=AD=20=ED=97=A4=EB=8D=94+=ED=83=AD=20=ED=95=9C=EC=A4=84?=
 =?UTF-8?q?=20=EB=B0=B0=EC=B9=98=20+=20=EC=A7=80=EB=8F=84=20=EB=86=92?=
 =?UTF-8?q?=EC=9D=B4=20=ED=99=95=EB=8C=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../aerial/components/SatelliteRequest.tsx    | 57 +++++++++----------
 1 file changed, 26 insertions(+), 31 deletions(-)

diff --git a/frontend/src/tabs/aerial/components/SatelliteRequest.tsx b/frontend/src/tabs/aerial/components/SatelliteRequest.tsx
index 76b42db..5e06575 100644
--- a/frontend/src/tabs/aerial/components/SatelliteRequest.tsx
+++ b/frontend/src/tabs/aerial/components/SatelliteRequest.tsx
@@ -192,37 +192,32 @@ export function SatelliteRequest() {
   const bsInputStyle = { border: '1px solid #21262d', background: '#161b22', color: '#e2e8f0' }
 
   return (
-    <div className="overflow-y-auto py-5 px-6">
-      {/* 헤더 */}
-      <div className="flex items-center justify-between mb-5">
-        <div className="flex items-center gap-3">
-          <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>
-            <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 className="overflow-y-auto py-5 px-6" style={{ height: mainTab === 'map' ? '100%' : undefined }}>
+      {/* 헤더 + 탭 + 새요청 한 줄 */}
+      <div className="flex items-center gap-4 mb-4">
+        <div className="flex items-center gap-2.5 shrink-0">
+          <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 className="text-[13px] font-bold font-korean text-text-1">위성 촬영 요청</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>
-
-      {/* 요청목록 / 지도 뷰 탭 */}
-      <div className="flex gap-1.5 mb-4">
-        <button
-          onClick={() => setMainTab('list')}
-          className="px-4 py-2 rounded text-[11px] font-bold font-korean cursor-pointer border transition-colors"
-          style={mainTab === 'list'
-            ? { background: 'rgba(59,130,246,.12)', borderColor: 'rgba(59,130,246,.3)', color: 'var(--blue)' }
-            : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' }
-          }
-        >📋 요청 목록</button>
-        <button
-          onClick={() => setMainTab('map')}
-          className="px-4 py-2 rounded text-[11px] font-bold font-korean cursor-pointer border transition-colors"
-          style={mainTab === 'map'
-            ? { background: 'rgba(59,130,246,.12)', borderColor: 'rgba(59,130,246,.3)', color: 'var(--blue)' }
-            : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' }
-          }
-        >🗺 촬영 히스토리 지도</button>
+        <div className="flex gap-1.5">
+          <button
+            onClick={() => setMainTab('list')}
+            className="px-3 py-1.5 rounded text-[10px] font-bold font-korean cursor-pointer border transition-colors"
+            style={mainTab === 'list'
+              ? { background: 'rgba(59,130,246,.12)', borderColor: 'rgba(59,130,246,.3)', color: 'var(--blue)' }
+              : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' }
+            }
+          >📋 요청 목록</button>
+          <button
+            onClick={() => setMainTab('map')}
+            className="px-3 py-1.5 rounded text-[10px] font-bold font-korean cursor-pointer border transition-colors"
+            style={mainTab === 'map'
+              ? { background: 'rgba(59,130,246,.12)', borderColor: 'rgba(59,130,246,.3)', color: 'var(--blue)' }
+              : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' }
+            }
+          >🗺 히스토리 지도</button>
+        </div>
+        <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>
       </div>
 
       {mainTab === 'list' && (<>
@@ -380,7 +375,7 @@ export function SatelliteRequest() {
         const dateFiltered = requests.filter(r => r.dateKey === mapSelectedDate)
         const dateHasDots = [...new Set(requests.map(r => r.dateKey).filter(Boolean))]
         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
             initialViewState={{ longitude: 127.5, latitude: 34.5, zoom: 7 }}
             mapStyle={SAT_MAP_STYLE}