.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이 있으면 해당 실행의 결과만, 없으면 최신 결과
-    SELECT ALGO_CD, RSLT_DATA, CMPL_DTM FROM wing.PRED_EXEC
+  const sql = predRunSn != null
-    WHERE ACDNT_SN = $1
+    ? `
-      AND ALGO_CD IN ('OPENDRIFT', 'POSEIDON')
+      SELECT ALGO_CD, RSLT_DATA, CMPL_DTM FROM wing.PRED_EXEC
-      AND EXEC_STTS_CD = 'COMPLETED'
+      WHERE ACDNT_SN = $1
-    ORDER BY CMPL_DTM DESC
+        AND PRED_RUN_SN = $2
-  `;
+        AND ALGO_CD IN ('OPENDRIFT', 'POSEIDON')
-  const { rows } = await wingPool.query(sql, [acdntSn]);
+        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 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
-          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
-          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,16 @@
 
 ## [Unreleased]
 
+## [2026-03-25]
+
+### 추가
+- 예측: 실행 이력 선택 기능 (predRunSn 기반 특정 예측 결과 조회)
+- DB: PRED_RUN_SN 마이그레이션 추가 (028_pred_run_sn)
+- 관리자: 수치예측자료 연계 모니터링 패널 추가 (HYCOM·GFS·WW3·KOAST POS_WIND/HYDR/WAVE)
+
+### 변경
+- 보고서: 기능 개선 (TemplateEditPage, ReportGenerator, hwpxExport 등)
+
 ## [2026-03-24]
 
 ### 추가
@@ -11,6 +21,8 @@
 - react-router-dom 도입, BrowserRouter 래핑
 - SVG 아이콘 에셋 19종 추가
 - @/ path alias 추가
+- 디자인: Components 탭 추가 (Button, TextField, Overview 페이지)
+- 관리자: 수거인력 패널 및 선박모니터링 패널 추가
 - 레이어: 레이어 데이터 테이블 매핑 구현 + 어장 팝업 수정
 - 확산예측: 예측 실행 시 기상정보(풍속·풍향·기압·파고·수온·기온·염분 등) ACDNT_WEATHER 테이블에 자동 저장
 - DB: ACDNT_WEATHER 테이블에 구조화된 기상 수치 컬럼 19개 추가 (025 마이그레이션)
@@ -22,6 +34,7 @@
 - 관리자: 방제장비 현황 패널에 장비 타입 필터 및 조건부 컬럼 강조 스타일 추가
 
 ### 변경
+- 디자인: 색상 팔레트 컨텐츠 개선 + base.css 확장
 - SCAT 지도 하드코딩 제주 해안선 제거, 인접 구간 기반 동적 방향 계산으로 전환
 - 예측: 분석 API를 예측 서비스로 통합 (analysisRouter 제거)
 - 예측: 예측 API 확장 (predictionRouter/Service, LeftPanel/RightPanel 연동)

frontend/src/common/styles/base.css

@@ -23,6 +23,84 @@
     --fM: JetBrains Mono, monospace;
     --rS: 6px;
     --rM: 8px;
