Merge pull request 'feat: 예측 실행 이력 선택, 보고서 기능 개선, 수치예측자료 모니터링 추가' (#119) from feature/20260325 into develop

.claude/workflow-version.json

@@ -1,6 +1,6 @@
 {
   "applied_global_version": "1.6.1",
-  "applied_date": "2026-03-24",
+  "applied_date": "2026-03-25",
   "project_type": "react-ts",
   "gitea_url": "https://gitea.gc-si.dev",
   "custom_pre_commit": true

backend/src/monitor/monitorRouter.ts

@@ -0,0 +1,20 @@
+import { Router } from 'express'
+import { requireAuth } from '../auth/authMiddleware.js'
+import { getNumericalDataStatus } from './monitorService.js'
+
+const router = Router()
+
+router.use(requireAuth)
+
+// GET /api/monitor/numerical — 수치예측자료 다운로드 상태 조회
+router.get('/numerical', async (_req, res) => {
+  try {
+    const data = await getNumericalDataStatus()
+    res.json(data)
+  } catch (err) {
+    console.error('[monitor] 수치예측자료 상태 조회 오류:', err)
+    res.status(500).json({ error: '수치예측자료 상태를 조회할 수 없습니다.' })
+  }
+})
+
+export default router

backend/src/monitor/monitorService.ts

@@ -0,0 +1,121 @@
+export interface NumericalDataStatus {
+  modelName: string;
+  jobName: string;
+  lastStatus: 'COMPLETED' | 'FAILED' | 'STARTED' | 'UNKNOWN';
+  lastDataDate: string | null;     // 데이터 기준일 (YYYY-MM-DD)
+  lastDownloadedAt: string | null; // 마지막 실행 완료 시각 (ISO)
+  nextScheduledAt: string | null;  // Quartz 다음 예정 시각 (ISO)
+  durationSec: number | null;      // 소요 시간 (초)
+  consecutiveFailures: number;     // 연속 실패 횟수
+}
+
+// ============================================================
+// Mock 데이터 (Spring Batch/Quartz DB 연동 전)
+// DB 연동 준비 완료 후 getMockNumericalDataStatus → getActualNumericalDataStatus 교체
+// ============================================================
+const MOCK_DATA: NumericalDataStatus[] = [
+  {
+    modelName: 'HYCOM',
+    jobName: 'downloadHycomJob',
+    lastStatus: 'COMPLETED',
+    lastDataDate: '2026-03-25',
+    lastDownloadedAt: '2026-03-25T06:12:34',
+    nextScheduledAt: '2026-03-25T12:00:00',
+    durationSec: 342,
+    consecutiveFailures: 0,
+  },
+  {
+    modelName: 'GFS',
+    jobName: 'downloadGfsJob',
+    lastStatus: 'COMPLETED',
+    lastDataDate: '2026-03-25',
+    lastDownloadedAt: '2026-03-25T06:48:11',
+    nextScheduledAt: '2026-03-25T12:00:00',
+    durationSec: 518,
+    consecutiveFailures: 0,
+  },
+  {
+    modelName: 'WW3',
+    jobName: 'downloadWw3Job',
+    lastStatus: 'FAILED',
+    lastDataDate: '2026-03-24',
+    lastDownloadedAt: '2026-03-25T07:03:55',
+    nextScheduledAt: '2026-03-25T13:00:00',
+    durationSec: null,
+    consecutiveFailures: 2,
+  },
+  {
+    modelName: 'KOAST POS_WIND',
+    jobName: 'downloadKoastWindJob',
+    lastStatus: 'COMPLETED',
+    lastDataDate: '2026-03-25',
+    lastDownloadedAt: '2026-03-25T07:21:05',
+    nextScheduledAt: '2026-03-25T13:00:00',
+    durationSec: 127,
+    consecutiveFailures: 0,
+  },
+  {
+    modelName: 'KOAST POS_HYDR',
+    jobName: 'downloadKoastHydrJob',
+    lastStatus: 'COMPLETED',
+    lastDataDate: '2026-03-25',
+    lastDownloadedAt: '2026-03-25T07:35:48',
+    nextScheduledAt: '2026-03-25T13:00:00',
+    durationSec: 183,
+    consecutiveFailures: 0,
+  },
+  {
+    modelName: 'KOAST POS_WAVE',
+    jobName: 'downloadKoastWaveJob',
+    lastStatus: 'COMPLETED',
+    lastDataDate: '2026-03-25',
+    lastDownloadedAt: '2026-03-25T07:52:19',
+    nextScheduledAt: '2026-03-25T13:00:00',
+    durationSec: 156,
+    consecutiveFailures: 0,
+  },
+];
+
+export async function getNumericalDataStatus(): Promise<NumericalDataStatus[]> {
+  // TODO: Spring Batch + Quartz DB 테이블 생성 후 아래 실제 쿼리로 교체
+  //
+  // import { wingDb } from '../db/wingDb.js'
+  //
+  // -- 각 Job의 최신 실행 결과 조회 (BATCH_JOB_EXECUTION)
+  // SELECT
+  //   ji.JOB_NAME,
+  //   je.START_TIME, je.END_TIME,
+  //   je.STATUS, je.EXIT_CODE, je.EXIT_MESSAGE,
+  //   jep.STRING_VAL AS data_date,
+  //   EXTRACT(EPOCH FROM (je.END_TIME - je.START_TIME))::INT AS duration_sec
+  // FROM BATCH_JOB_EXECUTION je
+  // JOIN BATCH_JOB_INSTANCE ji ON je.JOB_INSTANCE_ID = ji.JOB_INSTANCE_ID
+  // LEFT JOIN BATCH_JOB_EXECUTION_PARAMS jep
+  //   ON je.JOB_EXECUTION_ID = jep.JOB_EXECUTION_ID
+  //   AND jep.KEY_NAME = 'data_date'
+  // WHERE je.JOB_EXECUTION_ID IN (
+  //   SELECT MAX(je2.JOB_EXECUTION_ID)
+  //   FROM BATCH_JOB_EXECUTION je2
+  //   GROUP BY je2.JOB_INSTANCE_ID
+  // )
+  // ORDER BY je.START_TIME DESC;
+  //
+  // -- Quartz 다음 실행 예정 시각 (NEXT_FIRE_TIME은 epoch milliseconds)
+  // SELECT JOB_NAME, to_timestamp(NEXT_FIRE_TIME / 1000) AS next_fire_time
+  // FROM QRTZ_TRIGGERS;
+  //
+  // -- 연속 실패 횟수 집계 (최근 실행부터 COMPLETED 전까지 카운트)
+  // SELECT ji.JOB_NAME, COUNT(*) AS consecutive_failures
+  // FROM BATCH_JOB_EXECUTION je
+  // JOIN BATCH_JOB_INSTANCE ji ON je.JOB_INSTANCE_ID = ji.JOB_INSTANCE_ID
+  // WHERE je.STATUS = 'FAILED'
+  //   AND je.JOB_EXECUTION_ID > (
+  //     SELECT COALESCE(MAX(je2.JOB_EXECUTION_ID), 0)
+  //     FROM BATCH_JOB_EXECUTION je2
+  //     WHERE je2.JOB_INSTANCE_ID = je.JOB_INSTANCE_ID
+  //       AND je2.STATUS = 'COMPLETED'
+  //   )
+  // GROUP BY ji.JOB_NAME;
+
+  return MOCK_DATA;
+}

backend/src/prediction/predictionRouter.ts

@@ -46,7 +46,7 @@ router.get('/analyses/:acdntSn', requireAuth, requirePermission('prediction', 'R
   }
 });
 
-// GET /api/prediction/analyses/:acdntSn/trajectory — 최신 OpenDrift 결과 조회
+// GET /api/prediction/analyses/:acdntSn/trajectory — 예측 결과 조회 (predRunSn으로 특정 실행 지정 가능)
 router.get('/analyses/:acdntSn/trajectory', requireAuth, requirePermission('prediction', 'READ'), async (req, res) => {
   try {
     const acdntSn = parseInt(req.params.acdntSn as string, 10);
@@ -54,7 +54,8 @@ router.get('/analyses/:acdntSn/trajectory', requireAuth, requirePermission('pred
       res.status(400).json({ error: '유효하지 않은 사고 번호' });
       return;
     }
-    const result = await getAnalysisTrajectory(acdntSn);
+    const predRunSn = req.query.predRunSn ? parseInt(req.query.predRunSn as string, 10) : undefined;
+    const result = await getAnalysisTrajectory(acdntSn, predRunSn);
     if (!result) {
       res.json({ trajectory: null, summary: null });
       return;

backend/src/prediction/predictionService.ts

@@ -19,6 +19,8 @@ interface PredictionAnalysis {
   analyst: string;
   officeName: string;
   acdntSttsCd: string;
+  predRunSn: number | null;
+  runDtm: string | null;
 }
 
 interface PredictionDetail {
@@ -142,21 +144,26 @@ export async function listAnalyses(input: ListAnalysesInput): Promise<Prediction
       S.SPIL_QTY,
       S.SPIL_UNIT_CD,
       S.FCST_HR,
+      P.PRED_RUN_SN,
+      P.RUN_DTM,
       P.KOSPS_STATUS,
       P.POSEIDON_STATUS,
       P.OPENDRIFT_STATUS,
       B.BACKTRACK_STATUS
     FROM ACDNT A
-    LEFT JOIN SPIL_DATA S ON S.ACDNT_SN = A.ACDNT_SN
+    INNER JOIN (
-    LEFT JOIN (
       SELECT
         ACDNT_SN,
+        PRED_RUN_SN,
+        MIN(BGNG_DTM) AS RUN_DTM,
+        MIN(SPIL_DATA_SN) AS SPIL_DATA_SN,
         MAX(CASE WHEN ALGO_CD = 'KOSPS' THEN EXEC_STTS_CD END) AS KOSPS_STATUS,
         MAX(CASE WHEN ALGO_CD = 'POSEIDON' THEN EXEC_STTS_CD END) AS POSEIDON_STATUS,
         MAX(CASE WHEN ALGO_CD = 'OPENDRIFT' THEN EXEC_STTS_CD END) AS OPENDRIFT_STATUS
       FROM PRED_EXEC
-      GROUP BY ACDNT_SN
+      GROUP BY ACDNT_SN, PRED_RUN_SN
     ) P ON P.ACDNT_SN = A.ACDNT_SN
+    LEFT JOIN SPIL_DATA S ON S.SPIL_DATA_SN = P.SPIL_DATA_SN
     LEFT JOIN (
       SELECT
         ACDNT_SN,
@@ -165,7 +172,7 @@ export async function listAnalyses(input: ListAnalysesInput): Promise<Prediction
       GROUP BY ACDNT_SN
     ) B ON B.ACDNT_SN = A.ACDNT_SN
     ${whereClause}
-    ORDER BY A.OCCRN_DTM DESC
+    ORDER BY A.OCCRN_DTM DESC, P.RUN_DTM DESC NULLS LAST
   `;
 
   const { rows } = await wingPool.query(sql, params);
@@ -189,6 +196,8 @@ export async function listAnalyses(input: ListAnalysesInput): Promise<Prediction
     analyst: String(row['analyst_nm'] ?? ''),
     officeName: String(row['office_nm'] ?? ''),
     acdntSttsCd: String(row['acdnt_stts_cd'] ?? 'ACTIVE'),
+    predRunSn: row['pred_run_sn'] != null ? Number(row['pred_run_sn']) : null,
+    runDtm: row['run_dtm'] ? String(row['run_dtm']) : null,
   }));
 }
 
@@ -539,16 +548,27 @@ function transformTrajectoryResult(rawResult: TrajectoryTimeStep[], model: strin
   return { trajectory, summary, stepSummaries, centerPoints, windData, hydrData };
 }
 
-export async function getAnalysisTrajectory(acdntSn: number): Promise<TrajectoryResult | null> {
+export async function getAnalysisTrajectory(acdntSn: number, predRunSn?: number): Promise<TrajectoryResult | null> {
   // 완료된 모든 모델(OPENDRIFT, POSEIDON) 결과 조회
-  const sql = `
+  // predRunSn이 있으면 해당 실행의 결과만, 없으면 최신 결과
+  const sql = predRunSn != null
+    ? `
+      SELECT ALGO_CD, RSLT_DATA, CMPL_DTM FROM wing.PRED_EXEC
+      WHERE ACDNT_SN = $1
+        AND PRED_RUN_SN = $2
+        AND ALGO_CD IN ('OPENDRIFT', 'POSEIDON')
+        AND EXEC_STTS_CD = 'COMPLETED'
+      ORDER BY CMPL_DTM DESC
+    `
+    : `
       SELECT ALGO_CD, RSLT_DATA, CMPL_DTM FROM wing.PRED_EXEC
       WHERE ACDNT_SN = $1
         AND ALGO_CD IN ('OPENDRIFT', 'POSEIDON')
         AND EXEC_STTS_CD = 'COMPLETED'
       ORDER BY CMPL_DTM DESC
     `;
-  const { rows } = await wingPool.query(sql, [acdntSn]);
+  const params = predRunSn != null ? [acdntSn, predRunSn] : [acdntSn];
+  const { rows } = await wingPool.query(sql, params);
   if (rows.length === 0) return null;
 
   // 모든 모델의 파티클을 하나의 배열로 병합

backend/src/routes/simulation.ts

@@ -210,14 +210,21 @@ router.post('/run', requireAuth, async (req: Request, res: Response) => {
     if (resolvedAcdntSn && !resolvedSpilDataSn) {
       try {
         const spilRes = await wingPool.query(
-          `SELECT SPIL_DATA_SN FROM wing.SPIL_DATA WHERE ACDNT_SN = $1 ORDER BY SPIL_DATA_SN DESC LIMIT 1`,
+          `INSERT INTO wing.SPIL_DATA (ACDNT_SN, OIL_TP_CD, SPIL_QTY, SPIL_UNIT_CD, SPIL_TP_CD, FCST_HR, REG_DTM)
-          [resolvedAcdntSn]
+           VALUES ($1, $2, $3, $4, $5, $6, NOW())
+           RETURNING SPIL_DATA_SN`,
+          [
+            resolvedAcdntSn,
+            OIL_DB_CODE_MAP[matTy as string] ?? 'BUNKER_C',
+            matVol ?? 0,
+            UNIT_MAP[spillUnit as string] ?? 'KL',
+            SPIL_TYPE_MAP[spillTypeCd as string] ?? 'CONTINUOUS',
+            runTime,
+          ]
         )
-        if (spilRes.rows.length > 0) {
         resolvedSpilDataSn = spilRes.rows[0].spil_data_sn as number
-        }
       } catch (dbErr) {
-        console.error('[simulation] SPIL_DATA 조회 실패:', dbErr)
+        console.error('[simulation] SPIL_DATA INSERT 실패:', dbErr)
       }
     }
 
@@ -545,30 +552,47 @@ router.post('/run-model', requireAuth, async (req: Request, res: Response) => {
     if (resolvedAcdntSn && !resolvedSpilDataSn) {
       try {
         const spilRes = await wingPool.query(
-          `SELECT SPIL_DATA_SN FROM wing.SPIL_DATA WHERE ACDNT_SN = $1 ORDER BY SPIL_DATA_SN DESC LIMIT 1`,
+          `INSERT INTO wing.SPIL_DATA (ACDNT_SN, OIL_TP_CD, SPIL_QTY, SPIL_UNIT_CD, SPIL_TP_CD, FCST_HR, REG_DTM)
-          [resolvedAcdntSn]
+           VALUES ($1, $2, $3, $4, $5, $6, NOW())
+           RETURNING SPIL_DATA_SN`,
+          [
+            resolvedAcdntSn,
+            OIL_DB_CODE_MAP[matTy as string] ?? 'BUNKER_C',
+            matVol ?? 0,
+            UNIT_MAP[spillUnit as string] ?? 'KL',
+            SPIL_TYPE_MAP[spillTypeCd as string] ?? 'CONTINUOUS',
+            runTime,
+          ]
         )
-        if (spilRes.rows.length > 0) {
         resolvedSpilDataSn = spilRes.rows[0].spil_data_sn as number
-        }
       } catch (dbErr) {
-        console.error('[simulation/run-model] SPIL_DATA 조회 실패:', dbErr)
+        console.error('[simulation/run-model] SPIL_DATA INSERT 실패:', dbErr)
       }
     }
 
     const odMatTy = matTy !== undefined ? (OIL_TYPE_MAP[matTy as string] ?? (matTy as string)) : undefined
     const execNmBase = `EXPC_${Date.now()}`
 
+    // 이번 예측 실행을 식별하는 그룹 SN 생성
+    let predRunSn: number
+    try {
+      const runSnRes = await wingPool.query("SELECT nextval('wing.PRED_RUN_SN_SEQ') AS pred_run_sn")
+      predRunSn = runSnRes.rows[0].pred_run_sn as number
+    } catch (dbErr) {
+      console.error('[simulation/run-model] PRED_RUN_SN_SEQ 조회 실패:', dbErr)
+      return res.status(500).json({ error: '실행 SN 생성 실패' })
+    }
+
     // KOSPS: PRED_EXEC INSERT(PENDING)만 수행
     const execSns: Array<{ model: string; execSn: number }> = []
     if (requestedModels.includes('KOSPS')) {
       try {
         const kospsExecNm = `${execNmBase}_KOSPS`
         const insertRes = await wingPool.query(
-          `INSERT INTO wing.PRED_EXEC (ACDNT_SN, SPIL_DATA_SN, ALGO_CD, EXEC_STTS_CD, EXEC_NM, BGNG_DTM)
+          `INSERT INTO wing.PRED_EXEC (ACDNT_SN, SPIL_DATA_SN, ALGO_CD, EXEC_STTS_CD, EXEC_NM, PRED_RUN_SN, BGNG_DTM)
-           VALUES ($1, $2, 'KOSPS', 'PENDING', $3, NOW())
+           VALUES ($1, $2, 'KOSPS', 'PENDING', $3, $4, NOW())
            RETURNING PRED_EXEC_SN`,
-          [resolvedAcdntSn, resolvedSpilDataSn, kospsExecNm]
+          [resolvedAcdntSn, resolvedSpilDataSn, kospsExecNm, predRunSn]
         )
         execSns.push({ model: 'KOSPS', execSn: insertRes.rows[0].pred_exec_sn as number })
       } catch (dbErr) {
@@ -602,10 +626,10 @@ router.post('/run-model', requireAuth, async (req: Request, res: Response) => {
         let predExecSn: number
         try {
           const insertRes = await wingPool.query(
-            `INSERT INTO wing.PRED_EXEC (ACDNT_SN, SPIL_DATA_SN, ALGO_CD, EXEC_STTS_CD, EXEC_NM, BGNG_DTM)
+            `INSERT INTO wing.PRED_EXEC (ACDNT_SN, SPIL_DATA_SN, ALGO_CD, EXEC_STTS_CD, EXEC_NM, PRED_RUN_SN, BGNG_DTM)
-             VALUES ($1, $2, $3, 'PENDING', $4, NOW())
+             VALUES ($1, $2, $3, 'PENDING', $4, $5, NOW())
              RETURNING PRED_EXEC_SN`,
-            [resolvedAcdntSn, resolvedSpilDataSn, algoCd, execNm]
+            [resolvedAcdntSn, resolvedSpilDataSn, algoCd, execNm, predRunSn]
           )
           predExecSn = insertRes.rows[0].pred_exec_sn as number
         } catch (dbErr) {
@@ -713,6 +737,7 @@ router.post('/run-model', requireAuth, async (req: Request, res: Response) => {
     res.json({
       success: true,
       acdntSn: resolvedAcdntSn,
+      predRunSn,
       execSns: [...execSns, ...modelResults.map(({ model, execSn }) => ({ model, execSn }))],
       results: modelResults,
     })

backend/src/server.ts

@@ -23,6 +23,7 @@ import predictionRouter from './prediction/predictionRouter.js'
 import aerialRouter from './aerial/aerialRouter.js'
 import rescueRouter from './rescue/rescueRouter.js'
 import mapBaseRouter from './map-base/mapBaseRouter.js'
+import monitorRouter from './monitor/monitorRouter.js'
 import {
   sanitizeBody,
   sanitizeQuery,
@@ -170,6 +171,7 @@ app.use('/api/prediction', predictionRouter)
 app.use('/api/aerial', aerialRouter)
 app.use('/api/rescue', rescueRouter)
 app.use('/api/map-base', mapBaseRouter)
+app.use('/api/monitor', monitorRouter)
 
 // 헬스 체크
 app.get('/health', (_req, res) => {

database/migration/028_pred_run_sn.sql

@@ -0,0 +1,25 @@
+-- Migration 028: PRED_EXEC에 실행 그룹 식별자(PRED_RUN_SN) 추가
+-- 같은 시점에 여러 모델로 실행된 PRED_EXEC 레코드를 하나의 "예측 실행"으로 묶는다.
+-- 목록 화면에서 사고당 예측 실행 횟수만큼 행을 표시하기 위한 기반 구조.
+
+-- 1. 컬럼 추가
+ALTER TABLE wing.PRED_EXEC ADD COLUMN IF NOT EXISTS PRED_RUN_SN INTEGER;
+
+-- 2. 기존 데이터 마이그레이션
+-- 같은 ACDNT_SN + 시작 시각 60초 이내의 레코드를 동일 실행 그룹으로 묶는다.
+-- MIN(PRED_EXEC_SN)을 그룹 대표 키로 사용한다.
+UPDATE wing.PRED_EXEC pe1
+SET PRED_RUN_SN = (
+  SELECT MIN(pe2.PRED_EXEC_SN)
+  FROM wing.PRED_EXEC pe2
+  WHERE pe2.ACDNT_SN = pe1.ACDNT_SN
+    AND ABS(EXTRACT(EPOCH FROM (
+      COALESCE(pe2.BGNG_DTM, NOW()) - COALESCE(pe1.BGNG_DTM, NOW())
+    ))) < 60
+)
+WHERE pe1.PRED_RUN_SN IS NULL;
+
+-- 3. 시퀀스 생성 (신규 실행용 — 기존 최대값보다 충분히 높은 값에서 시작)
+CREATE SEQUENCE IF NOT EXISTS wing.PRED_RUN_SN_SEQ
+  START WITH 10000
+  INCREMENT BY 1;

docs/RELEASE-NOTES.md

@@ -4,6 +4,14 @@
 
 ## [Unreleased]
 
+### 추가
+- 예측: 실행 이력 선택 기능 (predRunSn 기반 특정 예측 결과 조회)
+- DB: PRED_RUN_SN 마이그레이션 추가 (028_pred_run_sn)
+- 관리자: 수치예측자료 연계 모니터링 패널 추가 (HYCOM·GFS·WW3·KOAST POS_WIND/HYDR/WAVE)
+
+### 변경
+- 보고서: 기능 개선 (TemplateEditPage, ReportGenerator, hwpxExport 등)
+
 ## [2026-03-24]
 
 ### 추가

frontend/src/tabs/admin/components/AdminView.tsx

@@ -15,6 +15,7 @@ import LayerPanel from './LayerPanel';
 import SensitiveLayerPanel from './SensitiveLayerPanel';
 import DispersingZonePanel from './DispersingZonePanel';
 import MonitorRealtimePanel from './MonitorRealtimePanel';
+import MonitorForecastPanel from './MonitorForecastPanel';
 import VesselMaterialsPanel from './VesselMaterialsPanel';
 
 /** 기존 패널이 있는 메뉴 ID 매핑 */
@@ -36,6 +37,7 @@ const PANEL_MAP: Record<string, () => JSX.Element> = {
   'dispersant-zone': () => <DispersingZonePanel />,
   'vessel-materials': () => <VesselMaterialsPanel />,
   'monitor-realtime': () => <MonitorRealtimePanel />,
+  'monitor-forecast': () => <MonitorForecastPanel />,
 };
 
 export function AdminView() {

frontend/src/tabs/admin/components/MonitorForecastPanel.tsx

@@ -0,0 +1,273 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+  getNumericalDataStatus,
+  type NumericalDataStatus,
+} from '../services/monitorApi';
+
+type TabId = 'all' | 'ocean' | 'koast';
+
+const TABS: { id: TabId; label: string }[] = [
+  { id: 'all', label: '전체' },
+  { id: 'ocean', label: '기상·해양 모델' },
+  { id: 'koast', label: 'KOAST' },
+];
+
+const OCEAN_MODELS = ['HYCOM', 'GFS', 'WW3'];
+const KOAST_MODELS = ['KOAST POS_WIND', 'KOAST POS_HYDR', 'KOAST POS_WAVE'];
+
+function filterByTab(rows: NumericalDataStatus[], tab: TabId): NumericalDataStatus[] {
+  if (tab === 'ocean') return rows.filter((r) => OCEAN_MODELS.includes(r.modelName));
+  if (tab === 'koast') return rows.filter((r) => KOAST_MODELS.includes(r.modelName));
+  return rows;
+}
+
+function formatDuration(sec: number | null): string {
+  if (sec == null) return '-';
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return m > 0 ? `${m}분 ${s}초` : `${s}초`;
+}
+
+function formatDatetime(iso: string | null): string {
+  if (!iso) return '-';
+  const d = new Date(iso);
+  const mm = String(d.getMonth() + 1).padStart(2, '0');
+  const dd = String(d.getDate()).padStart(2, '0');
+  const hh = String(d.getHours()).padStart(2, '0');
+  const min = String(d.getMinutes()).padStart(2, '0');
+  return `${mm}-${dd} ${hh}:${min}`;
+}
+
+function formatTime(iso: string | null): string {
+  if (!iso) return '-';
+  const d = new Date(iso);
+  const hh = String(d.getHours()).padStart(2, '0');
+  const min = String(d.getMinutes()).padStart(2, '0');
+  return `${hh}:${min}`;
+}
+
+function StatusCell({ row }: { row: NumericalDataStatus }) {
+  if (row.lastStatus === 'COMPLETED') {
+    return <span className="text-emerald-400 text-xs">정상</span>;
+  }
+  if (row.lastStatus === 'FAILED') {
+    return (
+      <span className="text-red-400 text-xs">
+        오류{row.consecutiveFailures > 0 ? ` (${row.consecutiveFailures}회 연속)` : ''}
+      </span>
+    );
+  }
+  if (row.lastStatus === 'STARTED') {
+    return (
+      <span className="inline-flex items-center gap-1 text-cyan-400 text-xs">
+        <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
+        실행 중
+      </span>
+    );
+  }
+  return <span className="text-t3 text-xs">-</span>;
+}
+
+function StatusBadge({
+  loading,
+  errorCount,
+  total,
+}: {
+  loading: boolean;
+  errorCount: number;
+  total: number;
+}) {
+  if (loading) {
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-bg-2 text-t2">
+        <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
+        조회 중...
+      </span>
+    );
+  }
+  if (errorCount === total && total > 0) {
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-red-500/10 text-red-400">
+        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />
+        연계 오류
+      </span>
+    );
+  }
+  if (errorCount > 0) {
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-yellow-500/10 text-yellow-400">
+        <span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
+        일부 오류 ({errorCount}/{total})
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
+      <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+      정상
+    </span>
+  );
+}
+
+const TABLE_HEADERS = [
+  '모델명',
+  '데이터 기준일',
+  '마지막 다운로드',
+  '상태',
+  '소요 시간',
+  '다음 예정',
+];
+
+function ForecastTable({
+  rows,
+  loading,
+}: {
+  rows: NumericalDataStatus[];
+  loading: boolean;
+}) {
+  return (
+    <div className="overflow-auto">
+      <table className="w-full text-xs border-collapse">
+        <thead>
+          <tr className="bg-bg-2 text-t3 uppercase tracking-wide">
+            {TABLE_HEADERS.map((h) => (
+              <th
+                key={h}
+                className="px-3 py-2 text-left font-medium border-b border-border-1 whitespace-nowrap"
+              >
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {loading && rows.length === 0
+            ? Array.from({ length: 6 }).map((_, i) => (
+                <tr key={i} className="border-b border-border-1 animate-pulse">
+                  {TABLE_HEADERS.map((_, j) => (
+                    <td key={j} className="px-3 py-2">
+                      <div className="h-3 bg-bg-2 rounded w-16" />
+                    </td>
+                  ))}
+                </tr>
+              ))
+            : rows.map((row) => (
+                <tr key={row.jobName} className="border-b border-border-1 hover:bg-bg-1/50">
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
+                    {row.modelName}
+                  </td>
+                  <td className="px-3 py-2 text-t2">{row.lastDataDate ?? '-'}</td>
+                  <td className="px-3 py-2 text-t2">{formatDatetime(row.lastDownloadedAt)}</td>
+                  <td className="px-3 py-2">
+                    <StatusCell row={row} />
+                  </td>
+                  <td className="px-3 py-2 text-t2">{formatDuration(row.durationSec)}</td>
+                  <td className="px-3 py-2 text-t2">{formatTime(row.nextScheduledAt)}</td>
+                </tr>
+              ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default function MonitorForecastPanel() {
+  const [activeTab, setActiveTab] = useState<TabId>('all');
+  const [rows, setRows] = useState<NumericalDataStatus[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await getNumericalDataStatus();
+      setRows(data);
+      setLastUpdate(new Date());
+    } catch {
+      // 오류 시 기존 데이터 유지
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void fetchData();
+  }, [fetchData]);
+
+  const visibleRows = filterByTab(rows, activeTab);
+  const errorCount = visibleRows.filter(
+    (r) => r.lastStatus === 'FAILED'
+  ).length;
+  const totalCount = visibleRows.length;
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between px-5 py-3 border-b border-border-1 shrink-0">
+        <h2 className="text-sm font-semibold text-t1">수치예측자료 모니터링</h2>
+        <div className="flex items-center gap-3">
+          {lastUpdate && (
+            <span className="text-xs text-t3">
+              갱신:{' '}
+              {lastUpdate.toLocaleTimeString('ko-KR', {
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+              })}
+            </span>
+          )}
+          <button
+            onClick={() => void fetchData()}
+            disabled={loading}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-2 hover:bg-bg-3 text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            <svg
+              className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+              />
+            </svg>
+            새로고침
+          </button>
+        </div>
+      </div>
+
+      {/* 탭 */}
+      <div className="flex gap-0 border-b border-border-1 shrink-0 px-5">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`px-4 py-2.5 text-xs font-medium border-b-2 transition-colors ${
+              activeTab === tab.id
+                ? 'border-cyan-400 text-cyan-400'
+                : 'border-transparent text-t3 hover:text-t2'
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* 상태 표시줄 */}
+      <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-border-1 bg-bg-0">
+        <StatusBadge loading={loading} errorCount={errorCount} total={totalCount} />
+        {!loading && totalCount > 0 && (
+          <span className="text-xs text-t3">모델 {totalCount}개</span>
+        )}
+      </div>
+
+      {/* 테이블 */}
+      <div className="flex-1 overflow-auto p-5">
+        <ForecastTable rows={visibleRows} loading={loading} />
+      </div>
+    </div>
+  );
+}

frontend/src/tabs/admin/services/monitorApi.ts

@@ -0,0 +1,17 @@
+import { api } from '@common/services/api';
+
+export interface NumericalDataStatus {
+  modelName: string;
+  jobName: string;
+  lastStatus: 'COMPLETED' | 'FAILED' | 'STARTED' | 'UNKNOWN';
+  lastDataDate: string | null;
+  lastDownloadedAt: string | null;
+  nextScheduledAt: string | null;
+  durationSec: number | null;
+  consecutiveFailures: number;
+}
+
+export async function getNumericalDataStatus(): Promise<NumericalDataStatus[]> {
+  const res = await api.get<NumericalDataStatus[]>('/monitor/numerical');
+  return res.data;
+}

frontend/src/tabs/prediction/components/AnalysisListTable.tsx

@@ -153,6 +153,7 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
               <th className="px-4 py-3 text-left text-xs font-bold text-text-3 uppercase tracking-wider">번호</th>
               <th className="px-4 py-3 text-left text-xs font-bold text-text-3 uppercase tracking-wider">사고명</th>
               <th className="px-4 py-3 text-left text-xs font-bold text-text-3 uppercase tracking-wider">사고일시</th>
+              <th className="px-4 py-3 text-left text-xs font-bold text-text-3 uppercase tracking-wider">예측 실행</th>
               <th className="px-4 py-3 text-left text-xs font-bold text-text-3 uppercase tracking-wider">예측시간</th>
               <th className="px-4 py-3 text-left text-xs font-bold text-text-3 uppercase tracking-wider">유종</th>
               <th className="px-4 py-3 text-right text-xs font-bold text-text-3 uppercase tracking-wider">유출량</th>
@@ -167,7 +168,7 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
           <tbody className="divide-y divide-border">
             {currentAnalyses.map((analysis) => (
               <tr
-                key={analysis.acdntSn}
+                key={analysis.predRunSn ?? analysis.acdntSn}
                 className="hover:bg-bg-2 transition-colors cursor-pointer group"
               >
                 <td className="px-4 py-3 text-sm text-text-2 font-mono">{analysis.acdntSn}</td>
@@ -188,6 +189,7 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
                   </div>
                 </td>
                 <td className="px-4 py-3 text-sm text-text-2 font-mono">{analysis.occurredAt ? new Date(analysis.occurredAt).toLocaleString('ko-KR', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) : '—'}</td>
+                <td className="px-4 py-3 text-sm text-text-2 font-mono">{analysis.runDtm ? new Date(analysis.runDtm).toLocaleString('ko-KR', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) : '—'}</td>
                 <td className="px-4 py-3 text-sm text-text-2 font-mono">{analysis.duration}</td>
                 <td className="px-4 py-3 text-sm text-text-2">{analysis.oilType}</td>
                 <td className="px-4 py-3 text-sm text-text-1 font-mono text-right font-semibold">

frontend/src/tabs/prediction/components/OilSpillView.tsx

@@ -519,7 +519,7 @@ export function OilSpillView() {
       analysis.opendriftStatus === 'completed' || analysis.poseidonStatus === 'completed';
     if (hasCompletedModel) {
       try {
-        const { trajectory, summary, centerPoints: cp, windDataByModel: wdByModel, hydrDataByModel: hdByModel, summaryByModel: sbModel, stepSummariesByModel: stepSbModel } = await fetchAnalysisTrajectory(analysis.acdntSn)
+        const { trajectory, summary, centerPoints: cp, windDataByModel: wdByModel, hydrDataByModel: hdByModel, summaryByModel: sbModel, stepSummariesByModel: stepSbModel } = await fetchAnalysisTrajectory(analysis.acdntSn, analysis.predRunSn ?? undefined)
         if (trajectory && trajectory.length > 0) {
           setOilTrajectory(trajectory)
           if (summary) setSimulationSummary(summary)
@@ -1264,7 +1264,13 @@ export function OilSpillView() {
       {activeSubTab === 'analysis' && (
         <RightPanel
           onOpenBacktrack={handleOpenBacktrack}
-          onOpenRecalc={() => setRecalcModalOpen(true)}
+          onOpenRecalc={() => {
+            if (!selectedAnalysis) {
+              alert('선택된 사고가 없습니다.\n분석 목록에서 사고를 선택해주세요.');
+              return;
+            }
+            setRecalcModalOpen(true);
+          }}
           onOpenReport={handleOpenReport}
           detail={analysisDetail}
           summary={stepSummariesByModel[windHydrModel]?.[currentStep] ?? summaryByModel[windHydrModel] ?? simulationSummary}
@@ -1312,6 +1318,7 @@ export function OilSpillView() {
       <RecalcModal
         isOpen={recalcModalOpen}
         onClose={() => setRecalcModalOpen(false)}
+        incidentName={selectedAnalysis?.acdntNm || incidentName}
         oilType={oilType}
         spillAmount={spillAmount}
         spillType={spillType}

frontend/src/tabs/prediction/components/RecalcModal.tsx

@@ -4,6 +4,7 @@ import type { PredictionModel } from './OilSpillView'
 interface RecalcModalProps {
   isOpen: boolean
   onClose: () => void
+  incidentName: string
   oilType: string
   spillAmount: number
   spillType: string
@@ -24,11 +25,14 @@ type RecalcPhase = 'editing' | 'running' | 'done'
 
 const OIL_TYPES = ['벙커C유', '원유(중질)', '원유(경질)', '디젤유(경유)', '휘발유', '등유', '윤활유', 'HFO 380', 'HFO 180']
 const SPILL_TYPES = ['연속', '순간', '점진적']
-const PREDICTION_TIMES = [12, 24, 48, 72, 96, 120]
+const PREDICTION_TIMES = [6, 12, 24, 48, 72, 96, 120]
+const snapToValidTime = (t: number): number =>
+  PREDICTION_TIMES.includes(t) ? t : (PREDICTION_TIMES.find(h => h >= t) ?? PREDICTION_TIMES[0])
 
 export function RecalcModal({
   isOpen,
   onClose,
+  incidentName,
   oilType: initOilType,
   spillAmount: initSpillAmount,
   spillType: initSpillType,
@@ -43,7 +47,7 @@ export function RecalcModal({
   const [spillAmount, setSpillAmount] = useState(initSpillAmount)
   const [spillUnit, setSpillUnit] = useState<'kl' | 'ton' | 'bbl'>('kl')
   const [spillType, setSpillType] = useState(initSpillType)
-  const [predictionTime, setPredictionTime] = useState(initPredictionTime)
+  const [predictionTime, setPredictionTime] = useState(() => snapToValidTime(initPredictionTime))
   const [lat, setLat] = useState(initCoord.lat)
   const [lon, setLon] = useState(initCoord.lon)
   const [models, setModels] = useState<Set<PredictionModel>>(new Set(initModels))
@@ -56,7 +60,7 @@ export function RecalcModal({
       setOilType(initOilType)
       setSpillAmount(initSpillAmount)
       setSpillType(initSpillType)
-      setPredictionTime(initPredictionTime)
+      setPredictionTime(snapToValidTime(initPredictionTime))
       setLat(initCoord.lat)
       setLon(initCoord.lon)
       setModels(new Set(initModels))
@@ -163,7 +167,7 @@ export function RecalcModal({
               현재 분석 정보
             </div>
             <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px' }} className="text-[9px]">
-              <InfoItem label="사고명" value="여수 앞바다 유류오염" />
+              <InfoItem label="사고명" value={incidentName} />
               <InfoItem label="유종" value={initOilType} />
               <InfoItem label="유출량" value={`${initSpillAmount} kl`} />
               <InfoItem label="예측시간" value={`${initPredictionTime}시간`} />
@@ -265,30 +269,26 @@ export function RecalcModal({
           <FieldGroup label="예측 모델 선택">
             <div className="flex flex-wrap gap-1.5">
               {([
-                { model: 'KOSPS' as PredictionModel, color: '#3b82f6' },
+                { model: 'KOSPS' as PredictionModel, color: 'var(--cyan)', ready: false },
-                { model: 'POSEIDON' as PredictionModel, color: '#22c55e' },
+                { model: 'POSEIDON' as PredictionModel, color: 'var(--red)', ready: true },
-                { model: 'OpenDrift' as PredictionModel, color: '#f97316' },
+                { model: 'OpenDrift' as PredictionModel, color: 'var(--blue)', ready: true },
-              ]).map(({ model, color }) => (
+              ]).map(({ model, color, ready }) => (
                 <button
                   key={model}
                   className={`prd-mc ${models.has(model) ? 'on' : ''}`}
-                  onClick={() => toggleModel(model)}
+                  onClick={() => {
+                    if (!ready) {
+                      alert(`${model} 모델은 현재 준비중입니다.`)
+                      return
+                    }
+                    toggleModel(model)
+                  }}
                   style={{ fontSize: '11px', padding: '5px 10px' }}
                 >
                   <span className="prd-md" style={{ background: color }} />
                   {model}
                 </button>
               ))}
-              <button
-                className={`prd-mc ${models.size === 3 ? 'on' : ''}`}
-                onClick={() => {
-                  if (models.size === 3) setModels(new Set(['KOSPS']))
-                  else setModels(new Set(['KOSPS', 'POSEIDON', 'OpenDrift']))
-                }}
-                style={{ fontSize: '11px', padding: '5px 10px' }}
-              >
-                앙상블
-              </button>
             </div>
           </FieldGroup>
         </div>

frontend/src/tabs/prediction/components/RightPanel.tsx

@@ -63,10 +63,11 @@ export function RightPanel({
   const [insuranceExpanded, setInsuranceExpanded] = useState(false)
 
   const weatheringStatus = useMemo(() => {
-    if (!summary) return null;
+    const zero = { surface: 0, evaporation: 0, dispersion: 0, boom: 0, beached: 0 };
+    if (!summary) return zero;
     const total = summary.remainingVolume + summary.evaporationVolume
       + summary.dispersionVolume + summary.beachedVolume + boomBlockedVolume;
-    if (total <= 0) return null;
+    if (total <= 0) return zero;
     const pct = (v: number) => Math.round((v / total) * 100);
     return {
       surface: pct(summary.remainingVolume),
@@ -288,7 +289,6 @@ export function RightPanel({
         {/* 유출유 풍화 상태 */}
         <Section title="유출유 풍화 상태">
           <div className="flex flex-col gap-[3px] text-[8px]">
-            {weatheringStatus ? (
             <>
               <ProgressBar label="수면잔류" value={weatheringStatus.surface}     color="var(--blue)" />
               <ProgressBar label="증발"     value={weatheringStatus.evaporation} color="var(--cyan)" />
@@ -296,9 +296,6 @@ export function RightPanel({
               <ProgressBar label="펜스차단" value={weatheringStatus.boom}        color="var(--boom)" />
               <ProgressBar label="해안도달" value={weatheringStatus.beached}     color="var(--red)" />
             </>
-            ) : (
-              <p className="text-[9px] text-text-3 font-korean text-center py-2">시뮬레이션 실행 후 표시됩니다</p>
-            )}
           </div>
         </Section>
 

frontend/src/tabs/prediction/services/predictionApi.ts

@@ -19,6 +19,8 @@ export interface PredictionAnalysis {
   analyst: string;
   officeName: string;
   acdntSttsCd: string;
+  predRunSn: number | null;
+  runDtm: string | null;
 }
 
 export interface PredictionDetail {
@@ -216,8 +218,11 @@ export interface TrajectoryResponse {
   stepSummariesByModel?: Record<string, SimulationSummary[]>;
 }
 
-export const fetchAnalysisTrajectory = async (acdntSn: number): Promise<TrajectoryResponse> => {
+export const fetchAnalysisTrajectory = async (acdntSn: number, predRunSn?: number): Promise<TrajectoryResponse> => {
-  const response = await api.get<TrajectoryResponse>(`/prediction/analyses/${acdntSn}/trajectory`);
+  const response = await api.get<TrajectoryResponse>(
+    `/prediction/analyses/${acdntSn}/trajectory`,
+    predRunSn != null ? { params: { predRunSn } } : undefined,
+  );
   return response.data;
 };
 

frontend/src/tabs/reports/components/ReportGenerator.tsx

@@ -68,7 +68,7 @@ function ReportGenerator({ onSave }: ReportGeneratorProps) {
 
   const handleSave = async () => {
     const report = createEmptyReport()
-    report.reportType = activeCat === 0 ? '예측보고서' : activeCat === 1 ? '종합보고서' : '초기보고서'
+    report.reportType = activeCat === 0 ? '유출유 보고' : activeCat === 1 ? '종합보고서' : '초기보고서'
     report.analysisCategory = activeCat === 0 ? '유출유 확산예측' : activeCat === 1 ? 'HNS 대기확산' : '긴급구난'
     report.title = cat.reportName
     report.status = '완료'

frontend/src/tabs/reports/components/ReportsView.tsx

@@ -21,6 +21,7 @@ import {
 import type { TemplateType } from './reportTypes';
 import TemplateFormEditor from './TemplateFormEditor'
 import ReportGenerator from './ReportGenerator'
+import TemplateEditPage from './TemplateEditPage'
 
 // ─── Main ReportsView ────────────────────────────────────
 export function ReportsView() {
@@ -216,9 +217,20 @@ export function ReportsView() {
 
         {/* ──── 수정 ──── */}
         {view.screen === 'edit' && (
+          <div className="flex-1 overflow-hidden flex flex-col">
+            {view.data.reportType === '유출유 보고' ? (
               <div className="flex-1 overflow-auto px-4 py-4">
                 <OilSpillReportTemplate mode="edit" initialData={view.data} onSave={handleSave} onBack={() => { setView({ screen: 'list' }); setActiveSubTab('report-list'); refreshList() }} />
               </div>
+            ) : (
+              <TemplateEditPage
+                reportType={view.data.reportType}
+                initialData={view.data}
+                onSave={handleSave}
+                onBack={() => { setView({ screen: 'list' }); setActiveSubTab('report-list'); refreshList() }}
+              />
+            )}
+          </div>
         )}
 
       </div>
@@ -283,7 +295,8 @@ export function ReportsView() {
                 <div className="text-center font-korean mb-0.5 text-[9px] text-text-3">문서 저장</div>
                 <button
                   onClick={() => {
-                    const tpl = templateTypes.find(t => t.id === previewReport.reportType)
+                    const lookupType = previewReport.reportType === '유출유 보고' ? '예측보고서' : previewReport.reportType
+                    const tpl = templateTypes.find(t => t.id === lookupType)
                     if (tpl) {
                       const getVal = buildReportGetVal(previewReport)
                       const html = generateReportHTML(tpl.label, { writeTime: previewReport.incident.writeTime, author: previewReport.author, jurisdiction: previewReport.jurisdiction }, tpl.sections, getVal)
@@ -296,18 +309,24 @@ export function ReportsView() {
                   <span>📄</span> PDF 저장
                 </button>
                 <button
-                  onClick={() => {
+                  onClick={async () => {
-                    const tpl = templateTypes.find(t => t.id === previewReport.reportType) as TemplateType | undefined
+                    const lookupType = previewReport.reportType === '유출유 보고' ? '예측보고서' : previewReport.reportType
+                    const tpl = templateTypes.find(t => t.id === lookupType) as TemplateType | undefined
                     if (tpl) {
+                      try {
                         const getVal = buildReportGetVal(previewReport)
                         const meta = { writeTime: previewReport.incident.writeTime, author: previewReport.author, jurisdiction: previewReport.jurisdiction }
                         const filename = previewReport.title || tpl.label
-                      exportAsHWP(tpl.label, meta, tpl.sections, getVal, filename, {
+                        await exportAsHWP(tpl.label, meta, tpl.sections, getVal, filename, {
                           step3: previewReport.step3MapImage || undefined,
                           step6: previewReport.step6MapImage || undefined,
                           sensitiveMap: previewReport.sensitiveMapImage || undefined,
                           sensitivityMap: previewReport.sensitivityMapImage || undefined,
                         })
+                      } catch (err) {
+                        console.error('[reports] HWPX 저장 오류:', err)
+                        alert('HWPX 저장 중 오류가 발생했습니다.')
+                      }
                     }
                   }}
                   className="w-full flex items-center justify-center gap-1.5 font-korean text-[12px] font-bold cursor-pointer rounded-md py-[11px]"

frontend/src/tabs/reports/components/TemplateEditPage.tsx

@@ -0,0 +1,396 @@
+import { useState, useEffect, useCallback } from 'react';
+import { type OilSpillReportData, type ReportType } from './OilSpillReportTemplate';
+import { templateTypes, type TemplateType, ANALYSIS_SEP, ANALYSIS_FIELD_ORDER } from './reportTypes';
+import { saveReport } from '../services/reportsApi';
+
+interface TemplateEditPageProps {
+  reportType: ReportType;
+  initialData: OilSpillReportData;
+  onSave: () => void;
+  onBack: () => void;
+}
+
+// ── Textarea-type keys that map to analysis field ──────────
+const ANALYSIS_KEYS = new Set([
+  'initialResponse', 'futurePlan',
+  'responseStatus', 'suggestions',
+  'spreadSummary', 'responseDetail', 'damageReport', 'futurePlanDetail',
+  'spreadAnalysis', 'analysis',
+])
+
+
+function getInitialValue(key: string, data: OilSpillReportData, reportType: ReportType): string {
+  if (key.startsWith('incident.')) {
+    const field = key.slice('incident.'.length) as keyof OilSpillReportData['incident'];
+    return (data.incident as Record<string, string>)[field] ?? '';
+  }
+  if (key === 'author') return data.author;
+  if (ANALYSIS_KEYS.has(key)) {
+    const fields = ANALYSIS_FIELD_ORDER[reportType];
+    if (fields) {
+      const idx = fields.indexOf(key);
+      if (idx < 0) return '';
+      const analysis = data.analysis || '';
+      if (!analysis.includes(ANALYSIS_SEP)) {
+        // 레거시 데이터: 첫 번째 필드에만 배분
+        return idx === 0 ? analysis : '';
+      }
+      const parts = analysis.split(ANALYSIS_SEP);
+      return parts[idx] || '';
+    }
+    return data.analysis || '';
+  }
+  if (key.startsWith('__')) return '';
+  return '';
+}
+
+function buildAnalysis(reportType: ReportType, formData: Record<string, string>): string {
+  const fields = ANALYSIS_FIELD_ORDER[reportType];
+  if (fields) {
+    return fields.map(k => formData[k] || '').join(ANALYSIS_SEP);
+  }
+  switch (reportType) {
+    case '예측보고서':
+      return formData['analysis'] || '';
+    default:
+      return '';
+  }
+}
+
+// ── Section content renderer ────────────────────────────────
+interface SectionBlockProps {
+  section: TemplateType['sections'][number];
+  getVal: (key: string) => string;
+  setVal: (key: string, val: string) => void;
+}
+
+function SectionBlock({ section, getVal, setVal }: SectionBlockProps) {
+  return (
+    <div style={{
+      position: 'relative',
+      background: 'var(--bg1)',
+      padding: '28px 36px',
+      marginBottom: '16px',
+      borderRadius: '6px',
+      border: '1px solid var(--bd)',
+    }}>
+      <div style={{ position: 'absolute', top: 10, right: 16, fontSize: '9px', color: 'var(--t3)', fontWeight: 600 }}>
+        해양오염방제지원시스템
+      </div>
+
+      {/* Section header */}
+      <div style={{
+        background: 'rgba(6,182,212,0.12)', color: 'var(--cyan)', padding: '8px 16px',
+        fontSize: '13px', fontWeight: 700, marginBottom: '16px', borderRadius: '4px',
+        border: '1px solid rgba(6,182,212,0.2)',
+      }}>
+        {section.title}
+      </div>
+
+      {/* Fields table */}
+      <table style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontSize: '11px' }}>
+        <colgroup>
+          <col style={{ width: '160px' }} />
+          <col />
+        </colgroup>
+        <tbody>
+          {section.fields.map((field, fIdx) => {
+            // ── Read-only auto-calculated keys ──
+            if (field.key.startsWith('__')) {
+              return (
+                <tr key={fIdx}>
+                  <td
+                    colSpan={2}
+                    style={{ border: '1px solid var(--bd)', padding: '12px 14px' }}
+                  >
+                    <span style={{ color: 'var(--t3)', fontStyle: 'italic', fontSize: '11px' }}>
+                      {section.title} — 자동 계산 데이터 (확인 전용)
+                    </span>
+                  </td>
+                </tr>
+              );
+            }
+
+            // ── Textarea (no label = full-width, or labeled textarea) ──
+            if (field.type === 'textarea' || !field.label) {
+              return (
+                <tr key={fIdx}>
+                  {field.label && (
+                    <td style={{
+                      background: 'var(--bg3)', border: '1px solid var(--bd)',
+                      padding: '8px 14px', fontWeight: 600, color: 'var(--t2)',
+                      verticalAlign: 'top', fontSize: '11px',
+                    }}>
+                      {field.label}
+                    </td>
+                  )}
+                  <td
+                    colSpan={field.label ? 1 : 2}
+                    style={{ border: '1px solid var(--bd)', padding: '6px' }}
+                  >
+                    <textarea
+                      value={getVal(field.key)}
+                      onChange={e => setVal(field.key, e.target.value)}
+                      placeholder="내용을 입력하세요..."
+                      style={{
+                        width: '100%', minHeight: '110px',
+                        background: 'var(--bg0)', border: '1px solid var(--bdL)',
+                        borderRadius: '3px', padding: '8px 12px',
+                        fontSize: '12px', outline: 'none', resize: 'vertical',
+                        color: 'var(--t1)', fontFamily: 'inherit',
+                      }}
+                    />
+                  </td>
+                </tr>
+              );
+            }
+
+            // ── Checkbox group ──
+            if (field.type === 'checkbox-group' && field.options) {
+              return (
+                <tr key={fIdx}>
+                  <td style={{
+                    background: 'var(--bg3)', border: '1px solid var(--bd)',
+                    padding: '8px 14px', fontWeight: 600, color: 'var(--t2)',
+                    verticalAlign: 'middle', fontSize: '11px',
+                  }}>
+                    {field.label}
+                  </td>
+                  <td style={{ border: '1px solid var(--bd)', padding: '8px 14px' }}>
+                    <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
+                      {field.options.map(opt => (
+                        <label key={opt} style={{
+                          display: 'flex', alignItems: 'center', gap: '6px',
+                          fontSize: '11px', color: 'var(--t2)', cursor: 'pointer',
+                        }}>
+                          <input type="checkbox" style={{ accentColor: '#06b6d4' }} />
+                          {opt}
+                        </label>
+                      ))}
+                    </div>
+                  </td>
+                </tr>
+              );
+            }
+
+            // ── Default: text input ──
+            return (
+              <tr key={fIdx}>
+                <td style={{
+                  background: 'var(--bg3)', border: '1px solid var(--bd)',
+                  padding: '8px 14px', fontWeight: 600, color: 'var(--t2)',
+                  verticalAlign: 'middle', fontSize: '11px',
+                }}>
+                  {field.label}
+                </td>
+                <td style={{ border: '1px solid var(--bd)', padding: '5px 10px' }}>
+                  <input
+                    value={getVal(field.key)}
+                    onChange={e => setVal(field.key, e.target.value)}
+                    placeholder={`${field.label} 입력`}
+                    style={{
+                      width: '100%', background: 'transparent', border: 'none',
+                      fontSize: '11px', outline: 'none', color: 'var(--t1)', padding: '2px 0',
+                    }}
+                  />
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ── Main Component ──────────────────────────────────────────
+export default function TemplateEditPage({ reportType, initialData, onSave, onBack }: TemplateEditPageProps) {
+  const template = templateTypes.find(t => t.id === reportType)!;
+  const sections = template.sections;
+
+  const buildInitialFormData = useCallback(() => {
+    const init: Record<string, string> = {};
+    sections.forEach(sec => {
+      sec.fields.forEach(f => {
+        init[f.key] = getInitialValue(f.key, initialData, reportType);
+      });
+    });
+    return init;
+  }, [sections, initialData, reportType]);
+
+  const [formData, setFormData] = useState<Record<string, string>>(buildInitialFormData);
+  const [title, setTitle] = useState(initialData.title || '');
+  const [currentPage, setCurrentPage] = useState(0);
+  const [viewMode, setViewMode] = useState<'page' | 'all'>('page');
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setFormData(buildInitialFormData());
+    setTitle(initialData.title || '');
+    setCurrentPage(0);
+  }, [initialData, buildInitialFormData]);
+
+  const getVal = (key: string) => formData[key] ?? '';
+  const setVal = (key: string, val: string) => setFormData(p => ({ ...p, [key]: val }));
+
+  const handleSave = useCallback(async () => {
+    const updated: OilSpillReportData = {
+      ...initialData,
+      title: title || formData['incident.name'] || `${reportType} ${new Date().toLocaleDateString('ko-KR')}`,
+      author: formData['author'] || initialData.author,
+      analysis: buildAnalysis(reportType, formData),
+      incident: {
+        ...initialData.incident,
+        name:          formData['incident.name']         ?? initialData.incident.name,
+        writeTime:     formData['incident.writeTime']    ?? initialData.incident.writeTime,
+        shipName:      formData['incident.shipName']     ?? initialData.incident.shipName,
+        occurTime:     formData['incident.occurTime']    ?? initialData.incident.occurTime,
+        location:      formData['incident.location']     ?? initialData.incident.location,
+        lat:           formData['incident.lat']          ?? initialData.incident.lat,
+        lon:           formData['incident.lon']          ?? initialData.incident.lon,
+        accidentType:  formData['incident.accidentType'] ?? initialData.incident.accidentType,
+        pollutant:     formData['incident.pollutant']    ?? initialData.incident.pollutant,
+        spillAmount:   formData['incident.spillAmount']  ?? initialData.incident.spillAmount,
+        depth:         formData['incident.depth']        ?? initialData.incident.depth,
+        seabed:        formData['incident.seabed']       ?? initialData.incident.seabed,
+        agent:         formData['agent']                 ?? initialData.incident.agent,
+      },
+    };
+    try {
+      await saveReport(updated);
+      onSave();
+    } catch (err) {
+      console.error('[reports] 저장 오류:', err);
+      alert('보고서 저장 중 오류가 발생했습니다.');
+    }
+  }, [formData, title, initialData, reportType, onSave]);
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden bg-bg-0">
+
+      {/* ── Toolbar ── */}
+      <div className="flex items-center justify-between px-5 py-3 border-b border-border bg-bg-1 shrink-0 flex-wrap gap-2">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={onBack}
+            className="text-[12px] font-semibold text-text-2 hover:text-text-1 transition-colors whitespace-nowrap"
+          >
+            ← 돌아가기
+          </button>
+          <input
+            value={title}
+            onChange={e => setTitle(e.target.value)}
+            placeholder="보고서 제목 입력"
+            className="text-[17px] font-bold bg-bg-0 border border-[var(--bdL)] rounded px-2.5 py-1 outline-none w-[380px] max-w-[480px]"
+          />
+          <span
+            className="px-2.5 py-[3px] text-[10px] font-semibold rounded border whitespace-nowrap"
+            style={{ background: 'rgba(251,191,36,0.15)', color: '#f59e0b', borderColor: 'rgba(251,191,36,0.3)' }}
+          >
+            편집 중
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setViewMode('all')}
+            className="px-3.5 py-1.5 text-[11px] font-semibold rounded cursor-pointer"
+            style={{
+              border: viewMode === 'all' ? '1px solid var(--cyan)' : '1px solid var(--bd)',
+              background: viewMode === 'all' ? 'rgba(6,182,212,0.1)' : 'var(--bg2)',
+              color: viewMode === 'all' ? 'var(--cyan)' : 'var(--t3)',
+            }}
+          >
+            전체 보기
+          </button>
+          <button
+            onClick={() => setViewMode('page')}
+            className="px-3.5 py-1.5 text-[11px] font-semibold rounded cursor-pointer"
+            style={{
+              border: viewMode === 'page' ? '1px solid var(--cyan)' : '1px solid var(--bd)',
+              background: viewMode === 'page' ? 'rgba(6,182,212,0.1)' : 'var(--bg2)',
+              color: viewMode === 'page' ? 'var(--cyan)' : 'var(--t3)',
+            }}
+          >
+            페이지별
+          </button>
+          <button
+            onClick={handleSave}
+            className="px-4 py-1.5 text-[11px] font-bold rounded cursor-pointer border border-[#22c55e] bg-[rgba(34,197,94,0.15)] text-status-green"
+          >
+            저장
+          </button>
+          <button
+            onClick={() => window.print()}
+            className="px-3.5 py-1.5 text-[11px] font-semibold rounded cursor-pointer border border-[var(--red)] bg-[rgba(239,68,68,0.1)] text-status-red"
+          >
+            인쇄 / PDF
+          </button>
+        </div>
+      </div>
+
+      {/* ── Section Tabs (page mode) ── */}
+      {viewMode === 'page' && (
+        <div className="flex gap-1 px-5 py-2 border-b border-border bg-bg-1 flex-wrap shrink-0">
+          {sections.map((sec, i) => (
+            <button
+              key={i}
+              onClick={() => setCurrentPage(i)}
+              className="px-3 py-1.5 text-[11px] font-semibold rounded cursor-pointer"
+              style={{
+                border: currentPage === i ? '1px solid var(--cyan)' : '1px solid var(--bd)',
+                background: currentPage === i ? 'rgba(6,182,212,0.15)' : 'transparent',
+                color: currentPage === i ? 'var(--cyan)' : 'var(--t3)',
+              }}
+            >
+              {sec.title}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* ── Content ── */}
+      <div className="flex-1 overflow-auto px-5 py-5">
+        <div id="report-print-area" className="w-full">
+          {viewMode === 'all' ? (
+            sections.map((sec, i) => (
+              <SectionBlock key={i} section={sec} getVal={getVal} setVal={setVal} />
+            ))
+          ) : (
+            <div>
+              <SectionBlock section={sections[currentPage]} getVal={getVal} setVal={setVal} />
+
+              {/* ── Pagination ── */}
+              <div className="flex justify-center items-center gap-3 mt-5">
+                <button
+                  onClick={() => setCurrentPage(p => Math.max(0, p - 1))}
+                  disabled={currentPage === 0}
+                  className="px-5 py-2 text-[12px] font-semibold rounded border border-border bg-bg-2 cursor-pointer"
+                  style={{ color: currentPage === 0 ? 'var(--t3)' : 'var(--t1)', opacity: currentPage === 0 ? 0.4 : 1 }}
+                >
+                  이전
+                </button>
+                <span className="px-4 py-2 text-[12px] text-text-2">
+                  {currentPage + 1} / {sections.length}
+                </span>
+                <button
+                  onClick={() => setCurrentPage(p => Math.min(sections.length - 1, p + 1))}
+                  disabled={currentPage === sections.length - 1}
+                  className="px-5 py-2 text-[12px] font-semibold rounded cursor-pointer"
+                  style={{
+                    border: '1px solid var(--cyan)',
+                    background: 'rgba(6,182,212,0.1)',
+                    color: currentPage === sections.length - 1 ? 'var(--t3)' : 'var(--cyan)',
+                    opacity: currentPage === sections.length - 1 ? 0.4 : 1,
+                  }}
+                >
+                  다음
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+    </div>
+  );
+}

frontend/src/tabs/reports/components/hwpxExport.ts

@@ -640,8 +640,11 @@ function buildHwpxFromHtmlTableElement(table: Element): string {
  * <table> → hp:tbl, <p> → buildPara, 복합 구조도 처리
  */
 function htmlContentToHwpx(html: string): string {
+  // <img> 태그 제거: HWPX 이미지는 buildPicParagraph로 별도 처리됨
+  // DOMParser에 대용량 base64 data URL 전달 방지
+  const cleanHtml = html.replace(/<img\b[^>]*>/gi, '');
   const parser = new DOMParser();
-  const doc = parser.parseFromString(`<div>${html}</div>`, 'text/html');
+  const doc = parser.parseFromString(`<div>${cleanHtml}</div>`, 'text/html');
   const container = doc.body.firstElementChild;
   if (!container) return buildPara('-', 0);
 
@@ -891,7 +894,7 @@ export async function exportAsHWPX(
     extraManifestItems += `<opf:item id="${fileId}" href="${filePath}" media-type="${mediaType}"/>`;
     // inMemory="NO": 데이터는 ZIP 내 파일로 저장, 요소 내용은 파일 경로
     binDataListXml +=
-      `<hh:binData id="${binId}" isSameDocData="0" compress="YES" inMemory="NO" ` +
+      `<hh:binData id="${binId}" isSameDocData="0" compress="NO" inMemory="NO" ` +
       `doNotCompressFile="0" blockDecompress="0" limitWidth="0" limitHeight="0">${filePath}</hh:binData>`;
     binCount++;
   };
@@ -918,15 +921,15 @@ export async function exportAsHWPX(
     processImage(images.sensitivityMap, 4, 'image4');
   }
 
-  // header.xml: binDataList를 hh:refList 내부에 삽입 (HWPML 스펙 준수)
+  // header.xml: binDataList를 hh:refList 뒤에 삽입 (HWPML 스펙 준수)
   let headerXml = HEADER_XML;
   if (binCount > 0) {
     const binDataList =
       `<hh:binDataList itemCnt="${binCount}">` +
       binDataListXml +
       '</hh:binDataList>';
-    // refList 닫힘 태그 직전에 삽입해야 함 (binDataList는 refList의 자식)
+    // refList 닫힘 태그 직후에 삽입 (binDataList는 head의 직접 자식)
-    headerXml = HEADER_XML.replace('</hh:refList>', binDataList + '</hh:refList>');
+    headerXml = HEADER_XML.replace('</hh:refList>', '</hh:refList>' + binDataList);
   }
 
   // Contents

frontend/src/tabs/reports/components/reportTypes.ts

@@ -222,6 +222,15 @@ export const templateTypes: TemplateType[] = [
   },
 ]
 
+// ─── 분석 필드 구분자 (다중 필드 → analysis 단일 컬럼 저장) ──────────
+export const ANALYSIS_SEP = '\n\n<<<SEP>>>\n\n';
+
+export const ANALYSIS_FIELD_ORDER: Partial<Record<ReportType, string[]>> = {
+  '초기보고서': ['initialResponse', 'futurePlan'],
+  '지휘부 보고': ['responseStatus', 'suggestions'],
+  '종합보고서': ['spreadSummary', 'responseDetail', 'damageReport', 'futurePlanDetail'],
+};
+
 // ─── Report Generator types & data ────────────────────────
 export interface ReportSection {
   id: string

frontend/src/tabs/reports/components/reportUtils.ts

@@ -1,5 +1,6 @@
 import { sanitizeHtml } from '@common/utils/sanitize';
 import type { OilSpillReportData } from './OilSpillReportTemplate';
+import { ANALYSIS_SEP, ANALYSIS_FIELD_ORDER } from './reportTypes';
 
 // ─── Report Export Helpers ──────────────────────────────
 export function generateReportHTML(
@@ -229,6 +230,18 @@ export function buildReportGetVal(report: OilSpillReportData) {
     if (key === '__vessels')   return formatVesselsTable(report.vessels)
     if (key === '__recovery')  return formatRecoveryTable(report.recovery)
     if (key === '__result')    return formatResultTable(report.result)
+    // 분석 필드 키 처리 (ANALYSIS_FIELD_ORDER에 정의된 키들 → report.analysis에서 split)
+    for (const fields of Object.values(ANALYSIS_FIELD_ORDER)) {
+      if (fields && fields.includes(key)) {
+        const idx = fields.indexOf(key);
+        const analysis = report.analysis || '';
+        if (!analysis.includes(ANALYSIS_SEP)) {
+          return idx === 0 ? analysis : '';
+        }
+        const parts = analysis.split(ANALYSIS_SEP);
+        return parts[idx] || '';
+      }
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return (report as any)[key] || ''
   }