From 4cf29521a9d412ac8d3d7a3b2636da43a0441d24 Mon Sep 17 00:00:00 2001
From: htlee <htlee@gcsc.co.kr>
Date: Tue, 31 Mar 2026 08:01:23 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=AA=A8=EB=8D=B8=20=ED=8C=A8=EB=84=90?=
 =?UTF-8?q?=20=EC=9C=84=EC=B9=98=20=EC=83=81=ED=96=A5=20=E2=80=94=20?=
 =?UTF-8?q?=EC=9E=AC=EC=83=9D=20=EC=BB=A8=ED=8A=B8=EB=A1=A4=EB=9F=AC?=
 =?UTF-8?q?=EC=99=80=20=EA=B2=B9=EC=B9=A8=20=ED=95=B4=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CorrelationPanel: historyData prop 제거 → useGearReplayStore 직접 구독
재생 활성 시 bottom: 80→100 (컨트롤러 높이 60px 확보)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/korea/CorrelationPanel.tsx  | 9 ++++-----
 frontend/src/components/korea/FleetClusterLayer.tsx | 2 --
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/korea/CorrelationPanel.tsx b/frontend/src/components/korea/CorrelationPanel.tsx
index c2077cc..fe0f296 100644
--- a/frontend/src/components/korea/CorrelationPanel.tsx
+++ b/frontend/src/components/korea/CorrelationPanel.tsx
@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import type { GearCorrelationItem, CorrelationVesselTrack } from '../../services/vesselAnalysis';
 import type { UseGroupPolygonsResult } from '../../hooks/useGroupPolygons';
-import type { HistoryFrame } from './fleetClusterTypes';
 import { FONT_MONO } from '../../styles/fonts';
 import { MODEL_ORDER, MODEL_COLORS, MODEL_DESC } from './fleetClusterConstants';
+import { useGearReplayStore } from '../../stores/gearReplayStore';
 
 interface CorrelationPanelProps {
   selectedGearGroup: string;
@@ -15,8 +15,6 @@ interface CorrelationPanelProps {
   enabledModels: Set<string>;
   enabledVessels: Set<string>;
   correlationLoading: boolean;
-  historyData: HistoryFrame[] | null;
-  effectiveSnapIdx: number;
   hoveredTarget: { mmsi: string; model: string } | null;
   onEnabledModelsChange: (updater: (prev: Set<string>) => Set<string>) => void;
   onEnabledVesselsChange: (updater: (prev: Set<string>) => Set<string>) => void;
@@ -36,12 +34,13 @@ const CorrelationPanel = ({
   enabledModels,
   enabledVessels,
   correlationLoading,
-  historyData,
   hoveredTarget,
   onEnabledModelsChange,
   onEnabledVesselsChange,
   onHoveredTargetChange,
 }: CorrelationPanelProps) => {
+  const historyActive = useGearReplayStore(s => s.historyFrames.length > 0);
+
   // Local tooltip state
   const [hoveredModelTip, setHoveredModelTip] = useState<string | null>(null);
   const [pinnedModelTip, setPinnedModelTip] = useState<string | null>(null);
@@ -213,7 +212,7 @@ const CorrelationPanel = ({
   return (
     <div style={{
       position: 'absolute',
-      bottom: historyData ? 80 : 20,
+      bottom: historyActive ? 100 : 20,
       left: 'calc(50% - 275px)',
       display: 'flex',
       gap: 6,
diff --git a/frontend/src/components/korea/FleetClusterLayer.tsx b/frontend/src/components/korea/FleetClusterLayer.tsx
index 20c71e7..a7b4819 100644
--- a/frontend/src/components/korea/FleetClusterLayer.tsx
+++ b/frontend/src/components/korea/FleetClusterLayer.tsx
@@ -429,8 +429,6 @@ export function FleetClusterLayer({ ships, analysisMap: analysisMapProp, onShipS
           enabledModels={enabledModels}
           enabledVessels={enabledVessels}
           correlationLoading={correlationLoading}
-          historyData={null}
-          effectiveSnapIdx={-1}
           hoveredTarget={hoveredTarget}
           onEnabledModelsChange={(updater) => setEnabledModels(updater)}
           onEnabledVesselsChange={(updater) => setEnabledVessels(updater)}