+
+    /* === Design Token System === */
+
+    /* Static */
+    --static-black: #131415;
+    --static-white: #ffffff;
+
+    /* Gray */
+    --gray-100: #f1f5f9;
+    --gray-200: #e2e8f0;
+    --gray-300: #cbd5e1;
+    --gray-400: #94a3b8;
+    --gray-500: #64748b;
+    --gray-600: #475569;
+    --gray-700: #334155;
+    --gray-800: #1e293b;
+    --gray-900: #0f172a;
+    --gray-1000: #020617;
+
+    /* Blue */
+    --blue-100: #dbeafe;
+    --blue-200: #bfdbfe;
+    --blue-300: #93c5fd;
+    --blue-400: #60a5fa;
+    --blue-500: #3b82f6;
+    --blue-600: #2563eb;
+    --blue-700: #1d4ed8;
+    --blue-800: #1e40af;
+    --blue-900: #1e3a8a;
+    --blue-1000: #172554;
+
+    /* Green */
+    --green-100: #dcfce7;
+    --green-200: #bbf7d0;
+    --green-300: #86efac;
+    --green-400: #4ade80;
+    --green-500: #22c55e;
+    --green-600: #16a34a;
+    --green-700: #15803d;
+    --green-800: #166534;
+    --green-900: #14532d;
+    --green-1000: #052e16;
+
+    /* Yellow */
+    --yellow-100: #fef9c3;
+    --yellow-200: #fef08a;
+    --yellow-300: #fde047;
+    --yellow-400: #facc15;
+    --yellow-500: #eab308;
+    --yellow-600: #ca8a04;
+    --yellow-700: #a16207;
+    --yellow-800: #854d0e;
+    --yellow-900: #713f12;
+    --yellow-1000: #422006;
+
+    /* Red */
+    --red-100: #fee2e2;
+    --red-200: #fecaca;
+    --red-300: #fca5a5;
+    --red-400: #f87171;
+    --red-500: #ef4444;
+    --red-600: #dc2626;
+    --red-700: #b91c1c;
+    --red-800: #991b1b;
+    --red-900: #7f1d1d;
+    --red-1000: #450a0a;
+
+    /* Purple */
+    --purple-100: #f3e8ff;
+    --purple-200: #e9d5ff;
+    --purple-300: #d8b4fe;
+    --purple-400: #c084fc;
+    --purple-500: #a855f7;
+    --purple-600: #9333ea;
+    --purple-700: #7e22ce;
+    --purple-800: #6b21a8;
+    --purple-900: #581c87;
+    --purple-1000: #3b0764;
   }
 
   * {

frontend/src/pages/design/ButtonContent.tsx

@@ -0,0 +1,741 @@
+// ButtonContent.tsx — WING-OPS Button 컴포넌트 상세 페이지 (다크/라이트 테마 지원)
+
+import type { DesignTheme } from './designTheme';
+
+// ---------- 타입 ----------
+
+interface ButtonSizeRow {
+  label: string;
+  heightClass: string;
+  heightPx: number;
+  px: number;
+}
+
+interface ButtonVariantStyle {
+  bg: string;
+  text: string;
+  border?: string;
+}
+
+interface ButtonStateRow {
+  state: string;
+  accent: ButtonVariantStyle;
+  primary: ButtonVariantStyle;
+  secondary: ButtonVariantStyle;
+  tertiary: ButtonVariantStyle;
+  tertiaryFilled: ButtonVariantStyle;
+}
+
+// ---------- 데이터 ----------
+
+const BUTTON_SIZES: ButtonSizeRow[] = [
+  { label: 'XLarge (56)', heightClass: 'h-14', heightPx: 56, px: 24 },
+  { label: 'Large (48)', heightClass: 'h-12', heightPx: 48, px: 20 },
+  { label: 'Medium (44)', heightClass: 'h-11', heightPx: 44, px: 16 },
+  { label: 'Small (32)', heightClass: 'h-8', heightPx: 32, px: 12 },
+  { label: 'XSmall (24)', heightClass: 'h-6', heightPx: 24, px: 8 },
+];
+
+const VARIANTS = ['Accent', 'Primary', 'Secondary', 'Tertiary', 'Tertiary (filled)'] as const;
+
+const getDarkStateRows = (): ButtonStateRow[] => [
+  {
+    state: 'Default',
+    accent:         { bg: '#ef4444', text: '#fff' },
+    primary:        { bg: '#1a1a2e', text: '#fff' },
+    secondary:      { bg: '#6b7280', text: '#fff' },
+    tertiary:       { bg: 'transparent', text: '#c2c6d6', border: '#6b7280' },
+    tertiaryFilled: { bg: '#374151', text: '#c2c6d6' },
+  },
+  {
+    state: 'Hover',
+    accent:         { bg: '#dc2626', text: '#fff' },
+    primary:        { bg: '#2d2d44', text: '#fff' },
+    secondary:      { bg: '#7c8393', text: '#fff' },
+    tertiary:       { bg: 'rgba(255,255,255,0.05)', text: '#c2c6d6', border: '#9ca3af' },
+    tertiaryFilled: { bg: '#4b5563', text: '#c2c6d6' },
+  },
+  {
+    state: 'Pressed',
+    accent:         { bg: '#b91c1c', text: '#fff' },
+    primary:        { bg: '#3d3d5c', text: '#fff' },
+    secondary:      { bg: '#9ca3af', text: '#fff' },
+    tertiary:       { bg: 'rgba(255,255,255,0.1)', text: '#c2c6d6', border: '#9ca3af' },
+    tertiaryFilled: { bg: '#6b7280', text: '#c2c6d6' },
+  },
+  {
+    state: 'Disabled',
+    accent:         { bg: 'rgba(239,68,68,0.3)', text: 'rgba(255,255,255,0.5)' },
+    primary:        { bg: 'rgba(26,26,46,0.5)', text: 'rgba(255,255,255,0.4)' },
+    secondary:      { bg: 'rgba(107,114,128,0.3)', text: 'rgba(255,255,255,0.4)' },
+    tertiary:       { bg: 'transparent', text: 'rgba(255,255,255,0.3)', border: 'rgba(107,114,128,0.3)' },
+    tertiaryFilled: { bg: 'rgba(55,65,81,0.3)', text: 'rgba(255,255,255,0.3)' },
+  },
+];
+
+const getLightStateRows = (): ButtonStateRow[] => [
+  {
+    state: 'Default',
+    accent:         { bg: '#ef4444', text: '#fff' },
+    primary:        { bg: '#1a1a2e', text: '#fff' },
+    secondary:      { bg: '#d1d5db', text: '#374151' },
+    tertiary:       { bg: 'transparent', text: '#374151', border: '#d1d5db' },
+    tertiaryFilled: { bg: '#e5e7eb', text: '#374151' },
+  },
+  {
+    state: 'Hover',
+    accent:         { bg: '#dc2626', text: '#fff' },
+    primary:        { bg: '#2d2d44', text: '#fff' },
+    secondary:      { bg: '#bcc0c7', text: '#374151' },
+    tertiary:       { bg: 'rgba(0,0,0,0.03)', text: '#374151', border: '#9ca3af' },
+    tertiaryFilled: { bg: '#d1d5db', text: '#374151' },
+  },
+  {
+    state: 'Pressed',
+    accent:         { bg: '#b91c1c', text: '#fff' },
+    primary:        { bg: '#3d3d5c', text: '#fff' },
+    secondary:      { bg: '#9ca3af', text: '#374151' },
+    tertiary:       { bg: 'rgba(0,0,0,0.06)', text: '#374151', border: '#6b7280' },
+    tertiaryFilled: { bg: '#bcc0c7', text: '#374151' },
+  },
+  {
+    state: 'Disabled',
+    accent:         { bg: 'rgba(239,68,68,0.3)', text: 'rgba(255,255,255,0.5)' },
+    primary:        { bg: 'rgba(26,26,46,0.3)', text: 'rgba(255,255,255,0.5)' },
+    secondary:      { bg: 'rgba(209,213,219,0.5)', text: 'rgba(55,65,81,0.4)' },
+    tertiary:       { bg: 'transparent', text: 'rgba(55,65,81,0.3)', border: 'rgba(209,213,219,0.5)' },
+    tertiaryFilled: { bg: 'rgba(229,231,235,0.5)', text: 'rgba(55,65,81,0.3)' },
+  },
+];
+
+// ---------- Props ----------
+
+interface ButtonContentProps {
+  theme: DesignTheme;
+}
+
+// ---------- 헬퍼 ----------
+
+function getVariantStyle(row: ButtonStateRow, variantIndex: number): ButtonVariantStyle {
+  const keys: (keyof Omit<ButtonStateRow, 'state'>)[] = [
+    'accent',
+    'primary',
+    'secondary',
+    'tertiary',
+    'tertiaryFilled',
+  ];
+  return row[keys[variantIndex]];
+}
+
+// ---------- 컴포넌트 ----------
+
+export const ButtonContent = ({ theme }: ButtonContentProps) => {
+  const t = theme;
+  const isDark = t.mode === 'dark';
+
+  const sectionCardBg = isDark ? 'rgba(255,255,255,0.03)' : '#f5f5f5';
+  const dividerColor = isDark ? 'rgba(255,255,255,0.08)' : '#e5e7eb';
+  const badgeBg = isDark ? '#4a5568' : '#6b7280';
+  const annotationColor = isDark ? '#f87171' : '#ef4444';
+  const buttonDarkBg = isDark ? '#e2e8f0' : '#1a1a2e';
+  const buttonDarkText = isDark ? '#1a1a2e' : '#fff';
+
+  const stateRows = isDark ? getDarkStateRows() : getLightStateRows();
+
+  return (
+    <div className="p-12" style={{ color: t.textPrimary }}>
+      <div style={{ maxWidth: '64rem' }}>
+
+        {/* ── 섹션 1: 헤더 ── */}
+        <div
+          className="pb-10 mb-12 border-b border-solid"
+          style={{ borderColor: dividerColor }}
+        >
+          <p
+            className="font-mono text-sm uppercase tracking-widest mb-3"
+            style={{ color: t.textAccent }}
+          >
+            Components
+          </p>
+          <h1
+            className="text-4xl font-bold mb-4"
+            style={{ color: t.textPrimary }}
+          >
+            Button
+          </h1>
+          <p
+            className="text-lg mb-1"
+            style={{ color: t.textSecondary }}
+          >
+            사용자의 의도를 명확하게 전달하고, 행동을 유도합니다.
+          </p>
+          <p
+            className="text-lg"
+            style={{ color: t.textSecondary }}
+          >
+            버튼의 형태와 색은 우선순위를 시각적으로 구분합니다.
+          </p>
+        </div>
+
+        {/* ── 섹션 2: Anatomy ── */}
+        <div className="mb-16">
+          <h2
+            className="text-2xl font-bold mb-8"
+            style={{ color: t.textPrimary }}
+          >
+            Anatomy
+          </h2>
+
+          {/* Anatomy 카드 */}
+          <div
+            className="rounded-xl p-10 mb-8"
+            style={{ backgroundColor: sectionCardBg }}
+          >
+            <div className="flex flex-row items-start gap-16 justify-center">
+
+              {/* 왼쪽: 텍스트 + 아이콘 버튼 */}
+              <div className="flex flex-col items-center gap-6">
+                <div className="relative">
+                  {/* 버튼 본체 */}
+                  <div
+                    className="relative inline-flex items-center gap-2 px-5 rounded-md"
+                    style={{
+                      height: '44px',
+                      backgroundColor: buttonDarkBg,
+                      color: buttonDarkText,
+                      fontSize: '14px',
+                      fontWeight: 600,
+                    }}
+                  >
+                    {/* Container 번호 — 테두리 점선 */}
+                    <span
+                      className="absolute inset-0 rounded-md pointer-events-none"
+                      style={{
+                        border: `1.5px dashed ${isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.20)'}`,
+                      }}
+                    />
+                    <span>레이블</span>
+                    <span className="font-bold">+</span>
+
+                    {/* 번호 뱃지 — Container (1) */}
+                    <span
+                      className="absolute flex items-center justify-center rounded-full text-white font-bold"
+                      style={{
+                        width: '22px',
+                        height: '22px',
+                        fontSize: '10px',
+                        backgroundColor: badgeBg,
+                        top: '-12px',
+                        left: '-12px',
+                      }}
+                    >
+                      1
+                    </span>
+
+                    {/* 번호 뱃지 — Label (2) */}
+                    <span
+                      className="absolute flex items-center justify-center rounded-full text-white font-bold"
+                      style={{
+                        width: '22px',
+                        height: '22px',
+                        fontSize: '10px',
+                        backgroundColor: badgeBg,
+                        top: '-12px',
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                      }}
+                    >
+                      2
+                    </span>
+
+                    {/* 번호 뱃지 — Icon (3) */}
+                    <span
+                      className="absolute flex items-center justify-center rounded-full text-white font-bold"
+                      style={{
+                        width: '22px',
+                        height: '22px',
+                        fontSize: '10px',
+                        backgroundColor: badgeBg,
+                        top: '-12px',
+                        right: '-12px',
+                      }}
+                    >
+                      3
+                    </span>
+                  </div>
+                </div>
+                <span
+                  className="text-xs font-mono"
+                  style={{ color: t.textMuted }}
+                >
+                  텍스트 + 아이콘 버튼
+                </span>
+              </div>
+
+              {/* 오른쪽: 아이콘 전용 버튼 */}
+              <div className="flex flex-col items-center gap-6">
+                <div className="relative">
+                  <div
+                    className="relative inline-flex items-center justify-center rounded-md"
+                    style={{
+                      width: '44px',
+                      height: '44px',
+                      backgroundColor: buttonDarkBg,
+                      color: buttonDarkText,
+                      fontSize: '18px',
+                    }}
+                  >
+                    <span
+                      className="absolute inset-0 rounded-md pointer-events-none"
+                      style={{
+                        border: `1.5px dashed ${isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.20)'}`,
+                      }}
+                    />
+                    ♥
+
+                    {/* 번호 뱃지 — Container (1) */}
+                    <span
+                      className="absolute flex items-center justify-center rounded-full text-white font-bold"
+                      style={{
+                        width: '22px',
+                        height: '22px',
+                        fontSize: '10px',
+                        backgroundColor: badgeBg,
+                        top: '-12px',
+                        left: '-12px',
+                      }}
+                    >
+                      1
+                    </span>
+
+                    {/* 번호 뱃지 — Icon (3) */}
+                    <span
+                      className="absolute flex items-center justify-center rounded-full text-white font-bold"
+                      style={{
+                        width: '22px',
+                        height: '22px',
+                        fontSize: '10px',
+                        backgroundColor: badgeBg,
+                        top: '-12px',
+                        right: '-12px',
+                      }}
+                    >
+                      3
+                    </span>
+                  </div>
+                </div>
+                <span
+                  className="text-xs font-mono"
+                  style={{ color: t.textMuted }}
+                >
+                  아이콘 전용 버튼
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* 번호 목록 */}
+          <ol className="flex flex-col gap-2 pl-5 list-decimal">
+            {[
+              { label: 'Container', desc: '버튼의 외곽 영역. 클릭 가능한 전체 영역을 정의합니다.' },
+              { label: 'Label', desc: '버튼의 텍스트 레이블.' },
+              { label: 'Icon (Optional)', desc: '선택적으로 추가되는 아이콘 요소.' },
+            ].map((item) => (
+              <li key={item.label} style={{ color: t.textSecondary }}>
+                <span className="font-bold" style={{ color: t.textPrimary }}>
+                  {item.label}
+                </span>
+                {' '}— {item.desc}
+              </li>
+            ))}
+          </ol>
+        </div>
+
+        {/* ── 섹션 3: Spec ── */}
+        <div className="mb-16">
+          <h2
+            className="text-2xl font-bold mb-10"
+            style={{ color: t.textPrimary }}
+          >
+            Spec
+          </h2>
+
+          {/* 3-1. Size */}
+          <div className="mb-12">
+            <h3
+              className="text-xl font-semibold mb-6"
+              style={{ color: t.textPrimary }}
+            >
+              1. Size
+            </h3>
+            <div
+              className="rounded-xl p-8"
+              style={{ backgroundColor: sectionCardBg }}
+            >
+              <div className="flex flex-col gap-5">
+                {BUTTON_SIZES.map((size) => (
+                  <div key={size.label} className="flex items-center justify-between gap-8">
+                    {/* 라벨 */}
+                    <span
+                      className="font-mono text-sm w-36 shrink-0"
+                      style={{ color: t.textSecondary }}
+                    >
+                      {size.label}
+                    </span>
+
+                    {/* 실제 크기 버튼 */}
+                    <div className="flex-1 flex items-center">
+                      <button
+                        type="button"
+                        className="rounded-md font-semibold text-sm"
+                        style={{
+                          height: `${size.heightPx}px`,
+                          paddingLeft: `${size.px}px`,
+                          paddingRight: `${size.px}px`,
+                          backgroundColor: buttonDarkBg,
+                          color: buttonDarkText,
+                          border: 'none',
+                          cursor: 'default',
+                          fontSize: size.heightPx <= 24 ? '11px' : size.heightPx <= 32 ? '12px' : '14px',
+                        }}
+                      >
+                        레이블
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* 3-2. Container */}
+          <div className="mb-12">
+            <h3
+              className="text-xl font-semibold mb-6"
+              style={{ color: t.textPrimary }}
+            >
+              2. Container
+            </h3>
+            <div
+              className="rounded-xl p-8"
+              style={{ backgroundColor: sectionCardBg }}
+            >
+              <div className="flex flex-col gap-8">
+
+                {/* Flexible */}
+                <div className="flex flex-col gap-3">
+                  <span
+                    className="font-mono text-sm font-bold"
+                    style={{ color: t.textPrimary }}
+                  >
+                    Flexible
+                  </span>
+                  <div className="flex items-center gap-4">
+                    <div className="relative inline-flex">
+                      {/* 좌측 padding 치수선 */}
+                      <div
+                        className="absolute top-1/2 flex items-center"
+                        style={{
+                          left: '0',
+                          transform: 'translateY(-50%)',
+                          color: annotationColor,
+                        }}
+                      >
+                        <div
+                          style={{
+                            width: '20px',
+                            height: '1px',
+                            backgroundColor: annotationColor,
+                          }}
+                        />
+                        <span
+                          className="font-mono absolute"
+                          style={{
+                            fontSize: '9px',
+                            color: annotationColor,
+                            top: '-14px',
+                            left: '2px',
+                            whiteSpace: 'nowrap',
+                          }}
+                        >
+                          20px
+                        </span>
+                      </div>
+
+                      <button
+                        type="button"
+                        className="rounded-md font-semibold"
+                        style={{
+                          height: '44px',
+                          paddingLeft: '20px',
+                          paddingRight: '20px',
+                          backgroundColor: buttonDarkBg,
+                          color: buttonDarkText,
+                          fontSize: '14px',
+                          border: 'none',
+                          cursor: 'default',
+                        }}
+                      >
+                        레이블
+                      </button>
+
+                      {/* 우측 padding 치수선 */}
+                      <div
+                        className="absolute top-1/2 flex items-center justify-end"
+                        style={{
+                          right: '0',
+                          transform: 'translateY(-50%)',
+                        }}
+                      >
+                        <div
+                          style={{
+                            width: '20px',
+                            height: '1px',
+                            backgroundColor: annotationColor,
+                          }}
+                        />
+                        <span
+                          className="font-mono absolute"
+                          style={{
+                            fontSize: '9px',
+                            color: annotationColor,
+                            top: '-14px',
+                            right: '2px',
+                            whiteSpace: 'nowrap',
+                          }}
+                        >
+                          20px
+                        </span>
+                      </div>
+                    </div>
+                    <span
+                      className="font-mono text-xs"
+                      style={{ color: t.textSecondary }}
+                    >
+                      콘텐츠에 맞게 너비가 자동으로 조정됩니다.
+                    </span>
+                  </div>
+                </div>
+
+                {/* Fixed */}
+                <div className="flex flex-col gap-3">
+                  <span
+                    className="font-mono text-sm font-bold"
+                    style={{ color: t.textPrimary }}
+                  >
+                    Fixed
+                  </span>
+                  <div className="flex items-center gap-4">
+                    <div className="relative">
+                      <button
+                        type="button"
+                        className="rounded-md font-semibold"
+                        style={{
+                          height: '44px',
+                          width: '160px',
+                          backgroundColor: buttonDarkBg,
+                          color: buttonDarkText,
+                          fontSize: '14px',
+                          border: 'none',
+                          cursor: 'default',
+                        }}
+                      >
+                        레이블
+                      </button>
+                      {/* 고정 너비 표시 */}
+                      <div
+                        className="absolute"
+                        style={{
+                          bottom: '-18px',
+                          left: '0',
+                          right: '0',
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '4px',
+                        }}
+                      >
+                        <div style={{ height: '1px', flex: 1, backgroundColor: annotationColor }} />
+                        <span
+                          className="font-mono"
+                          style={{ fontSize: '9px', color: annotationColor, whiteSpace: 'nowrap' }}
+                        >
+                          Fixed Width
+                        </span>
+                        <div style={{ height: '1px', flex: 1, backgroundColor: annotationColor }} />
+                      </div>
+                    </div>
+                    <span
+                      className="font-mono text-xs ml-4"
+                      style={{ color: t.textSecondary }}
+                    >
+                      너비가 고정된 버튼입니다.
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 3-3. Label */}
+          <div className="mb-12">
+            <h3
+              className="text-xl font-semibold mb-6"
+              style={{ color: t.textPrimary }}
+            >
+              3. Label
+            </h3>
+            <div
+              className="rounded-xl p-8"
+              style={{ backgroundColor: sectionCardBg }}
+            >
+              <div className="flex flex-col gap-8">
+                {[
+                  { resolution: '해상도 430', width: '100%', maxWidth: '390px', padding: 16 },
+                  { resolution: '해상도 360', width: '100%', maxWidth: '328px', padding: 16 },
+                  { resolution: '해상도 320', width: '248px', maxWidth: '248px', padding: 16 },
+                ].map((item) => (
+                  <div key={item.resolution} className="flex flex-col gap-3">
+                    <span
+                      className="font-mono text-sm"
+                      style={{ color: t.textSecondary }}
+                    >
+                      {item.resolution}
+                    </span>
+                    <div className="flex items-center gap-6">
+                      <div
+                        className="relative"
+                        style={{ width: item.width, maxWidth: item.maxWidth }}
+                      >
+                        <button
+                          type="button"
+                          className="w-full rounded-md font-semibold"
+                          style={{
+                            height: '44px',
+                            paddingLeft: `${item.padding}px`,
+                            paddingRight: `${item.padding}px`,
+                            backgroundColor: buttonDarkBg,
+                            color: buttonDarkText,
+                            fontSize: '14px',
+                            border: 'none',
+                            cursor: 'default',
+                          }}
+                        >
+                          레이블
+                        </button>
+                        {/* 패딩 주석 */}
+                        <span
+                          className="absolute font-mono"
+                          style={{
+                            fontSize: '9px',
+                            color: annotationColor,
+                            top: '-16px',
+                            left: '0',
+                          }}
+                        >
+                          padding {item.padding}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* ── 섹션 4: Style (변형 × 상태 매트릭스) ── */}
+        <div
+          className="pt-12 border-t border-solid"
+          style={{ borderColor: dividerColor }}
+        >
+          <h2
+            className="text-2xl font-bold mb-8"
+            style={{ color: t.textPrimary }}
+          >
+            Style
+          </h2>
+
+          <div
+            className="rounded-xl p-8 overflow-x-auto"
+            style={{ backgroundColor: sectionCardBg }}
+          >
+            <table style={{ borderCollapse: 'collapse', minWidth: '700px' }}>
+              {/* 열 헤더 */}
+              <thead>
+                <tr>
+                  {/* 빈 셀 (상태 열) */}
+                  <th style={{ width: '100px', padding: '8px 12px' }} />
+                  {VARIANTS.map((variant) => (
+                    <th
+                      key={variant}
+                      className="font-mono text-xs font-semibold text-center pb-4"
+                      style={{
+                        color: t.textSecondary,
+                        padding: '8px 12px',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {variant}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+
+              <tbody>
+                {stateRows.map((row, rowIdx) => (
+                  <tr key={row.state}>
+                    {/* 상태 라벨 */}
+                    <td
+                      className="font-mono text-xs font-medium"
+                      style={{
+                        color: t.textSecondary,
+                        padding: rowIdx === 0 ? '8px 12px 8px 0' : '8px 12px 8px 0',
+                        verticalAlign: 'middle',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {row.state}
+                    </td>
+
+                    {/* 각 변형별 버튼 셀 */}
+                    {VARIANTS.map((_, vIdx) => {
+                      const style = getVariantStyle(row, vIdx);
+                      return (
+                        <td
+                          key={vIdx}
+                          style={{ padding: '8px 12px', verticalAlign: 'middle', textAlign: 'center' }}
+                        >
+                          <button
+                            type="button"
+                            className="rounded-md font-semibold"
+                            style={{
+                              width: '96px',
+                              height: '40px',
+                              backgroundColor: style.bg,
+                              color: style.text,
+                              border: style.border ? `1.5px solid ${style.border}` : 'none',
+                              fontSize: '12px',
+                              cursor: 'default',
+                              display: 'inline-flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                            }}
+                          >
+                            레이블
+                          </button>
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default ButtonContent;

frontend/src/pages/design/ComponentsOverview.tsx

@@ -0,0 +1,219 @@
+// ComponentsOverview.tsx — Components 탭 Overview 카드 그리드
+
+import type { DesignTheme } from './designTheme';
+
+// ---------- 타입 ----------
+
+interface OverviewCard {
+  id: string;
+  label: string;
+  thumbnail: (isDark: boolean) => React.ReactNode;
+}
+
+// ---------- 썸네일 구현 ----------
+
+const ButtonsThumbnail = ({ isDark }: { isDark: boolean }) => {
+  const accent = isDark ? '#4cd7f6' : '#06b6d4';
+  const secondaryBg = isDark ? 'rgba(255,255,255,0.07)' : '#e2e8f0';
+  const secondaryText = isDark ? 'rgba(223,226,243,0.85)' : '#475569';
+  const outlineBorder = isDark ? 'rgba(76,215,246,0.40)' : 'rgba(6,182,212,0.50)';
+
+  const buttons = [
+    { label: 'Primary', bg: accent, border: accent, color: isDark ? '#0a0e1a' : '#ffffff' },
+    { label: 'Secondary', bg: secondaryBg, border: 'transparent', color: secondaryText },
+    { label: 'Outline', bg: 'transparent', border: outlineBorder, color: accent },
+  ];
+
+  return (
+    <div className="w-full h-full flex flex-col items-center justify-center gap-3 px-8">
+      {buttons.map(({ label, bg, border, color }) => (
+        <div
+          key={label}
+          className="w-full rounded flex items-center justify-center"
+          style={{
+            height: '32px',
+            backgroundColor: bg,
+            border: `1.5px solid ${border}`,
+            color,
+            fontSize: '12px',
+            fontWeight: 600,
+          }}
+        >
+          {label}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const TextInputsThumbnail = ({ isDark }: { isDark: boolean }) => {
+  const labelColor = isDark ? 'rgba(194,198,214,0.80)' : '#64748b';
+  const inputBg = isDark ? 'rgba(255,255,255,0.04)' : '#ffffff';
+  const inputBorder = isDark ? 'rgba(255,255,255,0.12)' : '#cbd5e1';
+  const placeholderColor = isDark ? 'rgba(140,144,159,0.60)' : '#94a3b8';
+  const accentBorder = isDark ? '#4cd7f6' : '#06b6d4';
+
+  return (
+    <div className="w-full h-full flex flex-col items-center justify-center gap-3 px-8">
+      {/* 라벨 + 기본 입력 */}
+      <div className="w-full flex flex-col gap-1.5">
+        <div
+          className="rounded"
+          style={{ height: '9px', width: '48px', backgroundColor: labelColor, opacity: 0.6 }}
+        />
+        <div
+          className="w-full rounded flex items-center px-3"
+          style={{
+            height: '30px',
+            backgroundColor: inputBg,
+            border: `1.5px solid ${inputBorder}`,
+          }}
+        >
+          <div
+            className="rounded"
+            style={{ height: '8px', width: '70px', backgroundColor: placeholderColor, opacity: 0.5 }}
+          />
+        </div>
+      </div>
+      {/* 포커스 상태 입력 */}
+      <div className="w-full flex flex-col gap-1.5">
+        <div
+          className="rounded"
+          style={{ height: '9px', width: '56px', backgroundColor: labelColor, opacity: 0.6 }}
+        />
+        <div
+          className="w-full rounded flex items-center px-3"
+          style={{
+            height: '30px',
+            backgroundColor: inputBg,
+            border: `1.5px solid ${accentBorder}`,
+            boxShadow: isDark
+              ? `0 0 0 2px rgba(76,215,246,0.15)`
+              : `0 0 0 2px rgba(6,182,212,0.12)`,
+          }}
+        >
+          <div
+            className="rounded"
+            style={{ height: '8px', width: '90px', backgroundColor: isDark ? 'rgba(223,226,243,0.50)' : '#475569', opacity: 0.7 }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ---------- 카드 정의 ----------
+
+const OVERVIEW_CARDS: OverviewCard[] = [
+  {
+    id: 'buttons',
+    label: 'Buttons',
+    thumbnail: (isDark) => <ButtonsThumbnail isDark={isDark} />,
+  },
+  {
+    id: 'text-field',
+    label: 'Text Field',
+    thumbnail: (isDark) => <TextInputsThumbnail isDark={isDark} />,
+  },
+];
+
+// ---------- Props ----------
+
+interface ComponentsOverviewProps {
+  theme: DesignTheme;
+  onNavigate: (id: string) => void;
+}
+
+// ---------- 컴포넌트 ----------
+
+const ComponentsOverview = ({ theme, onNavigate }: ComponentsOverviewProps) => {
+  const t = theme;
+  const isDark = t.mode === 'dark';
+
+  const cardBg = isDark ? 'rgba(255,255,255,0.03)' : '#f5f5f5';
+  const cardBorder = isDark ? 'rgba(255,255,255,0.06)' : '#e5e5e5';
+  const thumbnailBorderBottom = isDark ? 'rgba(255,255,255,0.06)' : '#e0e0e0';
+
+  return (
+    <div className="pt-24 px-12 pb-16 max-w-5xl flex flex-col gap-12">
+
+      {/* ── 헤더 영역 ── */}
+      <div className="flex flex-col gap-3">
+        <span
+          className="font-mono text-xs font-semibold uppercase"
+          style={{ letterSpacing: '1.4px', color: t.textAccent }}
+        >
+          Components
+        </span>
+        <h1
+          className="font-sans text-4xl font-bold leading-tight"
+          style={{ color: t.textPrimary }}
+        >
+          Overview
+        </h1>
+        <p
+          className="font-korean text-sm leading-6"
+          style={{ color: t.textSecondary }}
+        >
+          재사용 가능한 UI 컴포넌트 카탈로그입니다.
+        </p>
+      </div>
+
+      {/* ── 3열 카드 그리드 ── */}
+      <div
+        className="grid gap-5"
+        style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}
+      >
+        {OVERVIEW_CARDS.map((card) => (
+          <div
+            key={card.id}
+            className="rounded-lg border border-solid flex flex-col cursor-pointer transition-all duration-200"
+            style={{
+              backgroundColor: cardBg,
+              borderColor: cardBorder,
+            }}
+            onClick={() => onNavigate(card.id)}
+            onMouseEnter={(e) => {
+              const el = e.currentTarget;
+              el.style.transform = 'scale(1.025)';
+              el.style.boxShadow = isDark
+                ? '0 8px 24px rgba(0,0,0,0.35)'
+                : '0 6px 18px rgba(0,0,0,0.10)';
+              el.style.borderColor = isDark
+                ? 'rgba(76,215,246,0.22)'
+                : 'rgba(6,182,212,0.28)';
+            }}
+            onMouseLeave={(e) => {
+              const el = e.currentTarget;
+              el.style.transform = 'scale(1)';
+              el.style.boxShadow = 'none';
+              el.style.borderColor = cardBorder;
+            }}
+          >
+            {/* 썸네일 영역 */}
+            <div
+              className="h-48 rounded-t-lg overflow-hidden"
+              style={{
+                borderBottom: `1px solid ${thumbnailBorderBottom}`,
+              }}
+            >
+              {card.thumbnail(isDark)}
+            </div>
+
+            {/* 카드 라벨 */}
+            <div className="px-5 py-4">
+              <span
+                className="font-sans text-sm font-semibold"
+                style={{ color: t.textPrimary }}
+              >
+                {card.label}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ComponentsOverview;

frontend/src/pages/design/DesignHeader.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import type { DesignTheme } from './designTheme';
 
 export type DesignTab = 'foundations' | 'components';
@@ -16,6 +17,7 @@ const TABS: { label: string; id: DesignTab }[] = [
 
 export const DesignHeader = ({ activeTab, onTabChange, theme, onThemeToggle }: DesignHeaderProps) => {
   const isDark = theme.mode === 'dark';
+  const navigate = useNavigate();
 
   return (
     <header
@@ -27,12 +29,14 @@ export const DesignHeader = ({ activeTab, onTabChange, theme, onThemeToggle }: D
     >
       {/* 좌측: 로고 + 버전 뱃지 */}
       <div className="flex flex-row items-center gap-3">
-        <span
+        <button
-          className="font-sans text-2xl leading-8 font-bold"
+          type="button"
+          onClick={() => navigate('/')}
+          className="font-sans text-2xl leading-8 font-bold bg-transparent border-none p-0 cursor-pointer transition-opacity hover:opacity-70"
           style={{ letterSpacing: '2.4px', color: theme.textAccent }}
         >
           WING-OPS
-        </span>
+        </button>
         <div
           className="rounded-sm border border-solid py-1 px-2"
           style={{

frontend/src/pages/design/DesignPage.tsx

@@ -9,18 +9,22 @@ import { ColorPaletteContent } from './ColorPaletteContent';
 import { TypographyContent } from './TypographyContent';
 import { RadiusContent } from './RadiusContent';
 import { LayoutContent } from './LayoutContent';
+import FoundationsOverview from './FoundationsOverview';
+import ComponentsOverview from './ComponentsOverview';
+import { ButtonContent } from './ButtonContent';
+import { TextFieldContent } from './TextFieldContent';
 import { getTheme } from './designTheme';
 import type { ThemeMode } from './designTheme';
 
 const FIRST_ITEM: Record<DesignTab, MenuItemId> = {
-  foundations: 'color',
+  foundations: 'overview',
-  components: 'buttons',
+  components: 'overview',
 };
 
 export const DesignPage = () => {
   const [activeTab, setActiveTab] = useState<DesignTab>('foundations');
   const [themeMode, setThemeMode] = useState<ThemeMode>('dark');
-  const [sidebarItem, setSidebarItem] = useState<MenuItemId>('color');
+  const [sidebarItem, setSidebarItem] = useState<MenuItemId>('overview');
 
   const theme = getTheme(themeMode);
 
@@ -32,6 +36,8 @@ export const DesignPage = () => {
   const renderContent = () => {
     if (activeTab === 'foundations') {
       switch (sidebarItem) {
+        case 'overview':
+          return <FoundationsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
         case 'color':
           return <ColorPaletteContent theme={theme} />;
         case 'typography':
@@ -41,10 +47,19 @@ export const DesignPage = () => {
         case 'layout':
           return <LayoutContent theme={theme} />;
         default:
-          return <ColorPaletteContent theme={theme} />;
+          return <FoundationsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
       }
     }
-    return <ComponentsContent />;
+    switch (sidebarItem) {
+      case 'overview':
+        return <ComponentsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
+      case 'buttons':
+        return <ButtonContent theme={theme} />;
+      case 'text-field':
+        return <TextFieldContent theme={theme} />;
+      default:
+        return <ComponentsContent />;
+    }
   };
 
   return (

frontend/src/pages/design/DesignSidebar.tsx

@@ -1,38 +1,27 @@
 import type { DesignTheme } from './designTheme';
 import type { DesignTab } from './DesignHeader';
 
-import wingColorPaletteIcon from '../../assets/icons/wing-color-palette.svg';
+export type FoundationsMenuItemId = 'overview' | 'color' | 'typography' | 'radius' | 'layout';
-import wingElevationIcon from '../../assets/icons/wing-elevation.svg';
+export type ComponentsMenuItemId = 'overview' | 'buttons' | 'text-field';
-import wingFoundationsIcon from '../../assets/icons/wing-foundations.svg';
-import wingLayoutGridIcon from '../../assets/icons/wing-layout-grid.svg';
-import wingTypographyIcon from '../../assets/icons/wing-typography.svg';
-
-export type FoundationsMenuItemId = 'color' | 'typography' | 'radius' | 'layout';
-export type ComponentsMenuItemId = 'buttons' | 'text-inputs' | 'controls' | 'badge' | 'dialog' | 'tabs' | 'popup' | 'navigation';
 export type MenuItemId = FoundationsMenuItemId | ComponentsMenuItemId;
 
 interface MenuItem {
   id: MenuItemId;
   label: string;
-  icon: string;
 }
 
 const FOUNDATIONS_MENU: MenuItem[] = [
-  { id: 'color', label: 'Color', icon: wingColorPaletteIcon },
+  { id: 'overview', label: 'Overview' },
-  { id: 'typography', label: 'Typography', icon: wingTypographyIcon },
+  { id: 'color', label: 'Color' },
-  { id: 'radius', label: 'Radius', icon: wingElevationIcon },
+  { id: 'typography', label: 'Typography' },
-  { id: 'layout', label: 'Layout', icon: wingLayoutGridIcon },
+  { id: 'radius', label: 'Radius' },
+  { id: 'layout', label: 'Layout' },
 ];
 
 const COMPONENTS_MENU: MenuItem[] = [
-  { id: 'buttons', label: 'Buttons', icon: wingFoundationsIcon },
+  { id: 'overview', label: 'Overview' },
-  { id: 'text-inputs', label: 'Text Inputs', icon: wingFoundationsIcon },
+  { id: 'buttons', label: 'Buttons' },
-  { id: 'controls', label: 'Controls', icon: wingFoundationsIcon },
+  { id: 'text-field', label: 'Text Field' },
-  { id: 'badge', label: 'Badge', icon: wingColorPaletteIcon },
-  { id: 'dialog', label: 'Dialog', icon: wingLayoutGridIcon },
-  { id: 'tabs', label: 'Tabs', icon: wingLayoutGridIcon },
-  { id: 'popup', label: 'Popup', icon: wingElevationIcon },
-  { id: 'navigation', label: 'Navigation', icon: wingTypographyIcon },
 ];
 
 const SIDEBAR_CONFIG: Record<DesignTab, { title: string; subtitle: string; menu: MenuItem[] }> = {
@@ -58,7 +47,7 @@ export function DesignSidebar({ theme, activeTab, activeItem, onItemChange }: De
       <button
         key={item.id}
         onClick={() => onItemChange(item.id)}
-        className="py-3 px-6 flex flex-row gap-3 items-center w-full text-left transition-colors duration-150 border-l-4"
+        className="py-3 px-6 flex flex-row items-center w-full text-left transition-colors duration-150 border-l-4"
         style={{
           borderColor: isActive ? theme.textAccent : 'transparent',
           color: isActive ? theme.textAccent : theme.textMuted,
@@ -67,7 +56,6 @@ export function DesignSidebar({ theme, activeTab, activeItem, onItemChange }: De
             : undefined,
         }}
       >
-        <img src={item.icon} alt={item.label} className="w-5 h-5 shrink-0" />
         <span className="font-sans text-base leading-6">{item.label}</span>
       </button>
     );
@@ -82,22 +70,6 @@ export function DesignSidebar({ theme, activeTab, activeItem, onItemChange }: De
         boxShadow: `0px 25px 50px -12px ${theme.sidebarShadow}`,
       }}
     >
-      {/* 타이틀 영역 */}
-      {/* <div className="px-6 pb-8">
-        <p
-          className="font-sans text-xl leading-7 font-bold"
-          style={{ letterSpacing: '-1px', color: theme.textPrimary }}
-        >
-          {title}
-        </p>
-        <p
-          className="font-sans text-[10px] leading-[15px] font-normal uppercase"
-          style={{ letterSpacing: '1px', color: theme.textAccent }}
-        >
-          {subtitle}
-        </p>
-      </div> */}
-
       {/* 메뉴 네비게이션 */}
       <nav className="flex-1 flex flex-col">{menu.map(renderMenuItem)}</nav>
     </aside>

frontend/src/pages/design/FoundationsOverview.tsx

@@ -0,0 +1,274 @@
+// FoundationsOverview.tsx — Foundations 탭 Overview 카드 그리드
+
+import type { DesignTheme } from './designTheme';
+
+// ---------- 타입 ----------
+
+interface OverviewCard {
+  id: string;
+  label: string;
+  thumbnail: (isDark: boolean) => React.ReactNode;
+}
+
+// ---------- 썸네일 구현 ----------
+
+const ColorThumbnail = ({ isDark }: { isDark: boolean }) => {
+  // 3x3 도트 그리드: gray / pink / cyan 컬럼, 어두운 순
+  const dots: string[][] = [
+    ['#9ca3af', '#f9a8d4', '#67e8f9'],
+    ['#4b5563', '#ec4899', '#06b6d4'],
+    ['#1f2937', '#9d174d', '#0e7490'],
+  ];
+
+  return (
+    <div className="w-full h-full flex items-center justify-center">
+      <div
+        className="grid gap-3"
+        style={{ gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: 'repeat(3, 1fr)' }}
+      >
+        {dots.map((row, ri) =>
+          row.map((color, ci) => (
+            <div
+              key={`${ri}-${ci}`}
+              className="rounded-full"
+              style={{
+                width: '28px',
+                height: '28px',
+                backgroundColor: color,
+                boxShadow: isDark
+                  ? `0 0 8px ${color}55`
+                  : `0 1px 3px rgba(0,0,0,0.15)`,
+              }}
+            />
+          )),
+        )}
+      </div>
+    </div>
+  );
+};
+
+const TypographyThumbnail = ({ isDark }: { isDark: boolean }) => (
+  <div className="w-full h-full flex items-center justify-center gap-1">
+    <span
+      style={{
+        fontSize: '72px',
+        lineHeight: 1,
+        fontWeight: 700,
+        fontFamily: 'sans-serif',
+        color: isDark ? 'rgba(223,226,243,0.90)' : 'rgba(15,23,42,0.85)',
+        letterSpacing: '-2px',
+      }}
+    >
+      가
+    </span>
+    <span
+      style={{
+        fontSize: '64px',
+        lineHeight: 1,
+        fontWeight: 700,
+        fontFamily: 'serif',
+        color: isDark ? 'rgba(76,215,246,0.80)' : 'rgba(6,182,212,0.80)',
+        letterSpacing: '-1px',
+      }}
+    >
+      a
+    </span>
+  </div>
+);
+
+const RadiusThumbnail = ({ isDark }: { isDark: boolean }) => {
+  const items = [
+    { radius: '0px', size: 36 },
+    { radius: '6px', size: 36 },
+    { radius: '12px', size: 36 },
+    { radius: '50%', size: 36 },
+  ];
+
+  const borderColor = isDark ? 'rgba(76,215,246,0.55)' : 'rgba(6,182,212,0.65)';
+  const bgColor = isDark ? 'rgba(76,215,246,0.08)' : 'rgba(6,182,212,0.08)';
+
+  return (
+    <div className="w-full h-full flex items-center justify-center gap-4">
+      {items.map(({ radius, size }) => (
+        <div
+          key={radius}
+          style={{
+            width: size,
+            height: size,
+            borderRadius: radius,
+            border: `2px solid ${borderColor}`,
+            backgroundColor: bgColor,
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+const LayoutThumbnail = ({ isDark }: { isDark: boolean }) => {
+  const accent = isDark ? 'rgba(76,215,246,0.18)' : 'rgba(6,182,212,0.14)';
+  const accentStrong = isDark ? 'rgba(76,215,246,0.40)' : 'rgba(6,182,212,0.38)';
+  const faint = isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)';
+
+  return (
+    <div className="w-full h-full flex flex-col items-center justify-center gap-2 px-8">
+      {/* 헤더 바 */}
+      <div
+        className="w-full rounded"
+        style={{ height: '14px', backgroundColor: accentStrong }}
+      />
+      {/* 2열 바디 */}
+      <div className="w-full flex gap-2" style={{ flex: 1, maxHeight: '52px' }}>
+        <div
+          className="rounded"
+          style={{ width: '28%', backgroundColor: accent }}
+        />
+        <div className="flex flex-col gap-1.5" style={{ flex: 1 }}>
+          <div
+            className="w-full rounded"
+            style={{ height: '12px', backgroundColor: faint }}
+          />
+          <div
+            className="w-3/4 rounded"
+            style={{ height: '12px', backgroundColor: faint }}
+          />
+          <div
+            className="w-full rounded"
+            style={{ height: '12px', backgroundColor: faint }}
+          />
+        </div>
+      </div>
+      {/* 푸터 바 */}
+      <div
+        className="w-full rounded"
+        style={{ height: '10px', backgroundColor: accent }}
+      />
+    </div>
+  );
+};
+
+// ---------- 카드 정의 ----------
+
+const OVERVIEW_CARDS: OverviewCard[] = [
+  {
+    id: 'color',
+    label: 'Color',
+    thumbnail: (isDark) => <ColorThumbnail isDark={isDark} />,
+  },
+  {
+    id: 'typography',
+    label: 'Typography',
+    thumbnail: (isDark) => <TypographyThumbnail isDark={isDark} />,
+  },
+  {
+    id: 'radius',
+    label: 'Radius',
+    thumbnail: (isDark) => <RadiusThumbnail isDark={isDark} />,
+  },
+  {
+    id: 'layout',
+    label: 'Layout',
+    thumbnail: (isDark) => <LayoutThumbnail isDark={isDark} />,
+  },
+];
+
+// ---------- Props ----------
+
+interface FoundationsOverviewProps {
+  theme: DesignTheme;
+  onNavigate: (id: string) => void;
+}
+
+// ---------- 컴포넌트 ----------
+
+const FoundationsOverview = ({ theme, onNavigate }: FoundationsOverviewProps) => {
+  const t = theme;
+  const isDark = t.mode === 'dark';
+
+  const cardBg = isDark ? 'rgba(255,255,255,0.03)' : '#f5f5f5';
+  const cardBorder = isDark ? 'rgba(255,255,255,0.06)' : '#e5e5e5';
+  const thumbnailBorderBottom = isDark ? 'rgba(255,255,255,0.06)' : '#e0e0e0';
+
+  return (
+    <div className="pt-24 px-12 pb-16 max-w-5xl flex flex-col gap-12">
+
+      {/* ── 헤더 영역 ── */}
+      <div className="flex flex-col gap-3">
+        <span
+          className="font-mono text-xs font-semibold uppercase"
+          style={{ letterSpacing: '1.4px', color: t.textAccent }}
+        >
+          Foundations
+        </span>
+        <h1
+          className="font-sans text-4xl font-bold leading-tight"
+          style={{ color: t.textPrimary }}
+        >
+          Overview
+        </h1>
+        <p
+          className="font-korean text-sm leading-6"
+          style={{ color: t.textSecondary }}
+        >
+          디자인의 기반이 되는 핵심 요소 사용 기준입니다.
+        </p>
+      </div>
+
+      {/* ── 3열 카드 그리드 ── */}
+      <div
+        className="grid gap-5"
+        style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}
+      >
+        {OVERVIEW_CARDS.map((card) => (
+          <div
+            key={card.id}
+            className="rounded-lg border border-solid flex flex-col cursor-pointer transition-all duration-200"
+            style={{
+              backgroundColor: cardBg,
+              borderColor: cardBorder,
+            }}
+            onClick={() => onNavigate(card.id)}
+            onMouseEnter={(e) => {
+              const el = e.currentTarget;
+              el.style.transform = 'scale(1.025)';
+              el.style.boxShadow = isDark
+                ? '0 8px 24px rgba(0,0,0,0.35)'
+                : '0 6px 18px rgba(0,0,0,0.10)';
+              el.style.borderColor = isDark
+                ? 'rgba(76,215,246,0.22)'
+                : 'rgba(6,182,212,0.28)';
+            }}
+            onMouseLeave={(e) => {
+              const el = e.currentTarget;
+              el.style.transform = 'scale(1)';
+              el.style.boxShadow = 'none';
+              el.style.borderColor = cardBorder;
+            }}
+          >
+            {/* 썸네일 영역 */}
+            <div
+              className="h-48 rounded-t-lg overflow-hidden"
+              style={{
+                borderBottom: `1px solid ${thumbnailBorderBottom}`,
+              }}
+            >
+              {card.thumbnail(isDark)}
+            </div>
+
+            {/* 카드 라벨 */}
+            <div className="px-5 py-4">
+              <span
+                className="font-sans text-sm font-semibold"
+                style={{ color: t.textPrimary }}
+              >
+                {card.label}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FoundationsOverview;

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

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

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

@@ -0,0 +1,333 @@
+import { useState, useEffect, useCallback } from 'react';
+
+// ─── 타입 ──────────────────────────────────────────────────
+
+interface EtaClct {
+  startDate: string;
+  endDate: string;
+}
+
+interface ResultClct {
+  resultDate: string;
+  count: number;
+}
+
+interface HrCollectItem {
+  id: string;
+  rootId: string;
+  ip: string;
+  depth1: string;
+  depth2: string;
+  depth3: string;
+  depth4: string | null;
+  clctName: string;
+  clctType: string;
+  clctTypeName: string;
+  trnsmtCycle: string | null;
+  receiveCycle: string | null;
+  targetTable: string;
+  seq: number;
+  estmtRqrd: string;
+  activeYn: string;
+  clctStartDt: string;
+  clctEndDt: string;
+  clctDate: string | null;
+  jobName: string;
+  resultClctList: ResultClct[];
+  etaClctList: EtaClct[];
+}
+
+// ─── Mock 데이터 ────────────────────────────────────────────
+
+// TODO: 실제 API 연동 시 fetch 호출로 교체
+const MOCK_DATA: HrCollectItem[] = [
+  {
+    id: '100200',
+    rootId: '2',
+    ip: '127.0.0.1',
+    depth1: '연계',
+    depth2: '해양경찰청',
+    depth3: '해경업무포탈시스템(KBP)',
+    depth4: null,
+    clctName: '사용자부서',
+    clctType: '000002',
+    clctTypeName: '배치',
+    trnsmtCycle: null,
+    receiveCycle: '0 20 4 * * *',
+    targetTable: 'common.t_dept_info',
+    seq: 101,
+    estmtRqrd: '1',
+    activeYn: 'Y',
+    clctStartDt: '2024-12-16',
+    clctEndDt: '9999-12-31',
+    clctDate: '2024-12-16',
+    jobName: 'DeptJob',
+    resultClctList: [],
+    etaClctList: [
+      { startDate: '2025-09-12 04:20', endDate: '2025-09-12 04:21' },
+    ],
+  },
+  {
+    id: '100200',
+    rootId: '2',
+    ip: '127.0.0.1',
+    depth1: '연계',
+    depth2: '해양경찰청',
+    depth3: '해경업무포탈시스템(KBP)',
+    depth4: null,
+    clctName: '사용자계정',
+    clctType: '000002',
+    clctTypeName: '배치',
+    trnsmtCycle: null,
+    receiveCycle: '0 20 4 * 1 *',
+    targetTable: 'common.t_usr',
+    seq: 102,
+    estmtRqrd: '5',
+    activeYn: 'Y',
+    clctStartDt: '2024-12-17',
+    clctEndDt: '9999-12-31',
+    clctDate: null,
+    jobName: 'UserFlowJob',
+    resultClctList: [],
+    etaClctList: [],
+  },
+  {
+    id: '100201',
+    rootId: '2',
+    ip: '127.0.0.1',
+    depth1: '연계',
+    depth2: '해양경찰청',
+    depth3: '해경업무포탈시스템(KBP)',
+    depth4: null,
+    clctName: '사용자직위',
+    clctType: '000002',
+    clctTypeName: '배치',
+    trnsmtCycle: null,
+    receiveCycle: '0 30 4 * * *',
+    targetTable: 'common.t_position_info',
+    seq: 103,
+    estmtRqrd: '1',
+    activeYn: 'Y',
+    clctStartDt: '2024-12-16',
+    clctEndDt: '9999-12-31',
+    clctDate: '2025-01-10',
+    jobName: 'PositionJob',
+    resultClctList: [{ resultDate: '2025-09-12 04:30', count: 42 }],
+    etaClctList: [
+      { startDate: '2025-09-12 04:30', endDate: '2025-09-12 04:31' },
+    ],
+  },
+  {
+    id: '100202',
+    rootId: '2',
+    ip: '127.0.0.1',
+    depth1: '연계',
+    depth2: '해양경찰청',
+    depth3: '해경업무포탈시스템(KBP)',
+    depth4: null,
+    clctName: '조직정보',
+    clctType: '000002',
+    clctTypeName: '배치',
+    trnsmtCycle: null,
+    receiveCycle: '0 40 4 * * *',
+    targetTable: 'common.t_org_info',
+    seq: 104,
+    estmtRqrd: '2',
+    activeYn: 'Y',
+    clctStartDt: '2024-12-18',
+    clctEndDt: '9999-12-31',
+    clctDate: '2025-03-20',
+    jobName: 'OrgJob',
+    resultClctList: [{ resultDate: '2025-09-12 04:40', count: 15 }],
+    etaClctList: [
+      { startDate: '2025-09-12 04:40', endDate: '2025-09-12 04:41' },
+    ],
+  },
+  {
+    id: '100203',
+    rootId: '2',
+    ip: '127.0.0.1',
+    depth1: '연계',
+    depth2: '해양경찰청',
+    depth3: '해경업무포탈시스템(KBP)',
+    depth4: null,
+    clctName: '근무상태',
+    clctType: '000002',
+    clctTypeName: '배치',
+    trnsmtCycle: null,
+    receiveCycle: '0 0 5 * * *',
+    targetTable: 'common.t_work_status',
+    seq: 105,
+    estmtRqrd: '3',
+    activeYn: 'N',
+    clctStartDt: '2025-01-15',
+    clctEndDt: '9999-12-31',
+    clctDate: null,
+    jobName: 'WorkStatusJob',
+    resultClctList: [],
+    etaClctList: [],
+  },
+];
+
+function fetchHrCollectData(): Promise<HrCollectItem[]> {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(MOCK_DATA), 300);
+  });
+}
+
+// ─── 상태 뱃지 ─────────────────────────────────────────────
+
+function getCollectStatus(item: HrCollectItem): { label: string; color: string } {
+  if (item.activeYn !== 'Y') {
+    return { label: '비활성', color: 'text-t3 bg-bg-2' };
+  }
+  if (item.etaClctList.length > 0) {
+    return { label: '완료', color: 'text-emerald-400 bg-emerald-500/10' };
+  }
+  return { label: '대기', color: 'text-yellow-400 bg-yellow-500/10' };
+}
+
+// ─── cron 표현식 → 읽기 쉬운 형태 ─────────────────────────
+
+function formatCron(cron: string | null): string {
+  if (!cron) return '-';
+  const parts = cron.split(' ');
+  if (parts.length < 6) return cron;
+  const [sec, min, hour, , , ] = parts;
+  return `매일 ${hour}:${min.padStart(2, '0')}:${sec.padStart(2, '0')}`;
+}
+
+// ─── 테이블 ─────────────────────────────────────────────────
+
+const HEADERS = ['번호', '수집항목', '기관', '시스템', '유형', '수집주기', '대상테이블', 'Job명', '활성', '수집시작일', '최근수집일', '상태'];
+
+function HrTable({ rows, loading }: { rows: HrCollectItem[]; 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">
+            {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: 5 }).map((_, i) => (
+                <tr key={i} className="border-b border-border-1 animate-pulse">
+                  {HEADERS.map((_, j) => (
+                    <td key={j} className="px-3 py-2">
+                      <div className="h-3 bg-bg-2 rounded w-14" />
+                    </td>
+                  ))}
+                </tr>
+              ))
+            : rows.map((row, idx) => {
+                const status = getCollectStatus(row);
+                return (
+                  <tr key={`${row.seq}`} className="border-b border-border-1 hover:bg-bg-1/50">
+                    <td className="px-3 py-2 text-t2 text-center">{idx + 1}</td>
+                    <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.clctName}</td>
+                    <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.depth2}</td>
+                    <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.depth3}</td>
+                    <td className="px-3 py-2 text-t2">{row.clctTypeName}</td>
+                    <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{formatCron(row.receiveCycle)}</td>
+                    <td className="px-3 py-2 text-t2 font-mono">{row.targetTable}</td>
+                    <td className="px-3 py-2 text-t2 font-mono">{row.jobName}</td>
+                    <td className="px-3 py-2 text-center">
+                      <span className={`inline-block px-1.5 py-0.5 rounded text-[11px] font-medium ${
+                        row.activeYn === 'Y' ? 'text-emerald-400 bg-emerald-500/10' : 'text-t3 bg-bg-2'
+                      }`}>
+                        {row.activeYn === 'Y' ? 'Y' : 'N'}
+                      </span>
+                    </td>
+                    <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.clctStartDt}</td>
+                    <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.clctDate ?? '-'}</td>
+                    <td className="px-3 py-2">
+                      <span className={`inline-block px-2 py-0.5 rounded text-[11px] font-medium ${status.color}`}>
+                        {status.label}
+                      </span>
+                    </td>
+                  </tr>
+                );
+              })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ─── 메인 패널 ──────────────────────────────────────────────
+
+export default function CollectHrPanel() {
+  const [rows, setRows] = useState<HrCollectItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    const data = await fetchHrCollectData();
+    setRows(data);
+    setLoading(false);
+    setLastUpdate(new Date());
+  }, []);
+
+  useEffect(() => {
+    let isMounted = true;
+    if (rows.length === 0) {
+      void Promise.resolve().then(() => { if (isMounted) void fetchData(); });
+    }
+    return () => { isMounted = false; };
+  }, [rows.length, fetchData]);
+
+  const activeCount = rows.filter((r) => r.activeYn === 'Y').length;
+  const completedCount = rows.filter((r) => r.etaClctList.length > 0).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={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 items-center gap-3 px-5 py-2 shrink-0 border-b border-border-1 bg-bg-0">
+        <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" />
+          수집 완료 {completedCount}건
+        </span>
+        <span className="text-xs text-t3">
+          전체 {rows.length}건 (활성: {activeCount} / 비활성: {rows.length - activeCount})
+        </span>
+      </div>
+
+      {/* 테이블 */}
+      <div className="flex-1 overflow-auto p-5">
+        <HrTable rows={rows} loading={loading} />
+      </div>
+    </div>
+  );
+}

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/components/MonitorVesselPanel.tsx

@@ -0,0 +1,246 @@
+import { useState, useEffect, useCallback } from 'react';
+
+// TODO: 실제 API 연동 시 fetch 호출로 교체
+interface VesselMonitorRow {
+  institution: string;
+  institutionCode: string;
+  systemName: string;
+  linkInfo: string;
+  storagePlace: string;
+  linkMethod: string;
+  collectionCycle: string;
+  collectionCount: string;
+  isNormal: boolean;
+  lastMessageTime: string;
+}
+
+/** 기관코드 → 원천기관명 매핑 */
+const INSTITUTION_NAMES: Record<string, string> = {
+  BS: '부산항',
+  BSN: '부산신항',
+  DH: '동해안',
+  DS: '대산항',
+  GI: '경인항',
+  GIC: '경인연안',
+  GS: '군산항',
+  IC: '인천항',
+  JDC: '진도연안',
+  JJ: '제주항',
+  MP: '목포항',
+};
+
+/** Mock 데이터 정의 (스크린샷 기반) */
+const MOCK_DATA: Omit<VesselMonitorRow, 'institution'>[] = [
+  { institutionCode: 'BS', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '439 / 499', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
+  { institutionCode: 'BS', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '133 / 463', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
+  { institutionCode: 'BSN', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '255 / 278', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
+  { institutionCode: 'BSN', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '133 / 426', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
+  { institutionCode: 'DH', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
+  { institutionCode: 'DH', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
+  { institutionCode: 'DS', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '0', isNormal: false, lastMessageTime: '2026-03-15 15:38:57' },
+  { institutionCode: 'DS', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '0', isNormal: false, lastMessageTime: '2026-03-15 15:38:56' },
+  { institutionCode: 'GI', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '120 / 136', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
+  { institutionCode: 'GI', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '55 / 467', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
+  { institutionCode: 'GIC', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '180 / 216', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
+  { institutionCode: 'GIC', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
+  { institutionCode: 'GS', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
+  { institutionCode: 'GS', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
+  { institutionCode: 'IC', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '149 / 176', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
+  { institutionCode: 'IC', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '55 / 503', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
+  { institutionCode: 'JDC', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '433 / 524', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
+  { institutionCode: 'JDC', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '256 / 1619', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
+  { institutionCode: 'JJ', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '429 / 508', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
+  { institutionCode: 'JJ', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '160 / 1592', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
+  { institutionCode: 'MP', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
+  { institutionCode: 'MP', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
+];
+
+/** Mock fetch — TODO: 실제 API 연동 시 fetch 호출로 교체 */
+function fetchVesselMonitorData(): Promise<VesselMonitorRow[]> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const rows: VesselMonitorRow[] = MOCK_DATA.map((d) => ({
+        ...d,
+        institution: INSTITUTION_NAMES[d.institutionCode] ?? d.institutionCode,
+      }));
+      resolve(rows);
+    }, 400);
+  });
+}
+
+/* ── 상태 뱃지 ── */
+function StatusBadge({ loading, onCount, total }: { loading: boolean; onCount: 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>
+    );
+  }
+  const offCount = total - onCount;
+  if (offCount === total) {
+    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" />
+        전체 OFF
+      </span>
+    );
+  }
+  if (offCount > 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" />
+        일부 OFF ({offCount}/{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>
+  );
+}
+
+/* ── 연결상태 셀 ── */
+function ConnectionBadge({ isNormal, lastMessageTime }: { isNormal: boolean; lastMessageTime: string }) {
+  if (isNormal) {
+    return (
+      <div className="flex flex-col items-start gap-0.5">
+        <span className="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-semibold bg-blue-600 text-white">
+          ON
+        </span>
+        {lastMessageTime && (
+          <span className="text-[10px] text-t3">{lastMessageTime}</span>
+        )}
+      </div>
+    );
+  }
+  return (
+    <div className="flex flex-col items-start gap-0.5">
+      <span className="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-semibold bg-orange-500 text-white">
+        OFF
+      </span>
+      {lastMessageTime && (
+        <span className="text-[10px] text-t3">{lastMessageTime}</span>
+      )}
+    </div>
+  );
+}
+
+/* ── 테이블 ── */
+const HEADERS = ['번호', '원천기관', '기관코드', '정보시스템명', '연계정보', '저장장소', '연계방식', '수집주기', '선박건수/신호건수', '연결상태'];
+
+function VesselTable({ rows, loading }: { rows: VesselMonitorRow[]; 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">
+            {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: 8 }).map((_, i) => (
+                <tr key={i} className="border-b border-border-1 animate-pulse">
+                  {HEADERS.map((_, j) => (
+                    <td key={j} className="px-3 py-2">
+                      <div className="h-3 bg-bg-2 rounded w-14" />
+                    </td>
+                  ))}
+                </tr>
+              ))
+            : rows.map((row, idx) => (
+                <tr key={`${row.institutionCode}-${row.systemName}`} className="border-b border-border-1 hover:bg-bg-1/50">
+                  <td className="px-3 py-2 text-t2 text-center">{idx + 1}</td>
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.institution}</td>
+                  <td className="px-3 py-2 text-t2">{row.institutionCode}</td>
+                  <td className="px-3 py-2 text-t2">{row.systemName}</td>
+                  <td className="px-3 py-2 text-t2">{row.linkInfo}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.storagePlace}</td>
+                  <td className="px-3 py-2 text-t2">{row.linkMethod}</td>
+                  <td className="px-3 py-2 text-t2">{row.collectionCycle}</td>
+                  <td className="px-3 py-2 text-t2 text-center">{row.collectionCount}</td>
+                  <td className="px-3 py-2">
+                    <ConnectionBadge isNormal={row.isNormal} lastMessageTime={row.lastMessageTime} />
+                  </td>
+                </tr>
+              ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/* ── 메인 패널 ── */
+export default function MonitorVesselPanel() {
+  const [rows, setRows] = useState<VesselMonitorRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    const data = await fetchVesselMonitorData();
+    setRows(data);
+    setLoading(false);
+    setLastUpdate(new Date());
+  }, []);
+
+  useEffect(() => {
+    let isMounted = true;
+    if (rows.length === 0) {
+      void Promise.resolve().then(() => { if (isMounted) void fetchData(); });
+    }
+    return () => { isMounted = false; };
+  }, [rows.length, fetchData]);
+
+  const onCount = rows.filter((r) => r.isNormal).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={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 items-center gap-3 px-5 py-2 shrink-0 border-b border-border-1 bg-bg-0">
+        <StatusBadge loading={loading} onCount={onCount} total={rows.length} />
+        <span className="text-xs text-t3">
+          연계 채널 {rows.length}개 (ON: {onCount} / OFF: {rows.length - onCount})
+        </span>
+      </div>
+
+      {/* 테이블 */}
+      <div className="flex-1 overflow-auto p-5">
+        <VesselTable rows={rows} loading={loading} />
+      </div>
+    </div>
+  );
+}

frontend/src/tabs/admin/components/adminMenuConfig.ts

@@ -74,7 +74,6 @@ export const ADMIN_MENU: AdminMenuItem[] = [
           { id: 'monitor-realtime', label: '실시간 관측자료' },
           { id: 'monitor-forecast', label: '수치예측자료' },
           { id: 'monitor-vessel', label: '선박위치정보' },
-          { id: 'monitor-hr', label: '인사' },
         ],
       },
     ],

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,17 +289,13 @@ 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.surface}     color="var(--blue)" />
+              <ProgressBar label="증발"     value={weatheringStatus.evaporation} color="var(--cyan)" />
-                <ProgressBar label="증발"     value={weatheringStatus.evaporation} color="var(--cyan)" />
+              <ProgressBar label="분산"     value={weatheringStatus.dispersion}  color="var(--green)" />
-                <ProgressBar label="분산"     value={weatheringStatus.dispersion}  color="var(--green)" />
+              <ProgressBar label="펜스차단" value={weatheringStatus.boom}        color="var(--boom)" />
-                <ProgressBar label="펜스차단" value={weatheringStatus.boom}        color="var(--boom)" />
+              <ProgressBar label="해안도달" value={weatheringStatus.beached}     color="var(--red)" />
-                <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,8 +217,19 @@ export function ReportsView() {
 
         {/* ──── 수정 ──── */}
         {view.screen === 'edit' && (
-          <div className="flex-1 overflow-auto px-4 py-4">
+          <div className="flex-1 overflow-hidden flex flex-col">
-            <OilSpillReportTemplate mode="edit" initialData={view.data} onSave={handleSave} onBack={() => { setView({ screen: 'list' }); setActiveSubTab('report-list'); refreshList() }} />
+            {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>
         )}
 
@@ -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) {
-                      const getVal = buildReportGetVal(previewReport)
+                      try {
-                      const meta = { writeTime: previewReport.incident.writeTime, author: previewReport.author, jurisdiction: previewReport.jurisdiction }
+                        const getVal = buildReportGetVal(previewReport)
-                      const filename = previewReport.title || tpl.label
+                        const meta = { writeTime: previewReport.incident.writeTime, author: previewReport.author, jurisdiction: previewReport.jurisdiction }
-                      exportAsHWP(tpl.label, meta, tpl.sections, getVal, filename, {
+                        const filename = previewReport.title || tpl.label
-                        step3: previewReport.step3MapImage || undefined,
+                        await exportAsHWP(tpl.label, meta, tpl.sections, getVal, filename, {
-                        step6: previewReport.step6MapImage || undefined,
+                          step3: previewReport.step3MapImage || undefined,
-                        sensitiveMap: previewReport.sensitiveMapImage || undefined,
+                          step6: previewReport.step6MapImage || undefined,
-                        sensitivityMap: previewReport.sensitivityMapImage || 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] || ''
   }