diff --git a/frontend/src/tabs/prediction/components/RightPanel.tsx b/frontend/src/tabs/prediction/components/RightPanel.tsx index 6a7094c..55d6a37 100755 --- a/frontend/src/tabs/prediction/components/RightPanel.tsx +++ b/frontend/src/tabs/prediction/components/RightPanel.tsx @@ -18,6 +18,11 @@ export function RightPanel({ onOpenBacktrack, onOpenRecalc, onOpenReport, detail const [shipExpanded, setShipExpanded] = useState(false) const [insuranceExpanded, setInsuranceExpanded] = useState(false) const [polygonResult, setPolygonResult] = useState<{ areaKm2: number; perimeterKm: number; particleCount: number; hullPoints: number } | null>(null) + const [showCircleInput, setShowCircleInput] = useState(false) + const [circleCenterLat, setCircleCenterLat] = useState('') + const [circleCenterLon, setCircleCenterLon] = useState('') + const [circleRadiusKm, setCircleRadiusKm] = useState('') + const [circleResult, setCircleResult] = useState<{ areaKm2: number; circumferenceKm: number; centerLat: number; centerLon: number; radiusKm: number } | null>(null) return (
@@ -60,12 +65,115 @@ export function RightPanel({ onOpenBacktrack, onOpenRecalc, onOpenReport, detail ๐Ÿ“ ๋‹ค๊ฐํ˜• ๋ถ„์„
+ + {/* ์› ๋ถ„์„ ์ž…๋ ฅ ํผ */} + {showCircleInput && ( +
+
โญ• ์› ๋ถ„์„ โ€” ์ค‘์‹ฌ์  ยท ๋ฐ˜๊ฒฝ ์ž…๋ ฅ
+
+
+ + setCircleCenterLat(e.target.value)} + placeholder="์˜ˆ: 34.7312" + className="w-full px-2 py-1.5 bg-bg-3 border border-border rounded text-[10px] font-mono text-text-1 outline-none focus:border-[var(--cyan)] transition-colors" + /> +
+
+ + setCircleCenterLon(e.target.value)} + placeholder="์˜ˆ: 127.6845" + className="w-full px-2 py-1.5 bg-bg-3 border border-border rounded text-[10px] font-mono text-text-1 outline-none focus:border-[var(--cyan)] transition-colors" + /> +
+
+
+ + setCircleRadiusKm(e.target.value)} + placeholder="์˜ˆ: 3.0" + className="w-full px-2 py-1.5 bg-bg-3 border border-border rounded text-[10px] font-mono text-text-1 outline-none focus:border-[var(--cyan)] transition-colors" + /> +
+ +
+ )} + + {/* ์› ๋ถ„์„ ๊ฒฐ๊ณผ */} + {circleResult && ( +
+
โญ• ์› ๋ถ„์„ ๊ฒฐ๊ณผ
+
+
+
{circleResult.areaKm2.toFixed(2)}
+
์˜ค์—ผ ๋ฉด์  (kmยฒ)
+
+
+
{circleResult.circumferenceKm.toFixed(1)}
+
์› ๋‘˜๋ ˆ (km)
+
+
+
{circleResult.radiusKm.toFixed(1)}
+
๋ฐ˜๊ฒฝ (km)
+
+
+
{circleResult.centerLat.toFixed(4)}ยฐN
+
{circleResult.centerLon.toFixed(4)}ยฐE
+
์ค‘์‹ฌ ์ขŒํ‘œ
+
+
+
+ )} + {polygonResult && (
๐Ÿ“ Convex Hull ๋‹ค๊ฐํ˜• ๋ถ„์„ ๊ฒฐ๊ณผ