From fbef59341ecd72aa46f3478aefaaba0361de0bd1 Mon Sep 17 00:00:00 2001
From: Nan Kyung Lee <nankyunglee@Nanui-Macmini.local>
Date: Mon, 16 Mar 2026 09:53:30 +0900
Subject: [PATCH] =?UTF-8?q?feat(aerial):=20=EB=93=9C=EB=A1=A0=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=BF=BC=EB=93=9C=EC=BD=A5=ED=84=B0=20+?=
 =?UTF-8?q?=20=ED=95=A8=EC=A0=95=20MarineTraffic=20=EC=82=BC=EA=B0=81?=
 =?UTF-8?q?=ED=98=95=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 함정: MarineTraffic 스타일 삼각형 (선수 방향 위, 상태색 채움)
- 드론: 쿼드콥터 아이콘 (X자 팔 + 프로펠러 회전 애니메이션 + 카메라 렌즈)
- 함정↔드론 점선 연결선 유지
- 송출중 REC LED 깜빡임, 드론 모델명 라벨

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

diff --git a/frontend/src/tabs/aerial/components/RealtimeDrone.tsx b/frontend/src/tabs/aerial/components/RealtimeDrone.tsx
index 308b0e2..6ebef2b 100644
--- a/frontend/src/tabs/aerial/components/RealtimeDrone.tsx
+++ b/frontend/src/tabs/aerial/components/RealtimeDrone.tsx
@@ -278,39 +278,50 @@ export function RealtimeDrone() {
                     onClick={e => { e.originalEvent.stopPropagation(); setMapPopup(stream) }}
                   >
                     <div className="cursor-pointer group" title={stream.shipName}>
-                      <svg width="120" height="80" viewBox="0 0 120 80" fill="none" className="drop-shadow-lg transition-transform group-hover:scale-105" style={{ overflow: 'visible' }}>
+                      <svg width="130" height="85" viewBox="0 0 130 85" fill="none" className="drop-shadow-lg transition-transform group-hover:scale-105" style={{ overflow: 'visible' }}>
                         {/* 연결선 (점선) */}
-                        <line x1="30" y1="55" x2="85" y2="28" stroke={statusColor} strokeWidth="1.5" strokeDasharray="4 3" opacity="0.6" />
+                        <line x1="28" y1="52" x2="88" y2="30" stroke={statusColor} strokeWidth="1.2" strokeDasharray="4 3" opacity="0.5" />
 
-                        {/* 함정 삼각형 (좌하단) */}
-                        <polygon points="30,45 20,65 40,65" fill="rgba(0,0,0,.5)" stroke={statusColor} strokeWidth="1.5" />
-                        <text x="30" y="59" textAnchor="middle" fill="#fff" fontSize="7" fontWeight="bold">▲</text>
-                        {/* 함정명 */}
-                        <rect x="5" y="67" width="50" height="13" rx="3" fill="rgba(0,0,0,.7)" />
-                        <text x="30" y="76" textAnchor="middle" fill="#fff" fontSize="7" fontFamily="sans-serif" fontWeight="bold">{stream.shipName.replace(/서 /, ' ')}</text>
+                        {/* ── 함정: MarineTraffic 스타일 삼각형 (선수 방향 위) ── */}
+                        <polygon points="28,38 18,58 38,58" fill={statusColor} opacity="0.85" />
+                        <polygon points="28,38 18,58 38,58" fill="none" stroke="#fff" strokeWidth="0.8" opacity="0.5" />
+                        {/* 함정명 라벨 */}
+                        <rect x="3" y="61" width="50" height="13" rx="3" fill="rgba(0,0,0,.75)" />
+                        <text x="28" y="70.5" textAnchor="middle" fill="#fff" fontSize="7" fontFamily="sans-serif" fontWeight="bold">{stream.shipName.replace(/서 /, ' ')}</text>
 
-                        {/* 드론 원형 아이콘 (우상단) */}
-                        <circle cx="85" cy="28" r="16" fill="rgba(0,0,0,.6)" stroke={statusColor} strokeWidth="2" />
-                        {/* 드론 내부 — 십자 프로펠러 */}
-                        <line x1="73" y1="28" x2="97" y2="28" stroke={statusColor} strokeWidth="1" opacity="0.4" />
-                        <line x1="85" y1="16" x2="85" y2="40" stroke={statusColor} strokeWidth="1" opacity="0.4" />
-                        {/* 프로펠러 4개 */}
-                        <circle cx="73" cy="28" r="4" fill={statusColor} opacity="0.25" />
-                        <circle cx="97" cy="28" r="4" fill={statusColor} opacity="0.25" />
-                        <circle cx="85" cy="16" r="4" fill={statusColor} opacity="0.25" />
-                        <circle cx="85" cy="40" r="4" fill={statusColor} opacity="0.25" />
+                        {/* ── 드론: 쿼드콥터 아이콘 ── */}
+                        {/* 외곽 원 */}
+                        <circle cx="88" cy="30" r="18" fill="rgba(10,14,24,.7)" stroke={statusColor} strokeWidth="1.5" />
+                        {/* X자 팔 */}
+                        <line x1="76" y1="18" x2="100" y2="42" stroke={statusColor} strokeWidth="1.2" opacity="0.5" />
+                        <line x1="100" y1="18" x2="76" y2="42" stroke={statusColor} strokeWidth="1.2" opacity="0.5" />
+                        {/* 프로펠러 4개 (회전 애니메이션) */}
+                        <ellipse cx="76" cy="18" rx="5" ry="2.5" fill={statusColor} opacity="0.35">
+                          <animateTransform attributeName="transform" type="rotate" from="0 76 18" to="360 76 18" dur="1.5s" repeatCount="indefinite" />
+                        </ellipse>
+                        <ellipse cx="100" cy="18" rx="5" ry="2.5" fill={statusColor} opacity="0.35">
+                          <animateTransform attributeName="transform" type="rotate" from="0 100 18" to="-360 100 18" dur="1.5s" repeatCount="indefinite" />
+                        </ellipse>
+                        <ellipse cx="76" cy="42" rx="5" ry="2.5" fill={statusColor} opacity="0.35">
+                          <animateTransform attributeName="transform" type="rotate" from="0 76 42" to="-360 76 42" dur="1.5s" repeatCount="indefinite" />
+                        </ellipse>
+                        <ellipse cx="100" cy="42" rx="5" ry="2.5" fill={statusColor} opacity="0.35">
+                          <animateTransform attributeName="transform" type="rotate" from="0 100 42" to="360 100 42" dur="1.5s" repeatCount="indefinite" />
+                        </ellipse>
                         {/* 본체 */}
-                        <circle cx="85" cy="28" r="5" fill={statusColor} opacity="0.8" />
-                        <circle cx="85" cy="28" r="2.5" fill="#fff" opacity="0.9" />
-                        {/* 송출중 LED */}
+                        <circle cx="88" cy="30" r="6" fill={statusColor} opacity="0.8" />
+                        {/* 카메라 렌즈 */}
+                        <circle cx="88" cy="30" r="3" fill="#fff" opacity="0.9" />
+                        <circle cx="88" cy="30" r="1.5" fill={statusColor} />
+                        {/* 송출중 REC LED */}
                         {stream.status === 'streaming' && (
-                          <circle cx="95" cy="18" r="3" fill="#ef4444">
-                            <animate attributeName="opacity" values="1;0.2;1" dur="1.2s" repeatCount="indefinite" />
+                          <circle cx="100" cy="16" r="3" fill="#ef4444">
+                            <animate attributeName="opacity" values="1;0.2;1" dur="1s" repeatCount="indefinite" />
                           </circle>
                         )}
-                        {/* 드론 이름 */}
-                        <rect x="62" y="46" width="46" height="12" rx="3" fill="rgba(0,0,0,.7)" />
-                        <text x="85" y="55" textAnchor="middle" fill={statusColor} fontSize="7" fontFamily="sans-serif" fontWeight="bold">{stream.droneModel.split(' ').slice(-1)[0]}</text>
+                        {/* 드론 모델명 */}
+                        <rect x="65" y="51" width="46" height="12" rx="3" fill="rgba(0,0,0,.75)" />
+                        <text x="88" y="60" textAnchor="middle" fill={statusColor} fontSize="7" fontFamily="sans-serif" fontWeight="bold">{stream.droneModel.split(' ').slice(-1)[0]}</text>
                       </svg>
                     </div>
                   </Marker>