fix: UX 개선 — 줌 스케일 연동 + 호버 커서 (#149)

frontend/src/components/korea/KoreaMap.tsx

@@ -175,12 +175,20 @@ export function KoreaMap({ ships, allShips, aircraft, satellites, layers, osintF
     );
   }, []);
 
-  // 줌 레벨별 아이콘/심볼 스케일 배율
+  // 줌 레벨별 아이콘/심볼 스케일 배율 — z4=1.0x 기준, 2단계씩 상향
+  // 줌 레벨별 아이콘/심볼 스케일 배율 — z4=0.8x, z6=1.0x 시작, 2단계씩 상향
   const zoomScale = useMemo(() => {
-    if (zoomLevel <= 6) return 0.6;
-    if (zoomLevel <= 9) return 1.0;
-    if (zoomLevel <= 12) return 1.4;
-    return 1.8;
+    if (zoomLevel <= 4) return 0.8;
+    if (zoomLevel <= 5) return 0.9;
+    if (zoomLevel <= 6) return 1.0;
+    if (zoomLevel <= 7) return 1.2;
+    if (zoomLevel <= 8) return 1.5;
+    if (zoomLevel <= 9) return 1.8;
+    if (zoomLevel <= 10) return 2.2;
+    if (zoomLevel <= 11) return 2.5;
+    if (zoomLevel <= 12) return 2.8;
+    if (zoomLevel <= 13) return 3.5;
+    return 4.2;
   }, [zoomLevel]);
 
   // 불법어선 강조 — deck.gl ScatterplotLayer + TextLayer

frontend/src/components/layers/DeckGLOverlay.tsx

@@ -12,7 +12,10 @@ interface Props {
  */
 export function DeckGLOverlay({ layers }: Props) {
   const overlay = useControl<MapboxOverlay>(
-    () => new MapboxOverlay({ interleaved: true }),
+    () => new MapboxOverlay({
+      interleaved: true,
+      getCursor: ({ isHovering }) => isHovering ? 'pointer' : '',
+    }),
   );
   overlay.setProps({ layers });
   return null;

frontend/src/components/layers/ShipLayer.tsx

@@ -559,7 +559,7 @@ export function ShipLayer({ ships, militaryOnly, koreanOnly, hoveredMmsi, focusM
           layout={{
             'visibility': highlightKorean ? 'visible' : 'none',
             'text-field': ['get', 'name'],
-            'text-size': 9,
+            'text-size': ['interpolate', ['linear'], ['zoom'], 4, 8, 6, 9, 8, 11, 10, 14, 12, 16, 13, 18, 14, 20],
             'text-offset': [0, 2.2],
             'text-anchor': 'top',
             'text-allow-overlap': false,
@@ -577,7 +577,15 @@ export function ShipLayer({ ships, militaryOnly, koreanOnly, hoveredMmsi, focusM
           type="symbol"
           layout={{
             'icon-image': 'ship-triangle',
-            'icon-size': ['get', 'size'],
+            'icon-size': ['interpolate', ['linear'], ['zoom'],
+              4, ['*', ['get', 'size'], 0.8],
+              6, ['*', ['get', 'size'], 1.0],
+              8, ['*', ['get', 'size'], 1.5],
+              10, ['*', ['get', 'size'], 2.2],
+              12, ['*', ['get', 'size'], 2.8],
+              13, ['*', ['get', 'size'], 3.5],
+              14, ['*', ['get', 'size'], 4.2],
+            ],
             'icon-rotate': ['get', 'heading'],
             'icon-rotation-alignment': 'map',
             'icon-allow-overlap': true,