apps/web/src/widgets/map3d/hooks/useZonesLayer.ts

@@ -10,6 +10,7 @@ import type { ZonesGeoJson } from '../../../entities/zone/api/useZones';
 import type { MapToggleState } from '../../../features/mapToggles/MapToggles';
 import type { BaseMapId, MapProjectionId } from '../types';
 import { kickRepaint, onMapStyleReady } from '../lib/mapCore';
+import { guardedSetVisibility } from '../lib/layerHelpers';
 
 export function useZonesLayer(
   mapRef: MutableRefObject<maplibregl.Map | null>,
@@ -48,22 +49,13 @@ export function useZonesLayer(
 
     const ensure = () => {
       if (projectionBusyRef.current) return;
-      const visibility = overlays.zones ? 'visible' : 'none';
+      const visibility: 'visible' | 'none' = overlays.zones ? 'visible' : 'none';
-      try {
+      // globe 모드에서 fill polygon은 tessellation으로 vertex 65535 초과 → 숨김
-        if (map.getLayer(fillId)) map.setLayoutProperty(fillId, 'visibility', visibility);
+      // (해안선 디테일 2100+ vertex가 globe에서 100,000+로 폭증하여 노란 막대 아티팩트 발생)
-      } catch {
+      const fillVisibility: 'visible' | 'none' = projection === 'globe' ? 'none' : visibility;
-        // ignore
+      guardedSetVisibility(map, fillId, fillVisibility);
-      }
+      guardedSetVisibility(map, lineId, visibility);
-      try {
+      guardedSetVisibility(map, labelId, visibility);
-        if (map.getLayer(lineId)) map.setLayoutProperty(lineId, 'visibility', visibility);
-      } catch {
-        // ignore
-      }
-      try {
-        if (map.getLayer(labelId)) map.setLayoutProperty(labelId, 'visibility', visibility);
-      } catch {
-        // ignore
-      }
 
       if (!zones) return;
       if (!map.isStyleLoaded()) return;
@@ -160,7 +152,7 @@ export function useZonesLayer(
                     ] as unknown as number)
                   : 0.12,
               },
-              layout: { visibility },
+              layout: { visibility: fillVisibility },
             } as unknown as LayerSpecification,
             before,
           );