feat: 모델 중심점에 모델명 라벨 표시 (showLabels 연동)

이름 토글 ON 시 각 모델 폴리곤 중심점 위에 모델명 TextLayer 표시
모델 색상 + 검정 배경, 중심점 위 12px offset

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/hooks/useGearReplayLayers.ts

@@ -543,11 +543,12 @@ export function useGearReplayLayers(
         const cx = trail.path[lo][0] + (trail.path[hi][0] - trail.path[lo][0]) * ratio;
         const cy = trail.path[lo][1] + (trail.path[hi][1] - trail.path[lo][1]) * ratio;
 
+        const centerData = [{ position: [cx, cy] as [number, number] }];
         layers.push(new ScatterplotLayer({
           id: `replay-model-center-${trail.modelName}`,
-          data: [{ position: [cx, cy] as [number, number] }],
+          data: centerData,
           getPosition: (d: { position: [number, number] }) => d.position,
-          getFillColor: [r, g, b, 255], // 고채도
+          getFillColor: [r, g, b, 255],
           getRadius: 150,
           radiusUnits: 'meters',
           radiusMinPixels: 5,
@@ -555,6 +556,21 @@ export function useGearReplayLayers(
           getLineColor: [255, 255, 255, 200],
           lineWidthMinPixels: 1.5,
         }));
+        if (showLabels) {
+          layers.push(new TextLayer({
+            id: `replay-model-center-label-${trail.modelName}`,
+            data: centerData,
+            getPosition: (d: { position: [number, number] }) => d.position,
+            getText: () => trail.modelName,
+            getColor: [r, g, b, 255],
+            getSize: 9,
+            getPixelOffset: [0, -12],
+            background: true,
+            getBackgroundColor: [0, 0, 0, 200],
+            backgroundPadding: [3, 1],
+            fontFamily: '"Fira Code Variable", monospace',
+          }));
+        }
       }
     }