From 08b8f16001c054ecaa4b140dc2ca691f4cbd18f4 Mon Sep 17 00:00:00 2001
From: htlee <htlee@gcsc.co.kr>
Date: Sun, 1 Mar 2026 01:31:58 +0900
Subject: [PATCH] =?UTF-8?q?fix(prediction):=20=EC=8B=9C=EB=AE=AC=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20API=EB=A5=BC=20localhost=20=EB=8C=80?=
 =?UTF-8?q?=EC=8B=A0=20api=20=EC=9D=B8=EC=8A=A4=ED=84=B4=EC=8A=A4=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fetch('http://localhost:3001/...') → api.post('/simulation/run', ...)
배포 환경에서 CORS loopback 차단 문제 해결

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../prediction/components/OilSpillView.tsx    | 30 +++++++------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/frontend/src/tabs/prediction/components/OilSpillView.tsx b/frontend/src/tabs/prediction/components/OilSpillView.tsx
index db35a4f..fd84ca3 100755
--- a/frontend/src/tabs/prediction/components/OilSpillView.tsx
+++ b/frontend/src/tabs/prediction/components/OilSpillView.tsx
@@ -14,6 +14,7 @@ import type { BacktrackPhase, BacktrackVessel, BacktrackConditions, ReplayShip,
 import { TOTAL_REPLAY_FRAMES } from '@common/types/backtrack'
 import { fetchBacktrackByAcdnt, createBacktrack, fetchPredictionDetail } from '../services/predictionApi'
 import type { PredictionDetail } from '../services/predictionApi'
+import { api } from '@common/services/api'
 
 export type PredictionModel = 'KOSPS' | 'POSEIDON' | 'OpenDrift'
 // eslint-disable-next-line react-refresh/only-export-components
@@ -259,27 +260,16 @@ export function OilSpillView() {
       const models = Array.from(selectedModels)
       const results = await Promise.all(
         models.map(async (model) => {
-          const response = await fetch('http://localhost:3001/api/simulation/run', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              model,
-              lat: incidentCoord.lat,
-              lon: incidentCoord.lon,
-              duration_hours: predictionTime,
-              oil_type: oilType,
-              spill_amount: spillAmount,
-              spill_type: spillType
-            })
+          const { data } = await api.post<{ trajectory: Array<{ lat: number; lon: number; time: number; particle?: number }> }>('/simulation/run', {
+            model,
+            lat: incidentCoord.lat,
+            lon: incidentCoord.lon,
+            duration_hours: predictionTime,
+            oil_type: oilType,
+            spill_amount: spillAmount,
+            spill_type: spillType,
           })
-
-          if (!response.ok) {
-            throw new Error(`API 오류 (${model}): ${response.status}`)
-          }
-
-          const data = await response.json()
-          return (data.trajectory as Array<{ lat: number; lon: number; time: number; particle?: number }>)
-            .map(p => ({ ...p, model }))
+          return data.trajectory.map(p => ({ ...p, model }))
         })
       )