diff --git a/frontend/src/hooks/useGearReplayLayers.ts b/frontend/src/hooks/useGearReplayLayers.ts index ea3c816..1ad21bf 100644 --- a/frontend/src/hooks/useGearReplayLayers.ts +++ b/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', + })); + } } }