fix: stabilize hook order in RelationsPanel

apps/web/src/widgets/relations/RelationsPanel.tsx

@@ -62,6 +62,35 @@ export function RelationsPanel({
   const isVesselHighlight = (mmsi: number, ownerKey: string | null) =>
     hoveredFleetMmsis.has(mmsi) || isFleetHighlightByOwner(ownerKey);
 
+  const topFleets = useMemo(() => {
+    const group = new Map<string, DerivedLegacyVessel[]>();
+    for (const v of fleetVessels) {
+      if (!v.ownerKey) continue;
+      const list = group.get(v.ownerKey);
+      if (list) list.push(v);
+      else group.set(v.ownerKey, [v]);
+    }
+
+    return Array.from(group.entries())
+      .map(([ownerKey, vs]) => {
+        const lon = vs.reduce((sum, v) => sum + v.lon, 0) / vs.length;
+        const lat = vs.reduce((sum, v) => sum + v.lat, 0) / vs.length;
+        const radiusNm = vs.reduce((max, v) => {
+          const d = haversineNm(lat, lon, v.lat, v.lon);
+          return Math.max(max, d);
+        }, 0);
+
+        return { ownerKey, vs, radiusNm };
+      })
+      .filter((x) => x.vs.length >= 3)
+      .sort((a, b) => {
+        if (fleetSortMode === "range") {
+          return b.radiusNm - a.radiusNm || b.vs.length - a.vs.length;
+        }
+        return b.vs.length - a.vs.length || b.radiusNm - a.radiusNm;
+      });
+  }, [fleetVessels, fleetSortMode]);
+
   if (selectedVessel) {
     const v = selectedVessel;
     const meta = VESSEL_TYPES[v.shipCode];
@@ -238,36 +267,6 @@ export function RelationsPanel({
     return <div style={{ fontSize: 11, color: "var(--muted)" }}>(현재 지도에 표시중인 대상 선박이 없습니다)</div>;
   }
 
-  const group = new Map<string, DerivedLegacyVessel[]>();
-  for (const v of fleetVessels) {
-    if (!v.ownerKey) continue;
-    const list = group.get(v.ownerKey);
-    if (list) list.push(v);
-    else group.set(v.ownerKey, [v]);
-  }
-
-  const topFleets = useMemo(() => {
-    const toFleetMeta = Array.from(group.entries())
-      .map(([ownerKey, vs]) => {
-        const lon = vs.reduce((sum, v) => sum + v.lon, 0) / vs.length;
-        const lat = vs.reduce((sum, v) => sum + v.lat, 0) / vs.length;
-        const radiusNm = vs.reduce((max, v) => {
-          const d = haversineNm(lat, lon, v.lat, v.lon);
-          return Math.max(max, d);
-        }, 0);
-
-        return { ownerKey, vs, radiusNm };
-      })
-      .filter((x) => x.vs.length >= 3);
-
-    return toFleetMeta.sort((a, b) => {
-      if (fleetSortMode === "range") {
-        return b.radiusNm - a.radiusNm || b.vs.length - a.vs.length;
-      }
-      return b.vs.length - a.vs.length || b.radiusNm - a.radiusNm;
-    });
-  }, [fleetSortMode, group]);
-
   if (topFleets.length === 0) {
     return <div style={{ fontSize: 11, color: "var(--muted)" }}>(표시 중인 선단(3척 이상) 없음)</div>;
   }