From 99d714582b2b03d30df6661a2dda013f81514c0d Mon Sep 17 00:00:00 2001
From: htlee <htlee@gcsc.co.kr>
Date: Mon, 16 Feb 2026 13:38:37 +0900
Subject: [PATCH] =?UTF-8?q?fix(map):=20globe=20=EB=AA=A8=EB=93=9C=20zones-?=
 =?UTF-8?q?fill=20=EC=88=A8=EA=B9=80=20+=20=EB=9D=BC=EB=B2=A8=20=EA=B0=80?=
 =?UTF-8?q?=EB=93=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- globe tessellation에서 수역 fill polygon vertex 65535 초과
  (해안선 2100 vertex → globe에서 108890+로 폭증) → 노란 막대
- globe 모드에서 zones-fill visibility: none으로 설정
- guardedSetVisibility 적용으로 수역 라벨 사라짐 방지

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/widgets/map3d/hooks/useZonesLayer.ts  | 26 +++++++------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/widgets/map3d/hooks/useZonesLayer.ts b/apps/web/src/widgets/map3d/hooks/useZonesLayer.ts
index e1f19fd..19b143e 100644
--- a/apps/web/src/widgets/map3d/hooks/useZonesLayer.ts
+++ b/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';
-      try {
-        if (map.getLayer(fillId)) map.setLayoutProperty(fillId, 'visibility', visibility);
-      } catch {
-        // ignore
-      }
-      try {
-        if (map.getLayer(lineId)) map.setLayoutProperty(lineId, 'visibility', visibility);
-      } catch {
-        // ignore
-      }
-      try {
-        if (map.getLayer(labelId)) map.setLayoutProperty(labelId, 'visibility', visibility);
-      } catch {
-        // ignore
-      }
+      const visibility: 'visible' | 'none' = overlays.zones ? 'visible' : 'none';
+      // globe 모드에서 fill polygon은 tessellation으로 vertex 65535 초과 → 숨김
+      // (해안선 디테일 2100+ vertex가 globe에서 100,000+로 폭증하여 노란 막대 아티팩트 발생)
+      const fillVisibility: 'visible' | 'none' = projection === 'globe' ? 'none' : visibility;
+      guardedSetVisibility(map, fillId, fillVisibility);
+      guardedSetVisibility(map, lineId, visibility);
+      guardedSetVisibility(map, labelId, visibility);
 
       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,
           );