docs: 릴리즈 노트 정리 (2026-04-16)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.claude/settings.json

@@ -5,7 +5,30 @@
   },
   "permissions": {
     "allow": [
-      "Bash(*)"
+      "Bash(*)",
+      "Bash(npm run *)",
+      "Bash(npm install *)",
+      "Bash(npm test *)",
+      "Bash(npx *)",
+      "Bash(node *)",
+      "Bash(git status)",
+      "Bash(git diff *)",
+      "Bash(git log *)",
+      "Bash(git branch *)",
+      "Bash(git checkout *)",
+      "Bash(git add *)",
+      "Bash(git commit *)",
+      "Bash(git pull *)",
+      "Bash(git fetch *)",
+      "Bash(git merge *)",
+      "Bash(git stash *)",
+      "Bash(git remote *)",
+      "Bash(git config *)",
+      "Bash(git rev-parse *)",
+      "Bash(git show *)",
+      "Bash(git tag *)",
+      "Bash(curl -s *)",
+      "Bash(fnm *)"
     ],
     "deny": [
       "Bash(git push --force*)",
@@ -61,5 +84,8 @@
         ]
       }
     ]
+  },
+  "enabledPlugins": {
+    "frontend-design@claude-plugins-official": true
   }
-}
+}

.claude/workflow-version.json

@@ -1,7 +1,7 @@
 {
   "applied_global_version": "1.6.1",
-  "applied_date": "2026-03-31",
+  "applied_date": "2026-04-16",
   "project_type": "react-ts",
   "gitea_url": "https://gitea.gc-si.dev",
   "custom_pre_commit": true
-}
+}

.github/java-upgrade/hooks/scripts/recordToolUse.ps1

@@ -0,0 +1,17 @@
+# Records run_in_terminal and appmod-* tool calls as JSONL for the extension to process.
+
+$raw = [Console]::In.ReadToEnd()
+
+if ($raw -notmatch '"tool_name"\s*:\s*"([^"]+)"') { exit 0 }
+$toolName = $Matches[1]
+
+if ($toolName -ne 'run_in_terminal' -and $toolName -notlike 'appmod-*') { exit 0 }
+
+if ($raw -notmatch '"session_id"\s*:\s*"([^"]+)"') { exit 0 }
+$sessionId = $Matches[1]
+
+$hooksDir = '.github\java-upgrade\hooks'
+if (-not (Test-Path $hooksDir)) { New-Item -ItemType Directory -Path $hooksDir -Force | Out-Null }
+
+$line = ($raw -replace '[\r\n]+', ' ').Trim() + "`n"
+[System.IO.File]::AppendAllText("$hooksDir\$sessionId.json", $line, [System.Text.UTF8Encoding]::new($false))

.github/java-upgrade/hooks/scripts/recordToolUse.sh

@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+# Records run_in_terminal and appmod-* tool calls as JSONL for the extension to process.
+
+INPUT=$(cat)
+
+TOOL_NAME="${INPUT#*\"tool_name\":\"}"
+TOOL_NAME="${TOOL_NAME%%\"*}"
+
+case "$TOOL_NAME" in
+  run_in_terminal|appmod-*) ;;
+  *) exit 0 ;;
+esac
+
+case "$INPUT" in
+  *'"session_id":"'*) ;;
+  *) exit 0 ;;
+esac
+
+SESSION_ID="${INPUT#*\"session_id\":\"}"
+SESSION_ID="${SESSION_ID%%\"*}"
+[ -z "$SESSION_ID" ] && exit 0
+
+HOOKS_DIR=".github/java-upgrade/hooks"
+mkdir -p "$HOOKS_DIR"
+
+LINE=$(printf '%s' "$INPUT" | tr -d '\r\n')
+printf '%s\n' "$LINE" >> "$HOOKS_DIR/${SESSION_ID}.json"

.gitignore

@@ -102,4 +102,7 @@ frontend/public/hns-manual/images/
 
 
 # mcp
-.mcp.json
+.mcp.json
+
+# python
+.venv

CLAUDE.md

@@ -54,7 +54,7 @@ wing/
 │       │   ├── types/         backtrack, boomLine, hns, navigation
 │       │   ├── utils/         coordinates, geo, sanitize, cn.ts
 │       │   └── data/          layerData.ts (UI 레이어 트리)
-│       └── tabs/              탭 단위 패키지 (@tabs/ alias)
+│       └── components/        탭 단위 패키지 (@components/ alias)
 │           ├── prediction/    확산 예측 (OilSpillView, 역추적, 오일붐)
 │           ├── hns/           HNS 분석 (시나리오, 물질 DB, 재계산)
 │           ├── rescue/        구조 시나리오
@@ -96,7 +96,7 @@ wing/
 ### Path Alias
 
 - `@common/*` -> `src/common/*` (공통 모듈)
-- `@tabs/*` -> `src/tabs/*` (탭 패키지)
+- `@components/*` -> `src/components/*` (탭 패키지)
 
 ## 팀 컨벤션
 
@@ -107,6 +107,8 @@ wing/
 - `naming.md` -- 네이밍 규칙
 - `testing.md` -- 테스트 규칙
 - `subagent-policy.md` -- 서브에이전트 활용 정책
+- `design-system.md` -- AI 에이전트 UI 디자인 시스템 규칙 (영문, 실사용)
+- `design-system-ko.md` -- 디자인 시스템 규칙 (한국어 참고용)
 
 ## 개발 문서 (docs/)
 

README.md

@@ -77,7 +77,7 @@ cd backend && npm run db:seed    # DB 초기 데이터
 
 ## 프로젝트 구조
 
-Path Alias: `@common/*` -> `src/common/*`, `@tabs/*` -> `src/tabs/*`
+Path Alias: `@common/*` -> `src/common/*`, `@components/*` -> `src/components/*`
 
 ```
 wing/
@@ -95,7 +95,7 @@ wing/
 │       │   ├── types/         backtrack, boomLine, hns, navigation
 │       │   ├── utils/         coordinates, geo, sanitize, cn.ts
 │       │   └── data/          layerData.ts (UI 레이어 트리)
-│       └── tabs/              탭 단위 패키지 (@tabs/ alias)
+│       └── tabs/              탭 단위 패키지 (@components/ alias)
 │           ├── prediction/    확산 예측 (OilSpillView, 역추적, 오일붐)
 │           ├── hns/           HNS 분석 (시나리오, 물질 DB, 재계산)
 │           ├── rescue/        구조 시나리오

backend/src/aerial/aerialRouter.ts

@@ -1,6 +1,8 @@
 import express from 'express';
+import { mkdirSync, existsSync } from 'fs';
 import multer from 'multer';
 import path from 'path';
+import { randomUUID } from 'crypto';
 import {
   listMedia,
   createMedia,
@@ -25,6 +27,29 @@ import { requireAuth, requirePermission } from '../auth/authMiddleware.js';
 const router = express.Router();
 const stitchUpload = multer({ storage: multer.memoryStorage(), limits: { fileSize: 50 * 1024 * 1024 } });
 
+const mediaUpload = multer({
+  storage: multer.diskStorage({
+    destination: (_req, _file, cb) => {
+      const dir = path.resolve('uploads', 'aerial');
+      mkdirSync(dir, { recursive: true });
+      cb(null, dir);
+    },
+    filename: (_req, file, cb) => {
+      const ext = path.extname(file.originalname);
+      cb(null, `${randomUUID()}${ext}`);
+    },
+  }),
+  limits: { fileSize: 2 * 1024 * 1024 * 1024 }, // 2GB
+  fileFilter: (_req, file, cb) => {
+    const allowed = /\.(jpe?g|png|tiff?|geotiff|mp4|mov)$/i;
+    if (allowed.test(path.extname(file.originalname))) {
+      cb(null, true);
+    } else {
+      cb(new Error('허용되지 않는 파일 형식입니다.'));
+    }
+  },
+});
+
 // ============================================================
 // AERIAL_MEDIA 라우트
 // ============================================================
@@ -73,6 +98,96 @@ router.post('/media', requireAuth, requirePermission('aerial', 'CREATE'), async
   }
 });
 
+// POST /api/aerial/media/upload — 파일 업로드 + 메타 등록
+router.post('/media/upload', requireAuth, requirePermission('aerial', 'CREATE'), mediaUpload.single('file'), async (req, res) => {
+  try {
+    const file = req.file;
+    if (!file) {
+      res.status(400).json({ error: '파일이 필요합니다.' });
+      return;
+    }
+    const { equipTpCd, equipNm, mediaTpCd, acdntSn, memo } = req.body as {
+      equipTpCd?: string;
+      equipNm?: string;
+      mediaTpCd?: string;
+      acdntSn?: string;
+      memo?: string;
+    };
+
+    const isVideo = file.mimetype.startsWith('video/');
+    const detectedMediaType = mediaTpCd ?? (isVideo ? '영상' : '사진');
+    const fileSzMb = (file.size / (1024 * 1024)).toFixed(2) + ' MB';
+
+    const result = await createMedia({
+      fileNm: file.filename,
+      orgnlNm: file.originalname,
+      filePath: file.path,
+      equipTpCd: equipTpCd ?? 'drone',
+      equipNm: equipNm ?? '기타',
+      mediaTpCd: detectedMediaType,
+      fileSz: fileSzMb,
+      acdntSn: acdntSn ? parseInt(acdntSn, 10) : undefined,
+      locDc: memo ?? undefined,
+    });
+
+    res.status(201).json(result);
+  } catch (err) {
+    console.error('[aerial] 미디어 업로드 오류:', err);
+    res.status(500).json({ error: '미디어 업로드 실패' });
+  }
+});
+
+// GET /api/aerial/media/:sn/view — 원본 이미지 뷰어용 (inline 표시)
+router.get('/media/:sn/view', requireAuth, requirePermission('aerial', 'READ'), async (req, res) => {
+  try {
+    const sn = parseInt(req.params['sn'] as string, 10);
+    if (!isValidNumber(sn, 1, 999999)) {
+      res.status(400).json({ error: '유효하지 않은 미디어 번호' });
+      return;
+    }
+
+    const media = await getMediaBySn(sn);
+    if (!media) {
+      res.status(404).json({ error: '미디어를 찾을 수 없습니다.' });
+      return;
+    }
+
+    // 로컬 업로드 파일이면 직접 서빙
+    if (media.filePath) {
+      const absPath = path.resolve(media.filePath);
+      if (existsSync(absPath)) {
+        const ext = path.extname(absPath).toLowerCase();
+        const mimeMap: Record<string, string> = {
+          '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.png': 'image/png',
+          '.tif': 'image/tiff', '.tiff': 'image/tiff',
+          '.mp4': 'video/mp4', '.mov': 'video/quicktime',
+        };
+        res.setHeader('Content-Type', mimeMap[ext] ?? 'application/octet-stream');
+        res.setHeader('Content-Disposition', 'inline');
+        res.setHeader('Cache-Control', 'private, max-age=300');
+        res.sendFile(absPath);
+        return;
+      }
+    }
+
+    const fileId = media.fileNm.substring(0, 36);
+    const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+    if (!UUID_PATTERN.test(fileId) || !media.equipNm) {
+      res.status(404).json({ error: '표시 가능한 이미지가 없습니다.' });
+      return;
+    }
+
+    const buffer = await fetchOriginalImage(media.equipNm, fileId);
+    res.setHeader('Content-Type', 'image/jpeg');
+    res.setHeader('Content-Disposition', 'inline');
+    res.setHeader('Cache-Control', 'private, max-age=300');
+    res.send(buffer);
+  } catch (err) {
+    console.error('[aerial] 이미지 뷰어 오류:', err);
+    res.status(502).json({ error: '이미지 조회 실패' });
+  }
+});
+
 // GET /api/aerial/media/:sn/download — 원본 이미지 다운로드
 router.get('/media/:sn/download', requireAuth, requirePermission('aerial', 'READ'), async (req, res) => {
   try {

backend/src/aerial/aerialService.ts

@@ -368,7 +368,7 @@ export async function updateSatRequestStatus(sn: number, sttsCd: string): Promis
 // OIL INFERENCE (GPU 서버 프록시)
 // ============================================================
 
-const IMAGE_API_URL = process.env.IMAGE_API_URL ?? 'http://localhost:5001';
+const IMAGE_API_URL = process.env.IMAGE_API_URL ?? 'http://211.208.115.83:5001';
 const OIL_INFERENCE_URL = process.env.OIL_INFERENCE_URL || 'http://localhost:8090';
 const INFERENCE_TIMEOUT_MS = 10_000;
 

backend/src/gsc/gscAccidentsRouter.ts

@@ -0,0 +1,20 @@
+import { Router } from 'express';
+import { requireAuth } from '../auth/authMiddleware.js';
+import { listGscAccidents } from './gscAccidentsService.js';
+
+const router = Router();
+
+// ============================================================
+// GET /api/gsc/accidents — 외부 수집 사고 목록 (최신 20건)
+// ============================================================
+router.get('/', requireAuth, async (_req, res) => {
+  try {
+    const accidents = await listGscAccidents(20);
+    res.json(accidents);
+  } catch (err) {
+    console.error('[gsc] 사고 목록 조회 오류:', err);
+    res.status(500).json({ error: '사고 목록 조회 중 오류가 발생했습니다.' });
+  }
+});
+
+export default router;

backend/src/gsc/gscAccidentsService.ts

@@ -0,0 +1,44 @@
+import { wingPool } from '../db/wingDb.js';
+
+export interface GscAccidentListItem {
+  acdntSn: number;
+  acdntMngNo: string;
+  pollNm: string;
+  pollDate: string | null;
+  lat: number | null;
+  lon: number | null;
+}
+
+export async function listGscAccidents(limit = 20): Promise<GscAccidentListItem[]> {
+  const sql = `
+    SELECT
+      ACDNT_SN                                          AS "acdntSn",
+      ACDNT_CD                                          AS "acdntMngNo",
+      ACDNT_NM                                          AS "pollNm",
+      to_char(OCCRN_DTM, 'YYYY-MM-DD"T"HH24:MI')        AS "pollDate",
+      LAT                                               AS "lat",
+      LNG                                               AS "lon"
+    FROM wing.ACDNT
+    WHERE ACDNT_NM IS NOT NULL
+    ORDER BY OCCRN_DTM DESC NULLS LAST
+    LIMIT $1
+  `;
+
+  const result = await wingPool.query<{
+    acdntSn: number;
+    acdntMngNo: string;
+    pollNm: string;
+    pollDate: string | null;
+    lat: string | null;
+    lon: string | null;
+  }>(sql, [limit]);
+
+  return result.rows.map((row) => ({
+    acdntSn: row.acdntSn,
+    acdntMngNo: row.acdntMngNo,
+    pollNm: row.pollNm,
+    pollDate: row.pollDate,
+    lat: row.lat != null ? Number(row.lat) : null,
+    lon: row.lon != null ? Number(row.lon) : null,
+  }));
+}

backend/src/hns/hnsRouter.ts

@@ -12,11 +12,13 @@ const router = express.Router()
 // GET /api/hns/analyses — 분석 목록
 router.get('/analyses', requireAuth, requirePermission('hns', 'READ'), async (req, res) => {
   try {
-    const { status, substance, search } = req.query
+    const { status, substance, search, acdntSn } = req.query
+    const acdntSnNum = acdntSn ? parseInt(acdntSn as string, 10) : undefined
     const items = await listAnalyses({
       status: status as string | undefined,
       substance: substance as string | undefined,
       search: search as string | undefined,
+      acdntSn: acdntSnNum && !Number.isNaN(acdntSnNum) ? acdntSnNum : undefined,
     })
     res.json(items)
   } catch (err) {
@@ -48,13 +50,15 @@ router.get('/analyses/:sn', requireAuth, requirePermission('hns', 'READ'), async
 // POST /api/hns/analyses — 분석 생성
 router.post('/analyses', requireAuth, requirePermission('hns', 'CREATE'), async (req, res) => {
   try {
-    const { anlysNm, acdntDtm, locNm, lon, lat, sbstNm, spilQty, spilUnitCd, fcstHr, algoCd, critMdlCd, windSpd, windDir, temp, humid, atmStblCd, analystNm } = req.body
+    const { anlysNm, acdntSn, acdntDtm, locNm, lon, lat, sbstNm, spilQty, spilUnitCd, fcstHr, algoCd, critMdlCd, windSpd, windDir, temp, humid, atmStblCd, analystNm } = req.body
     if (!anlysNm) {
       res.status(400).json({ error: '분석명은 필수입니다.' })
       return
     }
+    const acdntSnNum = acdntSn != null ? parseInt(String(acdntSn), 10) : undefined
     const result = await createAnalysis({
-      anlysNm, acdntDtm, locNm, lon, lat, sbstNm, spilQty, spilUnitCd, fcstHr, algoCd, critMdlCd, windSpd, windDir, temp, humid, atmStblCd, analystNm,
+      anlysNm, acdntSn: acdntSnNum && !Number.isNaN(acdntSnNum) ? acdntSnNum : undefined,
+      acdntDtm, locNm, lon, lat, sbstNm, spilQty, spilUnitCd, fcstHr, algoCd, critMdlCd, windSpd, windDir, temp, humid, atmStblCd, analystNm,
     })
     res.status(201).json(result)
   } catch (err) {

backend/src/hns/hnsService.ts

@@ -94,6 +94,7 @@ export async function searchSubstances(params: HnsSearchParams) {
 
 interface HnsAnalysisItem {
   hnsAnlysSn: number
+  acdntSn: number | null
   anlysNm: string
   acdntDtm: string | null
   locNm: string | null
@@ -118,11 +119,13 @@ interface ListAnalysesInput {
   status?: string
   substance?: string
   search?: string
+  acdntSn?: number
 }
 
 function rowToAnalysis(r: Record<string, unknown>): HnsAnalysisItem {
   return {
     hnsAnlysSn: r.hns_anlys_sn as number,
+    acdntSn: (r.acdnt_sn as number) ?? null,
     anlysNm: r.anlys_nm as string,
     acdntDtm: r.acdnt_dtm as string | null,
     locNm: r.loc_nm as string | null,
@@ -146,7 +149,7 @@ function rowToAnalysis(r: Record<string, unknown>): HnsAnalysisItem {
 
 export async function listAnalyses(input: ListAnalysesInput): Promise<HnsAnalysisItem[]> {
   const conditions: string[] = ["USE_YN = 'Y'"]
-  const params: string[] = []
+  const params: (string | number)[] = []
   let idx = 1
 
   if (input.status) {
@@ -162,9 +165,13 @@ export async function listAnalyses(input: ListAnalysesInput): Promise<HnsAnalysi
     params.push(input.search)
     idx++
   }
+  if (input.acdntSn != null) {
+    conditions.push(`ACDNT_SN = $${idx++}`)
+    params.push(input.acdntSn)
+  }
 
   const { rows } = await wingPool.query(
-    `SELECT HNS_ANLYS_SN, ANLYS_NM, ACDNT_DTM, LOC_NM, LON, LAT,
+    `SELECT HNS_ANLYS_SN, ACDNT_SN, ANLYS_NM, ACDNT_DTM, LOC_NM, LON, LAT,
             SBST_NM, SPIL_QTY, SPIL_UNIT_CD, FCST_HR, ALGO_CD, CRIT_MDL_CD,
             WIND_SPD, WIND_DIR, EXEC_STTS_CD, RISK_CD, ANALYST_NM,
             RSLT_DATA, REG_DTM
@@ -179,7 +186,7 @@ export async function listAnalyses(input: ListAnalysesInput): Promise<HnsAnalysi
 
 export async function getAnalysis(sn: number): Promise<HnsAnalysisItem | null> {
   const { rows } = await wingPool.query(
-    `SELECT HNS_ANLYS_SN, ANLYS_NM, ACDNT_DTM, LOC_NM, LON, LAT,
+    `SELECT HNS_ANLYS_SN, ACDNT_SN, ANLYS_NM, ACDNT_DTM, LOC_NM, LON, LAT,
             SBST_NM, SPIL_QTY, SPIL_UNIT_CD, FCST_HR, ALGO_CD, CRIT_MDL_CD,
             WIND_SPD, WIND_DIR, TEMP, HUMID, ATM_STBL_CD,
             EXEC_STTS_CD, RISK_CD, ANALYST_NM,
@@ -194,6 +201,7 @@ export async function getAnalysis(sn: number): Promise<HnsAnalysisItem | null> {
 
 export async function createAnalysis(input: {
   anlysNm: string
+  acdntSn?: number
   acdntDtm?: string
   locNm?: string
   lon?: number
@@ -213,21 +221,21 @@ export async function createAnalysis(input: {
 }): Promise<{ hnsAnlysSn: number }> {
   const { rows } = await wingPool.query(
     `INSERT INTO HNS_ANALYSIS (
-      ANLYS_NM, ACDNT_DTM, LOC_NM, LON, LAT,
+      ACDNT_SN, ANLYS_NM, ACDNT_DTM, LOC_NM, LON, LAT,
       GEOM, LOC_DC,
       SBST_NM, SPIL_QTY, SPIL_UNIT_CD, FCST_HR, ALGO_CD, CRIT_MDL_CD,
       WIND_SPD, WIND_DIR, TEMP, HUMID, ATM_STBL_CD,
       ANALYST_NM, EXEC_STTS_CD
     ) VALUES (
-      $1, $2, $3, $4::numeric, $5::numeric,
+      $1, $2, $3, $4, $5::numeric, $6::numeric,
-      CASE WHEN $4 IS NOT NULL AND $5 IS NOT NULL THEN ST_SetSRID(ST_MakePoint($4::double precision, $5::double precision), 4326) END,
+      CASE WHEN $5 IS NOT NULL AND $6 IS NOT NULL THEN ST_SetSRID(ST_MakePoint($5::double precision, $6::double precision), 4326) END,
-      CASE WHEN $4 IS NOT NULL AND $5 IS NOT NULL THEN $4::text || ' + ' || $5::text END,
+      CASE WHEN $5 IS NOT NULL AND $6 IS NOT NULL THEN $5::text || ' + ' || $6::text END,
-      $6, $7, $8, $9, $10, $11,
+      $7, $8, $9, $10, $11, $12,
-      $12, $13, $14, $15, $16,
+      $13, $14, $15, $16, $17,
-      $17, 'PENDING'
+      $18, 'PENDING'
     ) RETURNING HNS_ANLYS_SN`,
     [
-      input.anlysNm, input.acdntDtm || null, input.locNm || null, input.lon || null, input.lat || null,
+      input.acdntSn || null, input.anlysNm, input.acdntDtm || null, input.locNm || null, input.lon || null, input.lat || null,
       input.sbstNm || null, input.spilQty || null, input.spilUnitCd || 'KL',
       input.fcstHr || null, input.algoCd || null, input.critMdlCd || null,
       input.windSpd || null, input.windDir || null, input.temp || null, input.humid || null, input.atmStblCd || null,

backend/src/incidents/incidentsService.ts

@@ -25,6 +25,8 @@ interface IncidentListItem {
   spilUnitCd: string | null;
   fcstHr: number | null;
   hasPredCompleted: boolean;
+  hasHnsCompleted: boolean;
+  hasRescueCompleted: boolean;
   mediaCnt: number;
   hasImgAnalysis: boolean;
 }
@@ -118,6 +120,18 @@ export async function listIncidents(filters: {
              SELECT 1 FROM wing.PRED_EXEC pe
              WHERE pe.ACDNT_SN = a.ACDNT_SN AND pe.EXEC_STTS_CD = 'COMPLETED'
            ) AS has_pred_completed,
+           EXISTS (
+             SELECT 1 FROM wing.HNS_ANALYSIS h
+             WHERE h.ACDNT_SN = a.ACDNT_SN
+               AND h.EXEC_STTS_CD = 'COMPLETED'
+               AND h.USE_YN = 'Y'
+           ) AS has_hns_completed,
+           EXISTS (
+             SELECT 1 FROM wing.RESCUE_OPS r
+             WHERE r.ACDNT_SN = a.ACDNT_SN
+               AND r.STTS_CD = 'RESOLVED'
+               AND r.USE_YN = 'Y'
+           ) AS has_rescue_completed,
            COALESCE(m.PHOTO_CNT, 0) + COALESCE(m.VIDEO_CNT, 0)
              + COALESCE(m.SAT_CNT, 0) + COALESCE(m.CCTV_CNT, 0) AS media_cnt
     FROM wing.ACDNT a
@@ -157,6 +171,8 @@ export async function listIncidents(filters: {
     spilUnitCd: (r.spil_unit_cd as string) ?? null,
     fcstHr: (r.fcst_hr as number) ?? null,
     hasPredCompleted: r.has_pred_completed as boolean,
+    hasHnsCompleted: r.has_hns_completed as boolean,
+    hasRescueCompleted: r.has_rescue_completed as boolean,
     mediaCnt: Number(r.media_cnt),
     hasImgAnalysis: (r.has_img_analysis as boolean) ?? false,
   }));
@@ -177,6 +193,18 @@ export async function getIncident(acdntSn: number): Promise<IncidentDetail | nul
              SELECT 1 FROM wing.PRED_EXEC pe
              WHERE pe.ACDNT_SN = a.ACDNT_SN AND pe.EXEC_STTS_CD = 'COMPLETED'
            ) AS has_pred_completed,
+           EXISTS (
+             SELECT 1 FROM wing.HNS_ANALYSIS h
+             WHERE h.ACDNT_SN = a.ACDNT_SN
+               AND h.EXEC_STTS_CD = 'COMPLETED'
+               AND h.USE_YN = 'Y'
+           ) AS has_hns_completed,
+           EXISTS (
+             SELECT 1 FROM wing.RESCUE_OPS r
+             WHERE r.ACDNT_SN = a.ACDNT_SN
+               AND r.STTS_CD = 'RESOLVED'
+               AND r.USE_YN = 'Y'
+           ) AS has_rescue_completed,
            COALESCE(m.PHOTO_CNT, 0) + COALESCE(m.VIDEO_CNT, 0)
              + COALESCE(m.SAT_CNT, 0) + COALESCE(m.CCTV_CNT, 0) AS media_cnt
     FROM wing.ACDNT a
@@ -222,6 +250,8 @@ export async function getIncident(acdntSn: number): Promise<IncidentDetail | nul
     spilUnitCd: (r.spil_unit_cd as string) ?? null,
     fcstHr: (r.fcst_hr as number) ?? null,
     hasPredCompleted: r.has_pred_completed as boolean,
+    hasHnsCompleted: r.has_hns_completed as boolean,
+    hasRescueCompleted: r.has_rescue_completed as boolean,
     mediaCnt: Number(r.media_cnt),
     hasImgAnalysis: (r.has_img_analysis as boolean) ?? false,
     predictions,

backend/src/prediction/predictionRouter.ts

@@ -5,6 +5,7 @@ import {
   createBacktrack, saveBoomLine, listBoomLines, getAnalysisTrajectory,
   getSensitiveResourcesByAcdntSn, getSensitiveResourcesGeoJsonByAcdntSn,
   getPredictionParticlesGeojsonByAcdntSn, getSensitivityEvaluationGeojsonByAcdntSn,
+  getOilSpillSummary,
 } from './predictionService.js';
 import { analyzeImageFile } from './imageAnalyzeService.js';
 import { isValidNumber } from '../middleware/security.js';
@@ -70,6 +71,27 @@ router.get('/analyses/:acdntSn/trajectory', requireAuth, requirePermission('pred
   }
 });
 
+// GET /api/prediction/analyses/:acdntSn/oil-summary — 유출유 확산 요약 (분할 패널용)
+router.get('/analyses/:acdntSn/oil-summary', requireAuth, requirePermission('prediction', 'READ'), async (req, res) => {
+  try {
+    const acdntSn = parseInt(req.params.acdntSn as string, 10);
+    if (!isValidNumber(acdntSn, 1, 999999)) {
+      res.status(400).json({ error: '유효하지 않은 사고 번호' });
+      return;
+    }
+    const predRunSn = req.query.predRunSn ? parseInt(req.query.predRunSn as string, 10) : undefined;
+    const result = await getOilSpillSummary(acdntSn, predRunSn);
+    if (!result) {
+      res.json({ primary: null, byModel: {} });
+      return;
+    }
+    res.json(result);
+  } catch (err) {
+    console.error('[prediction] oil-summary 조회 오류:', err);
+    res.status(500).json({ error: 'oil-summary 조회 실패' });
+  }
+});
+
 // GET /api/prediction/analyses/:acdntSn/sensitive-resources — 예측 영역 내 민감자원 집계
 router.get('/analyses/:acdntSn/sensitive-resources', requireAuth, requirePermission('prediction', 'READ'), async (req, res) => {
   try {

backend/src/prediction/predictionService.ts

@@ -1,6 +1,16 @@
 import { wingPool } from '../db/wingDb.js';
 import { runBacktrackAnalysis } from './backtrackAnalysisService.js';
 
+function haversineKm(lat1: number, lon1: number, lat2: number, lon2: number): number {
+  const R = 6371;
+  const dLat = (lat2 - lat1) * Math.PI / 180;
+  const dLon = (lon2 - lon1) * Math.PI / 180;
+  const a = Math.sin(dLat / 2) ** 2 +
+    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
+    Math.sin(dLon / 2) ** 2;
+  return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+}
+
 interface PredictionAnalysis {
   acdntSn: number;
   acdntNm: string;
@@ -812,3 +822,116 @@ export async function listBoomLines(acdntSn: number): Promise<BoomLineItem[]> {
     regDtm: String(r['reg_dtm'] ?? ''),
   }));
 }
+
+// ── 유출유 확산 요약 (통합조회 분할 패널용) ──────────────
+export interface OilSpillSummary {
+  model: string;
+  forecastDurationHr: number | null;
+  maxSpreadDistanceKm: number | null;
+  coastArrivalTimeHr: number | null;
+  affectedCoastlineKm: number | null;
+  weatheringRatePct: number | null;
+  remainingVolumeKl: number | null;
+}
+
+export interface OilSpillSummaryResponse {
+  primary: OilSpillSummary;
+  byModel: Record<string, OilSpillSummary>;
+}
+
+export async function getOilSpillSummary(acdntSn: number, predRunSn?: number): Promise<OilSpillSummaryResponse | null> {
+  const baseSql = `
+    SELECT pe.ALGO_CD, pe.RSLT_DATA,
+           sd.FCST_HR,
+           ST_Y(a.LOC_GEOM) AS spil_lat,
+           ST_X(a.LOC_GEOM) AS spil_lon
+    FROM wing.PRED_EXEC pe
+    LEFT JOIN wing.SPIL_DATA sd ON sd.ACDNT_SN = pe.ACDNT_SN
+    LEFT JOIN wing.ACDNT a ON a.ACDNT_SN = pe.ACDNT_SN
+    WHERE pe.ACDNT_SN = $1
+      AND pe.ALGO_CD IN ('OPENDRIFT', 'POSEIDON')
+      AND pe.EXEC_STTS_CD = 'COMPLETED'
+      AND pe.RSLT_DATA IS NOT NULL
+  `;
+  const sql = predRunSn != null
+    ? baseSql + ' AND pe.PRED_RUN_SN = $2 ORDER BY pe.CMPL_DTM DESC'
+    : baseSql + ' ORDER BY pe.CMPL_DTM DESC';
+  const params = predRunSn != null ? [acdntSn, predRunSn] : [acdntSn];
+  const { rows } = await wingPool.query(sql, params);
+  if (rows.length === 0) return null;
+
+  const byModel: Record<string, OilSpillSummary> = {};
+
+  // OpenDrift 우선, 없으면 POSEIDON
+  const opendriftRow = (rows as Array<Record<string, unknown>>).find((r) => r['algo_cd'] === 'OPENDRIFT');
+  const poseidonRow = (rows as Array<Record<string, unknown>>).find((r) => r['algo_cd'] === 'POSEIDON');
+  const primaryRow = opendriftRow ?? poseidonRow ?? null;
+
+  for (const row of rows as Array<Record<string, unknown>>) {
+    const rsltData = row['rslt_data'] as TrajectoryTimeStep[] | null;
+    if (!rsltData || rsltData.length === 0) continue;
+
+    const algoCd = String(row['algo_cd'] ?? '');
+    const modelName = ALGO_CD_TO_MODEL[algoCd] ?? algoCd;
+    const fcstHr = row['fcst_hr'] != null ? Number(row['fcst_hr']) : null;
+    const spilLat = row['spil_lat'] != null ? Number(row['spil_lat']) : null;
+    const spilLon = row['spil_lon'] != null ? Number(row['spil_lon']) : null;
+    const totalSteps = rsltData.length;
+    const lastStep = rsltData[totalSteps - 1];
+
+    // 최대 확산거리 — 사고 위치 또는 첫 파티클 위치를 원점으로 사용
+    let maxDist: number | null = null;
+    const originLat = spilLat ?? rsltData[0]?.particles[0]?.lat ?? null;
+    const originLon = spilLon ?? rsltData[0]?.particles[0]?.lon ?? null;
+    if (originLat != null && originLon != null) {
+      let maxVal = 0;
+      for (const step of rsltData) {
+        for (const p of step.particles) {
+          const d = haversineKm(originLat, originLon, p.lat, p.lon);
+          if (d > maxVal) maxVal = d;
+        }
+      }
+      maxDist = maxVal;
+    }
+
+    // 해안 도달 시간 (stranded===1 최초 등장 step)
+    let coastArrivalHr: number | null = null;
+    for (let i = 0; i < totalSteps; i++) {
+      if (rsltData[i].particles.some((p) => p.stranded === 1)) {
+        coastArrivalHr = fcstHr != null && totalSteps > 1
+          ? parseFloat(((i / (totalSteps - 1)) * fcstHr).toFixed(1))
+          : i;
+        break;
+      }
+    }
+
+    // 풍화율
+    const totalVol = lastStep.remaining_volume_m3 + lastStep.weathered_volume_m3 + lastStep.beached_volume_m3;
+    const weatheringPct = totalVol > 0
+      ? parseFloat(((lastStep.weathered_volume_m3 / totalVol) * 100).toFixed(1))
+      : null;
+
+    byModel[modelName] = {
+      model: modelName,
+      forecastDurationHr: fcstHr,
+      maxSpreadDistanceKm: maxDist != null ? parseFloat(maxDist.toFixed(1)) : null,
+      coastArrivalTimeHr: coastArrivalHr,
+      affectedCoastlineKm: lastStep.pollution_coast_length_m != null
+        ? parseFloat((lastStep.pollution_coast_length_m / 1000).toFixed(1))
+        : null,
+      weatheringRatePct: weatheringPct,
+      remainingVolumeKl: lastStep.remaining_volume_m3 != null
+        ? parseFloat(lastStep.remaining_volume_m3.toFixed(1))
+        : null,
+    };
+  }
+
+  if (!primaryRow) return null;
+  const primaryAlgo = String(primaryRow['algo_cd'] ?? '');
+  const primaryModel = ALGO_CD_TO_MODEL[primaryAlgo] ?? primaryAlgo;
+
+  return {
+    primary: byModel[primaryModel] ?? Object.values(byModel)[0],
+    byModel,
+  };
+}

backend/src/rescue/rescueRouter.ts

@@ -10,11 +10,13 @@ const router = express.Router();
 // ============================================================
 router.get('/ops', requireAuth, requirePermission('rescue', 'READ'), async (req, res) => {
   try {
-    const { sttsCd, acdntTpCd, search } = req.query;
+    const { sttsCd, acdntTpCd, search, acdntSn } = req.query;
+    const acdntSnNum = acdntSn ? parseInt(acdntSn as string, 10) : undefined;
     const items = await listOps({
       sttsCd: sttsCd as string | undefined,
       acdntTpCd: acdntTpCd as string | undefined,
       search: search as string | undefined,
+      acdntSn: acdntSnNum && !Number.isNaN(acdntSnNum) ? acdntSnNum : undefined,
     });
     res.json(items);
   } catch (err) {

backend/src/rescue/rescueService.ts

@@ -59,6 +59,7 @@ interface ListOpsInput {
   sttsCd?: string;
   acdntTpCd?: string;
   search?: string;
+  acdntSn?: number;
 }
 
 // ============================================================
@@ -82,6 +83,10 @@ export async function listOps(input?: ListOpsInput): Promise<RescueOpsListItem[]
     conditions.push(`VESSEL_NM ILIKE '%' || $${idx++} || '%'`);
     params.push(input.search);
   }
+  if (input?.acdntSn != null) {
+    conditions.push(`ACDNT_SN = $${idx++}`);
+    params.push(input.acdntSn);
+  }
 
   const where = 'WHERE ' + conditions.join(' AND ');
 

backend/src/server.ts

@@ -19,12 +19,15 @@ import hnsRouter from './hns/hnsRouter.js'
 import reportsRouter from './reports/reportsRouter.js'
 import assetsRouter from './assets/assetsRouter.js'
 import incidentsRouter from './incidents/incidentsRouter.js'
+import gscAccidentsRouter from './gsc/gscAccidentsRouter.js'
 import scatRouter from './scat/scatRouter.js'
 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 vesselRouter from './vessels/vesselRouter.js'
+import { startVesselScheduler } from './vessels/vesselScheduler.js'
 import {
   sanitizeBody,
   sanitizeQuery,
@@ -168,6 +171,7 @@ app.use('/api/hns', hnsRouter)
 app.use('/api/reports', reportsRouter)
 app.use('/api/assets', assetsRouter)
 app.use('/api/incidents', incidentsRouter)
+app.use('/api/gsc/accidents', gscAccidentsRouter)
 app.use('/api/scat', scatRouter)
 app.use('/api/prediction', predictionRouter)
 app.use('/api/aerial', aerialRouter)
@@ -175,6 +179,7 @@ app.use('/api/rescue', rescueRouter)
 app.use('/api/map-base', mapBaseRouter)
 app.use('/api/monitor', monitorRouter)
 app.use('/api/tiles', tilesRouter)
+app.use('/api/vessels', vesselRouter)
 
 // 헬스 체크
 app.get('/health', (_req, res) => {
@@ -210,6 +215,9 @@ app.use((err: Error, _req: express.Request, res: express.Response, _next: expres
 app.listen(PORT, async () => {
   console.log(`서버가 포트 ${PORT}에서 실행 중입니다.`)
 
+  // 선박 신호 스케줄러 시작 (한국 전 해역 1분 폴링)
+  startVesselScheduler()
+
   // wing DB 연결 확인 (wing + auth 스키마 통합)
   const connected = await testWingDbConnection()
   if (connected) {

backend/src/vessels/vesselRouter.ts

@@ -0,0 +1,33 @@
+import { Router } from 'express';
+import { getVesselsInBounds, getCacheStatus } from './vesselService.js';
+import type { BoundingBox } from './vesselTypes.js';
+
+const vesselRouter = Router();
+
+// POST /api/vessels/in-area
+// 현재 뷰포트 bbox 안의 선박 목록 반환 (메모리 캐시에서 필터링)
+vesselRouter.post('/in-area', (req, res) => {
+  const { bounds } = req.body as { bounds?: BoundingBox };
+
+  if (
+    !bounds ||
+    typeof bounds.minLon !== 'number' ||
+    typeof bounds.minLat !== 'number' ||
+    typeof bounds.maxLon !== 'number' ||
+    typeof bounds.maxLat !== 'number'
+  ) {
+    res.status(400).json({ error: '유효한 bounds 정보가 필요합니다.' });
+    return;
+  }
+
+  const vessels = getVesselsInBounds(bounds);
+  res.json(vessels);
+});
+
+// GET /api/vessels/status — 캐시 상태 확인 (디버그용)
+vesselRouter.get('/status', (_req, res) => {
+  const status = getCacheStatus();
+  res.json(status);
+});
+
+export default vesselRouter;

backend/src/vessels/vesselScheduler.ts

@@ -0,0 +1,96 @@
+import { updateVesselCache } from './vesselService.js';
+import type { VesselPosition } from './vesselTypes.js';
+
+const VESSEL_TRACK_API_URL =
+  process.env.VESSEL_TRACK_API_URL ?? 'https://guide.gc-si.dev/signal-batch';
+const POLL_INTERVAL_MS = 60_000;
+
+// 개별 쿠키 환경변수를 조합하여 Cookie 헤더 문자열 생성
+function buildVesselCookie(): string {
+  const entries: [string, string | undefined][] = [
+    ['apt.uid', process.env.VESSEL_COOKIE_APT_UID],
+    ['g_state', process.env.VESSEL_COOKIE_G_STATE],
+    ['gc_proxy_auth', process.env.VESSEL_COOKIE_GC_PROXY_AUTH],
+    ['GC_SESSION', process.env.VESSEL_COOKIE_GC_SESSION],
+    // 기존 단일 쿠키 변수 폴백 (레거시 지원)
+  ];
+  const parts = entries
+    .filter(([, v]) => v)
+    .map(([k, v]) => `${k}=${v}`);
+
+  // 기존 VESSEL_TRACK_COOKIE 폴백 (단일 문자열로 설정된 경우)
+  if (parts.length === 0 && process.env.VESSEL_TRACK_COOKIE) {
+    return process.env.VESSEL_TRACK_COOKIE;
+  }
+  return parts.join('; ');
+}
+
+// 한국 전 해역 고정 폴리곤 (124~132°E, 32~38°N)
+const KOREA_WATERS_POLYGON = [
+  [120, 31],
+  [132, 31],
+  [132, 41],
+  [120, 41],
+  [120, 31],
+];
+
+let intervalId: ReturnType<typeof setInterval> | null = null;
+
+async function pollVesselSignals(): Promise<void> {
+  const url = `${VESSEL_TRACK_API_URL}/api/v1/vessels/recent-positions-detail`;
+  const body = {
+    minutes: 5,
+    coordinates: KOREA_WATERS_POLYGON,
+    polygonFilter: true,
+  };
+
+  const cookie = buildVesselCookie();
+  const requestHeaders: Record<string, string> = {
+    'Content-Type': 'application/json',
+    ...(cookie ? { Cookie: cookie } : {}),
+  };
+
+  try {
+    const res = await fetch(url, {
+      method: 'POST',
+      headers: requestHeaders,
+      body: JSON.stringify(body),
+      signal: AbortSignal.timeout(30_000),
+    });
+
+    if (!res.ok) {
+      const text = await res.text().catch(() => '');
+      console.error(`[vesselScheduler] 선박 신호 API 오류: ${res.status}`, text.substring(0, 200));
+      return;
+    }
+
+    const contentType = res.headers.get('content-type') ?? '';
+    if (!contentType.includes('application/json')) {
+      const text = await res.text().catch(() => '');
+      console.error('[vesselScheduler] 선박 신호 API가 JSON이 아닌 응답 반환:', text);
+      return;
+    }
+
+    const data = (await res.json()) as VesselPosition[];
+    updateVesselCache(data);
+  } catch (err) {
+    console.error('[vesselScheduler] 선박 신호 폴링 실패:', err);
+  }
+}
+
+export function startVesselScheduler(): void {
+  if (intervalId !== null) return;
+
+  // 서버 시작 시 즉시 1회 실행 후 주기적 폴링
+  pollVesselSignals();
+  intervalId = setInterval(pollVesselSignals, POLL_INTERVAL_MS);
+  console.log('[vesselScheduler] 선박 신호 스케줄러 시작 (1분 간격)');
+}
+
+export function stopVesselScheduler(): void {
+  if (intervalId !== null) {
+    clearInterval(intervalId);
+    intervalId = null;
+    console.log('[vesselScheduler] 선박 신호 스케줄러 중지');
+  }
+}

backend/src/vessels/vesselService.ts

@@ -0,0 +1,55 @@
+import type { VesselPosition, BoundingBox } from './vesselTypes.js';
+
+const VESSEL_TTL_MS = 10 * 60 * 1000; // 10분
+
+const cachedVessels = new Map<string, VesselPosition>();
+let lastUpdated: Date | null = null;
+
+// lastUpdate가 TTL을 초과한 선박을 캐시에서 제거.
+// lastUpdate 파싱이 불가능한 경우 보수적으로 유지한다.
+function evictStale(): void {
+  const now = Date.now();
+  for (const [mmsi, vessel] of cachedVessels) {
+    const ts = Date.parse(vessel.lastUpdate);
+    if (Number.isNaN(ts)) continue;
+    if (now - ts > VESSEL_TTL_MS) {
+      cachedVessels.delete(mmsi);
+    }
+  }
+}
+
+export function updateVesselCache(vessels: VesselPosition[]): void {
+  for (const vessel of vessels) {
+    if (!vessel.mmsi) continue;
+    cachedVessels.set(vessel.mmsi, vessel);
+  }
+  evictStale();
+  lastUpdated = new Date();
+}
+
+export function getVesselsInBounds(bounds: BoundingBox): VesselPosition[] {
+  const result: VesselPosition[] = [];
+  for (const v of cachedVessels.values()) {
+    if (
+      v.lon >= bounds.minLon &&
+      v.lon <= bounds.maxLon &&
+      v.lat >= bounds.minLat &&
+      v.lat <= bounds.maxLat
+    ) {
+      result.push(v);
+    }
+  }
+  return result;
+}
+
+export function getCacheStatus(): {
+  count: number;
+  bangjeCount: number;
+  lastUpdated: Date | null;
+} {
+  let bangjeCount = 0;
+  for (const v of cachedVessels.values()) {
+    if (v.shipNm && v.shipNm.toUpperCase().includes('BANGJE')) bangjeCount++;
+  }
+  return { count: cachedVessels.size, bangjeCount, lastUpdated };
+}

backend/src/vessels/vesselTypes.ts

@@ -0,0 +1,26 @@
+export interface VesselPosition {
+  mmsi: string;
+  imo?: number;
+  lon: number;
+  lat: number;
+  sog?: number;
+  cog?: number;
+  heading?: number;
+  shipNm?: string;
+  shipTy?: string;
+  shipKindCode?: string;
+  nationalCode?: string;
+  lastUpdate: string;
+  status?: string;
+  destination?: string;
+  length?: number;
+  width?: number;
+  draught?: number;
+}
+
+export interface BoundingBox {
+  minLon: number;
+  minLat: number;
+  maxLon: number;
+  maxLat: number;
+}

database/migration/032_sync_gsc_accidents_to_wing.sql

@@ -0,0 +1,118 @@
+-- ============================================================
+-- 032: gsc.tgs_acdnt_info → wing.ACDNT 동기화 (2026-04-10 이후)
+-- ------------------------------------------------------------
+-- 목적
+--   3개 예측 탭(유출유확산예측 / HNS 대기확산 / 긴급구난)의 사고
+--   선택 셀렉트박스에 노출되는 gsc 사고 레코드를 wing.ACDNT에
+--   이관하여 wing 운영 로직과 동일한 사고 마스터를 공유한다.
+--
+-- 필터 정책 (backend/src/gsc/gscAccidentsService.ts 의 listGscAccidents 와 동일)
+--   - acdnt_asort_code IN (12개 코드)
+--   - acdnt_title IS NOT NULL
+--   - 좌표(tgs_acdnt_lc.la, lo) 존재
+--   - rcept_dt >= '2026-04-10' (본 이관 추가 조건)
+--
+-- ACDNT_CD 생성 규칙
+--   'INC-YYYY-NNNN' (YYYY = rcept_dt 의 연도, NNNN = 해당 연도 내 순번 4자리)
+--   기존 wing.ACDNT 에 이미 부여된 'INC-YYYY-NNNN' 중 같은 연도의 최대 순번을
+--   구해 이어서 증가시킨다.
+--
+-- 중복 방지
+--   (ACDNT_NM = acdnt_title, OCCRN_DTM = rcept_dt) 조합이 이미 존재하면 제외.
+--   acdnt_mng_no 를 별도 컬럼으로 보관하지 않으므로 이 조합을 자연 키로 사용.
+--
+-- ACDNT_TP_CD
+--   gsc.tcm_code.code_nm 으로 치환 (JOIN: tcm_code.code = acdnt_asort_code)
+--   매핑 누락 시 원본 코드값으로 폴백.
+--
+-- 사전 확인 쿼리 (실행 전 참고)
+--   SELECT COUNT(DISTINCT a.acdnt_mng_no)
+--     FROM gsc.tgs_acdnt_info a JOIN gsc.tgs_acdnt_lc b USING (acdnt_mng_no)
+--    WHERE a.acdnt_asort_code = ANY(ARRAY[
+--            '055001001','055001002','055001003','055001004','055001005','055001006',
+--            '055003001','055003002','055003003','055003004','055003005','055004003'
+--          ]::varchar[])
+--      AND a.acdnt_title IS NOT NULL
+--      AND a.rcept_dt >= '2026-04-10';
+-- ============================================================
+
+WITH src AS (
+  SELECT DISTINCT ON (a.acdnt_mng_no)
+    a.acdnt_mng_no,
+    a.acdnt_title,
+    a.acdnt_asort_code,
+    a.rcept_dt,
+    b.la,
+    b.lo
+  FROM gsc.tgs_acdnt_info AS a
+  JOIN gsc.tgs_acdnt_lc  AS b ON a.acdnt_mng_no = b.acdnt_mng_no
+  WHERE a.acdnt_asort_code = ANY(ARRAY[
+    '055001001','055001002','055001003','055001004','055001005','055001006',
+    '055003001','055003002','055003003','055003004','055003005','055004003'
+  ]::varchar[])
+    AND a.acdnt_title IS NOT NULL
+    AND a.rcept_dt >= '2026-04-10'::timestamptz
+    AND b.la IS NOT NULL AND b.lo IS NOT NULL
+    AND NOT EXISTS (
+      SELECT 1
+        FROM wing.ACDNT w
+       WHERE w.ACDNT_NM  = a.acdnt_title
+         AND w.OCCRN_DTM = a.rcept_dt
+    )
+  ORDER BY a.acdnt_mng_no, b.acdnt_lc_sn ASC
+),
+numbered AS (
+  SELECT
+    src.*,
+    EXTRACT(YEAR FROM src.rcept_dt)::int AS yr,
+    ROW_NUMBER() OVER (
+      PARTITION BY EXTRACT(YEAR FROM src.rcept_dt)
+      ORDER BY src.rcept_dt ASC, src.acdnt_mng_no ASC
+    ) AS rn_in_year
+  FROM src
+),
+year_max AS (
+  SELECT
+    (split_part(ACDNT_CD, '-', 2))::int        AS yr,
+    MAX((split_part(ACDNT_CD, '-', 3))::int)    AS max_seq
+  FROM wing.ACDNT
+  WHERE ACDNT_CD ~ '^INC-[0-9]{4}-[0-9]+$'
+  GROUP BY split_part(ACDNT_CD, '-', 2)
+)
+INSERT INTO wing.ACDNT (
+  ACDNT_CD, ACDNT_NM, ACDNT_TP_CD, ACDNT_STTS_CD,
+  LAT, LNG, LOC_GEOM, LOC_DC, OCCRN_DTM, REG_DTM, MDFCN_DTM
+)
+SELECT
+  'INC-' || lpad(n.yr::text, 4, '0') || '-' ||
+    lpad((COALESCE(ym.max_seq, 0) + n.rn_in_year)::text, 4, '0')    AS ACDNT_CD,
+  n.acdnt_title                                                      AS ACDNT_NM,
+  COALESCE(c.code_nm, n.acdnt_asort_code)                            AS ACDNT_TP_CD,
+  'ACTIVE'                                                           AS ACDNT_STTS_CD,
+  n.la::numeric                                                      AS LAT,
+  n.lo::numeric                                                      AS LNG,
+  ST_SetSRID(ST_MakePoint(n.lo::float8, n.la::float8), 4326)         AS LOC_GEOM,
+  NULL                                                               AS LOC_DC,
+  n.rcept_dt                                                         AS OCCRN_DTM,
+  NOW(), NOW()
+FROM numbered n
+LEFT JOIN year_max    ym ON ym.yr = n.yr
+LEFT JOIN gsc.tcm_code c  ON c.code = n.acdnt_asort_code
+ORDER BY n.rcept_dt ASC, n.acdnt_mng_no ASC;
+
+-- ============================================================
+-- 사후 검증 (필요 시 주석 해제 실행)
+--   SELECT COUNT(*) FROM wing.ACDNT WHERE OCCRN_DTM >= '2026-04-10';
+--
+--   SELECT ACDNT_CD, ACDNT_NM, ACDNT_TP_CD, ST_AsText(LOC_GEOM), OCCRN_DTM
+--     FROM wing.ACDNT
+--    WHERE OCCRN_DTM >= '2026-04-10'
+--    ORDER BY ACDNT_CD DESC
+--    LIMIT 20;
+--
+--   SELECT ACDNT_TP_CD, COUNT(*)
+--     FROM wing.ACDNT
+--    WHERE OCCRN_DTM >= '2026-04-10'
+--    GROUP BY 1
+--    ORDER BY 2 DESC;
+-- ============================================================

docs/COMMON-GUIDE.md

@@ -378,7 +378,7 @@ PUT, DELETE, PATCH 등 기타 메서드는 사용하지 않는다.
 각 탭은 `tabs/{탭명}/services/{탭명}Api.ts`에 API 함수를 정의한다.
 
 ```typescript
-// frontend/src/tabs/board/services/boardApi.ts
+// frontend/src/components/board/services/boardApi.ts
 import { api } from '@common/services/api';
 
 // 인터페이스 정의
@@ -490,7 +490,7 @@ interface MenuConfigItem {
 
 ```typescript
 // frontend/src/common/store/newStore.ts (공통) 또는
-// frontend/src/tabs/{탭}/store/newStore.ts (탭 전용)
+// frontend/src/components/{탭}/store/newStore.ts (탭 전용)
 import { create } from 'zustand';
 
 interface MyState {
@@ -514,7 +514,7 @@ export const useMyStore = create<MyState>((set) => ({
 
 ```typescript
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { fetchBoardPosts, createBoardPost } from '@tabs/board/services/boardApi';
+import { fetchBoardPosts, createBoardPost } from '@components/board/services/boardApi';
 
 // 조회 (캐싱 + 자동 리페치)
 const { data, isLoading, error } = useQuery({
@@ -1491,13 +1491,13 @@ const result = await authPool.query('SELECT * FROM AUTH_USER WHERE USER_ID = $1'
 ### 파일 위치
 
 ```
-frontend/src/tabs/{탭명}/services/{탭명}Api.ts
+frontend/src/components/{탭명}/services/{탭명}Api.ts
 ```
 
 ### 작성 패턴
 
 ```typescript
-// frontend/src/tabs/{탭명}/services/{탭명}Api.ts
+// frontend/src/components/{탭명}/services/{탭명}Api.ts
 import { api } from '@common/services/api';
 
 // ============================================================

docs/CRUD-API-GUIDE.md

@@ -736,13 +736,13 @@ ON CONFLICT DO NOTHING;
 ### 파일 위치
 
 ```
-frontend/src/tabs/{탭명}/services/{tabName}Api.ts
+frontend/src/components/{탭명}/services/{tabName}Api.ts
 ```
 
 ### 기본 구조
 
 ```ts
-// frontend/src/tabs/{탭명}/services/{tabName}Api.ts
+// frontend/src/components/{탭명}/services/{tabName}Api.ts
 
 import { api } from '@common/services/api';
 
@@ -1376,7 +1376,7 @@ export default router;
 ### 4단계: 프론트엔드 API 서비스
 
 ```ts
-// frontend/src/tabs/assets/services/equipmentApi.ts
+// frontend/src/components/assets/services/equipmentApi.ts
 
 import { api } from '@common/services/api';
 

docs/DEVELOPMENT-GUIDE.md

@@ -163,11 +163,11 @@ Frontend에서 두 가지 경로 별칭을 사용한다:
 | Alias | 실제 경로 | 용도 |
 |-------|----------|------|
 | `@common/*` | `src/common/*` | 공통 모듈 (컴포넌트, 훅, 서비스, 스토어) |
-| `@tabs/*` | `src/tabs/*` | 탭별 패키지 (11개 탭) |
+| `@components/*` | `src/components/*` | 탭별 패키지 (11개 탭) |
 
 ```tsx
 import { useAuth } from '@common/hooks/useAuth';
-import OilSpillView from '@tabs/prediction/components/OilSpillView';
+import OilSpillView from '@components/prediction/components/OilSpillView';
 ```
 
 ---
@@ -495,7 +495,7 @@ pre-commit: [backend] 타입 체크 성공
 git status
 
 # 스테이징 (파일 지정)
-git add frontend/src/tabs/incidents/components/IncidentDetailView.tsx
+git add frontend/src/components/incidents/components/IncidentDetailView.tsx
 git add backend/src/incidents/incidentService.ts
 
 # 커밋 (pre-commit + commit-msg 검증 자동 실행)
@@ -540,7 +540,7 @@ curl -X POST "https://gitea.gc-si.dev/api/v1/repos/gc/wing-ops/pulls" \
 - 변경 내용을 1~3줄로 요약
 
 ## 변경 파일
-- `frontend/src/tabs/incidents/components/IncidentDetailView.tsx` (신규)
+- `frontend/src/components/incidents/components/IncidentDetailView.tsx` (신규)
 - `backend/src/incidents/incidentService.ts` (수정)
 
 ## Test plan
@@ -754,8 +754,8 @@ chmod +x .githooks/pre-commit .githooks/commit-msg
 | `database/migration/017_incident_detail.sql` | DB 마이그레이션 (필요 시) |
 | `backend/src/incidents/incidentService.ts` | 상세 조회 함수 추가 |
 | `backend/src/incidents/incidentRouter.ts` | `GET /api/incidents/:id` 라우트 |
-| `frontend/src/tabs/incidents/services/incidentsApi.ts` | API 호출 함수 |
+| `frontend/src/components/incidents/services/incidentsApi.ts` | API 호출 함수 |
-| `frontend/src/tabs/incidents/components/IncidentDetailView.tsx` | 상세 뷰 컴포넌트 |
+| `frontend/src/components/incidents/components/IncidentDetailView.tsx` | 상세 뷰 컴포넌트 |
 
 #### Step 2. 브랜치 생성
 
@@ -797,7 +797,7 @@ router.get('/:id', requireAuth, async (req, res) => {
 **Frontend - API:**
 
 ```typescript
-// frontend/src/tabs/incidents/services/incidentsApi.ts
+// frontend/src/components/incidents/services/incidentsApi.ts
 export async function fetchIncidentById(id: number) {
   const { data } = await api.get(`/incidents/${id}`);
   return data;
@@ -807,7 +807,7 @@ export async function fetchIncidentById(id: number) {
 **Frontend - Component:**
 
 ```tsx
-// frontend/src/tabs/incidents/components/IncidentDetailView.tsx
+// frontend/src/components/incidents/components/IncidentDetailView.tsx
 const IncidentDetailView = ({ incidentId }: IncidentDetailViewProps) => {
   const { data, isLoading } = useQuery({
     queryKey: ['incident', incidentId],
@@ -829,7 +829,7 @@ cd ../backend && npx tsc --noEmit
 #### Step 5. 커밋 & 푸시
 
 ```bash
-git add backend/src/incidents/ frontend/src/tabs/incidents/
+git add backend/src/incidents/ frontend/src/components/incidents/
 git commit -m "feat(incidents): 사고 상세 조회 페이지 추가"
 # pre-commit: TypeScript OK, ESLint OK
 # commit-msg: Conventional Commits OK

docs/MENU-TAB-GUIDE.md

@@ -31,9 +31,9 @@ board 탭을 기준 템플릿으로 사용하며, 각 단계별 실제 코드
 
 | 단계 | 파일 | 작업 |
 |------|------|------|
-| **Step 1** | `frontend/src/tabs/{탭명}/components/{TabName}View.tsx` | 뷰 컴포넌트 생성 |
+| **Step 1** | `frontend/src/components/{탭명}/components/{TabName}View.tsx` | 뷰 컴포넌트 생성 |
-| | `frontend/src/tabs/{탭명}/services/{tabName}Api.ts` | API 서비스 생성 |
+| | `frontend/src/components/{탭명}/services/{tabName}Api.ts` | API 서비스 생성 |
-| | `frontend/src/tabs/{탭명}/index.ts` | re-export |
+| | `frontend/src/components/{탭명}/index.ts` | re-export |
 | **Step 2** | `frontend/src/common/types/navigation.ts` | MainTab 타입 추가 |
 | | `frontend/src/App.tsx` | import + renderView case 추가 |
 | | `frontend/src/common/hooks/useSubMenu.ts` | 서브메뉴 설정 (서브탭이 있는 경우) |
@@ -52,7 +52,7 @@ board 탭을 기준 템플릿으로 사용하며, 각 단계별 실제 코드
 ### 1-1. 디렉토리 구조
 
 ```
-frontend/src/tabs/{탭명}/
+frontend/src/components/{탭명}/
   components/
     {TabName}View.tsx      # 메인 뷰 컴포넌트
   services/
@@ -65,7 +65,7 @@ frontend/src/tabs/{탭명}/
 서브탭이 **없는** 간단한 탭:
 
 ```tsx
-// frontend/src/tabs/monitoring/components/MonitoringView.tsx
+// frontend/src/components/monitoring/components/MonitoringView.tsx
 
 export function MonitoringView() {
   return (
@@ -91,7 +91,7 @@ export function MonitoringView() {
 서브탭이 **있는** 탭 (board 패턴):
 
 ```tsx
-// frontend/src/tabs/monitoring/components/MonitoringView.tsx
+// frontend/src/components/monitoring/components/MonitoringView.tsx
 
 import { useSubMenu } from '@common/hooks/useSubMenu';
 
@@ -122,7 +122,7 @@ export function MonitoringView() {
 ### 1-3. API 서비스 (보일러플레이트)
 
 ```ts
-// frontend/src/tabs/monitoring/services/monitoringApi.ts
+// frontend/src/components/monitoring/services/monitoringApi.ts
 
 import { api } from '@common/services/api';
 
@@ -180,7 +180,7 @@ export async function createMonitoring(input: CreateMonitoringInput): Promise<{
 ### 1-4. index.ts (re-export)
 
 ```ts
-// frontend/src/tabs/monitoring/index.ts
+// frontend/src/components/monitoring/index.ts
 
 export { MonitoringView } from './components/MonitoringView';
 ```
@@ -209,7 +209,7 @@ export type MainTab = 'prediction' | 'hns' | 'rescue' | ... | 'monitoring' | 'ad
 // frontend/src/App.tsx
 
 // 1. import 추가
-import { MonitoringView } from '@tabs/monitoring';
+import { MonitoringView } from '@components/monitoring';
 
 // 2. renderView switch에 case 추가
 const renderView = () => {
@@ -577,13 +577,13 @@ CREATE INDEX IF NOT EXISTS IDX_MONITORING_REG_DTM ON MONITORING(REG_DTM DESC);
 ### 1단계: 프론트엔드 파일 생성
 
 ```bash
-mkdir -p frontend/src/tabs/monitoring/components
+mkdir -p frontend/src/components/monitoring/components
-mkdir -p frontend/src/tabs/monitoring/services
+mkdir -p frontend/src/components/monitoring/services
 ```
 
-- `frontend/src/tabs/monitoring/components/MonitoringView.tsx` 생성
+- `frontend/src/components/monitoring/components/MonitoringView.tsx` 생성
-- `frontend/src/tabs/monitoring/services/monitoringApi.ts` 생성
+- `frontend/src/components/monitoring/services/monitoringApi.ts` 생성
-- `frontend/src/tabs/monitoring/index.ts` 생성
+- `frontend/src/components/monitoring/index.ts` 생성
 
 ### 2단계: 프론트엔드 기존 파일 수정
 
@@ -592,7 +592,7 @@ mkdir -p frontend/src/tabs/monitoring/services
 + export type MainTab = '...' | 'monitoring' | 'admin';
 
 --- frontend/src/App.tsx
-+ import { MonitoringView } from '@tabs/monitoring';
++ import { MonitoringView } from '@components/monitoring';
   // renderView switch 내:
 +     case 'monitoring':
 +       return <MonitoringView />;
@@ -644,9 +644,9 @@ cd backend && npx tsc --noEmit      # 백엔드 컴파일 검증
 ## 체크리스트
 
 ### 프론트엔드
-- [ ] `frontend/src/tabs/{탭명}/components/{TabName}View.tsx` 생성
+- [ ] `frontend/src/components/{탭명}/components/{TabName}View.tsx` 생성
-- [ ] `frontend/src/tabs/{탭명}/services/{tabName}Api.ts` 생성
+- [ ] `frontend/src/components/{탭명}/services/{tabName}Api.ts` 생성
-- [ ] `frontend/src/tabs/{탭명}/index.ts` re-export 생성
+- [ ] `frontend/src/components/{탭명}/index.ts` re-export 생성
 - [ ] `navigation.ts` MainTab 타입에 새 ID 추가
 - [ ] `App.tsx` import + renderView switch case 추가
 - [ ] `useSubMenu.ts` subMenuConfigs + subMenuState 추가 (서브탭 있는 경우)

docs/MOCK-TO-API-GUIDE.md

@@ -49,7 +49,7 @@ git checkout -b feature/{탭명}-crud
 ```bash
 # 탭 디렉토리 내 mock 데이터 검색
 grep -rn "mock\|Mock\|MOCK\|sample\|initial\|hardcod\|localStorage" \
-  frontend/src/tabs/{탭명}/
+  frontend/src/components/{탭명}/
 
 # 공통 디렉토리에서 해당 탭 관련 데이터 확인 (반드시!)
 grep -rn "{탭명}\|{Tab}" frontend/src/common/mock/
@@ -302,7 +302,7 @@ app.use('/api/{탭명}', newtabRouter);
 
 **1) API 서비스 파일 생성:**
 
-파일 위치: `frontend/src/tabs/{탭명}/services/{탭명}Api.ts`
+파일 위치: `frontend/src/components/{탭명}/services/{탭명}Api.ts`
 
 ```typescript
 import { api } from '@common/services/api';
@@ -476,7 +476,7 @@ CRUD 전체 흐름(생성 -> 조회 -> 수정 -> 삭제)을 확인하고 테스
 
 ```bash
 # 해당 탭 디렉토리에서 mock 잔여 검색
-grep -rn "mock\|Mock\|MOCK\|localStorage" frontend/src/tabs/{탭명}/
+grep -rn "mock\|Mock\|MOCK\|localStorage" frontend/src/components/{탭명}/
 
 # 공통 mock/data 디렉토리에서 해당 탭 관련 검색
 grep -rn "{탭명}" frontend/src/common/mock/
@@ -497,7 +497,7 @@ git status
 git add database/migration/017_{탭명}.sql
 git add backend/src/{탭명}/
 git add backend/src/server.ts
-git add frontend/src/tabs/{탭명}/
+git add frontend/src/components/{탭명}/
 
 # 커밋 (Conventional Commits, 한국어)
 git commit -m "feat({탭명}): mock 데이터를 PostgreSQL + REST API로 전환"
@@ -602,7 +602,7 @@ AUTH_USER 주요 컬럼 참조:
 
 ```bash
 # 불충분 -- 탭 디렉토리만 검색
-grep -rn "mock" frontend/src/tabs/{탭명}/
+grep -rn "mock" frontend/src/components/{탭명}/
 
 # 반드시 공통 디렉토리도 검색
 grep -rn "{탭명}\|{Tab}" frontend/src/common/mock/
@@ -780,8 +780,8 @@ export async function fetchCategories(): Promise<Category[]> {
 - [ ] 프론트 타입 체크 통과: `cd frontend && npx tsc --noEmit`
 - [ ] ESLint 통과: `cd frontend && npx eslint .`
 - [ ] CRUD 테스트: curl로 생성/조회/수정/삭제 정상 동작 확인
-- [ ] Mock 잔여 0건: `grep -rn "mock\|Mock" frontend/src/tabs/{탭명}/` (UI 상수 제외)
+- [ ] Mock 잔여 0건: `grep -rn "mock\|Mock" frontend/src/components/{탭명}/` (UI 상수 제외)
-- [ ] PUT/DELETE 사용 0건: `grep -rn "api\.put\|api\.delete" frontend/src/tabs/{탭명}/`
+- [ ] PUT/DELETE 사용 0건: `grep -rn "api\.put\|api\.delete" frontend/src/components/{탭명}/`
 - [ ] 라우터 등록 확인: `server.ts`에 `app.use('/api/{탭명}', ...)` 추가됨
 - [ ] 마이그레이션 실행 확인: psql로 테이블 생성 및 검증 SELECT 통과
 - [ ] 커밋 + 푸시 + MR 생성

docs/README.md

@@ -66,7 +66,7 @@ wing/
 │   │   ├── utils/               cn, coordinates, geo, sanitize
 │   │   ├── styles/              base.css, components.css, wing.css (@layer)
 │   │   └── constants/           featureIds.ts (FEATURE_ID 상수 체계)
-│   └── tabs/                    @tabs/ alias (11개 탭)
+│   └── tabs/                    @components/ alias (11개 탭)
 │       ├── prediction/          유류 확산 예측
 │       ├── hns/                 HNS 분석
 │       ├── rescue/              구조 시나리오
@@ -103,7 +103,7 @@ wing/
 | Alias | 경로 |
 |-------|------|
 | `@common/*` | `src/common/*` |
-| `@tabs/*` | `src/tabs/*` |
+| `@components/*` | `src/components/*` |
 
 ---
 

docs/RELEASE-NOTES.md

@@ -20,6 +20,16 @@
 
 ## [2026-04-15]
 
+### 추가
+- 확산예측·HNS 대기확산·긴급구난: GSC 외부 사고 목록 API 연동 및 셀렉트박스 자동 채움 (사고명·발생시각·위경도 자동 입력 + 지도 이동)
+- 실시간 선박 신호 지도 표출: 한국 해역 1분 주기 폴링 스케줄러, 호버 툴팁·클릭 팝업·상세 모달 제공 (확산예측·HNS·긴급구난·사건사고 탭 연동)
+
+### 변경
+- MapView 컴포넌트 분리 및 전체 탭 디자인 시스템 토큰 적용
+- aerial 이미지 분석 API 기본 URL 변경
+
+## [2026-04-14]
+
 ### 추가
 - 디자인 시스템: HNS·사건사고·확산예측·SCAT·기상 탭 디자인 시스템 토큰 전면 적용
 - 관리자: 비식별화조치 메뉴 및 패널 추가

frontend/package-lock.json

@@ -1945,9 +1945,9 @@
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.1.tgz",
-      "integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
+      "integrity": "sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==",
       "cpu": [
         "arm"
       ],
@@ -1959,9 +1959,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.1.tgz",
-      "integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
+      "integrity": "sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA==",
       "cpu": [
         "arm64"
       ],
@@ -1973,9 +1973,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.1.tgz",
-      "integrity": "sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==",
+      "integrity": "sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw==",
       "cpu": [
         "arm64"
       ],
@@ -1987,9 +1987,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.1.tgz",
-      "integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
+      "integrity": "sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew==",
       "cpu": [
         "x64"
       ],
@@ -2001,9 +2001,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.1.tgz",
-      "integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
+      "integrity": "sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w==",
       "cpu": [
         "arm64"
       ],
@@ -2015,9 +2015,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.1.tgz",
-      "integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
+      "integrity": "sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g==",
       "cpu": [
         "x64"
       ],
@@ -2029,9 +2029,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.1.tgz",
-      "integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
+      "integrity": "sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==",
       "cpu": [
         "arm"
       ],
@@ -2043,9 +2043,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.1.tgz",
-      "integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
+      "integrity": "sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==",
       "cpu": [
         "arm"
       ],
@@ -2057,9 +2057,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.1.tgz",
-      "integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
+      "integrity": "sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==",
       "cpu": [
         "arm64"
       ],
@@ -2071,9 +2071,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.1.tgz",
-      "integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
+      "integrity": "sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==",
       "cpu": [
         "arm64"
       ],
@@ -2085,9 +2085,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.1.tgz",
-      "integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
+      "integrity": "sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==",
       "cpu": [
         "loong64"
       ],
@@ -2099,9 +2099,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.1.tgz",
-      "integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
+      "integrity": "sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==",
       "cpu": [
         "loong64"
       ],
@@ -2113,9 +2113,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.1.tgz",
-      "integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
+      "integrity": "sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==",
       "cpu": [
         "ppc64"
       ],
@@ -2127,9 +2127,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.1.tgz",
-      "integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
+      "integrity": "sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==",
       "cpu": [
         "ppc64"
       ],
@@ -2141,9 +2141,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.1.tgz",
-      "integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
+      "integrity": "sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==",
       "cpu": [
         "riscv64"
       ],
@@ -2155,9 +2155,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.1.tgz",
-      "integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
+      "integrity": "sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==",
       "cpu": [
         "riscv64"
       ],
@@ -2169,9 +2169,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.1.tgz",
-      "integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
+      "integrity": "sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==",
       "cpu": [
         "s390x"
       ],
@@ -2183,9 +2183,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.1.tgz",
-      "integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
+      "integrity": "sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==",
       "cpu": [
         "x64"
       ],
@@ -2197,9 +2197,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.1.tgz",
-      "integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
+      "integrity": "sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==",
       "cpu": [
         "x64"
       ],
@@ -2211,9 +2211,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.1.tgz",
-      "integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
+      "integrity": "sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==",
       "cpu": [
         "x64"
       ],
@@ -2225,9 +2225,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.1.tgz",
-      "integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
+      "integrity": "sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA==",
       "cpu": [
         "arm64"
       ],
@@ -2239,9 +2239,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.1.tgz",
-      "integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
+      "integrity": "sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g==",
       "cpu": [
         "arm64"
       ],
@@ -2253,9 +2253,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.1.tgz",
-      "integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
+      "integrity": "sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg==",
       "cpu": [
         "ia32"
       ],
@@ -2267,9 +2267,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.1.tgz",
-      "integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
+      "integrity": "sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg==",
       "cpu": [
         "x64"
       ],
@@ -2281,9 +2281,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.1.tgz",
-      "integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
+      "integrity": "sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ==",
       "cpu": [
         "x64"
       ],
@@ -2711,9 +2711,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.2",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2721,13 +2721,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.5",
+      "version": "9.0.9",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "brace-expansion": "^2.0.2"
       },
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -2873,9 +2873,9 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
+      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2927,9 +2927,9 @@
       }
     },
     "node_modules/anymatch/node_modules/picomatch": {
-      "version": "2.3.1",
+      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3015,14 +3015,14 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.13.5",
+      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.15.0.tgz",
-      "integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
+      "integrity": "sha512-wWyJDlAatxk30ZJer+GeCWS209sA42X+N5jU2jy6oHTp7ufw8uzUTVFBX9+wTfAlhiJXGS0Bq7X6efruWjuK9Q==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.11",
         "form-data": "^4.0.5",
-        "proxy-from-env": "^1.1.0"
+        "proxy-from-env": "^2.1.0"
       }
     },
     "node_modules/balanced-match": {
@@ -3077,9 +3077,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.12",
+      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3946,9 +3946,9 @@
       "license": "MIT"
     },
     "node_modules/fast-xml-parser": {
-      "version": "4.5.4",
+      "version": "4.5.6",
-      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.5.6.tgz",
-      "integrity": "sha512-jE8ugADnYOBsu1uaoayVl1tVKAMNOXyjwvv2U6udEA2ORBhDooJDWoGxTkhd4Qn4yh59JVVt/pKXtjPwx9OguQ==",
+      "integrity": "sha512-Yd4vkROfJf8AuJrDIVMVmYfULKmIJszVsMv7Vo71aocsKgFxpdlpSHXSaInvyYfgw2PRuObQSW2GFpVMUjxu9A==",
       "funding": [
         {
           "type": "github",
@@ -4055,16 +4055,16 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.3",
+      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "dev": true,
       "license": "ISC"
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.11",
+      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
-      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
       "funding": [
         {
           "type": "individual",
@@ -4904,9 +4904,9 @@
       }
     },
     "node_modules/micromatch/node_modules/picomatch": {
-      "version": "2.3.1",
+      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4938,9 +4938,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
+      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -5169,9 +5169,9 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.3",
+      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -5409,10 +5409,13 @@
       "license": "MIT"
     },
     "node_modules/proxy-from-env": {
-      "version": "1.1.0",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
-      "license": "MIT"
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
     },
     "node_modules/punycode": {
       "version": "2.3.1",
@@ -5569,9 +5572,9 @@
       }
     },
     "node_modules/readdirp/node_modules/picomatch": {
-      "version": "2.3.1",
+      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -5633,9 +5636,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.57.1",
+      "version": "4.60.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
-      "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
+      "integrity": "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5649,31 +5652,31 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.57.1",
+        "@rollup/rollup-android-arm-eabi": "4.60.1",
-        "@rollup/rollup-android-arm64": "4.57.1",
+        "@rollup/rollup-android-arm64": "4.60.1",
-        "@rollup/rollup-darwin-arm64": "4.57.1",
+        "@rollup/rollup-darwin-arm64": "4.60.1",
-        "@rollup/rollup-darwin-x64": "4.57.1",
+        "@rollup/rollup-darwin-x64": "4.60.1",
-        "@rollup/rollup-freebsd-arm64": "4.57.1",
+        "@rollup/rollup-freebsd-arm64": "4.60.1",
-        "@rollup/rollup-freebsd-x64": "4.57.1",
+        "@rollup/rollup-freebsd-x64": "4.60.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.57.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.60.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.57.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.60.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.57.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.60.1",
-        "@rollup/rollup-linux-arm64-musl": "4.57.1",
+        "@rollup/rollup-linux-arm64-musl": "4.60.1",
-        "@rollup/rollup-linux-loong64-gnu": "4.57.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.60.1",
-        "@rollup/rollup-linux-loong64-musl": "4.57.1",
+        "@rollup/rollup-linux-loong64-musl": "4.60.1",
-        "@rollup/rollup-linux-ppc64-gnu": "4.57.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.60.1",
-        "@rollup/rollup-linux-ppc64-musl": "4.57.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.60.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.57.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.60.1",
-        "@rollup/rollup-linux-riscv64-musl": "4.57.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.60.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.57.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.60.1",
-        "@rollup/rollup-linux-x64-gnu": "4.57.1",
+        "@rollup/rollup-linux-x64-gnu": "4.60.1",
-        "@rollup/rollup-linux-x64-musl": "4.57.1",
+        "@rollup/rollup-linux-x64-musl": "4.60.1",
-        "@rollup/rollup-openbsd-x64": "4.57.1",
+        "@rollup/rollup-openbsd-x64": "4.60.1",
-        "@rollup/rollup-openharmony-arm64": "4.57.1",
+        "@rollup/rollup-openharmony-arm64": "4.60.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.57.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.60.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.57.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.60.1",
-        "@rollup/rollup-win32-x64-gnu": "4.57.1",
+        "@rollup/rollup-win32-x64-gnu": "4.60.1",
-        "@rollup/rollup-win32-x64-msvc": "4.57.1",
+        "@rollup/rollup-win32-x64-msvc": "4.60.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -5801,9 +5804,9 @@
       }
     },
     "node_modules/socket.io-parser": {
-      "version": "4.2.5",
+      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.6.tgz",
-      "integrity": "sha512-bPMmpy/5WWKHea5Y/jYAP6k74A+hvmRCQaJuJB6I/ML5JZq/KfNieUVo/3Mh7SAqn7TyFdIo6wqYHInG1MU1bQ==",
+      "integrity": "sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg==",
       "license": "MIT",
       "dependencies": {
         "@socket.io/component-emitter": "~3.1.0",
@@ -6285,9 +6288,9 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "7.3.1",
+      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
-      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

frontend/src/App.tsx

@@ -1,25 +1,25 @@
 import { useState, useEffect } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { GoogleOAuthProvider } from '@react-oauth/google';
-import type { MainTab } from '@common/types/navigation';
+import type { MainTab } from '@/types/navigation';
-import { MainLayout } from '@common/components/layout/MainLayout';
+import { MainLayout } from '@components/common/layout/MainLayout';
-import { LoginPage } from '@common/components/auth/LoginPage';
+import { LoginPage } from '@components/common/auth/LoginPage';
 import { registerMainTabSwitcher } from '@common/hooks/useSubMenu';
 import { useAuthStore } from '@common/store/authStore';
 import { useMenuStore } from '@common/store/menuStore';
 import { useMapStore } from '@common/store/mapStore';
 import { API_BASE_URL } from '@common/services/api';
-import { OilSpillView } from '@tabs/prediction';
+import { OilSpillView } from '@components/prediction';
-import { ReportsView } from '@tabs/reports';
+import { ReportsView } from '@components/reports';
-import { HNSView } from '@tabs/hns';
+import { HNSView } from '@components/hns';
-import { AerialView } from '@tabs/aerial';
+import { AerialView } from '@components/aerial';
-import { AssetsView } from '@tabs/assets';
+import { AssetsView } from '@components/assets';
-import { BoardView } from '@tabs/board';
+import { BoardView } from '@components/board';
-import { WeatherView } from '@tabs/weather';
+import { WeatherView } from '@components/weather';
-import { IncidentsView } from '@tabs/incidents';
+import { IncidentsView } from '@components/incidents';
-import { AdminView } from '@tabs/admin';
+import { AdminView } from '@components/admin';
-import { ScatView } from '@tabs/scat';
+import { ScatView } from '@components/scat';
-import { RescueView } from '@tabs/rescue';
+import { RescueView } from '@components/rescue';
 import { DesignPage } from '@/pages/design/DesignPage';
 
 const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID || '';

frontend/src/common/data/manualChapters.ts

@@ -0,0 +1,30 @@
+import chaptersJson from './chapters.json';
+
+export interface InputItem {
+  label: string;
+  type: string;
+  required: boolean;
+  desc: string;
+}
+
+export interface ScreenItem {
+  id: string;
+  name: string;
+  menuPath: string;
+  imageIndex: number;
+  overview: string;
+  description?: string;
+  procedure?: string[];
+  inputs?: InputItem[];
+  notes?: string[];
+}
+
+export interface Chapter {
+  id: string;
+  number: string;
+  title: string;
+  subtitle: string;
+  screens: ScreenItem[];
+}
+
+export const CHAPTERS = chaptersJson as Chapter[];

frontend/src/common/hooks/useBaseMapStyle.ts

@@ -1,6 +1,6 @@
 import type { StyleSpecification } from 'maplibre-gl';
 import { useMapStore } from '@common/store/mapStore';
-import { LIGHT_STYLE, SATELLITE_3D_STYLE, ENC_EMPTY_STYLE } from '@common/components/map/mapStyles';
+import { LIGHT_STYLE, SATELLITE_3D_STYLE, ENC_EMPTY_STYLE } from '@components/common/map/mapStyles';
 
 export function useBaseMapStyle(): StyleSpecification {
   const mapToggles = useMapStore((s) => s.mapToggles);

frontend/src/common/hooks/useSubMenu.ts

@@ -1,5 +1,5 @@
 import { useEffect, useSyncExternalStore } from 'react';
-import type { MainTab } from '../types/navigation';
+import type { MainTab } from '@/types/navigation';
 import { useAuthStore } from '@common/store/authStore';
 import { API_BASE_URL } from '@common/services/api';
 
@@ -61,6 +61,7 @@ const subMenuConfigs: Record<MainTab, SubMenuItem[] | null> = {
     { id: 'manual', label: '해경매뉴얼', icon: '📘' },
   ],
   weather: null,
+  monitor: null,
   admin: null, // 관리자 화면은 자체 사이드바 사용 (AdminSidebar.tsx)
 };
 
@@ -76,6 +77,7 @@ const subMenuState: Record<MainTab, string> = {
   incidents: '',
   board: 'all',
   weather: '',
+  monitor: '',
   admin: 'users',
 };
 

frontend/src/common/hooks/useVesselSignals.ts

@@ -0,0 +1,79 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import {
+  createVesselSignalClient,
+  type VesselSignalClient,
+} from '@common/services/vesselSignalClient';
+import {
+  getInitialVesselSnapshot,
+  isVesselInitEnabled,
+} from '@common/services/vesselApi';
+import type { VesselPosition, MapBounds } from '@/types/vessel';
+
+/**
+ * 선박 신호 실시간 수신 훅
+ *
+ * 개발환경(VITE_VESSEL_SIGNAL_MODE=polling):
+ *   - 60초마다 백엔드 REST API(/api/vessels/in-area)를 현재 뷰포트 bbox로 호출
+ *
+ * 운영환경(VITE_VESSEL_SIGNAL_MODE=websocket):
+ *   - 운영 WebSocket 서버(VITE_VESSEL_WS_URL)에 직접 연결하여 실시간 수신
+ *   - 수신된 전체 데이터를 현재 뷰포트 bbox로 프론트에서 필터링
+ *
+ * @param mapBounds MapView의 onBoundsChange로 전달받은 현재 뷰포트 bbox
+ * @returns 현재 뷰포트 내 선박 목록
+ */
+export function useVesselSignals(mapBounds: MapBounds | null): VesselPosition[] {
+  const [vessels, setVessels] = useState<VesselPosition[]>([]);
+  const boundsRef = useRef<MapBounds | null>(mapBounds);
+  const clientRef = useRef<VesselSignalClient | null>(null);
+
+  useEffect(() => {
+    boundsRef.current = mapBounds;
+  }, [mapBounds]);
+
+  const getViewportBounds = useCallback(() => boundsRef.current, []);
+
+  useEffect(() => {
+    const client = createVesselSignalClient();
+    clientRef.current = client;
+
+    // 운영 환경: 로그인/새로고침 직후 최근 10분치 스냅샷을 먼저 1회 로드.
+    // 이후 WebSocket 수신이 시작되면 최신 신호로 갱신된다.
+    // VITE_VESSEL_INIT_ENABLED=true 일 때만 활성화(기본 비활성).
+    if (isVesselInitEnabled()) {
+      getInitialVesselSnapshot()
+        .then((initial) => {
+          const bounds = boundsRef.current;
+          const filtered = bounds
+            ? initial.filter(
+                (v) =>
+                  v.lon >= bounds.minLon &&
+                  v.lon <= bounds.maxLon &&
+                  v.lat >= bounds.minLat &&
+                  v.lat <= bounds.maxLat,
+              )
+            : initial;
+          // WS 첫 메시지가 먼저 도착해 이미 채워졌다면 덮어쓰지 않음
+          setVessels((prev) => (prev.length === 0 ? filtered : prev));
+        })
+        .catch((e) => console.warn('[useVesselSignals] 초기 스냅샷 실패', e));
+    }
+
+    client.start(setVessels, getViewportBounds);
+    return () => {
+      client.stop();
+      clientRef.current = null;
+    };
+  }, [getViewportBounds]);
+
+  // mapBounds가 바뀔 때마다(최초 채워질 때 + 이후 뷰포트 이동/줌마다) 즉시 1회 새로고침.
+  // MapView의 onBoundsChange는 moveend/zoomend에서만 호출되므로 드래그 중 스팸은 없다.
+  // 이후에도 60초 인터벌 폴링은 백그라운드에서 계속 동작.
+  useEffect(() => {
+    if (mapBounds && clientRef.current) {
+      clientRef.current.refresh();
+    }
+  }, [mapBounds]);
+
+  return vessels;
+}

frontend/src/common/mock/vesselMockData.ts

@@ -1,613 +1,4 @@
-export interface Vessel {
+// Deprecated: Mock 선박 데이터는 제거되었습니다.
-  mmsi: number;
+// 실제 선박 신호는 @common/hooks/useVesselSignals + @components/common/map/VesselLayer 를 사용합니다.
-  imo: string;
+// 범례는 @components/common/map/VesselLayer 의 VESSEL_LEGEND 를 import 하세요.
-  name: string;
+export {};
-  typS: string;
-  flag: string;
-  status: string;
-  speed: number;
-  heading: number;
-  lat: number;
-  lng: number;
-  draft: number;
-  depart: string;
-  arrive: string;
-  etd: string;
-  eta: string;
-  gt: string;
-  dwt: string;
-  loa: string;
-  beam: string;
-  built: string;
-  yard: string;
-  callSign: string;
-  cls: string;
-  cargo: string;
-  color: string;
-  markerType: string;
-}
-
-export const VESSEL_TYPE_COLORS: Record<string, string> = {
-  Tanker: '#ef4444',
-  Chemical: '#ef4444',
-  Cargo: '#22c55e',
-  Bulk: '#22c55e',
-  Container: '#3b82f6',
-  Passenger: '#a855f7',
-  Fishing: '#f97316',
-  Tug: '#06b6d4',
-  Navy: '#6b7280',
-  Sailing: '#fbbf24',
-};
-
-export const VESSEL_LEGEND = [
-  { type: 'Tanker', color: '#ef4444' },
-  { type: 'Cargo', color: '#22c55e' },
-  { type: 'Container', color: '#3b82f6' },
-  { type: 'Fishing', color: '#f97316' },
-  { type: 'Passenger', color: '#a855f7' },
-  { type: 'Tug', color: '#06b6d4' },
-];
-
-export const mockVessels: Vessel[] = [
-  {
-    mmsi: 440123456,
-    imo: '9812345',
-    name: 'HANKUK CHEMI',
-    typS: 'Tanker',
-    flag: '🇰🇷',
-    status: '항해중',
-    speed: 8.2,
-    heading: 330,
-    lat: 34.6,
-    lng: 127.5,
-    draft: 5.8,
-    depart: '여수항',
-    arrive: '부산항',
-    etd: '2026-02-25 08:00',
-    eta: '2026-02-25 18:30',
-    gt: '29,246',
-    dwt: '49,999',
-    loa: '183.0m',
-    beam: '32.2m',
-    built: '2018',
-    yard: '현대미포조선',
-    callSign: 'HLKC',
-    cls: '한국선급(KR)',
-    cargo: 'BUNKER-C · 1,200kL · IMO Class 3',
-    color: '#ef4444',
-    markerType: 'tanker',
-  },
-  {
-    mmsi: 440234567,
-    imo: '9823456',
-    name: 'DONG-A GLAUCOS',
-    typS: 'Cargo',
-    flag: '🇰🇷',
-    status: '항해중',
-    speed: 11.4,
-    heading: 245,
-    lat: 34.78,
-    lng: 127.8,
-    draft: 7.2,
-    depart: '울산항',
-    arrive: '광양항',
-    etd: '2026-02-25 06:30',
-    eta: '2026-02-25 16:00',
-    gt: '12,450',
-    dwt: '18,800',
-    loa: '144.0m',
-    beam: '22.6m',
-    built: '2015',
-    yard: 'STX조선',
-    callSign: 'HLDG',
-    cls: '한국선급(KR)',
-    cargo: '철강재 · 4,500t',
-    color: '#22c55e',
-    markerType: 'cargo',
-  },
-  {
-    mmsi: 440345678,
-    imo: '9834567',
-    name: 'HMM ALGECIRAS',
-    typS: 'Container',
-    flag: '🇰🇷',
-    status: '항해중',
-    speed: 18.5,
-    heading: 195,
-    lat: 35.0,
-    lng: 128.8,
-    draft: 14.5,
-    depart: '부산항',
-    arrive: '싱가포르',
-    etd: '2026-02-25 04:00',
-    eta: '2026-03-02 08:00',
-    gt: '228,283',
-    dwt: '223,092',
-    loa: '399.9m',
-    beam: '61.0m',
-    built: '2020',
-    yard: '대우조선해양',
-    callSign: 'HLHM',
-    cls: "Lloyd's Register",
-    cargo: '컨테이너 · 16,420 TEU',
-    color: '#3b82f6',
-    markerType: 'container',
-  },
-  {
-    mmsi: 355678901,
-    imo: '9756789',
-    name: 'STELLAR DAISY',
-    typS: 'Tanker',
-    flag: '🇵🇦',
-    status: '⚠ 사고(좌초)',
-    speed: 0.0,
-    heading: 0,
-    lat: 34.72,
-    lng: 127.72,
-    draft: 8.1,
-    depart: '여수항',
-    arrive: '—',
-    etd: '2026-01-18 12:00',
-    eta: '—',
-    gt: '35,120',
-    dwt: '58,000',
-    loa: '190.0m',
-    beam: '34.0m',
-    built: '2012',
-    yard: 'CSBC Taiwan',
-    callSign: '3FZA7',
-    cls: 'NK',
-    cargo: 'BUNKER-C · 150kL 유출 · ⚠ 사고선박',
-    color: '#ef4444',
-    markerType: 'tanker',
-  },
-  {
-    mmsi: 440456789,
-    imo: '—',
-    name: '제72 금양호',
-    typS: 'Fishing',
-    flag: '🇰🇷',
-    status: '조업중',
-    speed: 4.1,
-    heading: 120,
-    lat: 34.55,
-    lng: 127.35,
-    draft: 2.1,
-    depart: '여수 국동항',
-    arrive: '여수 국동항',
-    etd: '2026-02-25 04:30',
-    eta: '2026-02-25 18:00',
-    gt: '78',
-    dwt: '—',
-    loa: '24.5m',
-    beam: '6.2m',
-    built: '2008',
-    yard: '통영조선',
-    callSign: '—',
-    cls: '한국선급',
-    cargo: '어획물',
-    color: '#f97316',
-    markerType: 'fishing',
-  },
-  {
-    mmsi: 440567890,
-    imo: '9867890',
-    name: 'PAN OCEAN GLORY',
-    typS: 'Bulk',
-    flag: '🇰🇷',
-    status: '항해중',
-    speed: 12.8,
-    heading: 170,
-    lat: 35.6,
-    lng: 126.4,
-    draft: 10.3,
-    depart: '군산항',
-    arrive: '포항항',
-    etd: '2026-02-25 07:00',
-    eta: '2026-02-26 04:00',
-    gt: '43,800',
-    dwt: '76,500',
-    loa: '229.0m',
-    beam: '32.3m',
-    built: '2019',
-    yard: '현대삼호중공업',
-    callSign: 'HLPO',
-    cls: '한국선급(KR)',
-    cargo: '석탄 · 65,000t',
-    color: '#22c55e',
-    markerType: 'cargo',
-  },
-  {
-    mmsi: 440678901,
-    imo: '—',
-    name: '여수예인1호',
-    typS: 'Tug',
-    flag: '🇰🇷',
-    status: '방제지원',
-    speed: 6.3,
-    heading: 355,
-    lat: 34.68,
-    lng: 127.6,
-    draft: 3.2,
-    depart: '여수항',
-    arrive: '사고현장',
-    etd: '2026-01-18 16:30',
-    eta: '—',
-    gt: '280',
-    dwt: '—',
-    loa: '32.0m',
-    beam: '9.5m',
-    built: '2016',
-    yard: '삼성중공업',
-    callSign: 'HLYT',
-    cls: '한국선급',
-    cargo: '방제장비 · 오일붐 500m',
-    color: '#06b6d4',
-    markerType: 'tug',
-  },
-  {
-    mmsi: 235012345,
-    imo: '9456789',
-    name: 'QUEEN MARY',
-    typS: 'Passenger',
-    flag: '🇬🇧',
-    status: '항해중',
-    speed: 15.2,
-    heading: 10,
-    lat: 33.8,
-    lng: 127.0,
-    draft: 8.5,
-    depart: '상하이',
-    arrive: '부산항',
-    etd: '2026-02-24 18:00',
-    eta: '2026-02-26 06:00',
-    gt: '148,528',
-    dwt: '18,000',
-    loa: '345.0m',
-    beam: '41.0m',
-    built: '2004',
-    yard: "Chantiers de l'Atlantique",
-    callSign: 'GBQM2',
-    cls: "Lloyd's Register",
-    cargo: '승객 2,620명',
-    color: '#a855f7',
-    markerType: 'passenger',
-  },
-  {
-    mmsi: 353012345,
-    imo: '9811000',
-    name: 'EVER GIVEN',
-    typS: 'Container',
-    flag: '🇹🇼',
-    status: '항해중',
-    speed: 14.7,
-    heading: 220,
-    lat: 35.2,
-    lng: 129.2,
-    draft: 15.7,
-    depart: '부산항',
-    arrive: '카오슝',
-    etd: '2026-02-25 02:00',
-    eta: '2026-02-28 14:00',
-    gt: '220,940',
-    dwt: '199,629',
-    loa: '400.0m',
-    beam: '59.0m',
-    built: '2018',
-    yard: '今治造船',
-    callSign: 'BIXE9',
-    cls: 'ABS',
-    cargo: '컨테이너 · 14,800 TEU',
-    color: '#3b82f6',
-    markerType: 'container',
-  },
-  {
-    mmsi: 440789012,
-    imo: '—',
-    name: '제85 대성호',
-    typS: 'Fishing',
-    flag: '🇰🇷',
-    status: '조업중',
-    speed: 3.8,
-    heading: 85,
-    lat: 34.4,
-    lng: 126.3,
-    draft: 1.8,
-    depart: '목포항',
-    arrive: '목포항',
-    etd: '2026-02-25 03:00',
-    eta: '2026-02-25 17:00',
-    gt: '65',
-    dwt: '—',
-    loa: '22.0m',
-    beam: '5.8m',
-    built: '2010',
-    yard: '목포조선',
-    callSign: '—',
-    cls: '한국선급',
-    cargo: '어획물',
-    color: '#f97316',
-    markerType: 'fishing',
-  },
-  {
-    mmsi: 440890123,
-    imo: '9878901',
-    name: 'SK INNOVATION',
-    typS: 'Chemical',
-    flag: '🇰🇷',
-    status: '항해중',
-    speed: 9.6,
-    heading: 340,
-    lat: 35.8,
-    lng: 126.6,
-    draft: 6.5,
-    depart: '대산항',
-    arrive: '여수항',
-    etd: '2026-02-25 10:00',
-    eta: '2026-02-26 02:00',
-    gt: '11,200',
-    dwt: '16,800',
-    loa: '132.0m',
-    beam: '20.4m',
-    built: '2020',
-    yard: '현대미포조선',
-    callSign: 'HLSK',
-    cls: '한국선급(KR)',
-    cargo: '톨루엔 · 8,500kL · IMO Class 3',
-    color: '#ef4444',
-    markerType: 'tanker',
-  },
-  {
-    mmsi: 440901234,
-    imo: '9889012',
-    name: 'KOREA EXPRESS',
-    typS: 'Cargo',
-    flag: '🇰🇷',
-    status: '항해중',
-    speed: 10.1,
-    heading: 190,
-    lat: 36.2,
-    lng: 128.5,
-    draft: 6.8,
-    depart: '동해항',
-    arrive: '포항항',
-    etd: '2026-02-25 09:00',
-    eta: '2026-02-25 15:00',
-    gt: '8,500',
-    dwt: '12,000',
-    loa: '118.0m',
-    beam: '18.2m',
-    built: '2014',
-    yard: '대한조선',
-    callSign: 'HLKE',
-    cls: '한국선급',
-    cargo: '일반화물',
-    color: '#22c55e',
-    markerType: 'cargo',
-  },
-  {
-    mmsi: 440012345,
-    imo: '—',
-    name: 'ROKS SEJONG',
-    typS: 'Navy',
-    flag: '🇰🇷',
-    status: '작전중',
-    speed: 16.0,
-    heading: 270,
-    lat: 35.3,
-    lng: 129.5,
-    draft: 6.3,
-    depart: '부산 해군기지',
-    arrive: '—',
-    etd: '—',
-    eta: '—',
-    gt: '7,600',
-    dwt: '—',
-    loa: '165.9m',
-    beam: '21.4m',
-    built: '2008',
-    yard: '현대중공업',
-    callSign: 'HLNS',
-    cls: '군용',
-    cargo: '군사작전',
-    color: '#6b7280',
-    markerType: 'military',
-  },
-  {
-    mmsi: 440023456,
-    imo: '—',
-    name: '군산예인3호',
-    typS: 'Tug',
-    flag: '🇰🇷',
-    status: '대기중',
-    speed: 5.5,
-    heading: 140,
-    lat: 35.9,
-    lng: 126.9,
-    draft: 2.8,
-    depart: '군산항',
-    arrive: '군산항',
-    etd: '—',
-    eta: '—',
-    gt: '180',
-    dwt: '—',
-    loa: '28.0m',
-    beam: '8.2m',
-    built: '2019',
-    yard: '통영조선',
-    callSign: 'HLGS',
-    cls: '한국선급',
-    cargo: '—',
-    color: '#06b6d4',
-    markerType: 'tug',
-  },
-  {
-    mmsi: 440034567,
-    imo: '—',
-    name: 'JEJU WIND',
-    typS: 'Sailing',
-    flag: '🇰🇷',
-    status: '항해중',
-    speed: 6.8,
-    heading: 290,
-    lat: 33.35,
-    lng: 126.65,
-    draft: 2.5,
-    depart: '제주항',
-    arrive: '제주항',
-    etd: '2026-02-25 10:00',
-    eta: '2026-02-25 16:00',
-    gt: '45',
-    dwt: '—',
-    loa: '18.0m',
-    beam: '5.0m',
-    built: '2022',
-    yard: '제주요트',
-    callSign: '—',
-    cls: '—',
-    cargo: '—',
-    color: '#fbbf24',
-    markerType: 'sail',
-  },
-  {
-    mmsi: 440045678,
-    imo: '—',
-    name: '제33 삼양호',
-    typS: 'Fishing',
-    flag: '🇰🇷',
-    status: '조업중',
-    speed: 2.4,
-    heading: 55,
-    lat: 35.1,
-    lng: 127.4,
-    draft: 1.6,
-    depart: '통영항',
-    arrive: '통영항',
-    etd: '2026-02-25 05:00',
-    eta: '2026-02-25 19:00',
-    gt: '52',
-    dwt: '—',
-    loa: '20.0m',
-    beam: '5.4m',
-    built: '2006',
-    yard: '거제조선',
-    callSign: '—',
-    cls: '한국선급',
-    cargo: '어획물',
-    color: '#f97316',
-    markerType: 'fishing',
-  },
-  {
-    mmsi: 255012345,
-    imo: '9703291',
-    name: 'MSC OSCAR',
-    typS: 'Container',
-    flag: '🇨🇭',
-    status: '항해중',
-    speed: 17.3,
-    heading: 355,
-    lat: 34.1,
-    lng: 128.1,
-    draft: 14.0,
-    depart: '카오슝',
-    arrive: '부산항',
-    etd: '2026-02-23 08:00',
-    eta: '2026-02-25 22:00',
-    gt: '197,362',
-    dwt: '199,272',
-    loa: '395.4m',
-    beam: '59.0m',
-    built: '2015',
-    yard: '대우조선해양',
-    callSign: '9HA4713',
-    cls: 'DNV',
-    cargo: '컨테이너 · 18,200 TEU',
-    color: '#3b82f6',
-    markerType: 'container',
-  },
-  {
-    mmsi: 440056789,
-    imo: '9890567',
-    name: 'SAEHAN PIONEER',
-    typS: 'Tanker',
-    flag: '🇰🇷',
-    status: '항해중',
-    speed: 7.9,
-    heading: 310,
-    lat: 34.9,
-    lng: 127.1,
-    draft: 5.2,
-    depart: '여수항',
-    arrive: '대산항',
-    etd: '2026-02-25 11:00',
-    eta: '2026-02-26 08:00',
-    gt: '8,900',
-    dwt: '14,200',
-    loa: '120.0m',
-    beam: '18.0m',
-    built: '2017',
-    yard: '현대미포조선',
-    callSign: 'HLSP',
-    cls: '한국선급(KR)',
-    cargo: '경유 · 10,000kL',
-    color: '#ef4444',
-    markerType: 'tanker',
-  },
-  {
-    mmsi: 440067890,
-    imo: '9891678',
-    name: 'DONGHAE STAR',
-    typS: 'Cargo',
-    flag: '🇰🇷',
-    status: '항해중',
-    speed: 11.0,
-    heading: 155,
-    lat: 37.55,
-    lng: 129.3,
-    draft: 6.0,
-    depart: '속초항',
-    arrive: '동해항',
-    etd: '2026-02-25 12:00',
-    eta: '2026-02-25 16:30',
-    gt: '6,200',
-    dwt: '8,500',
-    loa: '105.0m',
-    beam: '16.5m',
-    built: '2013',
-    yard: '대한조선',
-    callSign: 'HLDS',
-    cls: '한국선급',
-    cargo: '일반화물 · 목재',
-    color: '#22c55e',
-    markerType: 'cargo',
-  },
-  {
-    mmsi: 440078901,
-    imo: '—',
-    name: '제18 한라호',
-    typS: 'Fishing',
-    flag: '🇰🇷',
-    status: '귀항중',
-    speed: 3.2,
-    heading: 70,
-    lat: 33.3,
-    lng: 126.3,
-    draft: 1.9,
-    depart: '서귀포항',
-    arrive: '서귀포항',
-    etd: '2026-02-25 04:00',
-    eta: '2026-02-25 15:00',
-    gt: '58',
-    dwt: '—',
-    loa: '21.0m',
-    beam: '5.6m',
-    built: '2011',
-    yard: '제주조선',
-    callSign: '—',
-    cls: '한국선급',
-    cargo: '어획물 · 갈치/고등어',
-    color: '#f97316',
-    markerType: 'fishing',
-  },
-];

frontend/src/common/services/vesselApi.ts

@@ -0,0 +1,35 @@
+import { api } from './api';
+import type { VesselPosition, MapBounds } from '@/types/vessel';
+
+export async function getVesselsInArea(bounds: MapBounds): Promise<VesselPosition[]> {
+  const res = await api.post<VesselPosition[]>('/vessels/in-area', { bounds });
+  return res.data;
+}
+
+/**
+ * 로그인/새로고침 직후 1회 호출하는 초기 스냅샷 API.
+ * 운영 환경의 별도 REST 서버가 현재 시각 기준 최근 10분치 선박 신호를 반환한다.
+ * URL은 VITE_VESSEL_INIT_API_URL 로 주입(운영에서 실제 URL로 교체).
+ */
+export async function getInitialVesselSnapshot(): Promise<VesselPosition[]> {
+  const url = import.meta.env.VITE_VESSEL_INIT_API_URL as string | undefined;
+  if (!url) return [];
+  const res = await fetch(url, { method: 'GET' });
+  if (!res.ok) throw new Error(`vessel init snapshot ${res.status}`);
+  return (await res.json()) as VesselPosition[];
+}
+
+export function isVesselInitEnabled(): boolean {
+  return import.meta.env.VITE_VESSEL_INIT_ENABLED === 'true';
+}
+
+export interface VesselCacheStatus {
+  count: number;
+  bangjeCount: number;
+  lastUpdated: string | null;
+}
+
+export async function getVesselCacheStatus(): Promise<VesselCacheStatus> {
+  const res = await api.get<VesselCacheStatus>('/vessels/status');
+  return res.data;
+}

frontend/src/common/services/vesselSignalClient.ts

@@ -0,0 +1,125 @@
+import type { VesselPosition, MapBounds } from '@/types/vessel';
+import { getVesselsInArea } from './vesselApi';
+
+export interface VesselSignalClient {
+  start(
+    onVessels: (vessels: VesselPosition[]) => void,
+    getViewportBounds: () => MapBounds | null,
+  ): void;
+  stop(): void;
+  /**
+   * 즉시 1회 새로고침. 폴링 모드에선 현재 bbox로 REST 호출,
+   * WebSocket 모드에선 no-op(서버 push에 의존).
+   */
+  refresh(): void;
+}
+
+// 개발환경: setInterval(60s) → 백엔드 REST API 호출
+class PollingVesselClient implements VesselSignalClient {
+  private intervalId: ReturnType<typeof setInterval> | null = null;
+  private onVessels: ((vessels: VesselPosition[]) => void) | null = null;
+  private getViewportBounds: (() => MapBounds | null) | null = null;
+
+  private async poll(): Promise<void> {
+    const bounds = this.getViewportBounds?.();
+    if (!bounds || !this.onVessels) return;
+    try {
+      const vessels = await getVesselsInArea(bounds);
+      this.onVessels(vessels);
+    } catch {
+      // 폴링 실패 시 무시 (다음 인터벌에 재시도)
+    }
+  }
+
+  start(
+    onVessels: (vessels: VesselPosition[]) => void,
+    getViewportBounds: () => MapBounds | null,
+  ): void {
+    this.onVessels = onVessels;
+    this.getViewportBounds = getViewportBounds;
+
+    // 즉시 1회 실행 후 60초 간격으로 반복
+    this.poll();
+    this.intervalId = setInterval(() => this.poll(), 60_000);
+  }
+
+  stop(): void {
+    if (this.intervalId !== null) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+    this.onVessels = null;
+    this.getViewportBounds = null;
+  }
+
+  refresh(): void {
+    this.poll();
+  }
+}
+
+// 운영환경: 실시간 WebSocket 서버에 직접 연결
+class DirectWebSocketVesselClient implements VesselSignalClient {
+  private ws: WebSocket | null = null;
+  private readonly wsUrl: string;
+
+  constructor(wsUrl: string) {
+    this.wsUrl = wsUrl;
+  }
+
+  start(
+    onVessels: (vessels: VesselPosition[]) => void,
+    getViewportBounds: () => MapBounds | null,
+  ): void {
+    this.ws = new WebSocket(this.wsUrl);
+
+    this.ws.onmessage = (event) => {
+      try {
+        const allVessels = JSON.parse(event.data as string) as VesselPosition[];
+        const bounds = getViewportBounds();
+
+        if (!bounds) {
+          onVessels(allVessels);
+          return;
+        }
+
+        const filtered = allVessels.filter(
+          (v) =>
+            v.lon >= bounds.minLon &&
+            v.lon <= bounds.maxLon &&
+            v.lat >= bounds.minLat &&
+            v.lat <= bounds.maxLat,
+        );
+        onVessels(filtered);
+      } catch {
+        // 파싱 실패 무시
+      }
+    };
+
+    this.ws.onerror = () => {
+      console.error('[vesselSignalClient] WebSocket 연결 오류');
+    };
+
+    this.ws.onclose = () => {
+      console.warn('[vesselSignalClient] WebSocket 연결 종료');
+    };
+  }
+
+  stop(): void {
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+
+  refresh(): void {
+    // 운영 WS 모드에선 서버 push에 의존하므로 별도 새로고침 동작 없음
+  }
+}
+
+export function createVesselSignalClient(): VesselSignalClient {
+  if (import.meta.env.VITE_VESSEL_SIGNAL_MODE === 'websocket') {
+    const wsUrl = import.meta.env.VITE_VESSEL_WS_URL as string;
+    return new DirectWebSocketVesselClient(wsUrl);
+  }
+  return new PollingVesselClient();
+}

frontend/src/common/store/weatherSnapshotStore.ts

@@ -1,44 +1,7 @@
 import { create } from 'zustand';
+import type { WeatherSnapshot } from '@interfaces/weather/WeatherInterface';
 
-export interface WeatherSnapshot {
+export type { WeatherSnapshot };
-  stationName: string;
-  capturedAt: string;
-  wind: {
-    speed: number;
-    direction: number;
-    directionLabel: string;
-    speed_1k: number;
-    speed_3k: number;
-  };
-  wave: {
-    height: number;
-    maxHeight: number;
-    period: number;
-    direction: string;
-  };
-  temperature: {
-    current: number;
-    feelsLike: number;
-  };
-  pressure: number;
-  visibility: number;
-  salinity: number;
-  astronomy?: {
-    sunrise: string;
-    sunset: string;
-    moonrise: string;
-    moonset: string;
-    moonPhase: string;
-    tidalRange: number;
-  };
-  alert?: string;
-  forecast?: Array<{
-    time: string;
-    icon: string;
-    temperature: number;
-    windSpeed: number;
-  }>;
-}
 
 interface WeatherSnapshotStore {
   snapshot: WeatherSnapshot | null;

frontend/src/common/styles/components.css

@@ -325,7 +325,7 @@
     gap: 4px;
     padding: 5px 4px;
     border-radius: 5px;
-    font-size: 0.6875rem;
+    font-size: 0.75rem;
     font-weight: 600;
     font-family: var(--font-korean);
     cursor: pointer;
@@ -360,7 +360,7 @@
     width: 100%;
     padding: 10px;
     border-radius: 6px;
-    font-size: 12px;
+    font-size: 0.8125rem;
     font-weight: 700;
     cursor: pointer;
     border: none;
@@ -386,7 +386,7 @@
     border: 1px solid rgba(6, 182, 212, 0.2);
     border-radius: 6px;
     color: var(--color-accent);
-    font-size: 0.6875rem;
+    font-size: 0.75rem;
     font-weight: 600;
     cursor: pointer;
     white-space: nowrap;
@@ -411,7 +411,7 @@
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-sm);
-    font-size: 12px;
+    font-size: 0.8125rem;
     font-weight: 600;
     transition: all 0.15s;
     background: rgba(15, 21, 36, 0.75);
@@ -450,7 +450,7 @@
     border-radius: 6px;
     padding: 5px 14px;
     font-family: var(--font-mono);
-    font-size: 0.6875rem;
+    font-size: 0.75rem;
     color: rgba(255, 255, 255, 0.7);
     font-weight: 400;
     z-index: 20;
@@ -491,7 +491,7 @@
   }
 
   .wii-value {
-    font-size: 0.6875rem;
+    font-size: 0.75rem;
     font-weight: 400;
     color: #ffffff;
     font-family: var(--font-mono);
@@ -538,7 +538,7 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    font-size: 14px;
+    font-size: 1rem;
     transition: 0.2s;
   }
 
@@ -621,7 +621,7 @@
     position: absolute;
     top: -18px;
     transform: translateX(-50%);
-    font-size: 12px;
+    font-size: 0.8125rem;
     cursor: pointer;
     filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5));
   }
@@ -672,7 +672,7 @@
   }
 
   .tlct {
-    font-size: 14px;
+    font-size: 1rem;
     font-weight: 600;
     color: var(--color-accent);
     font-family: var(--font-mono);
@@ -841,7 +841,7 @@
   }
 
   .layer-icon {
-    font-size: 14px;
+    font-size: 1rem;
     flex-shrink: 0;
   }
 
@@ -903,10 +903,10 @@
     background: var(--bg-base);
     border: 1px solid var(--stroke-default);
     border-radius: 4px;
-    color: var(--color-accent);
+    color: var(--color-default);
     font-family: var(--font-mono);
     font-size: 0.75rem;
-    font-weight: 600;
+    font-weight: 400;
     text-align: right;
     outline: none;
     transition: border-color 0.2s;
@@ -1115,7 +1115,7 @@
     cursor: pointer;
     border-radius: var(--radius-sm);
     transition: background 0.15s;
-    font-size: 12px;
+    font-size: 0.8125rem;
     font-weight: 700;
     color: var(--fg-default);
     font-family: var(--font-korean);
@@ -1345,7 +1345,7 @@
   }
 
   .lyr-ccustom label {
-    font-size: 0.6875rem;
+    font-size: 0.75rem;
     color: var(--fg-disabled);
     font-family: var(--font-korean);
   }
@@ -1369,7 +1369,7 @@
     border-radius: var(--radius-sm);
   }
   .lyr-style-label {
-    font-size: 0.6875rem;
+    font-size: 0.75rem;
     font-weight: 700;
     color: var(--fg-disabled);
     font-family: var(--font-korean);
@@ -1411,7 +1411,7 @@
     cursor: pointer;
   }
   .lyr-style-val {
-    font-size: 0.6875rem;
+    font-size: 0.75rem;
     color: var(--fg-disabled);
     font-family: var(--font-mono);
     min-width: 28px;

frontend/src/common/types/hns.ts

@@ -1,67 +0,0 @@
-/* HNS 물질 검색 데이터 타입 */
-
-export interface HNSSearchSubstance {
-  id: number;
-  abbreviation: string; // 약자/제품명 (화물적부도 코드)
-  nameKr: string; // 국문명
-  nameEn: string; // 영문명
-  synonymsEn: string; // 영문 동의어
-  synonymsKr: string; // 국문 동의어/용도
-  unNumber: string; // UN번호
-  casNumber: string; // CAS번호
-  transportMethod: string; // 운송방법
-  sebc: string; // SEBC 거동분류
-  /* 물리·화학적 특성 */
-  usage: string;
-  state: string;
-  color: string;
-  odor: string;
-  flashPoint: string;
-  autoIgnition: string;
-  boilingPoint: string;
-  density: string; // 비중 (물=1)
-  solubility: string;
-  vaporPressure: string;
-  vaporDensity: string; // 증기밀도 (공기=1)
-  explosionRange: string; // 폭발범위
-  /* 위험등급·농도기준 */
-  nfpa: { health: number; fire: number; reactivity: number; special: string };
-  hazardClass: string;
-  ergNumber: string;
-  idlh: string;
-  aegl2: string;
-  erpg2: string;
-  /* 방제거리 */
-  responseDistanceFire: string;
-  responseDistanceSpillDay: string;
-  responseDistanceSpillNight: string;
-  marineResponse: string;
-  /* PPE */
-  ppeClose: string;
-  ppeFar: string;
-  /* MSDS 요약 */
-  msds: {
-    hazard: string;
-    firstAid: string;
-    fireFighting: string;
-    spillResponse: string;
-    exposure: string;
-    regulation: string;
-  };
-  /* IBC CODE */
-  ibcHazard: string;
-  ibcShipType: string;
-  ibcTankType: string;
-  ibcDetection: string;
-  ibcFireFighting: string;
-  ibcMinRequirement: string;
-  /* EmS */
-  emsCode: string;
-  emsFire: string;
-  emsSpill: string;
-  emsFirstAid: string;
-  /* 화물적부도 코드 */
-  cargoCodes: Array<{ code: string; name: string; company: string; source: string }>;
-  /* 항구별 반입 */
-  portFrequency: Array<{ port: string; portCode: string; lastImport: string; frequency: string }>;
-}

frontend/src/common/utils/geo.ts

@@ -3,7 +3,7 @@ import type {
   BoomLineCoord,
   AlgorithmSettings,
   ContainmentResult,
-} from '../types/boomLine';
+} from '@/types/boomLine';
 
 const DEG2RAD = Math.PI / 180;
 const RAD2DEG = 180 / Math.PI;

frontend/src/common/utils/imageAnalysisSignal.ts

@@ -1,4 +1,4 @@
-import type { ImageAnalyzeResult } from '@tabs/prediction/services/predictionApi';
+import type { ImageAnalyzeResult } from '@interfaces/prediction/PredictionInterface';
 
 /**
  * 항공탐색(유출유면적분석) → 유출유 확산예측 탭 간 데이터 전달용 모듈 레벨 시그널.

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

@@ -69,7 +69,9 @@ export function AdminView() {
   return (
     <div className="flex flex-1 overflow-hidden bg-bg-base">
       <AdminSidebar activeMenu={activeMenu} onSelect={setActiveMenu} />
-      <div className="flex-1 flex flex-col overflow-hidden">{renderContent()}</div>
+      <div className="flex-1 flex flex-col overflow-hidden" key={activeMenu}>
+        {renderContent()}
+      </div>
     </div>
   );
 }

frontend/src/components/admin/components/AssetUploadPanel.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
-import { fetchUploadLogs } from '@tabs/assets/services/assetsApi';
+import { fetchUploadLogs } from '@components/assets/services/assetsApi';
-import type { UploadLogItem } from '@tabs/assets/services/assetsApi';
+import type { UploadLogItem } from '@interfaces/assets/AssetsInterface';
 
 const ASSET_CATEGORIES = [
   '전체',
@@ -20,29 +20,29 @@ const PERM_ITEMS = [
     icon: '👑',
     role: '시스템관리자',
     desc: '전체 자산 업로드/삭제 가능',
-    bg: 'rgba(245,158,11,0.15)',
+    bg: 'rgba(6,182,212,0.12)',
-    color: 'text-yellow-400',
+    color: 'text-color-accent',
   },
   {
     icon: '🔧',
     role: '운영관리자',
     desc: '관할청 내 자산 업로드 가능',
-    bg: 'rgba(6,182,212,0.15)',
+    bg: 'rgba(6,182,212,0.08)',
     color: 'text-color-accent',
   },
   {
     icon: '👁',
     role: '조회자',
     desc: '현황 조회만 가능',
-    bg: 'rgba(148,163,184,0.15)',
+    bg: 'rgba(6,182,212,0.08)',
     color: 'text-fg-sub',
   },
   {
     icon: '🚫',
     role: '게스트',
     desc: '접근 불가',
-    bg: 'rgba(239,68,68,0.1)',
+    bg: 'rgba(6,182,212,0.08)',
-    color: 'text-red-400',
+    color: 'text-fg-sub',
   },
 ];
 
@@ -102,7 +102,7 @@ function AssetUploadPanel() {
     <div className="flex flex-col h-full">
       {/* 헤더 */}
       <div className="px-6 py-4 border-b border-stroke flex-shrink-0">
-        <h1 className="text-lg font-bold text-fg font-korean">자산 현행화</h1>
+        <h1 className="text-title-1 font-bold text-fg font-korean">자산 현행화</h1>
         <p className="text-caption text-fg-disabled mt-1 font-korean">
           자산 데이터를 업로드하여 현행화합니다
         </p>
@@ -130,7 +130,7 @@ function AssetUploadPanel() {
                   className={`rounded-lg border-2 border-dashed py-8 text-center cursor-pointer transition-colors ${
                     dragging
                       ? 'border-color-accent bg-[rgba(6,182,212,0.05)]'
-                      : 'border-stroke hover:border-[rgba(6,182,212,0.5)] bg-bg-elevated'
+                      : 'border-stroke hover:border-[rgba(6,182,212,0.3)] bg-bg-elevated'
                   }`}
                 >
                   <div className="text-3xl mb-2 opacity-40">📁</div>

frontend/src/components/admin/components/BoardMgmtPanel.tsx

@@ -1,10 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
-import {
+import { fetchBoardPosts, adminDeleteBoardPost } from '@components/board/services/boardApi';
-  fetchBoardPosts,
+import type { BoardPostItem, BoardListResponse } from '@interfaces/board/BoardInterface';
-  adminDeleteBoardPost,
-  type BoardPostItem,
-  type BoardListResponse,
-} from '@tabs/board/services/boardApi';
 
 // ─── 상수 ──────────────────────────────────────────────────
 const PAGE_SIZE = 20;
@@ -118,13 +114,13 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* 헤더 */}
-      <div className="flex items-center justify-between px-5 py-3 border-b border-stroke-1">
+      <div className="flex items-center justify-between px-5 py-3 border-b border-stroke">
         <h2 className="text-body-2 font-semibold text-fg">게시판 관리</h2>
         <span className="text-caption text-fg-disabled">총 {data?.totalCount ?? 0}건</span>
       </div>
 
       {/* 카테고리 탭 + 검색 */}
-      <div className="flex items-center gap-3 px-5 py-2 border-b border-stroke-1">
+      <div className="flex items-center gap-3 px-5 py-2 border-b border-stroke">
         <div className="flex gap-1">
           {CATEGORY_TABS.map((tab) => (
             <button
@@ -132,7 +128,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
               onClick={() => handleCategoryChange(tab.code)}
               className={`px-3 py-1 text-caption rounded-full transition-colors ${
                 activeCategory === tab.code
-                  ? 'bg-blue-500/20 text-blue-400 font-medium'
+                  ? 'bg-[rgba(6,182,212,0.15)] text-color-accent font-medium'
                   : 'text-fg-disabled hover:text-fg-sub hover:bg-bg-elevated'
               }`}
             >
@@ -146,11 +142,11 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
             value={searchInput}
             onChange={(e) => setSearchInput(e.target.value)}
             placeholder="제목/작성자 검색"
-            className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke-1 text-fg placeholder:text-text-4 w-48"
+            className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-fg placeholder:text-text-4 w-48"
           />
           <button
             type="submit"
-            className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke-1 text-fg-sub hover:bg-bg-card"
+            className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-fg-sub hover:bg-bg-card"
           >
             검색
           </button>
@@ -158,11 +154,11 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
       </div>
 
       {/* 액션 바 */}
-      <div className="flex items-center gap-2 px-5 py-2 border-b border-stroke-1">
+      <div className="flex items-center gap-2 px-5 py-2 border-b border-stroke">
         <button
           onClick={handleDelete}
           disabled={selected.size === 0 || deleting}
-          className="px-3 py-1 text-caption rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 disabled:opacity-40 disabled:cursor-not-allowed"
+          className="px-3 py-1 text-caption rounded bg-[rgba(239,68,68,0.15)] text-color-danger hover:bg-[rgba(239,68,68,0.25)] disabled:opacity-40 disabled:cursor-not-allowed"
         >
           {deleting ? '삭제 중...' : `선택 삭제 (${selected.size})`}
         </button>
@@ -172,7 +168,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
       <div className="flex-1 overflow-auto">
         <table className="w-full text-caption">
           <thead className="sticky top-0 bg-bg-surface z-10">
-            <tr className="border-b border-stroke-1 text-fg-disabled">
+            <tr className="border-b border-stroke text-fg-disabled">
               <th className="w-8 py-2 text-center">
                 <input
                   type="checkbox"
@@ -218,7 +214,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
 
       {/* 페이지네이션 */}
       {totalPages > 1 && (
-        <div className="flex items-center justify-center gap-1 py-2 border-t border-stroke-1">
+        <div className="flex items-center justify-center gap-1 py-2 border-t border-stroke">
           <button
             onClick={() => setPage((p) => Math.max(1, p - 1))}
             disabled={page <= 1}
@@ -236,7 +232,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
                 onClick={() => setPage(p)}
                 className={`w-7 h-7 text-caption rounded ${
                   p === page
-                    ? 'bg-blue-500/20 text-blue-400 font-medium'
+                    ? 'bg-[rgba(6,182,212,0.15)] text-color-accent font-medium'
                     : 'text-fg-disabled hover:bg-bg-elevated'
                 }`}
               >
@@ -266,7 +262,7 @@ interface PostRowProps {
 
 function PostRow({ post, checked, onToggle }: PostRowProps) {
   return (
-    <tr className="border-b border-stroke-1 hover:bg-bg-surface/50 transition-colors">
+    <tr className="border-b border-stroke hover:bg-bg-surface/50 transition-colors">
       <td className="py-2 text-center">
         <input type="checkbox" checked={checked} onChange={onToggle} className="accent-blue-500" />
       </td>
@@ -275,17 +271,17 @@ function PostRow({ post, checked, onToggle }: PostRowProps) {
         <span
           className={`inline-block px-2 py-0.5 rounded-full text-caption font-medium ${
             post.categoryCd === 'NOTICE'
-              ? 'bg-red-500/15 text-red-400'
+              ? 'bg-[rgba(6,182,212,0.08)] text-fg-sub'
               : post.categoryCd === 'QNA'
-                ? 'bg-purple-500/15 text-purple-400'
+                ? 'bg-[rgba(6,182,212,0.08)] text-fg-sub'
-                : 'bg-blue-500/15 text-blue-400'
+                : 'bg-[rgba(6,182,212,0.08)] text-fg-sub'
           }`}
         >
           {CATEGORY_LABELS[post.categoryCd] ?? post.categoryCd}
         </span>
       </td>
       <td className="py-2 pl-3 text-fg truncate max-w-[300px]">
-        {post.pinnedYn === 'Y' && <span className="text-caption text-orange-400 mr-1">[고정]</span>}
+        {post.pinnedYn === 'Y' && <span className="text-caption text-color-accent mr-1">[고정]</span>}
         {post.title}
       </td>
       <td className="py-2 text-center text-fg-sub">{post.authorName}</td>

frontend/src/components/admin/components/CleanupEquipPanel.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect, useMemo } from 'react';
-import { fetchOrganizations } from '@tabs/assets/services/assetsApi';
+import { fetchOrganizations } from '@components/assets/services/assetsApi';
-import type { AssetOrgCompat } from '@tabs/assets/services/assetsApi';
+import type { AssetOrgCompat } from '@interfaces/assets/AssetsInterface';
-import { typeTagCls } from '@tabs/assets/components/assetTypes';
+import { typeTagCls } from '@components/assets/components/assetTypes';
+/* eslint-disable react-refresh/only-export-components */
 
 const PAGE_SIZE = 20;
 
@@ -98,7 +99,7 @@ function CleanupEquipPanel() {
       {/* 헤더 */}
       <div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
         <div>
-          <h1 className="text-lg font-bold text-fg font-korean">방제장비 현황</h1>
+          <h1 className="text-title-1 font-bold text-fg font-korean">방제장비 현황</h1>
           <p className="text-caption text-fg-disabled mt-1 font-korean">
             총 {filtered.length}개 기관
           </p>
@@ -341,16 +342,11 @@ function CleanupEquipPanel() {
               <button
                 key={p}
                 onClick={() => setCurrentPage(p)}
-                className="px-2.5 py-1 text-label-2 border rounded transition-colors"
+                className={`px-2.5 py-1 text-label-2 border rounded transition-colors ${
-                style={
                   p === safePage
-                    ? {
+                    ? 'border-color-accent text-color-accent bg-[rgba(6,182,212,0.08)]'
-                        borderColor: 'var(--color-accent)',
+                    : 'border-stroke text-fg-sub'
-                        color: 'var(--color-accent)',
+                }`}
-                        background: 'rgba(6,182,212,0.1)',
-                      }
-                    : { borderColor: 'var(--border)', color: 'var(--text-2)' }
-                }
               >
                 {p}
               </button>

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

@@ -176,9 +176,9 @@ function getCollectStatus(item: HrCollectItem): { label: string; color: string }
     return { label: '비활성', color: 'text-t3 bg-bg-elevated' };
   }
   if (item.etaClctList.length > 0) {
-    return { label: '완료', color: 'text-emerald-400 bg-emerald-500/10' };
+    return { label: '완료', color: 'text-color-success bg-[rgba(34,197,94,0.08)]' };
   }
-  return { label: '대기', color: 'text-yellow-400 bg-yellow-500/10' };
+  return { label: '대기', color: 'text-color-caution bg-[rgba(234,179,8,0.08)]' };
 }
 
 // ─── cron 표현식 → 읽기 쉬운 형태 ─────────────────────────
@@ -217,7 +217,7 @@ function HrTable({ rows, loading }: { rows: HrCollectItem[]; loading: boolean })
             {HEADERS.map((h) => (
               <th
                 key={h}
-                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+                className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
               >
                 {h}
               </th>
@@ -227,7 +227,7 @@ function HrTable({ rows, loading }: { rows: HrCollectItem[]; loading: boolean })
         <tbody>
           {loading && rows.length === 0
             ? Array.from({ length: 5 }).map((_, i) => (
-                <tr key={i} className="border-b border-stroke-1 animate-pulse">
+                <tr key={i} className="border-b border-stroke animate-pulse">
                   {HEADERS.map((_, j) => (
                     <td key={j} className="px-3 py-2">
                       <div className="h-3 bg-bg-elevated rounded w-14" />
@@ -240,7 +240,7 @@ function HrTable({ rows, loading }: { rows: HrCollectItem[]; loading: boolean })
                 return (
                   <tr
                     key={`${row.seq}`}
-                    className="border-b border-stroke-1 hover:bg-bg-surface/50"
+                    className="border-b border-stroke hover:bg-bg-surface/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">
@@ -258,7 +258,7 @@ function HrTable({ rows, loading }: { rows: HrCollectItem[]; loading: boolean })
                       <span
                         className={`inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${
                           row.activeYn === 'Y'
-                            ? 'text-emerald-400 bg-emerald-500/10'
+                            ? 'text-color-success bg-[rgba(34,197,94,0.08)]'
                             : 'text-t3 bg-bg-elevated'
                         }`}
                       >
@@ -316,7 +316,7 @@ export default function CollectHrPanel() {
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* 헤더 */}
-      <div className="flex items-center justify-between px-5 py-3 border-b border-stroke-1 shrink-0">
+      <div className="flex items-center justify-between px-5 py-3 border-b border-stroke shrink-0">
         <h2 className="text-body-2 font-semibold text-t1">인사정보 수집 현황</h2>
         <div className="flex items-center gap-3">
           {lastUpdate && (
@@ -353,9 +353,9 @@ export default function CollectHrPanel() {
       </div>
 
       {/* 상태 표시줄 */}
-      <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke-1 bg-bg-base">
+      <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke bg-bg-base">
-        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-emerald-500/10 text-emerald-400">
+        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(34,197,94,0.08)] text-color-success">
-          <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+          <span className="w-1.5 h-1.5 rounded-full bg-color-success" />
           수집 완료 {completedCount}건
         </span>
         <span className="text-caption text-t3">

frontend/src/components/admin/components/DeidentifyPanel.tsx

@@ -0,0 +1,567 @@
+import { useState, useEffect, useCallback } from 'react';
+import { TaskTable } from './contents/TaskTable';
+import { AuditLogModal } from './contents/AuditLogModal';
+import { WizardModal } from './contents/WizardModal';
+/* eslint-disable react-refresh/only-export-components */
+
+// ─── 타입 ──────────────────────────────────────────────────
+
+export type TaskStatus = '완료' | '진행중' | '대기' | '오류';
+
+export interface AuditLogEntry {
+  id: string;
+  time: string;
+  operator: string;
+  operatorId: string;
+  action: string;
+  targetData: string;
+  result: string;
+  resultType: '성공' | '실패' | '거부' | '진행중';
+  ip: string;
+  browser: string;
+  detail: {
+    dataCount: number;
+    rulesApplied: string;
+    processedCount: number;
+    errorCount: number;
+  };
+}
+
+export interface DeidentifyTask {
+  id: string;
+  name: string;
+  target: string;
+  status: TaskStatus;
+  startTime: string;
+  progress: number;
+  createdBy: string;
+}
+
+export type SourceType = 'db' | 'file' | 'api';
+export type ProcessMode = 'immediate' | 'scheduled' | 'oneshot';
+export type RepeatType = 'daily' | 'weekly' | 'monthly';
+export type DeidentifyTechnique = '마스킹' | '삭제' | '범주화' | '암호화' | '샘플링' | '가명처리' | '유지';
+
+export interface FieldConfig {
+  name: string;
+  dataType: string;
+  technique: DeidentifyTechnique;
+  configValue: string;
+  selected: boolean;
+}
+
+export interface DbConfig {
+  host: string;
+  port: string;
+  database: string;
+  tableName: string;
+}
+
+export interface ApiConfig {
+  url: string;
+  method: 'GET' | 'POST';
+}
+
+export interface ScheduleConfig {
+  hour: string;
+  repeatType: RepeatType;
+  weekday: string;
+  startDate: string;
+  notifyOnComplete: boolean;
+  notifyOnError: boolean;
+}
+
+export interface OneshotConfig {
+  date: string;
+  hour: string;
+}
+
+export interface WizardState {
+  step: number;
+  taskName: string;
+  sourceType: SourceType;
+  dbConfig: DbConfig;
+  apiConfig: ApiConfig;
+  fields: FieldConfig[];
+  processMode: ProcessMode;
+  scheduleConfig: ScheduleConfig;
+  oneshotConfig: OneshotConfig;
+  saveAsTemplate: boolean;
+  applyTemplate: string;
+  confirmed: boolean;
+}
+
+// ─── Mock 데이터 ────────────────────────────────────────────
+
+export const MOCK_TASKS: DeidentifyTask[] = [
+  {
+    id: '001',
+    name: 'customer_2024',
+    target: '선박/운항 - 선장·선원 성명',
+    status: '완료',
+    startTime: '2026-04-10 14:30',
+    progress: 100,
+    createdBy: '관리자',
+  },
+  {
+    id: '002',
+    name: 'transaction_04',
+    target: '사고 현장 - 현장사진, 영상내 인물',
+    status: '진행중',
+    startTime: '2026-04-10 14:15',
+    progress: 82,
+    createdBy: '김담당',
+  },
+  {
+    id: '003',
+    name: 'employee_info',
+    target: '인사정보 - 계정, 로그인 정보',
+    status: '대기',
+    startTime: '2026-04-10 22:00',
+    progress: 0,
+    createdBy: '이담당',
+  },
+  {
+    id: '004',
+    name: 'vendor_data',
+    target: 'HNS 대응 - 화학물질 취급자, 방제업체 연락처',
+    status: '오류',
+    startTime: '2026-04-09 13:45',
+    progress: 45,
+    createdBy: '관리자',
+  },
+  {
+    id: '005',
+    name: 'partner_contacts',
+    target: '시스템 운영 - 관리자, 운영자 접속로그',
+    status: '완료',
+    startTime: '2026-04-08 09:00',
+    progress: 100,
+    createdBy: '박담당',
+  },
+];
+
+export const DEFAULT_FIELDS: FieldConfig[] = [
+  { name: '고객ID', dataType: '문자열', technique: '삭제', configValue: '-', selected: true },
+  {
+    name: '이름',
+    dataType: '문자열',
+    technique: '마스킹',
+    configValue: '*로 치환',
+    selected: true,
+  },
+  {
+    name: '휴대폰',
+    dataType: '문자열',
+    technique: '마스킹',
+    configValue: '010-****-****',
+    selected: true,
+  },
+  {
+    name: '주소',
+    dataType: '문자열',
+    technique: '범주화',
+    configValue: '시/도만 표시',
+    selected: true,
+  },
+  {
+    name: '이메일',
+    dataType: '문자열',
+    technique: '가명처리',
+    configValue: '키: random_001',
+    selected: true,
+  },
+  {
+    name: '생년월일',
+    dataType: '날짜',
+    technique: '범주화',
+    configValue: '연도만 표시',
+    selected: true,
+  },
+  { name: '회사', dataType: '문자열', technique: '유지', configValue: '변경 없음', selected: true },
+];
+
+export const TECHNIQUES: DeidentifyTechnique[] = [
+  '마스킹',
+  '삭제',
+  '범주화',
+  '암호화',
+  '샘플링',
+  '가명처리',
+  '유지',
+];
+
+export const HOURS = Array.from({ length: 24 }, (_, i) => `${String(i).padStart(2, '0')}:00`);
+
+export const WEEKDAYS = ['월', '화', '수', '목', '금', '토', '일'];
+
+export const TEMPLATES = ['기본 개인정보', '금융데이터', '의료데이터'];
+
+export const MOCK_AUDIT_LOGS: Record<string, AuditLogEntry[]> = {
+  '001': [
+    {
+      id: 'LOG_20260410_001',
+      time: '2026-04-10 14:30:45',
+      operator: '김철수',
+      operatorId: 'user_12345',
+      action: '처리완료',
+      targetData: 'customer_2024',
+      result: '성공 (100%)',
+      resultType: '성공',
+      ip: '192.168.1.100',
+      browser: 'Chrome 123.0',
+      detail: {
+        dataCount: 15240,
+        rulesApplied: '마스킹 3, 범주화 2, 삭제 2',
+        processedCount: 15240,
+        errorCount: 0,
+      },
+    },
+    {
+      id: 'LOG_20260410_002',
+      time: '2026-04-10 14:15:10',
+      operator: '김철수',
+      operatorId: 'user_12345',
+      action: '처리시작',
+      targetData: 'customer_2024',
+      result: '성공',
+      resultType: '성공',
+      ip: '192.168.1.100',
+      browser: 'Chrome 123.0',
+      detail: {
+        dataCount: 15240,
+        rulesApplied: '마스킹 3, 범주화 2, 삭제 2',
+        processedCount: 0,
+        errorCount: 0,
+      },
+    },
+    {
+      id: 'LOG_20260410_003',
+      time: '2026-04-10 14:10:30',
+      operator: '김철수',
+      operatorId: 'user_12345',
+      action: '규칙설정',
+      targetData: 'customer_2024',
+      result: '성공',
+      resultType: '성공',
+      ip: '192.168.1.100',
+      browser: 'Chrome 123.0',
+      detail: { dataCount: 15240, rulesApplied: '7개 규칙 적용', processedCount: 0, errorCount: 0 },
+    },
+  ],
+  '002': [
+    {
+      id: 'LOG_20260410_004',
+      time: '2026-04-10 14:15:22',
+      operator: '이영희',
+      operatorId: 'user_23456',
+      action: '처리시작',
+      targetData: 'transaction_04',
+      result: '진행중 (82%)',
+      resultType: '진행중',
+      ip: '192.168.1.101',
+      browser: 'Firefox 124.0',
+      detail: {
+        dataCount: 8920,
+        rulesApplied: '마스킹 2, 암호화 1, 삭제 3',
+        processedCount: 7314,
+        errorCount: 0,
+      },
+    },
+  ],
+  '003': [
+    {
+      id: 'LOG_20260410_005',
+      time: '2026-04-10 13:45:30',
+      operator: '박민준',
+      operatorId: 'user_34567',
+      action: '규칙수정',
+      targetData: 'employee_info',
+      result: '성공',
+      resultType: '성공',
+      ip: '192.168.1.102',
+      browser: 'Chrome 123.0',
+      detail: {
+        dataCount: 3200,
+        rulesApplied: '마스킹 4, 가명처리 1',
+        processedCount: 0,
+        errorCount: 0,
+      },
+    },
+  ],
+  '004': [
+    {
+      id: 'LOG_20260409_001',
+      time: '2026-04-09 13:45:30',
+      operator: '관리자',
+      operatorId: 'user_admin',
+      action: '처리오류',
+      targetData: 'vendor_data',
+      result: '오류 (45%)',
+      resultType: '실패',
+      ip: '192.168.1.100',
+      browser: 'Chrome 123.0',
+      detail: {
+        dataCount: 5100,
+        rulesApplied: '마스킹 2, 범주화 1, 삭제 1',
+        processedCount: 2295,
+        errorCount: 12,
+      },
+    },
+    {
+      id: 'LOG_20260409_002',
+      time: '2026-04-09 13:40:15',
+      operator: '김철수',
+      operatorId: 'user_12345',
+      action: '규칙조회',
+      targetData: 'vendor_data',
+      result: '성공',
+      resultType: '성공',
+      ip: '192.168.1.100',
+      browser: 'Chrome 123.0',
+      detail: { dataCount: 5100, rulesApplied: '4개 규칙', processedCount: 0, errorCount: 0 },
+    },
+    {
+      id: 'LOG_20260409_003',
+      time: '2026-04-09 09:25:00',
+      operator: '이영희',
+      operatorId: 'user_23456',
+      action: '삭제시도',
+      targetData: 'vendor_data',
+      result: '거부 (권한부족)',
+      resultType: '거부',
+      ip: '192.168.1.101',
+      browser: 'Firefox 124.0',
+      detail: { dataCount: 5100, rulesApplied: '-', processedCount: 0, errorCount: 0 },
+    },
+  ],
+  '005': [
+    {
+      id: 'LOG_20260408_001',
+      time: '2026-04-08 09:15:00',
+      operator: '박담당',
+      operatorId: 'user_45678',
+      action: '처리완료',
+      targetData: 'partner_contacts',
+      result: '성공 (100%)',
+      resultType: '성공',
+      ip: '192.168.1.103',
+      browser: 'Edge 122.0',
+      detail: {
+        dataCount: 1850,
+        rulesApplied: '마스킹 2, 유지 3',
+        processedCount: 1850,
+        errorCount: 0,
+      },
+    },
+  ],
+};
+
+function fetchTasks(): Promise<DeidentifyTask[]> {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(MOCK_TASKS), 300);
+  });
+}
+
+// ─── 상태 뱃지 ─────────────────────────────────────────────
+
+export function getStatusBadgeClass(status: TaskStatus): string {
+  switch (status) {
+    case '완료':
+      return 'text-color-success bg-[rgba(34,197,94,0.1)]';
+    case '진행중':
+      return 'text-color-accent bg-[rgba(6,182,212,0.1)]';
+    case '대기':
+      return 'text-color-caution bg-[rgba(234,179,8,0.1)]';
+    case '오류':
+      return 'text-color-danger bg-[rgba(239,68,68,0.1)]';
+  }
+}
+
+// ─── 진행률 바 ─────────────────────────────────────────────
+
+export const TABLE_HEADERS = ['작업ID', '작업명', '대상', '상태', '시작시간', '진행률', '등록자', '액션'];
+
+export const STEP_LABELS = ['소스선택', '데이터검증', '비식별화규칙', '처리방식', '최종확인'];
+
+export const INITIAL_WIZARD: WizardState = {
+  step: 1,
+  taskName: '',
+  sourceType: 'db',
+  dbConfig: { host: '', port: '5432', database: '', tableName: '' },
+  apiConfig: { url: '', method: 'GET' },
+  fields: DEFAULT_FIELDS,
+  processMode: 'immediate',
+  scheduleConfig: {
+    hour: '02:00',
+    repeatType: 'daily',
+    weekday: '월',
+    startDate: '',
+    notifyOnComplete: true,
+    notifyOnError: true,
+  },
+  oneshotConfig: { date: '', hour: '02:00' },
+  saveAsTemplate: false,
+  applyTemplate: '',
+  confirmed: false,
+};
+
+// ─── 메인 패널 ──────────────────────────────────────────────
+
+type FilterStatus = '모두' | TaskStatus;
+
+export default function DeidentifyPanel() {
+  const [tasks, setTasks] = useState<DeidentifyTask[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [showWizard, setShowWizard] = useState(false);
+  const [auditTask, setAuditTask] = useState<DeidentifyTask | null>(null);
+  const [searchName, setSearchName] = useState('');
+  const [filterStatus, setFilterStatus] = useState<FilterStatus>('모두');
+  const [filterPeriod, setFilterPeriod] = useState<'7' | '30' | '90'>('30');
+
+  const loadTasks = useCallback(async () => {
+    setLoading(true);
+    const data = await fetchTasks();
+    setTasks(data);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    let isMounted = true;
+    if (tasks.length === 0) {
+      void Promise.resolve().then(() => {
+        if (isMounted) void loadTasks();
+      });
+    }
+    return () => {
+      isMounted = false;
+    };
+  }, [tasks.length, loadTasks]);
+
+  const handleAction = useCallback((action: string, task: DeidentifyTask) => {
+    // TODO: 실제 API 연동 시 각 액션에 맞는 API 호출로 교체
+    if (action === 'delete') {
+      setTasks((prev) => prev.filter((t) => t.id !== task.id));
+    } else if (action === 'audit') {
+      setAuditTask(task);
+    }
+  }, []);
+
+  const handleWizardSubmit = useCallback(
+    (wizard: WizardState) => {
+      const selectedFields = wizard.fields.filter((f) => f.selected).map((f) => f.name);
+      const newTask: DeidentifyTask = {
+        id: String(tasks.length + 1).padStart(3, '0'),
+        name: wizard.taskName,
+        target: selectedFields.join(', ') || '-',
+        status: wizard.processMode === 'immediate' ? '진행중' : '대기',
+        startTime: new Date()
+          .toLocaleString('ko-KR', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+          })
+          .replace(/\. /g, '-')
+          .replace('.', ''),
+        progress: 0,
+        createdBy: '관리자',
+      };
+      setTasks((prev) => [newTask, ...prev]);
+    },
+    [tasks.length],
+  );
+
+  const filteredTasks = tasks.filter((t) => {
+    if (searchName && !t.name.includes(searchName)) return false;
+    if (filterStatus !== '모두' && t.status !== filterStatus) return false;
+    return true;
+  });
+
+  const completedCount = tasks.filter((t) => t.status === '완료').length;
+  const inProgressCount = tasks.filter((t) => t.status === '진행중').length;
+  const errorCount = tasks.filter((t) => t.status === '오류').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-stroke shrink-0">
+        <h2 className="text-body-2 font-semibold text-t1">비식별화조치</h2>
+        <button
+          onClick={() => setShowWizard(true)}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-caption rounded bg-color-accent hover:bg-color-accent-muted text-white transition-colors"
+        >
+          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+          </svg>
+          새 작업
+        </button>
+      </div>
+
+      {/* 상태 요약 */}
+      <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke bg-bg-base">
+        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(34,197,94,0.1)] text-color-success">
+          <span className="w-1.5 h-1.5 rounded-full bg-color-success" />
+          완료 {completedCount}건
+        </span>
+        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(6,182,212,0.1)] text-color-accent">
+          <span className="w-1.5 h-1.5 rounded-full bg-color-accent" />
+          진행중 {inProgressCount}건
+        </span>
+        {errorCount > 0 && (
+          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(239,68,68,0.1)] text-color-danger">
+            <span className="w-1.5 h-1.5 rounded-full bg-color-danger" />
+            오류 {errorCount}건
+          </span>
+        )}
+        <span className="text-caption text-t3">전체 {tasks.length}건</span>
+      </div>
+
+      {/* 검색/필터 */}
+      <div className="flex items-center gap-2 px-5 py-2.5 shrink-0 border-b border-stroke">
+        <input
+          type="text"
+          value={searchName}
+          onChange={(e) => setSearchName(e.target.value)}
+          placeholder="작업명 검색"
+          className="px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 placeholder:text-t3 focus:outline-none focus:border-color-accent w-40"
+        />
+        <select
+          value={filterStatus}
+          onChange={(e) => setFilterStatus(e.target.value as FilterStatus)}
+          className="px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
+        >
+          {(['모두', '완료', '진행중', '대기', '오류'] as FilterStatus[]).map((s) => (
+            <option key={s} value={s}>
+              {s}
+            </option>
+          ))}
+        </select>
+        <select
+          value={filterPeriod}
+          onChange={(e) => setFilterPeriod(e.target.value as '7' | '30' | '90')}
+          className="px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
+        >
+          <option value="7">최근 7일</option>
+          <option value="30">최근 30일</option>
+          <option value="90">최근 90일</option>
+        </select>
+      </div>
+
+      {/* 테이블 */}
+      <div className="flex-1 overflow-auto p-5">
+        <TaskTable rows={filteredTasks} loading={loading} onAction={handleAction} />
+      </div>
+
+      {/* 감사로그 모달 */}
+      {auditTask && <AuditLogModal task={auditTask} onClose={() => setAuditTask(null)} />}
+
+      {/* 마법사 모달 */}
+      {showWizard && (
+        <WizardModal onClose={() => setShowWizard(false)} onSubmit={handleWizardSubmit} />
+      )}
+    </div>
+  );
+}

frontend/src/components/admin/components/DispersingZonePanel.tsx

@@ -5,7 +5,7 @@ import { GeoJsonLayer } from '@deck.gl/layers';
 import type { Layer } from '@deck.gl/core';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle';
-import { S57EncOverlay } from '@common/components/map/S57EncOverlay';
+import { S57EncOverlay } from '@components/common/map/S57EncOverlay';
 import { useMapStore } from '@common/store/mapStore';
 
 const MAP_CENTER: [number, number] = [127.5, 36.0];
@@ -119,7 +119,7 @@ const DispersingZonePanel = () => {
     const isConsider = zone === 'consider';
     const showLayer = isConsider ? showConsider : showRestrict;
     const setShowLayer = isConsider ? setShowConsider : setShowRestrict;
-    const swatchColor = isConsider ? 'bg-blue-500' : 'bg-red-500';
+    const swatchColor = isConsider ? 'bg-color-info' : 'bg-color-danger';
     const isExpanded = expandedZone === zone;
 
     return (
@@ -197,11 +197,11 @@ const DispersingZonePanel = () => {
         {/* 범례 */}
         <div className="absolute bottom-4 left-4 bg-bg-surface border border-stroke rounded-lg px-3 py-2 flex flex-col gap-1.5">
           <div className="flex items-center gap-2">
-            <span className="w-3 h-3 rounded-sm bg-blue-500 opacity-80" />
+            <span className="w-3 h-3 rounded-sm bg-color-info opacity-80" />
             <span className="text-label-2 text-fg-sub font-korean">사용고려해역</span>
           </div>
           <div className="flex items-center gap-2">
-            <span className="w-3 h-3 rounded-sm bg-red-500 opacity-80" />
+            <span className="w-3 h-3 rounded-sm bg-color-danger opacity-80" />
             <span className="text-label-2 text-fg-sub font-korean">사용제한해역</span>
           </div>
         </div>

frontend/src/components/admin/components/LayerPanel.tsx

@@ -229,7 +229,7 @@ const LayerFormModal = ({ mode, initialData, onClose, onSaved }: LayerFormModalP
             {/* 레이어코드 */}
             <div>
               <label className={labelCls}>
-                레이어코드 <span className="text-red-400">*</span>
+                레이어코드 <span className="text-color-danger">*</span>
               </label>
               <input
                 type="text"
@@ -243,7 +243,7 @@ const LayerFormModal = ({ mode, initialData, onClose, onSaved }: LayerFormModalP
             {/* 레이어명 */}
             <div>
               <label className={labelCls}>
-                레이어명 <span className="text-red-400">*</span>
+                레이어명 <span className="text-color-danger">*</span>
               </label>
               <input
                 type="text"
@@ -261,7 +261,7 @@ const LayerFormModal = ({ mode, initialData, onClose, onSaved }: LayerFormModalP
             {/* 레이어전체명 */}
             <div>
               <label className={labelCls}>
-                레이어전체명 <span className="text-red-400">*</span>
+                레이어전체명 <span className="text-color-danger">*</span>
               </label>
               <input
                 type="text"
@@ -321,7 +321,7 @@ const LayerFormModal = ({ mode, initialData, onClose, onSaved }: LayerFormModalP
           {/* 에러 */}
           {formError && (
             <div className="px-6 pb-2">
-              <p className="text-label-2 text-red-400 font-korean">{formError}</p>
+              <p className="text-label-2 text-color-danger font-korean">{formError}</p>
             </div>
           )}
           {/* 버튼 */}
@@ -448,7 +448,7 @@ const LayerPanel = () => {
       <div className="px-6 py-4 border-b border-stroke shrink-0">
         <div className="flex items-center justify-between mb-3">
           <div>
-            <h1 className="text-lg font-bold text-fg font-korean">레이어 관리</h1>
+            <h1 className="text-title-1 font-bold text-fg font-korean">레이어 관리</h1>
             <p className="text-caption text-fg-disabled mt-1 font-korean">총 {total}개</p>
           </div>
           <button
@@ -487,7 +487,7 @@ const LayerPanel = () => {
 
       {/* 오류 메시지 */}
       {error && (
-        <div className="px-6 py-2 text-caption text-red-400 bg-[rgba(239,68,68,0.05)] border-b border-stroke shrink-0 font-korean">
+        <div className="px-6 py-2 text-caption text-color-danger bg-[rgba(239,68,68,0.08)] border-b border-stroke shrink-0 font-korean">
           {error}
         </div>
       )}
@@ -598,7 +598,7 @@ const LayerPanel = () => {
                           item.useYn === 'Y' && item.parentUseYn !== 'N'
                             ? 'bg-color-accent'
                             : item.useYn === 'Y' && item.parentUseYn === 'N'
-                              ? 'bg-[rgba(6,182,212,0.4)]'
+                              ? 'bg-[rgba(6,182,212,0.3)]'
                               : 'bg-[rgba(255,255,255,0.08)] border border-stroke'
                         }`}
                       >
@@ -620,7 +620,7 @@ const LayerPanel = () => {
                         </button>
                         <button
                           onClick={() => handleDelete(item.layerCd)}
-                          className="px-3 py-1 text-caption rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 font-korean whitespace-nowrap"
+                          className="px-3 py-1 text-caption rounded bg-[rgba(239,68,68,0.15)] text-color-danger hover:bg-[rgba(239,68,68,0.25)] font-korean whitespace-nowrap"
                         >
                           삭제
                         </button>

frontend/src/components/admin/components/MapBasePanel.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { api } from '@common/services/api';
 import { useMapStore } from '@common/store/mapStore';
+/* eslint-disable react-refresh/only-export-components */
 
 // ─── 타입 ─────────────────────────────────────────────────
 interface MapBaseItem {
@@ -101,7 +102,7 @@ function MapBaseModal({
             {/* 지도 이름 */}
             <div>
               <label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
-                지도 이름 <span className="text-red-400">*</span>
+                지도 이름 <span className="text-color-danger">*</span>
               </label>
               <input
                 type="text"
@@ -115,7 +116,7 @@ function MapBaseModal({
             {/* 지도 키 */}
             <div>
               <label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
-                지도 키 <span className="text-red-400">*</span>
+                지도 키 <span className="text-color-danger">*</span>
               </label>
               <input
                 type="text"
@@ -184,7 +185,7 @@ function MapBaseModal({
                   type="button"
                   onClick={() => setField('useYn', form.useYn === 'Y' ? 'N' : 'Y')}
                   className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                    form.useYn === 'Y' ? 'bg-color-accent' : 'bg-border'
+                    form.useYn === 'Y' ? 'bg-color-accent' : 'bg-bg-elevated'
                   }`}
                 >
                   <span
@@ -200,7 +201,7 @@ function MapBaseModal({
             </div>
 
             {/* 에러 */}
-            {modalError && <p className="text-label-2 text-red-400 font-korean">{modalError}</p>}
+            {modalError && <p className="text-label-2 text-color-danger font-korean">{modalError}</p>}
           </div>
 
           {/* 모달 푸터 */}
@@ -349,7 +350,7 @@ function MapBasePanel() {
       {/* 헤더 */}
       <div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
         <div>
-          <h1 className="text-lg font-bold text-fg font-korean">지도 관리</h1>
+          <h1 className="text-title-1 font-bold text-fg font-korean">지도 관리</h1>
           <p className="text-caption text-fg-disabled mt-1 font-korean">총 {total}건</p>
         </div>
         <button
@@ -365,8 +366,8 @@ function MapBasePanel() {
         <div
           className={`mx-6 mt-2 px-3 py-2 text-label-2 rounded-md font-korean ${
             message.type === 'success'
-              ? 'text-green-400 bg-[rgba(74,222,128,0.08)] border border-[rgba(74,222,128,0.2)]'
+              ? 'text-color-success bg-[rgba(34,197,94,0.08)] border border-[rgba(34,197,94,0.2)]'
-              : 'text-red-400 bg-[rgba(239,68,68,0.08)] border border-[rgba(239,68,68,0.2)]'
+              : 'text-color-danger bg-[rgba(239,68,68,0.08)] border border-[rgba(239,68,68,0.2)]'
           }`}
         >
           {message.text}
@@ -419,7 +420,7 @@ function MapBasePanel() {
                       <button
                         type="button"
                         className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
-                          item.useYn === 'Y' ? 'bg-color-accent' : 'bg-border'
+                          item.useYn === 'Y' ? 'bg-color-accent' : 'bg-bg-elevated'
                         }`}
                       >
                         <span
@@ -441,7 +442,7 @@ function MapBasePanel() {
                   <td className="py-3 text-center">
                     <button
                       onClick={() => handleDelete(item)}
-                      className="px-3 py-1 text-caption rounded bg-red-500/20 text-red-400 hover:bg-red-500/30"
+                      className="px-3 py-1 text-caption rounded bg-[rgba(239,68,68,0.15)] text-color-danger hover:bg-[rgba(239,68,68,0.25)]"
                     >
                       삭제
                     </button>
@@ -478,7 +479,7 @@ function MapBasePanel() {
                 onClick={() => setPage(p)}
                 className={`w-7 h-7 text-caption rounded ${
                   p === page
-                    ? 'bg-blue-500/20 text-blue-400 font-medium'
+                    ? 'bg-[rgba(6,182,212,0.15)] text-color-accent font-medium'
                     : 'text-fg-disabled hover:bg-bg-elevated'
                 }`}
               >

frontend/src/components/admin/components/MenusPanel.tsx

@@ -135,7 +135,7 @@ function MenusPanel() {
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
         <div>
-          <h1 className="text-lg font-bold text-fg font-korean">메뉴 관리</h1>
+          <h1 className="text-title-1 font-bold text-fg font-korean">메뉴 관리</h1>
           <p className="text-caption text-fg-disabled mt-1 font-korean">
             메뉴 표시 여부, 순서, 라벨, 아이콘을 관리합니다
           </p>

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

@@ -45,19 +45,19 @@ function formatTime(iso: string | null): string {
 
 function StatusCell({ row }: { row: NumericalDataStatus }) {
   if (row.lastStatus === 'COMPLETED') {
-    return <span className="text-emerald-400 text-caption">정상</span>;
+    return <span className="text-color-success text-caption">정상</span>;
   }
   if (row.lastStatus === 'FAILED') {
     return (
-      <span className="text-red-400 text-caption">
+      <span className="text-color-danger text-caption">
         오류{row.consecutiveFailures > 0 ? ` (${row.consecutiveFailures}회 연속)` : ''}
       </span>
     );
   }
   if (row.lastStatus === 'STARTED') {
     return (
-      <span className="inline-flex items-center gap-1 text-cyan-400 text-caption">
+      <span className="inline-flex items-center gap-1 text-color-accent text-caption">
-        <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
+        <span className="w-1.5 h-1.5 rounded-full bg-color-accent animate-pulse" />
         실행 중
       </span>
     );
@@ -77,30 +77,30 @@ function StatusBadge({
   if (loading) {
     return (
       <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-bg-elevated text-t2">
-        <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
+        <span className="w-1.5 h-1.5 rounded-full bg-color-accent animate-pulse" />
         조회 중...
       </span>
     );
   }
   if (errorCount === total && total > 0) {
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-red-500/10 text-red-400">
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(239,68,68,0.08)] text-color-danger">
-        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />
+        <span className="w-1.5 h-1.5 rounded-full bg-color-danger" />
         연계 오류
       </span>
     );
   }
   if (errorCount > 0) {
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-yellow-500/10 text-yellow-400">
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(234,179,8,0.08)] text-color-caution">
-        <span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
+        <span className="w-1.5 h-1.5 rounded-full bg-color-caution" />
         일부 오류 ({errorCount}/{total})
       </span>
     );
   }
   return (
-    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-emerald-500/10 text-emerald-400">
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(34,197,94,0.08)] text-color-success">
-      <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+      <span className="w-1.5 h-1.5 rounded-full bg-color-success" />
       정상
     </span>
   );
@@ -124,7 +124,7 @@ function ForecastTable({ rows, loading }: { rows: NumericalDataStatus[]; loading
             {TABLE_HEADERS.map((h) => (
               <th
                 key={h}
-                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+                className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
               >
                 {h}
               </th>
@@ -134,7 +134,7 @@ function ForecastTable({ rows, loading }: { rows: NumericalDataStatus[]; loading
         <tbody>
           {loading && rows.length === 0
             ? Array.from({ length: 6 }).map((_, i) => (
-                <tr key={i} className="border-b border-stroke-1 animate-pulse">
+                <tr key={i} className="border-b border-stroke animate-pulse">
                   {TABLE_HEADERS.map((_, j) => (
                     <td key={j} className="px-3 py-2">
                       <div className="h-3 bg-bg-elevated rounded w-16" />
@@ -143,7 +143,7 @@ function ForecastTable({ rows, loading }: { rows: NumericalDataStatus[]; loading
                 </tr>
               ))
             : rows.map((row) => (
-                <tr key={row.jobName} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                <tr key={row.jobName} className="border-b border-stroke hover:bg-bg-surface/50">
                   <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
                     {row.modelName}
                   </td>
@@ -192,7 +192,7 @@ export default function MonitorForecastPanel() {
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* 헤더 */}
-      <div className="flex items-center justify-between px-5 py-3 border-b border-stroke-1 shrink-0">
+      <div className="flex items-center justify-between px-5 py-3 border-b border-stroke shrink-0">
         <h2 className="text-body-2 font-semibold text-t1">수치예측자료 모니터링</h2>
         <div className="flex items-center gap-3">
           {lastUpdate && (
@@ -229,14 +229,14 @@ export default function MonitorForecastPanel() {
       </div>
 
       {/* 탭 */}
-      <div className="flex gap-0 border-b border-stroke-1 shrink-0 px-5">
+      <div className="flex gap-0 border-b border-stroke shrink-0 px-5">
         {TABS.map((tab) => (
           <button
             key={tab.id}
             onClick={() => setActiveTab(tab.id)}
             className={`px-4 py-2.5 text-caption font-medium border-b-2 transition-colors ${
               activeTab === tab.id
-                ? 'border-cyan-400 text-cyan-400'
+                ? 'border-color-accent text-color-accent'
                 : 'border-transparent text-t3 hover:text-t2'
             }`}
           >
@@ -246,7 +246,7 @@ export default function MonitorForecastPanel() {
       </div>
 
       {/* 상태 표시줄 */}
-      <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke-1 bg-bg-base">
+      <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke bg-bg-base">
         <StatusBadge loading={loading} errorCount={errorCount} total={totalCount} />
         {!loading && totalCount > 0 && (
           <span className="text-caption text-t3">모델 {totalCount}개</span>

frontend/src/components/admin/components/MonitorRealtimePanel.tsx

@@ -1,18 +1,17 @@
 import { useState, useEffect, useCallback } from 'react';
-import {
+import { getRecentObservation, OBS_STATION_CODES } from '@components/weather/services/khoaApi';
-  getRecentObservation,
-  OBS_STATION_CODES,
-  type RecentObservation,
-} from '@tabs/weather/services/khoaApi';
 import {
   getUltraShortForecast,
   getMarineForecast,
   convertToGridCoords,
   getCurrentBaseDateTime,
   MARINE_REGIONS,
-  type WeatherForecastData,
+} from '@components/weather/services/weatherApi';
-  type MarineWeatherData,
+import type {
-} from '@tabs/weather/services/weatherApi';
+  RecentObservation,
+  WeatherForecastData,
+  MarineWeatherData,
+} from '@interfaces/weather/WeatherInterface';
 
 const KEY_TO_NAME: Record<string, string> = {
   incheon: '인천',
@@ -85,30 +84,30 @@ function StatusBadge({
   if (loading) {
     return (
       <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-bg-elevated text-t2">
-        <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
+        <span className="w-1.5 h-1.5 rounded-full bg-color-accent animate-pulse" />
         조회 중...
       </span>
     );
   }
   if (errorCount === total) {
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-red-500/10 text-red-400">
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(239,68,68,0.08)] text-color-danger">
-        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />
+        <span className="w-1.5 h-1.5 rounded-full bg-color-danger" />
         연계 오류
       </span>
     );
   }
   if (errorCount > 0) {
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-yellow-500/10 text-yellow-400">
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(234,179,8,0.08)] text-color-caution">
-        <span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
+        <span className="w-1.5 h-1.5 rounded-full bg-color-caution" />
         일부 오류 ({errorCount}/{total})
       </span>
     );
   }
   return (
-    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-emerald-500/10 text-emerald-400">
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(34,197,94,0.08)] text-color-success">
-      <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+      <span className="w-1.5 h-1.5 rounded-full bg-color-success" />
       정상
     </span>
   );
@@ -136,7 +135,7 @@ function KhoaTable({ rows, loading }: { rows: KhoaRow[]; loading: boolean }) {
             {headers.map((h) => (
               <th
                 key={h}
-                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+                className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
               >
                 {h}
               </th>
@@ -146,7 +145,7 @@ function KhoaTable({ rows, loading }: { rows: KhoaRow[]; loading: boolean }) {
         <tbody>
           {loading && rows.length === 0
             ? Array.from({ length: 5 }).map((_, i) => (
-                <tr key={i} className="border-b border-stroke-1 animate-pulse">
+                <tr key={i} className="border-b border-stroke animate-pulse">
                   {headers.map((_, j) => (
                     <td key={j} className="px-3 py-2">
                       <div className="h-3 bg-bg-elevated rounded w-12" />
@@ -157,7 +156,7 @@ function KhoaTable({ rows, loading }: { rows: KhoaRow[]; loading: boolean }) {
             : rows.map((row) => (
                 <tr
                   key={row.stationName}
-                  className="border-b border-stroke-1 hover:bg-bg-surface/50"
+                  className="border-b border-stroke hover:bg-bg-surface/50"
                 >
                   <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
                     {row.stationName}
@@ -172,9 +171,9 @@ function KhoaTable({ rows, loading }: { rows: KhoaRow[]; loading: boolean }) {
                   <td className="px-3 py-2 text-t2">{fmt(row.data?.tide_level, 0)}</td>
                   <td className="px-3 py-2">
                     {row.error ? (
-                      <span className="text-red-400 text-caption">오류</span>
+                      <span className="text-color-danger text-caption">오류</span>
                     ) : row.data ? (
-                      <span className="text-emerald-400 text-caption">정상</span>
+                      <span className="text-color-success text-caption">정상</span>
                     ) : (
                       <span className="text-t3 text-caption">-</span>
                     )}
@@ -207,7 +206,7 @@ function KmaUltraTable({ rows, loading }: { rows: KmaUltraRow[]; loading: boolea
             {headers.map((h) => (
               <th
                 key={h}
-                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+                className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
               >
                 {h}
               </th>
@@ -217,7 +216,7 @@ function KmaUltraTable({ rows, loading }: { rows: KmaUltraRow[]; loading: boolea
         <tbody>
           {loading && rows.length === 0
             ? Array.from({ length: 3 }).map((_, i) => (
-                <tr key={i} className="border-b border-stroke-1 animate-pulse">
+                <tr key={i} className="border-b border-stroke animate-pulse">
                   {headers.map((_, j) => (
                     <td key={j} className="px-3 py-2">
                       <div className="h-3 bg-bg-elevated rounded w-12" />
@@ -228,7 +227,7 @@ function KmaUltraTable({ rows, loading }: { rows: KmaUltraRow[]; loading: boolea
             : rows.map((row) => (
                 <tr
                   key={row.stationName}
-                  className="border-b border-stroke-1 hover:bg-bg-surface/50"
+                  className="border-b border-stroke hover:bg-bg-surface/50"
                 >
                   <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
                     {row.stationName}
@@ -241,9 +240,9 @@ function KmaUltraTable({ rows, loading }: { rows: KmaUltraRow[]; loading: boolea
                   <td className="px-3 py-2 text-t2">{fmt(row.data?.humidity, 0)}</td>
                   <td className="px-3 py-2">
                     {row.error ? (
-                      <span className="text-red-400 text-caption">오류</span>
+                      <span className="text-color-danger text-caption">오류</span>
                     ) : row.data ? (
-                      <span className="text-emerald-400 text-caption">정상</span>
+                      <span className="text-color-success text-caption">정상</span>
                     ) : (
                       <span className="text-t3 text-caption">-</span>
                     )}
@@ -267,7 +266,7 @@ function MarineTable({ rows, loading }: { rows: MarineRow[]; loading: boolean })
             {headers.map((h) => (
               <th
                 key={h}
-                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+                className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
               >
                 {h}
               </th>
@@ -277,7 +276,7 @@ function MarineTable({ rows, loading }: { rows: MarineRow[]; loading: boolean })
         <tbody>
           {loading && rows.length === 0
             ? Array.from({ length: 4 }).map((_, i) => (
-                <tr key={i} className="border-b border-stroke-1 animate-pulse">
+                <tr key={i} className="border-b border-stroke animate-pulse">
                   {headers.map((_, j) => (
                     <td key={j} className="px-3 py-2">
                       <div className="h-3 bg-bg-elevated rounded w-14" />
@@ -286,7 +285,7 @@ function MarineTable({ rows, loading }: { rows: MarineRow[]; loading: boolean })
                 </tr>
               ))
             : rows.map((row) => (
-                <tr key={row.regId} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                <tr key={row.regId} className="border-b border-stroke hover:bg-bg-surface/50">
                   <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.name}</td>
                   <td className="px-3 py-2 text-t2">{fmt(row.data?.waveHeight)}</td>
                   <td className="px-3 py-2 text-t2">{fmt(row.data?.windSpeed)}</td>
@@ -294,9 +293,9 @@ function MarineTable({ rows, loading }: { rows: MarineRow[]; loading: boolean })
                   <td className="px-3 py-2 text-t2">{fmt(row.data?.temperature)}</td>
                   <td className="px-3 py-2">
                     {row.error ? (
-                      <span className="text-red-400 text-caption">오류</span>
+                      <span className="text-color-danger text-caption">오류</span>
                     ) : row.data ? (
-                      <span className="text-emerald-400 text-caption">정상</span>
+                      <span className="text-color-success text-caption">정상</span>
                     ) : (
                       <span className="text-t3 text-caption">-</span>
                     )}
@@ -440,7 +439,7 @@ export default function MonitorRealtimePanel() {
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* 헤더 */}
-      <div className="flex items-center justify-between px-5 py-3 border-b border-stroke-1 shrink-0">
+      <div className="flex items-center justify-between px-5 py-3 border-b border-stroke shrink-0">
         <h2 className="text-body-2 font-semibold text-t1">실시간 관측자료 모니터링</h2>
         <div className="flex items-center gap-3">
           {lastUpdate && (
@@ -477,14 +476,14 @@ export default function MonitorRealtimePanel() {
       </div>
 
       {/* 탭 */}
-      <div className="flex gap-0 border-b border-stroke-1 shrink-0 px-5">
+      <div className="flex gap-0 border-b border-stroke shrink-0 px-5">
         {TABS.map((tab) => (
           <button
             key={tab.id}
             onClick={() => setActiveTab(tab.id)}
             className={`px-4 py-2.5 text-caption font-medium border-b-2 transition-colors ${
               activeTab === tab.id
-                ? 'border-cyan-400 text-cyan-400'
+                ? 'border-color-accent text-color-accent'
                 : 'border-transparent text-t3 hover:text-t2'
             }`}
           >
@@ -494,7 +493,7 @@ export default function MonitorRealtimePanel() {
       </div>
 
       {/* 상태 표시줄 */}
-      <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke-1 bg-bg-base">
+      <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke bg-bg-base">
         <StatusBadge loading={isLoading} errorCount={errorCount} total={totalCount} />
         <span className="text-caption text-t3">
           {activeTab === 'khoa' && `관측소 ${totalCount}개`}

frontend/src/components/admin/components/MonitorVesselPanel.tsx

@@ -301,7 +301,7 @@ function StatusBadge({
   if (loading) {
     return (
       <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-bg-elevated text-t2">
-        <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
+        <span className="w-1.5 h-1.5 rounded-full bg-color-accent animate-pulse" />
         조회 중...
       </span>
     );
@@ -309,23 +309,23 @@ function StatusBadge({
   const offCount = total - onCount;
   if (offCount === total) {
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-red-500/10 text-red-400">
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(239,68,68,0.08)] text-color-danger">
-        <span className="w-1.5 h-1.5 rounded-full bg-red-400" />
+        <span className="w-1.5 h-1.5 rounded-full bg-color-danger" />
         전체 OFF
       </span>
     );
   }
   if (offCount > 0) {
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-yellow-500/10 text-yellow-400">
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(234,179,8,0.08)] text-color-caution">
-        <span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
+        <span className="w-1.5 h-1.5 rounded-full bg-color-caution" />
         일부 OFF ({offCount}/{total})
       </span>
     );
   }
   return (
-    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-emerald-500/10 text-emerald-400">
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(34,197,94,0.08)] text-color-success">
-      <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+      <span className="w-1.5 h-1.5 rounded-full bg-color-success" />
       전체 정상
     </span>
   );
@@ -342,7 +342,7 @@ function ConnectionBadge({
   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-label-2 font-semibold bg-blue-600 text-white">
+        <span className="inline-flex items-center px-2 py-0.5 rounded text-label-2 font-semibold bg-color-accent text-white">
           ON
         </span>
         {lastMessageTime && <span className="text-caption text-t3">{lastMessageTime}</span>}
@@ -351,7 +351,7 @@ function ConnectionBadge({
   }
   return (
     <div className="flex flex-col items-start gap-0.5">
-      <span className="inline-flex items-center px-2 py-0.5 rounded text-label-2 font-semibold bg-orange-500 text-white">
+      <span className="inline-flex items-center px-2 py-0.5 rounded text-label-2 font-semibold bg-color-warning text-white">
         OFF
       </span>
       {lastMessageTime && <span className="text-caption text-t3">{lastMessageTime}</span>}
@@ -382,7 +382,7 @@ function VesselTable({ rows, loading }: { rows: VesselMonitorRow[]; loading: boo
             {HEADERS.map((h) => (
               <th
                 key={h}
-                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+                className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
               >
                 {h}
               </th>
@@ -392,7 +392,7 @@ function VesselTable({ rows, loading }: { rows: VesselMonitorRow[]; loading: boo
         <tbody>
           {loading && rows.length === 0
             ? Array.from({ length: 8 }).map((_, i) => (
-                <tr key={i} className="border-b border-stroke-1 animate-pulse">
+                <tr key={i} className="border-b border-stroke animate-pulse">
                   {HEADERS.map((_, j) => (
                     <td key={j} className="px-3 py-2">
                       <div className="h-3 bg-bg-elevated rounded w-14" />
@@ -403,7 +403,7 @@ function VesselTable({ rows, loading }: { rows: VesselMonitorRow[]; loading: boo
             : rows.map((row, idx) => (
                 <tr
                   key={`${row.institutionCode}-${row.systemName}`}
-                  className="border-b border-stroke-1 hover:bg-bg-surface/50"
+                  className="border-b border-stroke hover:bg-bg-surface/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">
@@ -461,7 +461,7 @@ export default function MonitorVesselPanel() {
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* 헤더 */}
-      <div className="flex items-center justify-between px-5 py-3 border-b border-stroke-1 shrink-0">
+      <div className="flex items-center justify-between px-5 py-3 border-b border-stroke shrink-0">
         <h2 className="text-body-2 font-semibold text-t1">선박위치정보 모니터링</h2>
         <div className="flex items-center gap-3">
           {lastUpdate && (
@@ -498,7 +498,7 @@ export default function MonitorVesselPanel() {
       </div>
 
       {/* 상태 표시줄 */}
-      <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke-1 bg-bg-base">
+      <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke bg-bg-base">
         <StatusBadge loading={loading} onCount={onCount} total={rows.length} />
         <span className="text-caption text-t3">
           연계 채널 {rows.length}개 (ON: {onCount} / OFF: {rows.length - onCount})

frontend/src/components/admin/components/PermissionsPanel.tsx

@@ -0,0 +1,417 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+  fetchRoles,
+  fetchPermTree,
+  type RoleWithPermissions,
+  type PermTreeNode,
+} from '@common/services/authApi';
+import { RolePermTab } from './contents/RolePermTab';
+import { UserPermTab } from './contents/UserPermTab';
+/* eslint-disable react-refresh/only-export-components */
+
+// ─── 오퍼레이션 코드 ─────────────────────────────────
+export const OPER_CODES = ['READ', 'CREATE', 'UPDATE', 'DELETE'] as const;
+export type OperCode = (typeof OPER_CODES)[number];
+export const OPER_LABELS: Record<OperCode, string> = { READ: 'R', CREATE: 'C', UPDATE: 'U', DELETE: 'D' };
+export const OPER_FULL_LABELS: Record<OperCode, string> = {
+  READ: '조회',
+  CREATE: '생성',
+  UPDATE: '수정',
+  DELETE: '삭제',
+};
+
+// ─── 권한 상태 타입 ─────────────────────────────────────
+export type PermState = 'explicit-granted' | 'inherited-granted' | 'explicit-denied' | 'forced-denied';
+
+// ─── 키 유틸 ──────────────────────────────────────────
+export function makeKey(rsrc: string, oper: string): string {
+  return `${rsrc}::${oper}`;
+}
+
+// ─── 유틸: 플랫 노드 목록 추출 (트리 DFS) ─────────────
+export function flattenTree(nodes: PermTreeNode[]): PermTreeNode[] {
+  const result: PermTreeNode[] = [];
+  function walk(list: PermTreeNode[]) {
+    for (const n of list) {
+      result.push(n);
+      if (n.children.length > 0) walk(n.children);
+    }
+  }
+  walk(nodes);
+  return result;
+}
+
+// ─── 유틸: 권한 상태 계산 (오퍼레이션별) ──────────────
+function resolvePermStateForOper(
+  code: string,
+  parentCode: string | null,
+  operCd: string,
+  explicitPerms: Map<string, boolean>,
+  cache: Map<string, PermState>,
+): PermState {
+  const key = makeKey(code, operCd);
+  const cached = cache.get(key);
+  if (cached) return cached;
+
+  const explicit = explicitPerms.get(key);
+
+  if (parentCode === null) {
+    const state: PermState =
+      explicit === true
+        ? 'explicit-granted'
+        : explicit === false
+          ? 'explicit-denied'
+          : 'explicit-denied';
+    cache.set(key, state);
+    return state;
+  }
+
+  // 부모 READ 확인 (접근 게이트)
+  const parentReadKey = makeKey(parentCode, 'READ');
+  const parentReadState = cache.get(parentReadKey);
+  if (parentReadState === 'explicit-denied' || parentReadState === 'forced-denied') {
+    cache.set(key, 'forced-denied');
+    return 'forced-denied';
+  }
+
+  if (explicit === true) {
+    cache.set(key, 'explicit-granted');
+    return 'explicit-granted';
+  }
+  if (explicit === false) {
+    cache.set(key, 'explicit-denied');
+    return 'explicit-denied';
+  }
+
+  // 부모의 같은 오퍼레이션 상속
+  const parentOperKey = makeKey(parentCode, operCd);
+  const parentOperState = cache.get(parentOperKey);
+  if (parentOperState === 'explicit-granted' || parentOperState === 'inherited-granted') {
+    cache.set(key, 'inherited-granted');
+    return 'inherited-granted';
+  }
+  if (parentOperState === 'forced-denied') {
+    cache.set(key, 'forced-denied');
+    return 'forced-denied';
+  }
+
+  cache.set(key, 'explicit-denied');
+  return 'explicit-denied';
+}
+
+export function buildEffectiveStates(
+  flatNodes: PermTreeNode[],
+  explicitPerms: Map<string, boolean>,
+): Map<string, PermState> {
+  const cache = new Map<string, PermState>();
+  for (const node of flatNodes) {
+    // READ 먼저 (CUD는 READ에 의존)
+    resolvePermStateForOper(node.code, node.parentCode, 'READ', explicitPerms, cache);
+    for (const oper of OPER_CODES) {
+      if (oper === 'READ') continue;
+      resolvePermStateForOper(node.code, node.parentCode, oper, explicitPerms, cache);
+    }
+  }
+  return cache;
+}
+
+type ActiveTab = 'role' | 'user';
+
+function PermissionsPanel() {
+  const [activeTab, setActiveTab] = useState<ActiveTab>('role');
+  const [roles, setRoles] = useState<RoleWithPermissions[]>([]);
+  const [permTree, setPermTree] = useState<PermTreeNode[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [dirty, setDirty] = useState(false);
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [newRoleCode, setNewRoleCode] = useState('');
+  const [newRoleName, setNewRoleName] = useState('');
+  const [newRoleDesc, setNewRoleDesc] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [createError, setCreateError] = useState('');
+  const [editingRoleSn, setEditingRoleSn] = useState<number | null>(null);
+  const [editRoleName, setEditRoleName] = useState('');
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [selectedRoleSn, setSelectedRoleSn] = useState<number | null>(null);
+
+  // 역할별 명시적 권한: Map<roleSn, Map<"rsrc::oper", boolean>>
+  const [rolePerms, setRolePerms] = useState<Map<number, Map<string, boolean>>>(new Map());
+
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [rolesData, treeData] = await Promise.all([fetchRoles(), fetchPermTree()]);
+      setRoles(rolesData);
+      setPermTree(treeData);
+
+      // 명시적 권한 맵 초기화 (rsrc::oper 키 형식)
+      const permsMap = new Map<number, Map<string, boolean>>();
+      for (const role of rolesData) {
+        const roleMap = new Map<string, boolean>();
+        for (const p of role.permissions) {
+          roleMap.set(makeKey(p.resourceCode, p.operationCode), p.granted);
+        }
+        permsMap.set(role.sn, roleMap);
+      }
+      setRolePerms(permsMap);
+
+      // 최상위 노드 기본 펼침
+      setExpanded(new Set(treeData.map((n) => n.code)));
+      // 첫 번째 역할 선택
+      if (rolesData.length > 0 && !selectedRoleSn) {
+        setSelectedRoleSn(rolesData[0].sn);
+      }
+      setDirty(false);
+    } catch (err) {
+      console.error('권한 데이터 조회 실패:', err);
+    } finally {
+      setLoading(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- 초기 마운트 시 1회만 실행
+  }, []);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  // 플랫 노드 목록
+  const flatNodes = flattenTree(permTree);
+
+  const handleToggleExpand = useCallback((code: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(code)) next.delete(code);
+      else next.add(code);
+      return next;
+    });
+  }, []);
+
+  const handleTogglePerm = useCallback(
+    (code: string, oper: OperCode, currentState: PermState) => {
+      if (!selectedRoleSn) return;
+
+      setRolePerms((prev) => {
+        const next = new Map(prev);
+        const roleMap = new Map(next.get(selectedRoleSn) ?? new Map());
+
+        const key = makeKey(code, oper);
+        const node = flatNodes.find((n) => n.code === code);
+        const isRoot = node ? node.parentCode === null : false;
+
+        switch (currentState) {
+          case 'explicit-granted':
+            roleMap.set(key, false);
+            break;
+          case 'inherited-granted':
+            roleMap.set(key, false);
+            break;
+          case 'explicit-denied':
+            if (isRoot) {
+              roleMap.set(key, true);
+            } else {
+              roleMap.delete(key);
+            }
+            break;
+          default:
+            return prev;
+        }
+
+        next.set(selectedRoleSn, roleMap);
+        return next;
+      });
+      setDirty(true);
+    },
+    [selectedRoleSn, flatNodes],
+  );
+
+  const handleSave = async () => {
+    setSaving(true);
+    setSaveError(null);
+    try {
+      for (const role of roles) {
+        const perms = rolePerms.get(role.sn);
+        if (!perms) continue;
+
+        const permsList: Array<{ resourceCode: string; operationCode: string; granted: boolean }> =
+          [];
+        for (const [key, granted] of perms) {
+          const sepIdx = key.indexOf('::');
+          permsList.push({
+            resourceCode: key.substring(0, sepIdx),
+            operationCode: key.substring(sepIdx + 2),
+            granted,
+          });
+        }
+        await updatePermissionsApi(role.sn, permsList);
+      }
+      setDirty(false);
+    } catch (err) {
+      console.error('권한 저장 실패:', err);
+      setSaveError('권한 저장에 실패했습니다. 다시 시도해주세요.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleCreateRole = async () => {
+    setCreating(true);
+    setCreateError('');
+    try {
+      await createRoleApi({
+        code: newRoleCode,
+        name: newRoleName,
+        description: newRoleDesc || undefined,
+      });
+      await loadData();
+      setShowCreateForm(false);
+      setNewRoleCode('');
+      setNewRoleName('');
+      setNewRoleDesc('');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : '역할 생성에 실패했습니다.';
+      setCreateError(message);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleDeleteRole = async (roleSn: number, roleName: string) => {
+    if (
+      !window.confirm(
+        `"${roleName}" 역할을 삭제하시겠습니까?\n이 역할을 가진 모든 사용자에서 해당 역할이 제거됩니다.`,
+      )
+    ) {
+      return;
+    }
+    try {
+      await deleteRoleApi(roleSn);
+      if (selectedRoleSn === roleSn) setSelectedRoleSn(null);
+      await loadData();
+    } catch (err) {
+      console.error('역할 삭제 실패:', err);
+    }
+  };
+
+  const handleStartEditName = (role: RoleWithPermissions) => {
+    setEditingRoleSn(role.sn);
+    setEditRoleName(role.name);
+  };
+
+  const handleSaveRoleName = async (roleSn: number) => {
+    if (!editRoleName.trim()) return;
+    try {
+      await updateRoleApi(roleSn, { name: editRoleName.trim() });
+      setRoles((prev) =>
+        prev.map((r) => (r.sn === roleSn ? { ...r, name: editRoleName.trim() } : r)),
+      );
+      setEditingRoleSn(null);
+    } catch (err) {
+      console.error('역할 이름 수정 실패:', err);
+    }
+  };
+
+  const toggleDefault = async (roleSn: number) => {
+    const role = roles.find((r) => r.sn === roleSn);
+    if (!role) return;
+    const newValue = !role.isDefault;
+    try {
+      await updateRoleDefaultApi(roleSn, newValue);
+      setRoles((prev) => prev.map((r) => (r.sn === roleSn ? { ...r, isDefault: newValue } : r)));
+    } catch (err) {
+      console.error('기본 역할 변경 실패:', err);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-32 text-fg-disabled text-body-2 font-korean">
+        불러오는 중...
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* 헤더 */}
+      <div
+        className="flex items-center justify-between px-4 py-2.5 border-b border-stroke"
+        style={{ flexShrink: 0 }}
+      >
+        <div>
+          <h1 className="text-body-2 font-bold text-fg font-korean">권한 관리</h1>
+          <p className="text-caption text-fg-disabled mt-0.5 font-korean">
+            역할별 리소스 × CRUD 권한 설정
+          </p>
+        </div>
+        {/* 탭 전환 */}
+        <div className="flex items-center gap-1 p-1 bg-bg-elevated rounded-lg border border-stroke">
+          <button
+            onClick={() => setActiveTab('role')}
+            className={`px-4 py-1.5 text-caption font-semibold rounded-md transition-all font-korean ${
+              activeTab === 'role'
+                ? 'bg-color-accent text-bg-0 shadow-[0_0_8px_rgba(6,182,212,0.25)]'
+                : 'text-fg-disabled hover:text-fg-sub'
+            }`}
+          >
+            그룹별
+          </button>
+          <button
+            onClick={() => setActiveTab('user')}
+            className={`px-4 py-1.5 text-caption font-semibold rounded-md transition-all font-korean ${
+              activeTab === 'user'
+                ? 'bg-color-accent text-bg-0 shadow-[0_0_8px_rgba(6,182,212,0.25)]'
+                : 'text-fg-disabled hover:text-fg-sub'
+            }`}
+          >
+            사용자별
+          </button>
+        </div>
+      </div>
+
+      {activeTab === 'role' ? (
+        <RolePermTab
+          roles={roles}
+          permTree={permTree}
+          rolePerms={rolePerms}
+          setRolePerms={setRolePerms}
+          selectedRoleSn={selectedRoleSn}
+          setSelectedRoleSn={setSelectedRoleSn}
+          dirty={dirty}
+          saving={saving}
+          saveError={saveError}
+          handleSave={handleSave}
+          handleToggleExpand={handleToggleExpand}
+          handleTogglePerm={handleTogglePerm}
+          expanded={expanded}
+          flatNodes={flatNodes}
+          editingRoleSn={editingRoleSn}
+          editRoleName={editRoleName}
+          setEditRoleName={setEditRoleName}
+          handleStartEditName={handleStartEditName}
+          handleSaveRoleName={handleSaveRoleName}
+          setEditingRoleSn={setEditingRoleSn}
+          toggleDefault={toggleDefault}
+          handleDeleteRole={handleDeleteRole}
+          showCreateForm={showCreateForm}
+          setShowCreateForm={setShowCreateForm}
+          setCreateError={setCreateError}
+          newRoleCode={newRoleCode}
+          setNewRoleCode={setNewRoleCode}
+          newRoleName={newRoleName}
+          setNewRoleName={setNewRoleName}
+          newRoleDesc={newRoleDesc}
+          setNewRoleDesc={setNewRoleDesc}
+          creating={creating}
+          createError={createError}
+          handleCreateRole={handleCreateRole}
+        />
+      ) : (
+        <UserPermTab roles={roles} permTree={permTree} rolePerms={rolePerms} />
+      )}
+    </div>
+  );
+}
+
+export default PermissionsPanel;

frontend/src/components/admin/components/RndHnsAtmosPanel.tsx

@@ -257,34 +257,34 @@ function fetchHnsAtmosData(): Promise<HnsAtmosData> {
 // ─── 유틸 ───────────────────────────────────────────────────────────────────────
 
 function getPipelineStatusStyle(status: PipelineStatus): string {
-  if (status === '정상') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '정상') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
-  if (status === '지연') return 'text-yellow-400 bg-yellow-500/10';
+  if (status === '지연') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
-  return 'text-red-400 bg-red-500/10';
+  return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
 }
 
 function getPipelineBorderStyle(status: PipelineStatus): string {
-  if (status === '정상') return 'border-l-emerald-500';
+  if (status === '정상') return 'border-l-color-success';
-  if (status === '지연') return 'border-l-yellow-500';
+  if (status === '지연') return 'border-l-color-caution';
-  return 'border-l-red-500';
+  return 'border-l-color-danger';
 }
 
 function getReceiveStatusStyle(status: ReceiveStatus): string {
-  if (status === '수신완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '수신완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
-  if (status === '수신대기') return 'text-yellow-400 bg-yellow-500/10';
+  if (status === '수신대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
-  return 'text-red-400 bg-red-500/10';
+  return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
 }
 
 function getProcessStatusStyle(status: ProcessStatus): string {
-  if (status === '처리완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '처리완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
-  if (status === '처리중') return 'text-cyan-400 bg-cyan-500/10';
+  if (status === '처리중') return 'text-color-accent bg-[rgba(6,182,212,0.08)]';
-  if (status === '대기') return 'text-yellow-400 bg-yellow-500/10';
+  if (status === '대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
-  return 'text-red-400 bg-red-500/10';
+  return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
 }
 
 function getAlertStyle(level: AlertLevel): string {
-  if (level === '경고') return 'text-red-400 bg-red-500/10 border-red-500/30';
+  if (level === '경고') return 'text-color-danger bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)]';
-  if (level === '주의') return 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30';
+  if (level === '주의') return 'text-color-caution bg-[rgba(234,179,8,0.08)] border-[rgba(234,179,8,0.3)]';
-  return 'text-cyan-400 bg-cyan-500/10 border-cyan-500/30';
+  return 'text-color-accent bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)]';
 }
 
 // ─── 파이프라인 카드 ─────────────────────────────────────────────────────────────
@@ -295,9 +295,9 @@ function PipelineCard({ node }: { node: PipelineNode }) {
 
   return (
     <div
-      className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke-1 border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
+      className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
     >
-      <div className="text-xs font-medium text-t1 leading-snug">{node.name}</div>
+      <div className="text-caption font-medium text-t1 leading-snug">{node.name}</div>
       <span
         className={`self-start inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${badgeStyle}`}
       >
@@ -316,7 +316,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
         {Array.from({ length: 5 }).map((_, i) => (
           <div key={i} className="flex items-center gap-1">
             <div className="flex-1 h-16 bg-bg-elevated rounded w-28" />
-            {i < 4 && <span className="text-t3 text-sm px-0.5">→</span>}
+            {i < 4 && <span className="text-t3 text-body-2 px-0.5">→</span>}
           </div>
         ))}
       </div>
@@ -328,9 +328,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
       {nodes.map((node, idx) => (
         <div key={node.id} className="flex items-center gap-1 flex-1 min-w-0">
           <PipelineCard node={node} />
-          {idx < nodes.length - 1 && (
+          {idx < nodes.length - 1 && <span className="text-t3 text-body-2 shrink-0 px-0.5">→</span>}
-            <span className="text-t3 text-sm shrink-0 px-0.5">→</span>
-          )}
         </div>
       ))}
     </div>
@@ -369,13 +367,13 @@ const LOG_HEADERS = ['시간', '데이터소스', '데이터종류', '크기', '
 function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean }) {
   return (
     <div className="overflow-auto">
-      <table className="w-full text-xs border-collapse">
+      <table className="w-full text-caption border-collapse">
         <thead>
           <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
             {LOG_HEADERS.map((h) => (
               <th
                 key={h}
-                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+                className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
               >
                 {h}
               </th>
@@ -385,7 +383,7 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
         <tbody>
           {loading && rows.length === 0
             ? Array.from({ length: 8 }).map((_, i) => (
-                <tr key={i} className="border-b border-stroke-1 animate-pulse">
+                <tr key={i} className="border-b border-stroke animate-pulse">
                   {LOG_HEADERS.map((_, j) => (
                     <td key={j} className="px-3 py-2">
                       <div className="h-3 bg-bg-elevated rounded w-16" />
@@ -394,10 +392,8 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
                 </tr>
               ))
             : rows.map((row) => (
-                <tr key={row.id} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                <tr key={row.id} className="border-b border-stroke hover:bg-bg-surface/50">
-                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.timestamp}</td>
-                    {row.timestamp}
-                  </td>
                   <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.source}</td>
                   <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.dataType}</td>
                   <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.size}</td>
@@ -444,7 +440,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
   }
 
   if (alerts.length === 0) {
-    return <p className="text-xs text-t3 py-2">활성 알림이 없습니다.</p>;
+    return <p className="text-caption text-t3 py-2">활성 알림이 없습니다.</p>;
   }
 
   return (
@@ -452,7 +448,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
       {alerts.map((alert) => (
         <div
           key={alert.id}
-          className={`flex items-start gap-2 px-3 py-2 rounded border text-xs ${getAlertStyle(alert.level)}`}
+          className={`flex items-start gap-2 px-3 py-2 rounded border text-caption ${getAlertStyle(alert.level)}`}
         >
           <span className="font-semibold shrink-0">[{alert.level}]</span>
           <span className="flex-1">{alert.message}</span>
@@ -511,12 +507,12 @@ export default function RndHnsAtmosPanel() {
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* ── 헤더 ── */}
-      <div className="shrink-0 border-b border-stroke-1">
+      <div className="shrink-0 border-b border-stroke">
         <div className="flex items-center justify-between px-5 py-3">
-          <h2 className="text-sm font-semibold text-t1">HNS 대기확산 (충북대) 연계 모니터링</h2>
+          <h2 className="text-body-2 font-semibold text-t1">HNS 대기확산 (충북대) 연계 모니터링</h2>
           <div className="flex items-center gap-3">
             {lastUpdate && (
-              <span className="text-xs text-t3">
+              <span className="text-caption text-t3">
                 갱신:{' '}
                 {lastUpdate.toLocaleTimeString('ko-KR', {
                   hour: '2-digit',
@@ -528,7 +524,7 @@ export default function RndHnsAtmosPanel() {
             <button
               onClick={() => void fetchData()}
               disabled={loading}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               <svg
                 className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
@@ -548,23 +544,21 @@ export default function RndHnsAtmosPanel() {
           </div>
         </div>
         {/* 요약 통계 바 */}
-        <div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-xs text-t3 border-t border-stroke-1">
+        <div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-caption text-t3 border-t border-stroke">
           <span>
-            정상 수신:{' '}
+            정상 수신: <span className="text-color-success font-medium">{totalReceived}건</span>
-            <span className="text-emerald-400 font-medium">{totalReceived}건</span>
           </span>
           <span className="text-stroke-1">|</span>
           <span>
-            지연: <span className="text-yellow-400 font-medium">{totalDelayed}건</span>
+            지연: <span className="text-color-caution font-medium">{totalDelayed}건</span>
           </span>
           <span className="text-stroke-1">|</span>
           <span>
-            실패: <span className="text-red-400 font-medium">{totalFailed}건</span>
+            실패: <span className="text-color-danger font-medium">{totalFailed}건</span>
           </span>
           <span className="text-stroke-1">|</span>
           <span>
-            금일 예측 완료:{' '}
+            금일 예측 완료: <span className="text-color-accent font-medium">2 / 4회</span>
-            <span className="text-cyan-400 font-medium">2 / 4회</span>
           </span>
         </div>
       </div>
@@ -572,17 +566,17 @@ export default function RndHnsAtmosPanel() {
       {/* ── 스크롤 영역 ── */}
       <div className="flex-1 overflow-auto">
         {/* 파이프라인 현황 */}
-        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+        <section className="px-5 pt-4 pb-3 border-b border-stroke">
-          <h3 className="text-xs font-semibold text-t2 mb-3 uppercase tracking-wide">
+          <h3 className="text-caption font-semibold text-t2 mb-3 uppercase tracking-wide">
             데이터 파이프라인 현황
           </h3>
           <PipelineFlow nodes={pipeline} loading={loading} />
         </section>
 
         {/* 필터 바 + 수신 이력 테이블 */}
-        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+        <section className="px-5 pt-4 pb-3 border-b border-stroke">
           <div className="flex items-center justify-between mb-3 gap-3 flex-wrap">
-            <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide shrink-0">
+            <h3 className="text-caption font-semibold text-t2 uppercase tracking-wide shrink-0">
               데이터 수신 이력
             </h3>
             <div className="flex items-center gap-2 flex-wrap">
@@ -590,7 +584,7 @@ export default function RndHnsAtmosPanel() {
               <select
                 value={filterSource}
                 onChange={(e) => setFilterSource(e.target.value as FilterSource)}
-                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+                className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
               >
                 <option value="all">모두 (소스)</option>
                 <option value="HYCOM">HYCOM</option>
@@ -601,7 +595,7 @@ export default function RndHnsAtmosPanel() {
               <select
                 value={filterReceive}
                 onChange={(e) => setFilterReceive(e.target.value as FilterReceive)}
-                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+                className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
               >
                 <option value="all">모두 (상태)</option>
                 <option value="수신완료">수신완료</option>
@@ -613,13 +607,13 @@ export default function RndHnsAtmosPanel() {
               <select
                 value={filterPeriod}
                 onChange={(e) => setFilterPeriod(e.target.value as FilterPeriod)}
-                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+                className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
               >
                 <option value="6h">최근 6시간</option>
                 <option value="12h">최근 12시간</option>
                 <option value="24h">최근 24시간</option>
               </select>
-              <span className="text-xs text-t3">{filteredLogs.length}건</span>
+              <span className="text-caption text-t3">{filteredLogs.length}건</span>
             </div>
           </div>
           <DataLogTable rows={filteredLogs} loading={loading} />
@@ -627,9 +621,7 @@ export default function RndHnsAtmosPanel() {
 
         {/* 알림 현황 */}
         <section className="px-5 pt-4 pb-5">
-          <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide mb-3">
+          <h3 className="text-caption font-semibold text-t2 uppercase tracking-wide mb-3">알림 현황</h3>
-            알림 현황
-          </h3>
           <AlertList alerts={alerts} loading={loading} />
         </section>
       </div>

frontend/src/components/admin/components/RndKospsPanel.tsx

@@ -257,34 +257,34 @@ function fetchKospsData(): Promise<KospsData> {
 // ─── 유틸 ───────────────────────────────────────────────────────────────────────
 
 function getPipelineStatusStyle(status: PipelineStatus): string {
-  if (status === '정상') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '정상') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
-  if (status === '지연') return 'text-yellow-400 bg-yellow-500/10';
+  if (status === '지연') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
-  return 'text-red-400 bg-red-500/10';
+  return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
 }
 
 function getPipelineBorderStyle(status: PipelineStatus): string {
-  if (status === '정상') return 'border-l-emerald-500';
+  if (status === '정상') return 'border-l-color-success';
-  if (status === '지연') return 'border-l-yellow-500';
+  if (status === '지연') return 'border-l-color-caution';
-  return 'border-l-red-500';
+  return 'border-l-color-danger';
 }
 
 function getReceiveStatusStyle(status: ReceiveStatus): string {
-  if (status === '수신완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '수신완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
-  if (status === '수신대기') return 'text-yellow-400 bg-yellow-500/10';
+  if (status === '수신대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
-  return 'text-red-400 bg-red-500/10';
+  return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
 }
 
 function getProcessStatusStyle(status: ProcessStatus): string {
-  if (status === '처리완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '처리완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
-  if (status === '처리중') return 'text-cyan-400 bg-cyan-500/10';
+  if (status === '처리중') return 'text-color-accent bg-[rgba(6,182,212,0.08)]';
-  if (status === '대기') return 'text-yellow-400 bg-yellow-500/10';
+  if (status === '대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
-  return 'text-red-400 bg-red-500/10';
+  return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
 }
 
 function getAlertStyle(level: AlertLevel): string {
-  if (level === '경고') return 'text-red-400 bg-red-500/10 border-red-500/30';
+  if (level === '경고') return 'text-color-danger bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)]';
-  if (level === '주의') return 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30';
+  if (level === '주의') return 'text-color-caution bg-[rgba(234,179,8,0.08)] border-[rgba(234,179,8,0.3)]';
-  return 'text-cyan-400 bg-cyan-500/10 border-cyan-500/30';
+  return 'text-color-accent bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)]';
 }
 
 // ─── 파이프라인 카드 ─────────────────────────────────────────────────────────────
@@ -295,9 +295,9 @@ function PipelineCard({ node }: { node: PipelineNode }) {
 
   return (
     <div
-      className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke-1 border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
+      className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
     >
-      <div className="text-xs font-medium text-t1 leading-snug">{node.name}</div>
+      <div className="text-caption font-medium text-t1 leading-snug">{node.name}</div>
       <span
         className={`self-start inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${badgeStyle}`}
       >
@@ -316,7 +316,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
         {Array.from({ length: 5 }).map((_, i) => (
           <div key={i} className="flex items-center gap-1">
             <div className="flex-1 h-16 bg-bg-elevated rounded w-28" />
-            {i < 4 && <span className="text-t3 text-sm px-0.5">→</span>}
+            {i < 4 && <span className="text-t3 text-body-2 px-0.5">→</span>}
           </div>
         ))}
       </div>
@@ -328,9 +328,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
       {nodes.map((node, idx) => (
         <div key={node.id} className="flex items-center gap-1 flex-1 min-w-0">
           <PipelineCard node={node} />
-          {idx < nodes.length - 1 && (
+          {idx < nodes.length - 1 && <span className="text-t3 text-body-2 shrink-0 px-0.5">→</span>}
-            <span className="text-t3 text-sm shrink-0 px-0.5">→</span>
-          )}
         </div>
       ))}
     </div>
@@ -369,13 +367,13 @@ const LOG_HEADERS = ['시간', '데이터소스', '데이터종류', '크기', '
 function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean }) {
   return (
     <div className="overflow-auto">
-      <table className="w-full text-xs border-collapse">
+      <table className="w-full text-caption border-collapse">
         <thead>
           <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
             {LOG_HEADERS.map((h) => (
               <th
                 key={h}
-                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+                className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
               >
                 {h}
               </th>
@@ -385,7 +383,7 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
         <tbody>
           {loading && rows.length === 0
             ? Array.from({ length: 8 }).map((_, i) => (
-                <tr key={i} className="border-b border-stroke-1 animate-pulse">
+                <tr key={i} className="border-b border-stroke animate-pulse">
                   {LOG_HEADERS.map((_, j) => (
                     <td key={j} className="px-3 py-2">
                       <div className="h-3 bg-bg-elevated rounded w-16" />
@@ -394,10 +392,8 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
                 </tr>
               ))
             : rows.map((row) => (
-                <tr key={row.id} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                <tr key={row.id} className="border-b border-stroke hover:bg-bg-surface/50">
-                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.timestamp}</td>
-                    {row.timestamp}
-                  </td>
                   <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.source}</td>
                   <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.dataType}</td>
                   <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.size}</td>
@@ -444,7 +440,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
   }
 
   if (alerts.length === 0) {
-    return <p className="text-xs text-t3 py-2">활성 알림이 없습니다.</p>;
+    return <p className="text-caption text-t3 py-2">활성 알림이 없습니다.</p>;
   }
 
   return (
@@ -452,7 +448,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
       {alerts.map((alert) => (
         <div
           key={alert.id}
-          className={`flex items-start gap-2 px-3 py-2 rounded border text-xs ${getAlertStyle(alert.level)}`}
+          className={`flex items-start gap-2 px-3 py-2 rounded border text-caption ${getAlertStyle(alert.level)}`}
         >
           <span className="font-semibold shrink-0">[{alert.level}]</span>
           <span className="flex-1">{alert.message}</span>
@@ -511,12 +507,12 @@ export default function RndKospsPanel() {
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* ── 헤더 ── */}
-      <div className="shrink-0 border-b border-stroke-1">
+      <div className="shrink-0 border-b border-stroke">
         <div className="flex items-center justify-between px-5 py-3">
-          <h2 className="text-sm font-semibold text-t1">유출유확산예측 (KOSPS) 연계 모니터링</h2>
+          <h2 className="text-body-2 font-semibold text-t1">유출유확산예측 (KOSPS) 연계 모니터링</h2>
           <div className="flex items-center gap-3">
             {lastUpdate && (
-              <span className="text-xs text-t3">
+              <span className="text-caption text-t3">
                 갱신:{' '}
                 {lastUpdate.toLocaleTimeString('ko-KR', {
                   hour: '2-digit',
@@ -528,7 +524,7 @@ export default function RndKospsPanel() {
             <button
               onClick={() => void fetchData()}
               disabled={loading}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               <svg
                 className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
@@ -548,23 +544,21 @@ export default function RndKospsPanel() {
           </div>
         </div>
         {/* 요약 통계 바 */}
-        <div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-xs text-t3 border-t border-stroke-1">
+        <div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-caption text-t3 border-t border-stroke">
           <span>
-            정상 수신:{' '}
+            정상 수신: <span className="text-color-success font-medium">{totalReceived}건</span>
-            <span className="text-emerald-400 font-medium">{totalReceived}건</span>
           </span>
           <span className="text-stroke-1">|</span>
           <span>
-            지연: <span className="text-yellow-400 font-medium">{totalDelayed}건</span>
+            지연: <span className="text-color-caution font-medium">{totalDelayed}건</span>
           </span>
           <span className="text-stroke-1">|</span>
           <span>
-            실패: <span className="text-red-400 font-medium">{totalFailed}건</span>
+            실패: <span className="text-color-danger font-medium">{totalFailed}건</span>
           </span>
           <span className="text-stroke-1">|</span>
           <span>
-            금일 예측 완료:{' '}
+            금일 예측 완료: <span className="text-color-accent font-medium">3 / 6회</span>
-            <span className="text-cyan-400 font-medium">3 / 6회</span>
           </span>
         </div>
       </div>
@@ -572,17 +566,17 @@ export default function RndKospsPanel() {
       {/* ── 스크롤 영역 ── */}
       <div className="flex-1 overflow-auto">
         {/* 파이프라인 현황 */}
-        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+        <section className="px-5 pt-4 pb-3 border-b border-stroke">
-          <h3 className="text-xs font-semibold text-t2 mb-3 uppercase tracking-wide">
+          <h3 className="text-caption font-semibold text-t2 mb-3 uppercase tracking-wide">
             데이터 파이프라인 현황
           </h3>
           <PipelineFlow nodes={pipeline} loading={loading} />
         </section>
 
         {/* 필터 바 + 수신 이력 테이블 */}
-        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+        <section className="px-5 pt-4 pb-3 border-b border-stroke">
           <div className="flex items-center justify-between mb-3 gap-3 flex-wrap">
-            <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide shrink-0">
+            <h3 className="text-caption font-semibold text-t2 uppercase tracking-wide shrink-0">
               데이터 수신 이력
             </h3>
             <div className="flex items-center gap-2 flex-wrap">
@@ -590,7 +584,7 @@ export default function RndKospsPanel() {
               <select
                 value={filterSource}
                 onChange={(e) => setFilterSource(e.target.value as FilterSource)}
-                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+                className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
               >
                 <option value="all">모두 (소스)</option>
                 <option value="HYCOM">HYCOM</option>
@@ -601,7 +595,7 @@ export default function RndKospsPanel() {
               <select
                 value={filterReceive}
                 onChange={(e) => setFilterReceive(e.target.value as FilterReceive)}
-                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+                className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
               >
                 <option value="all">모두 (상태)</option>
                 <option value="수신완료">수신완료</option>
@@ -613,13 +607,13 @@ export default function RndKospsPanel() {
               <select
                 value={filterPeriod}
                 onChange={(e) => setFilterPeriod(e.target.value as FilterPeriod)}
-                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+                className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
               >
                 <option value="6h">최근 6시간</option>
                 <option value="12h">최근 12시간</option>
                 <option value="24h">최근 24시간</option>
               </select>
-              <span className="text-xs text-t3">{filteredLogs.length}건</span>
+              <span className="text-caption text-t3">{filteredLogs.length}건</span>
             </div>
           </div>
           <DataLogTable rows={filteredLogs} loading={loading} />
@@ -627,9 +621,7 @@ export default function RndKospsPanel() {
 
         {/* 알림 현황 */}
         <section className="px-5 pt-4 pb-5">
-          <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide mb-3">
+          <h3 className="text-caption font-semibold text-t2 uppercase tracking-wide mb-3">알림 현황</h3>
-            알림 현황
-          </h3>
           <AlertList alerts={alerts} loading={loading} />
         </section>
       </div>

frontend/src/components/admin/components/RndPoseidonPanel.tsx

@@ -284,34 +284,34 @@ function fetchPoseidonData(): Promise<PoseidonData> {
 // ─── 유틸 ───────────────────────────────────────────────────────────────────────
 
 function getPipelineStatusStyle(status: PipelineStatus): string {
-  if (status === '정상') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '정상') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
-  if (status === '지연') return 'text-yellow-400 bg-yellow-500/10';
+  if (status === '지연') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
-  return 'text-red-400 bg-red-500/10';
+  return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
 }
 
 function getPipelineBorderStyle(status: PipelineStatus): string {
-  if (status === '정상') return 'border-l-emerald-500';
+  if (status === '정상') return 'border-l-color-success';
-  if (status === '지연') return 'border-l-yellow-500';
+  if (status === '지연') return 'border-l-color-caution';
-  return 'border-l-red-500';
+  return 'border-l-color-danger';
 }
 
 function getReceiveStatusStyle(status: ReceiveStatus): string {
-  if (status === '수신완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '수신완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
-  if (status === '수신대기') return 'text-yellow-400 bg-yellow-500/10';
+  if (status === '수신대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
-  return 'text-red-400 bg-red-500/10';
+  return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
 }
 
 function getProcessStatusStyle(status: ProcessStatus): string {
-  if (status === '처리완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '처리완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
-  if (status === '처리중') return 'text-cyan-400 bg-cyan-500/10';
+  if (status === '처리중') return 'text-color-accent bg-[rgba(6,182,212,0.08)]';
-  if (status === '대기') return 'text-yellow-400 bg-yellow-500/10';
+  if (status === '대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
-  return 'text-red-400 bg-red-500/10';
+  return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
 }
 
 function getAlertStyle(level: AlertLevel): string {
-  if (level === '경고') return 'text-red-400 bg-red-500/10 border-red-500/30';
+  if (level === '경고') return 'text-color-danger bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)]';
-  if (level === '주의') return 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30';
+  if (level === '주의') return 'text-color-caution bg-[rgba(234,179,8,0.08)] border-[rgba(234,179,8,0.3)]';
-  return 'text-cyan-400 bg-cyan-500/10 border-cyan-500/30';
+  return 'text-color-accent bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)]';
 }
 
 // ─── 파이프라인 카드 ─────────────────────────────────────────────────────────────
@@ -322,9 +322,9 @@ function PipelineCard({ node }: { node: PipelineNode }) {
 
   return (
     <div
-      className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke-1 border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
+      className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
     >
-      <div className="text-xs font-medium text-t1 leading-snug">{node.name}</div>
+      <div className="text-caption font-medium text-t1 leading-snug">{node.name}</div>
       <span
         className={`self-start inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${badgeStyle}`}
       >
@@ -343,7 +343,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
         {Array.from({ length: 5 }).map((_, i) => (
           <div key={i} className="flex items-center gap-1">
             <div className="flex-1 h-16 bg-bg-elevated rounded w-28" />
-            {i < 4 && <span className="text-t3 text-sm px-0.5">→</span>}
+            {i < 4 && <span className="text-t3 text-body-2 px-0.5">→</span>}
           </div>
         ))}
       </div>
@@ -355,9 +355,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
       {nodes.map((node, idx) => (
         <div key={node.id} className="flex items-center gap-1 flex-1 min-w-0">
           <PipelineCard node={node} />
-          {idx < nodes.length - 1 && (
+          {idx < nodes.length - 1 && <span className="text-t3 text-body-2 shrink-0 px-0.5">→</span>}
-            <span className="text-t3 text-sm shrink-0 px-0.5">→</span>
-          )}
         </div>
       ))}
     </div>
@@ -396,13 +394,13 @@ const LOG_HEADERS = ['시간', '데이터소스', '데이터종류', '크기', '
 function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean }) {
   return (
     <div className="overflow-auto">
-      <table className="w-full text-xs border-collapse">
+      <table className="w-full text-caption border-collapse">
         <thead>
           <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
             {LOG_HEADERS.map((h) => (
               <th
                 key={h}
-                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+                className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
               >
                 {h}
               </th>
@@ -412,7 +410,7 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
         <tbody>
           {loading && rows.length === 0
             ? Array.from({ length: 8 }).map((_, i) => (
-                <tr key={i} className="border-b border-stroke-1 animate-pulse">
+                <tr key={i} className="border-b border-stroke animate-pulse">
                   {LOG_HEADERS.map((_, j) => (
                     <td key={j} className="px-3 py-2">
                       <div className="h-3 bg-bg-elevated rounded w-16" />
@@ -421,10 +419,8 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
                 </tr>
               ))
             : rows.map((row) => (
-                <tr key={row.id} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                <tr key={row.id} className="border-b border-stroke hover:bg-bg-surface/50">
-                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.timestamp}</td>
-                    {row.timestamp}
-                  </td>
                   <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.source}</td>
                   <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.dataType}</td>
                   <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.size}</td>
@@ -471,7 +467,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
   }
 
   if (alerts.length === 0) {
-    return <p className="text-xs text-t3 py-2">활성 알림이 없습니다.</p>;
+    return <p className="text-caption text-t3 py-2">활성 알림이 없습니다.</p>;
   }
 
   return (
@@ -479,7 +475,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
       {alerts.map((alert) => (
         <div
           key={alert.id}
-          className={`flex items-start gap-2 px-3 py-2 rounded border text-xs ${getAlertStyle(alert.level)}`}
+          className={`flex items-start gap-2 px-3 py-2 rounded border text-caption ${getAlertStyle(alert.level)}`}
         >
           <span className="font-semibold shrink-0">[{alert.level}]</span>
           <span className="flex-1">{alert.message}</span>
@@ -538,12 +534,12 @@ export default function RndPoseidonPanel() {
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* ── 헤더 ── */}
-      <div className="shrink-0 border-b border-stroke-1">
+      <div className="shrink-0 border-b border-stroke">
         <div className="flex items-center justify-between px-5 py-3">
-          <h2 className="text-sm font-semibold text-t1">유출유확산예측 (포세이돈) 연계 모니터링</h2>
+          <h2 className="text-body-2 font-semibold text-t1">유출유확산예측 (포세이돈) 연계 모니터링</h2>
           <div className="flex items-center gap-3">
             {lastUpdate && (
-              <span className="text-xs text-t3">
+              <span className="text-caption text-t3">
                 갱신:{' '}
                 {lastUpdate.toLocaleTimeString('ko-KR', {
                   hour: '2-digit',
@@ -555,7 +551,7 @@ export default function RndPoseidonPanel() {
             <button
               onClick={() => void fetchData()}
               disabled={loading}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               <svg
                 className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
@@ -575,23 +571,21 @@ export default function RndPoseidonPanel() {
           </div>
         </div>
         {/* 요약 통계 바 */}
-        <div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-xs text-t3 border-t border-stroke-1">
+        <div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-caption text-t3 border-t border-stroke">
           <span>
-            정상 수신:{' '}
+            정상 수신: <span className="text-color-success font-medium">{totalReceived}건</span>
-            <span className="text-emerald-400 font-medium">{totalReceived}건</span>
           </span>
           <span className="text-stroke-1">|</span>
           <span>
-            지연: <span className="text-yellow-400 font-medium">{totalDelayed}건</span>
+            지연: <span className="text-color-caution font-medium">{totalDelayed}건</span>
           </span>
           <span className="text-stroke-1">|</span>
           <span>
-            실패: <span className="text-red-400 font-medium">{totalFailed}건</span>
+            실패: <span className="text-color-danger font-medium">{totalFailed}건</span>
           </span>
           <span className="text-stroke-1">|</span>
           <span>
-            금일 예측 완료:{' '}
+            금일 예측 완료: <span className="text-color-accent font-medium">4 / 8회</span>
-            <span className="text-cyan-400 font-medium">4 / 8회</span>
           </span>
         </div>
       </div>
@@ -599,17 +593,17 @@ export default function RndPoseidonPanel() {
       {/* ── 스크롤 영역 ── */}
       <div className="flex-1 overflow-auto">
         {/* 파이프라인 현황 */}
-        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+        <section className="px-5 pt-4 pb-3 border-b border-stroke">
-          <h3 className="text-xs font-semibold text-t2 mb-3 uppercase tracking-wide">
+          <h3 className="text-caption font-semibold text-t2 mb-3 uppercase tracking-wide">
             데이터 파이프라인 현황
           </h3>
           <PipelineFlow nodes={pipeline} loading={loading} />
         </section>
 
         {/* 필터 바 + 수신 이력 테이블 */}
-        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+        <section className="px-5 pt-4 pb-3 border-b border-stroke">
           <div className="flex items-center justify-between mb-3 gap-3 flex-wrap">
-            <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide shrink-0">
+            <h3 className="text-caption font-semibold text-t2 uppercase tracking-wide shrink-0">
               데이터 수신 이력
             </h3>
             <div className="flex items-center gap-2 flex-wrap">
@@ -617,7 +611,7 @@ export default function RndPoseidonPanel() {
               <select
                 value={filterSource}
                 onChange={(e) => setFilterSource(e.target.value as FilterSource)}
-                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+                className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
               >
                 <option value="all">모두 (소스)</option>
                 <option value="HYCOM">HYCOM</option>
@@ -628,7 +622,7 @@ export default function RndPoseidonPanel() {
               <select
                 value={filterReceive}
                 onChange={(e) => setFilterReceive(e.target.value as FilterReceive)}
-                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+                className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
               >
                 <option value="all">모두 (상태)</option>
                 <option value="수신완료">수신완료</option>
@@ -640,13 +634,13 @@ export default function RndPoseidonPanel() {
               <select
                 value={filterPeriod}
                 onChange={(e) => setFilterPeriod(e.target.value as FilterPeriod)}
-                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+                className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
               >
                 <option value="6h">최근 6시간</option>
                 <option value="12h">최근 12시간</option>
                 <option value="24h">최근 24시간</option>
               </select>
-              <span className="text-xs text-t3">{filteredLogs.length}건</span>
+              <span className="text-caption text-t3">{filteredLogs.length}건</span>
             </div>
           </div>
           <DataLogTable rows={filteredLogs} loading={loading} />
@@ -654,9 +648,7 @@ export default function RndPoseidonPanel() {
 
         {/* 알림 현황 */}
         <section className="px-5 pt-4 pb-5">
-          <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide mb-3">
+          <h3 className="text-caption font-semibold text-t2 uppercase tracking-wide mb-3">알림 현황</h3>
-            알림 현황
-          </h3>
           <AlertList alerts={alerts} loading={loading} />
         </section>
       </div>

frontend/src/components/admin/components/RndRescuePanel.tsx

@@ -257,34 +257,34 @@ function fetchRescueData(): Promise<RescueData> {
 // ─── 유틸 ───────────────────────────────────────────────────────────────────────
 
 function getPipelineStatusStyle(status: PipelineStatus): string {
-  if (status === '정상') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '정상') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
-  if (status === '지연') return 'text-yellow-400 bg-yellow-500/10';
+  if (status === '지연') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
-  return 'text-red-400 bg-red-500/10';
+  return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
 }
 
 function getPipelineBorderStyle(status: PipelineStatus): string {
-  if (status === '정상') return 'border-l-emerald-500';
+  if (status === '정상') return 'border-l-color-success';
-  if (status === '지연') return 'border-l-yellow-500';
+  if (status === '지연') return 'border-l-color-caution';
-  return 'border-l-red-500';
+  return 'border-l-color-danger';
 }
 
 function getReceiveStatusStyle(status: ReceiveStatus): string {
-  if (status === '수신완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '수신완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
-  if (status === '수신대기') return 'text-yellow-400 bg-yellow-500/10';
+  if (status === '수신대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
-  return 'text-red-400 bg-red-500/10';
+  return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
 }
 
 function getProcessStatusStyle(status: ProcessStatus): string {
-  if (status === '처리완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '처리완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
-  if (status === '처리중') return 'text-cyan-400 bg-cyan-500/10';
+  if (status === '처리중') return 'text-color-accent bg-[rgba(6,182,212,0.08)]';
-  if (status === '대기') return 'text-yellow-400 bg-yellow-500/10';
+  if (status === '대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
-  return 'text-red-400 bg-red-500/10';
+  return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
 }
 
 function getAlertStyle(level: AlertLevel): string {
-  if (level === '경고') return 'text-red-400 bg-red-500/10 border-red-500/30';
+  if (level === '경고') return 'text-color-danger bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)]';
-  if (level === '주의') return 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30';
+  if (level === '주의') return 'text-color-caution bg-[rgba(234,179,8,0.08)] border-[rgba(234,179,8,0.3)]';
-  return 'text-cyan-400 bg-cyan-500/10 border-cyan-500/30';
+  return 'text-color-accent bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)]';
 }
 
 // ─── 파이프라인 카드 ─────────────────────────────────────────────────────────────
@@ -295,9 +295,9 @@ function PipelineCard({ node }: { node: PipelineNode }) {
 
   return (
     <div
-      className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke-1 border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
+      className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
     >
-      <div className="text-xs font-medium text-t1 leading-snug">{node.name}</div>
+      <div className="text-caption font-medium text-t1 leading-snug">{node.name}</div>
       <span
         className={`self-start inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${badgeStyle}`}
       >
@@ -316,7 +316,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
         {Array.from({ length: 5 }).map((_, i) => (
           <div key={i} className="flex items-center gap-1">
             <div className="flex-1 h-16 bg-bg-elevated rounded w-28" />
-            {i < 4 && <span className="text-t3 text-sm px-0.5">→</span>}
+            {i < 4 && <span className="text-t3 text-body-2 px-0.5">→</span>}
           </div>
         ))}
       </div>
@@ -328,9 +328,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
       {nodes.map((node, idx) => (
         <div key={node.id} className="flex items-center gap-1 flex-1 min-w-0">
           <PipelineCard node={node} />
-          {idx < nodes.length - 1 && (
+          {idx < nodes.length - 1 && <span className="text-t3 text-body-2 shrink-0 px-0.5">→</span>}
-            <span className="text-t3 text-sm shrink-0 px-0.5">→</span>
-          )}
         </div>
       ))}
     </div>
@@ -369,13 +367,13 @@ const LOG_HEADERS = ['시간', '데이터소스', '데이터종류', '크기', '
 function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean }) {
   return (
     <div className="overflow-auto">
-      <table className="w-full text-xs border-collapse">
+      <table className="w-full text-caption border-collapse">
         <thead>
           <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
             {LOG_HEADERS.map((h) => (
               <th
                 key={h}
-                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+                className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
               >
                 {h}
               </th>
@@ -385,7 +383,7 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
         <tbody>
           {loading && rows.length === 0
             ? Array.from({ length: 8 }).map((_, i) => (
-                <tr key={i} className="border-b border-stroke-1 animate-pulse">
+                <tr key={i} className="border-b border-stroke animate-pulse">
                   {LOG_HEADERS.map((_, j) => (
                     <td key={j} className="px-3 py-2">
                       <div className="h-3 bg-bg-elevated rounded w-16" />
@@ -394,10 +392,8 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
                 </tr>
               ))
             : rows.map((row) => (
-                <tr key={row.id} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                <tr key={row.id} className="border-b border-stroke hover:bg-bg-surface/50">
-                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.timestamp}</td>
-                    {row.timestamp}
-                  </td>
                   <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.source}</td>
                   <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.dataType}</td>
                   <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.size}</td>
@@ -444,7 +440,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
   }
 
   if (alerts.length === 0) {
-    return <p className="text-xs text-t3 py-2">활성 알림이 없습니다.</p>;
+    return <p className="text-caption text-t3 py-2">활성 알림이 없습니다.</p>;
   }
 
   return (
@@ -452,7 +448,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
       {alerts.map((alert) => (
         <div
           key={alert.id}
-          className={`flex items-start gap-2 px-3 py-2 rounded border text-xs ${getAlertStyle(alert.level)}`}
+          className={`flex items-start gap-2 px-3 py-2 rounded border text-caption ${getAlertStyle(alert.level)}`}
         >
           <span className="font-semibold shrink-0">[{alert.level}]</span>
           <span className="flex-1">{alert.message}</span>
@@ -511,12 +507,12 @@ export default function RndRescuePanel() {
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* ── 헤더 ── */}
-      <div className="shrink-0 border-b border-stroke-1">
+      <div className="shrink-0 border-b border-stroke">
         <div className="flex items-center justify-between px-5 py-3">
-          <h2 className="text-sm font-semibold text-t1">긴급구난과제 연계 모니터링</h2>
+          <h2 className="text-body-2 font-semibold text-t1">긴급구난과제 연계 모니터링</h2>
           <div className="flex items-center gap-3">
             {lastUpdate && (
-              <span className="text-xs text-t3">
+              <span className="text-caption text-t3">
                 갱신:{' '}
                 {lastUpdate.toLocaleTimeString('ko-KR', {
                   hour: '2-digit',
@@ -528,7 +524,7 @@ export default function RndRescuePanel() {
             <button
               onClick={() => void fetchData()}
               disabled={loading}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               <svg
                 className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
@@ -548,23 +544,21 @@ export default function RndRescuePanel() {
           </div>
         </div>
         {/* 요약 통계 바 */}
-        <div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-xs text-t3 border-t border-stroke-1">
+        <div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-caption text-t3 border-t border-stroke">
           <span>
-            정상 수신:{' '}
+            정상 수신: <span className="text-color-success font-medium">{totalReceived}건</span>
-            <span className="text-emerald-400 font-medium">{totalReceived}건</span>
           </span>
           <span className="text-stroke-1">|</span>
           <span>
-            지연: <span className="text-yellow-400 font-medium">{totalDelayed}건</span>
+            지연: <span className="text-color-caution font-medium">{totalDelayed}건</span>
           </span>
           <span className="text-stroke-1">|</span>
           <span>
-            실패: <span className="text-red-400 font-medium">{totalFailed}건</span>
+            실패: <span className="text-color-danger font-medium">{totalFailed}건</span>
           </span>
           <span className="text-stroke-1">|</span>
           <span>
-            금일 분석 완료:{' '}
+            금일 분석 완료: <span className="text-color-accent font-medium">5 / 6회</span>
-            <span className="text-cyan-400 font-medium">5 / 6회</span>
           </span>
         </div>
       </div>
@@ -572,17 +566,17 @@ export default function RndRescuePanel() {
       {/* ── 스크롤 영역 ── */}
       <div className="flex-1 overflow-auto">
         {/* 파이프라인 현황 */}
-        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+        <section className="px-5 pt-4 pb-3 border-b border-stroke">
-          <h3 className="text-xs font-semibold text-t2 mb-3 uppercase tracking-wide">
+          <h3 className="text-caption font-semibold text-t2 mb-3 uppercase tracking-wide">
             데이터 파이프라인 현황
           </h3>
           <PipelineFlow nodes={pipeline} loading={loading} />
         </section>
 
         {/* 필터 바 + 수신 이력 테이블 */}
-        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+        <section className="px-5 pt-4 pb-3 border-b border-stroke">
           <div className="flex items-center justify-between mb-3 gap-3 flex-wrap">
-            <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide shrink-0">
+            <h3 className="text-caption font-semibold text-t2 uppercase tracking-wide shrink-0">
               데이터 수신 이력
             </h3>
             <div className="flex items-center gap-2 flex-wrap">
@@ -590,7 +584,7 @@ export default function RndRescuePanel() {
               <select
                 value={filterSource}
                 onChange={(e) => setFilterSource(e.target.value as FilterSource)}
-                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+                className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
               >
                 <option value="all">모두 (소스)</option>
                 <option value="HYCOM">HYCOM</option>
@@ -601,7 +595,7 @@ export default function RndRescuePanel() {
               <select
                 value={filterReceive}
                 onChange={(e) => setFilterReceive(e.target.value as FilterReceive)}
-                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+                className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
               >
                 <option value="all">모두 (상태)</option>
                 <option value="수신완료">수신완료</option>
@@ -613,13 +607,13 @@ export default function RndRescuePanel() {
               <select
                 value={filterPeriod}
                 onChange={(e) => setFilterPeriod(e.target.value as FilterPeriod)}
-                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+                className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
               >
                 <option value="6h">최근 6시간</option>
                 <option value="12h">최근 12시간</option>
                 <option value="24h">최근 24시간</option>
               </select>
-              <span className="text-xs text-t3">{filteredLogs.length}건</span>
+              <span className="text-caption text-t3">{filteredLogs.length}건</span>
             </div>
           </div>
           <DataLogTable rows={filteredLogs} loading={loading} />
@@ -627,9 +621,7 @@ export default function RndRescuePanel() {
 
         {/* 알림 현황 */}
         <section className="px-5 pt-4 pb-5">
-          <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide mb-3">
+          <h3 className="text-caption font-semibold text-t2 uppercase tracking-wide mb-3">알림 현황</h3>
-            알림 현황
-          </h3>
           <AlertList alerts={alerts} loading={loading} />
         </section>
       </div>

frontend/src/components/admin/components/SensitiveLayerPanel.tsx

@@ -135,7 +135,7 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps)
       <div className="px-6 py-4 border-b border-stroke shrink-0">
         <div className="flex items-center justify-between mb-3">
           <div>
-            <h1 className="text-lg font-bold text-fg font-korean">{title}</h1>
+            <h1 className="text-title-1 font-bold text-fg font-korean">{title}</h1>
             <p className="text-caption text-fg-disabled mt-1 font-korean">총 {total}개</p>
           </div>
         </div>
@@ -168,7 +168,7 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps)
 
       {/* 오류 메시지 */}
       {error && (
-        <div className="px-6 py-2 text-caption text-red-400 bg-[rgba(239,68,68,0.05)] border-b border-stroke shrink-0 font-korean">
+        <div className="px-6 py-2 text-caption text-color-danger bg-[rgba(239,68,68,0.08)] border-b border-stroke shrink-0 font-korean">
           {error}
         </div>
       )}

frontend/src/components/admin/components/SettingsPanel.tsx

@@ -63,7 +63,7 @@ function SettingsPanel() {
   return (
     <div className="flex flex-col h-full">
       <div className="px-6 py-4 border-b border-stroke">
-        <h1 className="text-lg font-bold text-fg font-korean">시스템 설정</h1>
+        <h1 className="text-title-1 font-bold text-fg font-korean">시스템 설정</h1>
         <p className="text-caption text-fg-disabled mt-1 font-korean">
           사용자 등록 및 권한 관련 시스템 설정을 관리합니다
         </p>
@@ -87,9 +87,9 @@ function SettingsPanel() {
                   <div className="text-title-4 font-semibold text-fg font-korean">자동 승인</div>
                   <p className="text-label-2 text-fg-disabled mt-1 font-korean leading-relaxed">
                     활성화하면 신규 사용자가 등록 즉시{' '}
-                    <span className="text-green-400 font-semibold">ACTIVE</span> 상태가 됩니다.
+                    <span className="text-color-success font-semibold">ACTIVE</span> 상태가 됩니다.
                     비활성화하면 관리자 승인 전까지{' '}
-                    <span className="text-yellow-400 font-semibold">PENDING</span> 상태로
+                    <span className="text-color-caution font-semibold">PENDING</span> 상태로
                     대기합니다.
                   </p>
                 </div>
@@ -152,8 +152,8 @@ function SettingsPanel() {
                 </div>
                 <p className="text-label-2 text-fg-disabled font-korean leading-relaxed mb-3">
                   지정된 도메인의 Google 계정은 가입 즉시{' '}
-                  <span className="text-green-400 font-semibold">ACTIVE</span> 상태가 됩니다. 미지정
+                  <span className="text-color-success font-semibold">ACTIVE</span> 상태가 됩니다. 미지정
-                  도메인은 <span className="text-yellow-400 font-semibold">PENDING</span> 상태로
+                  도메인은 <span className="text-color-caution font-semibold">PENDING</span> 상태로
                   관리자 승인이 필요합니다. 여러 도메인은 쉼표(,)로 구분합니다.
                 </p>
                 <div className="flex gap-2">
@@ -226,25 +226,25 @@ function SettingsPanel() {
               <div className="flex flex-col gap-3 text-label-1 font-korean">
                 <div className="flex items-center gap-2">
                   <span
-                    className={`w-2 h-2 rounded-full ${settings?.autoApprove ? 'bg-green-400' : 'bg-yellow-400'}`}
+                    className={`w-2 h-2 rounded-full ${settings?.autoApprove ? 'bg-color-success' : 'bg-color-caution'}`}
                   />
                   <span className="text-fg-sub">
                     신규 사용자 등록 시{' '}
                     {settings?.autoApprove ? (
-                      <span className="text-green-400 font-semibold">즉시 활성화</span>
+                      <span className="text-color-success font-semibold">즉시 활성화</span>
                     ) : (
-                      <span className="text-yellow-400 font-semibold">관리자 승인 필요</span>
+                      <span className="text-color-caution font-semibold">관리자 승인 필요</span>
                     )}
                   </span>
                 </div>
                 <div className="flex items-center gap-2">
                   <span
-                    className={`w-2 h-2 rounded-full ${settings?.defaultRole ? 'bg-green-400' : 'bg-fg-disabled'}`}
+                    className={`w-2 h-2 rounded-full ${settings?.defaultRole ? 'bg-color-success' : 'bg-fg-disabled'}`}
                   />
                   <span className="text-fg-sub">
                     기본 역할 자동 할당{' '}
                     {settings?.defaultRole ? (
-                      <span className="text-green-400 font-semibold">활성</span>
+                      <span className="text-color-success font-semibold">활성</span>
                     ) : (
                       <span className="text-fg-disabled font-semibold">비활성</span>
                     )}
@@ -252,12 +252,12 @@ function SettingsPanel() {
                 </div>
                 <div className="flex items-center gap-2">
                   <span
-                    className={`w-2 h-2 rounded-full ${oauthSettings?.autoApproveDomains ? 'bg-blue-400' : 'bg-fg-disabled'}`}
+                    className={`w-2 h-2 rounded-full ${oauthSettings?.autoApproveDomains ? 'bg-color-info' : 'bg-fg-disabled'}`}
                   />
                   <span className="text-fg-sub">
                     Google OAuth 자동 승인 도메인{' '}
                     {oauthSettings?.autoApproveDomains ? (
-                      <span className="text-blue-400 font-semibold font-mono">
+                      <span className="text-color-info font-semibold font-mono">
                         {oauthSettings.autoApproveDomains}
                       </span>
                     ) : (

frontend/src/components/admin/components/SystemArchPanel.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { FrameworkTab } from './contents/FrameworkTab';
+import { TargetArchTab } from './contents/TargetArchTab';
+import { InterfaceTab } from './contents/InterfaceTab';
+import { HeterogeneousTab } from './contents/HeterogeneousTab';
+import { CommonFeaturesTab } from './contents/CommonFeaturesTab';
+
+type TabId = 'framework' | 'target' | 'interface' | 'heterogeneous' | 'common-features';
+
+const TABS: { id: TabId; label: string }[] = [
+  { id: 'framework', label: '표준 프레임워크' },
+  { id: 'target', label: '목표시스템 아키텍쳐' },
+  { id: 'interface', label: '시스템 인터페이스 연계' },
+  { id: 'heterogeneous', label: '이기종시스템연계' },
+  { id: 'common-features', label: '공통기능' },
+];
+
+// ─── 기술 스택 테이블 데이터 ──────────────────────────────────────────────────────
+
+export default function SystemArchPanel() {
+  const [activeTab, setActiveTab] = useState<TabId>('framework');
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between px-5 py-3 border-b border-stroke shrink-0">
+        <h2 className="text-body-2 font-semibold text-t1">시스템구조</h2>
+      </div>
+
+      {/* 탭 버튼 */}
+      <div className="flex gap-1.5 px-5 py-2.5 border-b border-stroke shrink-0 bg-bg-base">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`px-3 py-1.5 text-caption font-medium rounded transition-colors ${
+              activeTab === tab.id
+                ? 'bg-color-accent text-white'
+                : 'bg-bg-elevated text-t2 hover:bg-bg-card'
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* 탭 콘텐츠 */}
+      <div className="flex-1 overflow-auto">
+        {activeTab === 'framework' && <FrameworkTab />}
+        {activeTab === 'target' && <TargetArchTab />}
+        {activeTab === 'interface' && <InterfaceTab />}
+        {activeTab === 'heterogeneous' && <HeterogeneousTab />}
+        {activeTab === 'common-features' && <CommonFeaturesTab />}
+      </div>
+    </div>
+  );
+}

frontend/src/components/admin/components/UsersPanel.tsx

@@ -0,0 +1,563 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  fetchUsers,
+  fetchRoles,
+  fetchOrgs,
+  updateUserApi,
+  approveUserApi,
+  rejectUserApi,
+  assignRolesApi,
+  type UserListItem,
+  type RoleWithPermissions,
+  type OrgItem,
+} from '@common/services/authApi';
+import { getRoleColor, statusLabels } from './adminConstants';
+import { RegisterModal } from './contents/RegisterModal';
+import { UserDetailModal } from './contents/UserDetailModal';
+/* eslint-disable react-refresh/only-export-components */
+
+const PAGE_SIZE = 15;
+
+// ─── 포맷 헬퍼 ─────────────────────────────────────────────────
+export function formatDate(dateStr: string | null) {
+  if (!dateStr) return '-';
+  return new Date(dateStr).toLocaleString('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+
+function UsersPanel() {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('');
+  const [orgFilter, setOrgFilter] = useState<string>('');
+  const [users, setUsers] = useState<UserListItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [allRoles, setAllRoles] = useState<RoleWithPermissions[]>([]);
+  const [allOrgs, setAllOrgs] = useState<OrgItem[]>([]);
+  const [roleEditUserId, setRoleEditUserId] = useState<string | null>(null);
+  const [selectedRoleSns, setSelectedRoleSns] = useState<number[]>([]);
+  const [showRegisterModal, setShowRegisterModal] = useState(false);
+  const [detailUser, setDetailUser] = useState<UserListItem | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const roleDropdownRef = useRef<HTMLDivElement>(null);
+
+  const loadUsers = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await fetchUsers(searchTerm || undefined, statusFilter || undefined);
+      setUsers(data);
+      setCurrentPage(1);
+    } catch (err) {
+      console.error('사용자 목록 조회 실패:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [searchTerm, statusFilter]);
+
+  useEffect(() => {
+    loadUsers();
+  }, [loadUsers]);
+
+  useEffect(() => {
+    fetchRoles().then(setAllRoles).catch(console.error);
+    fetchOrgs().then(setAllOrgs).catch(console.error);
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (roleDropdownRef.current && !roleDropdownRef.current.contains(e.target as Node)) {
+        setRoleEditUserId(null);
+      }
+    };
+    if (roleEditUserId) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [roleEditUserId]);
+
+  // ─── 필터링 (org 클라이언트 사이드) ───────────────────────────
+  const filteredUsers = orgFilter ? users.filter((u) => String(u.orgSn) === orgFilter) : users;
+
+  // ─── 페이지네이션 ──────────────────────────────────────────────
+  const totalCount = filteredUsers.length;
+  const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
+  const pagedUsers = filteredUsers.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
+
+  // ─── 액션 핸들러 ──────────────────────────────────────────────
+  const handleUnlock = async (userId: string) => {
+    try {
+      await updateUserApi(userId, { status: 'ACTIVE' });
+      await loadUsers();
+    } catch (err) {
+      console.error('계정 잠금 해제 실패:', err);
+    }
+  };
+
+  const handleApprove = async (userId: string) => {
+    try {
+      await approveUserApi(userId);
+      await loadUsers();
+    } catch (err) {
+      console.error('사용자 승인 실패:', err);
+    }
+  };
+
+  const handleReject = async (userId: string) => {
+    try {
+      await rejectUserApi(userId);
+      await loadUsers();
+    } catch (err) {
+      console.error('사용자 거절 실패:', err);
+    }
+  };
+
+  const handleDeactivate = async (userId: string) => {
+    try {
+      await updateUserApi(userId, { status: 'INACTIVE' });
+      await loadUsers();
+    } catch (err) {
+      console.error('사용자 비활성화 실패:', err);
+    }
+  };
+
+  const handleActivate = async (userId: string) => {
+    try {
+      await updateUserApi(userId, { status: 'ACTIVE' });
+      await loadUsers();
+    } catch (err) {
+      console.error('사용자 활성화 실패:', err);
+    }
+  };
+
+  const handleOpenRoleEdit = (user: UserListItem) => {
+    setRoleEditUserId(user.id);
+    setSelectedRoleSns(user.roleSns || []);
+  };
+
+  const toggleRoleSelection = (roleSn: number) => {
+    setSelectedRoleSns((prev) =>
+      prev.includes(roleSn) ? prev.filter((s) => s !== roleSn) : [...prev, roleSn],
+    );
+  };
+
+  const handleSaveRoles = async (userId: string) => {
+    try {
+      await assignRolesApi(userId, selectedRoleSns);
+      await loadUsers();
+      setRoleEditUserId(null);
+    } catch (err) {
+      console.error('역할 할당 실패:', err);
+    }
+  };
+
+  const pendingCount = users.filter((u) => u.status === 'PENDING').length;
+
+  return (
+    <>
+      <div className="flex flex-col h-full">
+        {/* 헤더 */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
+          <div className="flex items-center gap-3">
+            <div>
+              <h1 className="text-title-1 font-bold text-fg font-korean">사용자 관리</h1>
+              <p className="text-caption text-fg-disabled mt-1 font-korean">
+                총 {filteredUsers.length}명
+              </p>
+            </div>
+            {pendingCount > 0 && (
+              <span className="px-2.5 py-1 text-caption font-bold rounded-full bg-[rgba(234,179,8,0.15)] text-color-caution border border-[rgba(234,179,8,0.3)] animate-pulse font-korean">
+                승인대기 {pendingCount}명
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            {/* 소속 필터 */}
+            <select
+              value={orgFilter}
+              onChange={(e) => {
+                setOrgFilter(e.target.value);
+                setCurrentPage(1);
+              }}
+              className="px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+            >
+              <option value="">전체 소속</option>
+              {allOrgs.map((org) => (
+                <option key={org.orgSn} value={String(org.orgSn)}>
+                  {org.orgAbbrNm || org.orgNm}
+                </option>
+              ))}
+            </select>
+            {/* 상태 필터 */}
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className="px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+            >
+              <option value="">전체 상태</option>
+              <option value="PENDING">승인대기</option>
+              <option value="ACTIVE">활성</option>
+              <option value="LOCKED">잠김</option>
+              <option value="INACTIVE">비활성</option>
+              <option value="REJECTED">거절됨</option>
+            </select>
+            {/* 텍스트 검색 */}
+            <input
+              type="text"
+              placeholder="이름, 계정 검색..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-56 px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+            />
+            <button
+              onClick={() => setShowRegisterModal(true)}
+              className="px-4 py-2 text-caption font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all font-korean"
+            >
+              + 사용자 등록
+            </button>
+          </div>
+        </div>
+
+        {/* 테이블 */}
+        <div className="flex-1 overflow-auto">
+          {loading ? (
+            <div className="flex items-center justify-center h-32 text-fg-disabled text-body-2 font-korean">
+              불러오는 중...
+            </div>
+          ) : (
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-stroke bg-bg-surface">
+                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean w-10">
+                    번호
+                  </th>
+                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-mono">
+                    ID
+                  </th>
+                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
+                    사용자명
+                  </th>
+                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
+                    직급
+                  </th>
+                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
+                    소속
+                  </th>
+                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
+                    이메일
+                  </th>
+                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
+                    역할
+                  </th>
+                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
+                    승인상태
+                  </th>
+                  <th className="px-4 py-3 text-right text-caption font-semibold text-fg-disabled font-korean">
+                    관리
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {pagedUsers.length === 0 ? (
+                  <tr>
+                    <td
+                      colSpan={9}
+                      className="px-6 py-10 text-center text-caption text-fg-disabled font-korean"
+                    >
+                      조회된 사용자가 없습니다.
+                    </td>
+                  </tr>
+                ) : (
+                  pagedUsers.map((user, idx) => {
+                    const statusInfo = statusLabels[user.status] || statusLabels.INACTIVE;
+                    const rowNum = (currentPage - 1) * PAGE_SIZE + idx + 1;
+                    return (
+                      <tr
+                        key={user.id}
+                        className="border-b border-stroke hover:bg-[rgba(6,182,212,0.04)] transition-colors"
+                      >
+                        {/* 번호 */}
+                        <td className="px-4 py-3 text-caption text-fg-disabled font-mono text-center">
+                          {rowNum}
+                        </td>
+
+                        {/* ID(account) */}
+                        <td className="px-4 py-3 text-caption text-fg-sub font-mono">
+                          {user.account}
+                        </td>
+
+                        {/* 사용자명 */}
+                        <td className="px-4 py-3">
+                          <button
+                            onClick={() => setDetailUser(user)}
+                            className="text-caption text-color-accent font-semibold font-korean hover:underline"
+                          >
+                            {user.name}
+                          </button>
+                        </td>
+
+                        {/* 직급 */}
+                        <td className="px-4 py-3 text-caption text-fg-sub font-korean">
+                          {user.rank || '-'}
+                        </td>
+
+                        {/* 소속 */}
+                        <td className="px-4 py-3 text-caption text-fg-sub font-korean">
+                          {user.orgAbbr || user.orgName || '-'}
+                        </td>
+
+                        {/* 이메일 */}
+                        <td className="px-4 py-3 text-caption text-fg-disabled font-mono">
+                          {user.email || '-'}
+                        </td>
+
+                        {/* 역할 (인라인 편집) */}
+                        <td className="px-4 py-3">
+                          <div className="relative">
+                            <div
+                              className="flex flex-wrap gap-1 cursor-pointer"
+                              onClick={() => handleOpenRoleEdit(user)}
+                              title="클릭하여 역할 변경"
+                            >
+                              {user.roles.length > 0 ? (
+                                user.roles.map((roleCode) => {
+                                  const roleName =
+                                    allRoles.find((r) => r.code === roleCode)?.name || roleCode;
+                                  return (
+                                    <span
+                                      key={roleCode}
+                                      className="px-2 py-0.5 text-caption font-semibold rounded-md font-korean text-fg-sub bg-bg-elevated border border-stroke-light"
+                                    >
+                                      {roleName}
+                                    </span>
+                                  );
+                                })
+                              ) : (
+                                <span className="text-caption text-fg-disabled font-korean">
+                                  역할 없음
+                                </span>
+                              )}
+                              <span className="text-caption text-fg-disabled ml-0.5">
+                                <svg
+                                  width="10"
+                                  height="10"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  strokeWidth="2.5"
+                                >
+                                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                                </svg>
+                              </span>
+                            </div>
+                            {roleEditUserId === user.id && (
+                              <div
+                                ref={roleDropdownRef}
+                                className="absolute z-20 top-full left-0 mt-1 p-2 bg-bg-surface border border-stroke rounded-lg shadow-lg min-w-[200px]"
+                              >
+                                <div className="text-caption text-fg-disabled font-korean font-semibold mb-1.5 px-1">
+                                  역할 선택
+                                </div>
+                                {allRoles.map((role, roleIdx) => {
+                                  const color = getRoleColor(role.code, roleIdx);
+                                  return (
+                                    <label
+                                      key={role.sn}
+                                      className="flex items-center gap-2 px-2 py-1.5 hover:bg-[rgba(6,182,212,0.08)] rounded cursor-pointer"
+                                    >
+                                      <input
+                                        type="checkbox"
+                                        checked={selectedRoleSns.includes(role.sn)}
+                                        onChange={() => toggleRoleSelection(role.sn)}
+                                        style={{ accentColor: color }}
+                                      />
+                                      <span className="text-caption font-korean" style={{ color }}>
+                                        {role.name}
+                                      </span>
+                                      <span className="text-caption text-fg-disabled font-mono">
+                                        {role.code}
+                                      </span>
+                                    </label>
+                                  );
+                                })}
+                                <div className="flex justify-end gap-2 mt-2 pt-2 border-t border-stroke">
+                                  <button
+                                    onClick={() => setRoleEditUserId(null)}
+                                    className="px-3 py-1 text-caption text-fg-disabled border border-stroke rounded hover:bg-bg-surface-hover font-korean"
+                                  >
+                                    취소
+                                  </button>
+                                  <button
+                                    onClick={() => handleSaveRoles(user.id)}
+                                    disabled={selectedRoleSns.length === 0}
+                                    className="px-3 py-1 text-caption font-semibold rounded bg-color-accent text-bg-0 hover:shadow-[0_0_8px_rgba(6,182,212,0.3)] disabled:opacity-50 font-korean"
+                                  >
+                                    저장
+                                  </button>
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        </td>
+
+                        {/* 승인상태 */}
+                        <td className="px-4 py-3">
+                          <span
+                            className={`inline-flex items-center gap-1.5 text-caption font-semibold font-korean ${statusInfo.color}`}
+                          >
+                            <span className={`w-1.5 h-1.5 rounded-full ${statusInfo.dot}`} />
+                            {statusInfo.label}
+                          </span>
+                        </td>
+
+                        {/* 관리 */}
+                        <td className="px-4 py-3 text-right">
+                          <div className="flex items-center justify-end gap-2">
+                            {user.status === 'PENDING' && (
+                              <>
+                                <button
+                                  onClick={() => handleApprove(user.id)}
+                                  className="px-2 py-1 text-caption font-semibold text-color-success border border-color-success rounded hover:bg-[rgba(34,197,94,0.12)] transition-all font-korean"
+                                >
+                                  승인
+                                </button>
+                                <button
+                                  onClick={() => handleReject(user.id)}
+                                  className="px-2 py-1 text-caption font-semibold text-color-danger border border-color-danger rounded hover:bg-[rgba(239,68,68,0.12)] transition-all font-korean"
+                                >
+                                  거절
+                                </button>
+                              </>
+                            )}
+                            {user.status === 'LOCKED' && (
+                              <button
+                                onClick={() => handleUnlock(user.id)}
+                                className="px-2 py-1 text-caption font-semibold text-color-caution border border-color-caution rounded hover:bg-[rgba(234,179,8,0.12)] transition-all font-korean"
+                              >
+                                잠금해제
+                              </button>
+                            )}
+                            {user.status === 'ACTIVE' && (
+                              <button
+                                onClick={() => handleDeactivate(user.id)}
+                                className="px-2 py-1 text-caption font-semibold text-fg-disabled border border-stroke rounded hover:bg-[rgba(6,182,212,0.08)] transition-all font-korean"
+                              >
+                                비활성화
+                              </button>
+                            )}
+                            {(user.status === 'INACTIVE' || user.status === 'REJECTED') && (
+                              <button
+                                onClick={() => handleActivate(user.id)}
+                                className="px-2 py-1 text-caption font-semibold text-color-success border border-color-success rounded hover:bg-[rgba(34,197,94,0.12)] transition-all font-korean"
+                              >
+                                활성화
+                              </button>
+                            )}
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          )}
+        </div>
+
+        {/* 페이지네이션 */}
+        {!loading && totalPages > 1 && (
+          <div className="flex items-center justify-between px-6 py-3 border-t border-stroke bg-bg-surface">
+            <span className="text-label-2 text-fg-disabled font-korean">
+              {(currentPage - 1) * PAGE_SIZE + 1}–{Math.min(currentPage * PAGE_SIZE, totalCount)} /{' '}
+              {totalCount}명
+            </span>
+            <div className="flex items-center gap-1">
+              <button
+                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                disabled={currentPage === 1}
+                className="px-2.5 py-1 text-label-2 border border-stroke text-fg-disabled rounded hover:bg-[rgba(6,182,212,0.08)] disabled:opacity-40 transition-all font-korean"
+              >
+                이전
+              </button>
+              {Array.from({ length: totalPages }, (_, i) => i + 1)
+                .filter((p) => p === 1 || p === totalPages || Math.abs(p - currentPage) <= 2)
+                .reduce<(number | '...')[]>((acc, p, i, arr) => {
+                  if (
+                    i > 0 &&
+                    typeof arr[i - 1] === 'number' &&
+                    (p as number) - (arr[i - 1] as number) > 1
+                  ) {
+                    acc.push('...');
+                  }
+                  acc.push(p);
+                  return acc;
+                }, [])
+                .map((item, i) =>
+                  item === '...' ? (
+                    <span key={`ellipsis-${i}`} className="px-2 text-label-2 text-fg-disabled">
+                      …
+                    </span>
+                  ) : (
+                    <button
+                      key={item}
+                      onClick={() => setCurrentPage(item as number)}
+                      className="px-2.5 py-1 text-label-2 border rounded transition-all font-mono"
+                      style={
+                        currentPage === item
+                          ? {
+                              borderColor: 'var(--color-accent)',
+                              color: 'var(--color-accent)',
+                              background: 'rgba(6,182,212,0.1)',
+                            }
+                          : { borderColor: 'var(--border)', color: 'var(--fg-disabled)' }
+                      }
+                    >
+                      {item}
+                    </button>
+                  ),
+                )}
+              <button
+                onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                disabled={currentPage === totalPages}
+                className="px-2.5 py-1 text-label-2 border border-stroke text-fg-disabled rounded hover:bg-[rgba(6,182,212,0.08)] disabled:opacity-40 transition-all font-korean"
+              >
+                다음
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 사용자 등록 모달 */}
+      {showRegisterModal && (
+        <RegisterModal
+          allRoles={allRoles}
+          allOrgs={allOrgs}
+          onClose={() => setShowRegisterModal(false)}
+          onSuccess={loadUsers}
+        />
+      )}
+
+      {/* 사용자 상세/수정 모달 */}
+      {detailUser && (
+        <UserDetailModal
+          user={detailUser}
+          allRoles={allRoles}
+          allOrgs={allOrgs}
+          onClose={() => setDetailUser(null)}
+          onUpdated={() => {
+            loadUsers();
+            // 최신 정보로 모달 갱신을 위해 닫지 않음
+          }}
+        />
+      )}
+    </>
+  );
+}
+
+export default UsersPanel;

frontend/src/components/admin/components/VesselMaterialsPanel.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo } from 'react';
-import { fetchOrganizations } from '@tabs/assets/services/assetsApi';
+import { fetchOrganizations } from '@components/assets/services/assetsApi';
-import type { AssetOrgCompat } from '@tabs/assets/services/assetsApi';
+import type { AssetOrgCompat } from '@interfaces/assets/AssetsInterface';
-import { typeTagCls } from '@tabs/assets/components/assetTypes';
+import { typeTagCls } from '@components/assets/components/assetTypes';
 
 const PAGE_SIZE = 20;
 
@@ -89,7 +89,7 @@ function VesselMaterialsPanel() {
       {/* 헤더 */}
       <div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
         <div>
-          <h1 className="text-lg font-bold text-fg font-korean">방제선 보유자재 현황</h1>
+          <h1 className="text-title-1 font-bold text-fg font-korean">방제선 보유자재 현황</h1>
           <p className="text-caption text-fg-disabled mt-1 font-korean">
             총 {filtered.length}개 기관 (방제선 보유)
           </p>
@@ -327,16 +327,11 @@ function VesselMaterialsPanel() {
               <button
                 key={p}
                 onClick={() => setCurrentPage(p)}
-                className="px-2.5 py-1 text-label-2 border rounded transition-colors"
+                className={`px-2.5 py-1 text-label-2 border rounded transition-colors ${
-                style={
                   p === safePage
-                    ? {
+                    ? 'border-color-accent text-color-accent bg-[rgba(6,182,212,0.08)]'
-                        borderColor: 'var(--color-accent)',
+                    : 'border-stroke text-fg-sub'
-                        color: 'var(--color-accent)',
+                }`}
-                        background: 'rgba(6,182,212,0.1)',
-                      }
-                    : { borderColor: 'var(--border)', color: 'var(--text-2)' }
-                }
               >
                 {p}
               </button>

frontend/src/components/admin/components/VesselSignalPanel.tsx

@@ -10,18 +10,10 @@ interface SignalSlot {
 }
 
 // ─── 상수 ──────────────────────────────────────────────────
-const SOURCE_COLORS: Record<SignalSource, string> = {
-  VTS: '#3b82f6',
-  'VTS-AIS': '#a855f7',
-  'V-PASS': '#22c55e',
-  'E-NAVI': '#f97316',
-  'S&P AIS': '#ec4899',
-};
-
 const STATUS_COLOR: Record<string, string> = {
-  ok: '#22c55e',
+  ok: 'var(--color-success)',
-  warn: '#eab308',
+  warn: 'var(--color-caution)',
-  error: '#ef4444',
+  error: 'var(--color-danger)',
   none: 'rgba(255,255,255,0.06)',
 };
 
@@ -141,18 +133,18 @@ export default function VesselSignalPanel() {
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* 헤더 */}
-      <div className="flex items-center justify-between px-6 py-3 border-b border-stroke-1">
+      <div className="flex items-center justify-between px-6 py-3 border-b border-stroke">
         <h2 className="text-body-2 font-semibold text-fg">선박신호 수신 현황</h2>
         <div className="flex items-center gap-3">
           <input
             type="date"
             value={date}
             onChange={(e) => setDate(e.target.value)}
-            className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke-1 text-fg"
+            className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-fg"
           />
           <button
             onClick={load}
-            className="px-3 py-1 text-caption rounded bg-bg-elevated border border-stroke-1 text-fg-sub hover:bg-bg-card"
+            className="px-3 py-1 text-caption rounded bg-bg-elevated border border-stroke text-fg-sub hover:bg-bg-card"
           >
             새로고침
           </button>
@@ -172,7 +164,6 @@ export default function VesselSignalPanel() {
               {/* 시간축 높이 맞춤 빈칸 */}
               <div className="h-5 mb-3" />
               {SIGNAL_SOURCES.map((src) => {
-                const c = SOURCE_COLORS[src];
                 const st = stats.find((s) => s.src === src)!;
                 return (
                   <div
@@ -180,10 +171,10 @@ export default function VesselSignalPanel() {
                     className="flex flex-col justify-center mb-4"
                     style={{ height: 20 }}
                   >
-                    <span className="text-label-1 font-semibold leading-tight" style={{ color: c }}>
+                    <span className="text-label-1 font-semibold leading-tight text-fg">
                       {src}
                     </span>
-                    <span className="text-caption font-mono text-text-4 mt-0.5">{st.rate}%</span>
+                    <span className="text-caption font-mono text-fg-sub mt-0.5">{st.rate}%</span>
                   </div>
                 );
               })}

frontend/src/components/admin/components/contents/AuditLogModal.tsx

@@ -0,0 +1,212 @@
+import { useState } from 'react';
+import type { AuditLogEntry, DeidentifyTask } from '../DeidentifyPanel';
+import { MOCK_AUDIT_LOGS } from '../DeidentifyPanel';
+
+function getAuditResultClass(type: AuditLogEntry['resultType']): string {
+  switch (type) {
+    case '성공':
+      return 'text-emerald-400 bg-emerald-500/10';
+    case '진행중':
+      return 'text-cyan-400 bg-cyan-500/10';
+    case '실패':
+      return 'text-red-400 bg-red-500/10';
+    case '거부':
+      return 'text-yellow-400 bg-yellow-500/10';
+  }
+}
+
+interface AuditLogModalProps {
+  task: DeidentifyTask;
+  onClose: () => void;
+}
+
+export function AuditLogModal({ task, onClose }: AuditLogModalProps) {
+  const logs = MOCK_AUDIT_LOGS[task.id] ?? [];
+  const [selectedLog, setSelectedLog] = useState<AuditLogEntry | null>(null);
+  const [filterOperator, setFilterOperator] = useState('모두');
+  const [startDate, setStartDate] = useState('2026-04-01');
+  const [endDate, setEndDate] = useState('2026-04-11');
+
+  const operators = ['모두', ...Array.from(new Set(logs.map((l) => l.operator)))];
+  const filteredLogs = logs.filter((l) => {
+    if (filterOperator !== '모두' && l.operator !== filterOperator) return false;
+    return true;
+  });
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+      <div className="bg-bg-card border border-stroke rounded-lg shadow-2xl w-full max-w-5xl max-h-[85vh] flex flex-col">
+        {/* 헤더 */}
+        <div className="flex items-center justify-between px-5 py-3 border-b border-stroke shrink-0">
+          <h3 className="text-body-2 font-semibold text-t1">감시 감독 (감사로그) — {task.name}</h3>
+          <button
+            onClick={onClose}
+            className="text-t3 hover:text-t1 transition-colors text-lg leading-none"
+          >
+            ✕
+          </button>
+        </div>
+
+        {/* 필터 바 */}
+        <div className="flex items-center gap-3 px-5 py-2.5 border-b border-stroke shrink-0 bg-bg-base">
+          <span className="text-caption text-t3">기간:</span>
+          <input
+            type="date"
+            value={startDate}
+            onChange={(e) => setStartDate(e.target.value)}
+            className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
+          />
+          <span className="text-caption text-t3">~</span>
+          <input
+            type="date"
+            value={endDate}
+            onChange={(e) => setEndDate(e.target.value)}
+            className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
+          />
+          <span className="text-caption text-t3 ml-2">작업자:</span>
+          <select
+            value={filterOperator}
+            onChange={(e) => setFilterOperator(e.target.value)}
+            className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
+          >
+            {operators.map((op) => (
+              <option key={op} value={op}>
+                {op}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* 로그 테이블 */}
+        <div className="flex-1 overflow-auto px-5 py-3">
+          <table className="w-full text-caption border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+                {['시간', '작업자', '작업', '대상 데이터', '결과', '상세'].map((h) => (
+                  <th
+                    key={h}
+                    className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {filteredLogs.length === 0 ? (
+                <tr>
+                  <td colSpan={6} className="px-3 py-8 text-center text-t3">
+                    감사로그가 없습니다.
+                  </td>
+                </tr>
+              ) : (
+                filteredLogs.map((log) => (
+                  <tr
+                    key={log.id}
+                    className={`border-b border-stroke hover:bg-bg-surface/50 cursor-pointer ${selectedLog?.id === log.id ? 'bg-bg-surface/70' : ''}`}
+                    onClick={() => setSelectedLog(log)}
+                  >
+                    <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">
+                      {log.time.split(' ')[1]}
+                    </td>
+                    <td className="px-3 py-2 text-t1 whitespace-nowrap">{log.operator}</td>
+                    <td className="px-3 py-2 text-t2 whitespace-nowrap">{log.action}</td>
+                    <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">
+                      {log.targetData}
+                    </td>
+                    <td className="px-3 py-2">
+                      <span
+                        className={`inline-block px-2 py-0.5 rounded text-label-2 font-medium ${getAuditResultClass(log.resultType)}`}
+                      >
+                        {log.result}
+                      </span>
+                    </td>
+                    <td className="px-3 py-2">
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setSelectedLog(log);
+                        }}
+                        className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-color-accent transition-colors whitespace-nowrap"
+                      >
+                        보기
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* 로그 상세 정보 */}
+        {selectedLog && (
+          <div className="px-5 py-3 border-t border-stroke shrink-0 bg-bg-base">
+            <h4 className="text-caption font-semibold text-t1 mb-2">로그 상세 정보</h4>
+            <div className="bg-bg-elevated border border-stroke rounded p-3 text-caption grid grid-cols-2 gap-x-6 gap-y-1.5">
+              <div>
+                <span className="text-t3">로그ID:</span>{' '}
+                <span className="text-t1 font-mono">{selectedLog.id}</span>
+              </div>
+              <div>
+                <span className="text-t3">타임스탬프:</span>{' '}
+                <span className="text-t1 font-mono">{selectedLog.time}</span>
+              </div>
+              <div>
+                <span className="text-t3">작업자:</span>{' '}
+                <span className="text-t1">
+                  {selectedLog.operator} ({selectedLog.operatorId})
+                </span>
+              </div>
+              <div>
+                <span className="text-t3">작업 유형:</span>{' '}
+                <span className="text-t1">{selectedLog.action}</span>
+              </div>
+              <div>
+                <span className="text-t3">대상:</span>{' '}
+                <span className="text-t1">
+                  {selectedLog.targetData} ({selectedLog.detail.dataCount.toLocaleString()}건)
+                </span>
+              </div>
+              <div>
+                <span className="text-t3">적용 규칙:</span>{' '}
+                <span className="text-t1">{selectedLog.detail.rulesApplied}</span>
+              </div>
+              <div>
+                <span className="text-t3">결과:</span>{' '}
+                <span className="text-t1">
+                  {selectedLog.result} (처리: {selectedLog.detail.processedCount.toLocaleString()},
+                  오류: {selectedLog.detail.errorCount})
+                </span>
+              </div>
+              <div>
+                <span className="text-t3">IP 주소:</span>{' '}
+                <span className="text-t1 font-mono">{selectedLog.ip}</span>
+              </div>
+              <div>
+                <span className="text-t3">브라우저:</span>{' '}
+                <span className="text-t1">{selectedLog.browser}</span>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 하단 버튼 */}
+        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-stroke shrink-0">
+          <button className="px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors">
+            상세내용 다운로드 (암호화됨)
+          </button>
+          <button className="px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors">
+            기간별 보고서 생성
+          </button>
+          <button
+            onClick={onClose}
+            className="px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors"
+          >
+            닫기
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/CommonFeaturesTab.tsx

@@ -0,0 +1,765 @@
+interface CommonFeatureItem {
+  title: string;
+  description: string;
+  details: string[];
+}
+
+const COMMON_FEATURES: CommonFeatureItem[] = [
+  {
+    title: '인증 시스템',
+    description: 'JWT 기반 세션 인증 + Google OAuth 소셜 로그인',
+    details: [
+      'HttpOnly 쿠키(WING_SESSION) 기반 토큰 관리 — XSS 방어',
+      'Access Token(15분) + Refresh Token(7일) 이중 토큰 구조',
+      'Google OAuth 2.0 소셜 로그인 지원',
+      'Zustand authStore 기반 프론트엔드 인증 상태 통합 관리',
+    ],
+  },
+  {
+    title: 'RBAC 2차원 권한',
+    description: 'AUTH_PERM 기반 기능별·역할별 2차원 권한 엔진',
+    details: [
+      'OPER_CD (R: 조회, C: 생성, U: 수정, D: 삭제) 4단계 조작 권한',
+      '역할(Role) × 기능(Feature) 매트릭스 기반 권한 매핑',
+      'permResolver 엔진으로 백엔드·프론트엔드 동시 권한 검증',
+      '메뉴 접근, 버튼 노출, API 호출 3중 권한 통제',
+    ],
+  },
+  {
+    title: 'API 통신 패턴',
+    description: 'Axios 기반 공통 API 클라이언트 + 자동 인증·에러 처리',
+    details: [
+      'GET/POST만 사용 (PUT/DELETE/PATCH 금지 — 보안취약점 점검 가이드 준수)',
+      '요청 인터셉터: 쿠키 자동 첨부 (withCredentials)',
+      '응답 인터셉터: 401 시 자동 토큰 갱신, 실패 시 로그아웃',
+      'TanStack Query 기반 서버 상태 캐싱 및 자동 재검증',
+    ],
+  },
+  {
+    title: '상태 관리',
+    description: 'Zustand(클라이언트) + TanStack Query(서버) 이중 상태 관리',
+    details: [
+      'Zustand: authStore(인증), menuStore(메뉴) 등 클라이언트 전역 상태',
+      'TanStack Query: API 응답 캐싱, 자동 재요청, 낙관적 업데이트',
+      '컴포넌트 로컬 상태: useState 활용',
+    ],
+  },
+  {
+    title: '메뉴 시스템',
+    description: 'DB 기반 동적 메뉴 + 권한 연동 자동 필터링',
+    details: [
+      'DB에서 메뉴 트리 구조를 동적으로 로드',
+      '사용자 권한에 따라 메뉴 항목 자동 필터링 (접근 불가 메뉴 미노출)',
+      '관리자 화면에서 메뉴 순서·표시 여부·아이콘 실시간 편집',
+      'menuStore(Zustand)로 현재 활성 메뉴 상태 전역 관리',
+    ],
+  },
+  {
+    title: '지도 엔진',
+    description: 'MapLibre GL JS 5.x + deck.gl 9.x 기반 GIS 시각화',
+    details: [
+      'MapLibre GL JS: 오픈소스 벡터 타일 기반 지도 렌더링',
+      'deck.gl: 대규모 공간 데이터(파티클, 히트맵, 궤적) 고성능 시각화',
+      'PostGIS 공간 쿼리 → GeoJSON → deck.gl 레이어 파이프라인',
+      '레이어 트리 UI로 사용자별 레이어 표시·숨김 제어',
+    ],
+  },
+  {
+    title: '스타일링',
+    description: 'Tailwind CSS @layer 아키텍처 + CSS 변수 디자인 시스템',
+    details: [
+      '@layer base → components → wing 3단계 CSS 계층 구조',
+      'CSS 변수 기반 시맨틱 컬러 (bg-bg-base, text-t1, border-stroke 등)',
+      '다크 모드 기본 적용 — CSS 변수 전환으로 테마 일괄 변경',
+      '인라인 스타일 지양, Tailwind 유틸리티 클래스 우선',
+    ],
+  },
+  {
+    title: '감사 로그',
+    description: '사용자 행위 자동 기록 — 접속·조회·변경 이력 추적',
+    details: [
+      '로그인/로그아웃, 메뉴 접근, 데이터 변경 자동 기록',
+      'App.tsx에서 탭 전환 시 감사 로그 자동 전송',
+      '관리자 화면에서 사용자별·기간별 감사 로그 조회 가능',
+      'IP 주소, User-Agent, 요청 경로 등 부가 정보 기록',
+    ],
+  },
+  {
+    title: '보안',
+    description: '입력 살균·CORS·CSP·Rate Limiting 다층 보안 정책',
+    details: [
+      '입력 살균(sanitize): XSS·SQL Injection 방어 미들웨어 적용',
+      'Helmet: CSP, X-Frame-Options, HSTS 등 보안 헤더 자동 설정',
+      'CORS: 허용 오리진 화이트리스트 제한',
+      'Rate Limiting: API 요청 빈도 제한으로 DoS 방어',
+    ],
+  },
+];
+
+// ─── 방제대응 프로세스 데이터 ─────────────────────────────────────────────────────
+
+interface ProcessStep {
+  phase: string;
+  description: string;
+  modules: string[];
+}
+
+const RESPONSE_PROCESS: ProcessStep[] = [
+  {
+    phase: '사고 접수',
+    description: '해양오염 사고 신고 접수 및 초동 상황 등록',
+    modules: ['사건/사고'],
+  },
+  {
+    phase: '상황 파악',
+    description: '사고 현장 기상·해상 조건 확인, 유출원·유출량 파악',
+    modules: ['해양기상', '사건/사고'],
+  },
+  {
+    phase: '확산 예측',
+    description: '유출유/HNS 확산 시뮬레이션 및 역추적 분석 수행',
+    modules: ['확산예측', 'HNS분석'],
+  },
+  {
+    phase: '방제 계획',
+    description: '오일붐 배치, 유처리제 살포 구역, 방제선 투입 계획 수립',
+    modules: ['확산예측', '자산관리'],
+  },
+  {
+    phase: '구조 작전',
+    description: '인명 구조 시나리오 수립, 표류 예측 기반 수색 구역 결정',
+    modules: ['구조시나리오'],
+  },
+  {
+    phase: '항공 감시',
+    description: '위성·드론 영상으로 유막 면적 모니터링 및 방제 효과 확인',
+    modules: ['항공방제'],
+  },
+  {
+    phase: '해안 조사',
+    description: 'Pre-SCAT 해안 오염 조사, 피해 범위 기록',
+    modules: ['SCAT조사'],
+  },
+  {
+    phase: '상황 종료',
+    description: '방제 완료 보고, 감사 이력 정리, 사후 분석',
+    modules: ['사건/사고', '관리자'],
+  },
+];
+
+// ─── 시스템별 기능 유무 매트릭스 데이터 ────────────────────────────────────────────
+
+const SYSTEM_MODULES = [
+  '확산예측',
+  'HNS분석',
+  '구조시나리오',
+  '항공방제',
+  '해양기상',
+  '사건/사고',
+  '자산관리',
+  'SCAT조사',
+  '게시판',
+  '관리자',
+] as const;
+
+interface FeatureMatrixRow {
+  feature: string;
+  category: '공통기능' | '기본정보관리' | '업무기능';
+  integrated: boolean;
+  systems: Record<string, boolean>;
+}
+
+const FEATURE_MATRIX: FeatureMatrixRow[] = [
+  {
+    feature: '사용자 인증 (JWT)',
+    category: '공통기능',
+    integrated: true,
+    systems: {
+      확산예측: true,
+      HNS분석: true,
+      구조시나리오: true,
+      항공방제: true,
+      해양기상: true,
+      '사건/사고': true,
+      자산관리: true,
+      SCAT조사: true,
+      게시판: true,
+      관리자: true,
+    },
+  },
+  {
+    feature: 'RBAC 권한 제어',
+    category: '공통기능',
+    integrated: true,
+    systems: {
+      확산예측: true,
+      HNS분석: true,
+      구조시나리오: true,
+      항공방제: true,
+      해양기상: true,
+      '사건/사고': true,
+      자산관리: true,
+      SCAT조사: true,
+      게시판: true,
+      관리자: true,
+    },
+  },
+  {
+    feature: '감사 로그',
+    category: '공통기능',
+    integrated: true,
+    systems: {
+      확산예측: true,
+      HNS분석: true,
+      구조시나리오: true,
+      항공방제: true,
+      해양기상: true,
+      '사건/사고': true,
+      자산관리: true,
+      SCAT조사: true,
+      게시판: true,
+      관리자: true,
+    },
+  },
+  {
+    feature: 'API 통신 (Axios)',
+    category: '공통기능',
+    integrated: true,
+    systems: {
+      확산예측: true,
+      HNS분석: true,
+      구조시나리오: true,
+      항공방제: true,
+      해양기상: true,
+      '사건/사고': true,
+      자산관리: true,
+      SCAT조사: true,
+      게시판: true,
+      관리자: true,
+    },
+  },
+  {
+    feature: '입력 살균/보안',
+    category: '공통기능',
+    integrated: true,
+    systems: {
+      확산예측: true,
+      HNS분석: true,
+      구조시나리오: true,
+      항공방제: true,
+      해양기상: true,
+      '사건/사고': true,
+      자산관리: true,
+      SCAT조사: true,
+      게시판: true,
+      관리자: true,
+    },
+  },
+  {
+    feature: '사용자 관리',
+    category: '기본정보관리',
+    integrated: true,
+    systems: {
+      확산예측: false,
+      HNS분석: false,
+      구조시나리오: false,
+      항공방제: false,
+      해양기상: false,
+      '사건/사고': false,
+      자산관리: false,
+      SCAT조사: false,
+      게시판: false,
+      관리자: true,
+    },
+  },
+  {
+    feature: '지도 엔진 (MapLibre)',
+    category: '기본정보관리',
+    integrated: true,
+    systems: {
+      확산예측: true,
+      HNS분석: true,
+      구조시나리오: true,
+      항공방제: true,
+      해양기상: true,
+      '사건/사고': true,
+      자산관리: false,
+      SCAT조사: true,
+      게시판: false,
+      관리자: false,
+    },
+  },
+  {
+    feature: '레이어 관리',
+    category: '기본정보관리',
+    integrated: true,
+    systems: {
+      확산예측: true,
+      HNS분석: true,
+      구조시나리오: true,
+      항공방제: true,
+      해양기상: true,
+      '사건/사고': true,
+      자산관리: false,
+      SCAT조사: true,
+      게시판: false,
+      관리자: true,
+    },
+  },
+  {
+    feature: '메뉴 관리',
+    category: '기본정보관리',
+    integrated: true,
+    systems: {
+      확산예측: false,
+      HNS분석: false,
+      구조시나리오: false,
+      항공방제: false,
+      해양기상: false,
+      '사건/사고': false,
+      자산관리: false,
+      SCAT조사: false,
+      게시판: false,
+      관리자: true,
+    },
+  },
+  {
+    feature: '시스템 설정',
+    category: '기본정보관리',
+    integrated: true,
+    systems: {
+      확산예측: false,
+      HNS분석: false,
+      구조시나리오: false,
+      항공방제: false,
+      해양기상: false,
+      '사건/사고': false,
+      자산관리: false,
+      SCAT조사: false,
+      게시판: false,
+      관리자: true,
+    },
+  },
+  {
+    feature: '확산 시뮬레이션',
+    category: '업무기능',
+    integrated: false,
+    systems: {
+      확산예측: true,
+      HNS분석: false,
+      구조시나리오: false,
+      항공방제: false,
+      해양기상: false,
+      '사건/사고': false,
+      자산관리: false,
+      SCAT조사: false,
+      게시판: false,
+      관리자: false,
+    },
+  },
+  {
+    feature: 'HNS 대기확산',
+    category: '업무기능',
+    integrated: false,
+    systems: {
+      확산예측: false,
+      HNS분석: true,
+      구조시나리오: false,
+      항공방제: false,
+      해양기상: false,
+      '사건/사고': false,
+      자산관리: false,
+      SCAT조사: false,
+      게시판: false,
+      관리자: false,
+    },
+  },
+  {
+    feature: '표류 예측',
+    category: '업무기능',
+    integrated: false,
+    systems: {
+      확산예측: false,
+      HNS분석: false,
+      구조시나리오: true,
+      항공방제: false,
+      해양기상: false,
+      '사건/사고': false,
+      자산관리: false,
+      SCAT조사: false,
+      게시판: false,
+      관리자: false,
+    },
+  },
+  {
+    feature: '위성/드론 영상',
+    category: '업무기능',
+    integrated: false,
+    systems: {
+      확산예측: false,
+      HNS분석: false,
+      구조시나리오: false,
+      항공방제: true,
+      해양기상: false,
+      '사건/사고': false,
+      자산관리: false,
+      SCAT조사: false,
+      게시판: false,
+      관리자: false,
+    },
+  },
+  {
+    feature: '기상/해상 정보',
+    category: '업무기능',
+    integrated: false,
+    systems: {
+      확산예측: true,
+      HNS분석: true,
+      구조시나리오: true,
+      항공방제: false,
+      해양기상: true,
+      '사건/사고': false,
+      자산관리: false,
+      SCAT조사: false,
+      게시판: false,
+      관리자: false,
+    },
+  },
+  {
+    feature: '역추적 분석',
+    category: '업무기능',
+    integrated: false,
+    systems: {
+      확산예측: true,
+      HNS분석: false,
+      구조시나리오: false,
+      항공방제: false,
+      해양기상: false,
+      '사건/사고': false,
+      자산관리: false,
+      SCAT조사: false,
+      게시판: false,
+      관리자: false,
+    },
+  },
+  {
+    feature: '사고 등록/이력',
+    category: '업무기능',
+    integrated: false,
+    systems: {
+      확산예측: false,
+      HNS분석: false,
+      구조시나리오: false,
+      항공방제: false,
+      해양기상: false,
+      '사건/사고': true,
+      자산관리: false,
+      SCAT조사: false,
+      게시판: false,
+      관리자: false,
+    },
+  },
+  {
+    feature: '장비/선박 관리',
+    category: '업무기능',
+    integrated: false,
+    systems: {
+      확산예측: false,
+      HNS분석: false,
+      구조시나리오: false,
+      항공방제: false,
+      해양기상: false,
+      '사건/사고': false,
+      자산관리: true,
+      SCAT조사: false,
+      게시판: false,
+      관리자: false,
+    },
+  },
+  {
+    feature: '해안 조사',
+    category: '업무기능',
+    integrated: false,
+    systems: {
+      확산예측: false,
+      HNS분석: false,
+      구조시나리오: false,
+      항공방제: false,
+      해양기상: false,
+      '사건/사고': false,
+      자산관리: false,
+      SCAT조사: true,
+      게시판: false,
+      관리자: false,
+    },
+  },
+  {
+    feature: '게시판 CRUD',
+    category: '업무기능',
+    integrated: false,
+    systems: {
+      확산예측: false,
+      HNS분석: false,
+      구조시나리오: false,
+      항공방제: false,
+      해양기상: false,
+      '사건/사고': false,
+      자산관리: false,
+      SCAT조사: false,
+      게시판: true,
+      관리자: false,
+    },
+  },
+];
+
+const CATEGORY_STYLES: Record<string, string> = {
+  공통기능: 'bg-[rgba(6,182,212,0.2)] text-color-accent',
+  기본정보관리: 'bg-[rgba(34,197,94,0.2)] text-color-success',
+  업무기능: 'bg-bg-elevated text-t3',
+};
+
+export function CommonFeaturesTab() {
+  return (
+    <div className="flex flex-col gap-6 p-5">
+      {/* 1. 방제대응 프로세스 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">1. 방제대응 프로세스</h3>
+        <p className="text-caption text-t2 leading-relaxed mb-4">
+          해양오염 사고 발생 시 사고 접수부터 상황 종료까지의 단계별 대응 프로세스이며, 각 단계에서
+          활용하는 시스템 모듈을 표시한다.
+        </p>
+        {/* 프로세스 흐름도 */}
+        <div className="flex items-start gap-1 flex-wrap mb-4">
+          {RESPONSE_PROCESS.map((step, idx) => (
+            <div key={step.phase} className="flex items-start gap-1">
+              <div className="bg-bg-elevated border border-stroke rounded px-3 py-2 text-center min-w-20">
+                <p className="text-caption font-semibold text-t1 mb-1">{step.phase}</p>
+                <div className="flex flex-col gap-0.5">
+                  {step.modules.map((mod) => (
+                    <span key={mod} className="text-[10px] text-color-accent">
+                      {mod}
+                    </span>
+                  ))}
+                </div>
+              </div>
+              {idx < RESPONSE_PROCESS.length - 1 && (
+                <span className="text-t3 text-lg shrink-0 mt-2.5">→</span>
+              )}
+            </div>
+          ))}
+        </div>
+        {/* 프로세스 상세 */}
+        <div className="flex flex-col gap-2">
+          {RESPONSE_PROCESS.map((step, idx) => (
+            <div
+              key={step.phase}
+              className="bg-bg-card border border-stroke rounded p-3 flex items-start gap-3"
+            >
+              <span className="inline-flex items-center justify-center w-5 h-5 rounded bg-color-accent text-white text-caption font-semibold shrink-0 mt-0.5">
+                {idx + 1}
+              </span>
+              <div className="flex-1">
+                <p className="text-caption font-semibold text-t1 mb-0.5">{step.phase}</p>
+                <p className="text-caption text-t2 leading-relaxed">{step.description}</p>
+              </div>
+              <div className="flex gap-1 shrink-0">
+                {step.modules.map((mod) => (
+                  <span
+                    key={mod}
+                    className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-[rgba(6,182,212,0.2)] text-color-accent"
+                  >
+                    {mod}
+                  </span>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 2. 시스템별 기능 유무 매트릭스 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">2. 시스템별 기능 유무 매트릭스</h3>
+        <p className="text-caption text-t2 leading-relaxed mb-4">
+          각 시스템(업무 모듈)별 기능의 유무를 파악하여 공통기능, 기본정보 관리(사용자, 지도 등) 등
+          통합할 수 있는 기능을 표시한다.{' '}
+          <span className="text-color-accent font-medium">통합 대상</span> 기능은 공통 모듈로 일원화하여
+          중복 개발을 방지한다.
+        </p>
+        <div className="overflow-auto">
+          <table className="w-full text-caption border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3 tracking-wide">
+                <th className="px-2 py-2 text-left font-medium border-b border-stroke whitespace-nowrap sticky left-0 bg-bg-elevated z-10">
+                  기능
+                </th>
+                <th className="px-2 py-2 text-center font-medium border-b border-stroke whitespace-nowrap">
+                  분류
+                </th>
+                <th className="px-2 py-2 text-center font-medium border-b border-stroke whitespace-nowrap">
+                  통합
+                </th>
+                {SYSTEM_MODULES.map((mod) => (
+                  <th
+                    key={mod}
+                    className="px-1.5 py-2 text-center font-medium border-b border-stroke whitespace-nowrap"
+                  >
+                    <span className="writing-mode-vertical text-[10px]">{mod}</span>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {FEATURE_MATRIX.map((row) => (
+                <tr key={row.feature} className="border-b border-stroke hover:bg-bg-surface/50">
+                  <td className="px-2 py-1.5 font-medium text-t1 whitespace-nowrap sticky left-0 bg-bg-base z-10">
+                    {row.feature}
+                  </td>
+                  <td className="px-2 py-1.5 text-center">
+                    <span
+                      className={`px-1.5 py-0.5 rounded text-[10px] font-medium ${CATEGORY_STYLES[row.category]}`}
+                    >
+                      {row.category}
+                    </span>
+                  </td>
+                  <td className="px-2 py-1.5 text-center">
+                    {row.integrated ? (
+                      <span className="text-color-accent font-semibold">통합</span>
+                    ) : (
+                      <span className="text-t3">개별</span>
+                    )}
+                  </td>
+                  {SYSTEM_MODULES.map((mod) => (
+                    <td key={mod} className="px-1.5 py-1.5 text-center">
+                      {row.systems[mod] ? (
+                        <span className="text-color-success font-bold">O</span>
+                      ) : (
+                        <span className="text-t3/30">-</span>
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        {/* 범례 */}
+        <div className="flex gap-4 mt-3">
+          <div className="flex items-center gap-1.5">
+            <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-[rgba(6,182,212,0.2)] text-color-accent">
+              공통기능
+            </span>
+            <span className="text-caption text-t3">전 모듈 공통 적용</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-[rgba(34,197,94,0.2)] text-color-success">
+              기본정보관리
+            </span>
+            <span className="text-caption text-t3">사용자·지도·메뉴·설정 통합 관리</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-bg-elevated text-t3">
+              업무기능
+            </span>
+            <span className="text-caption text-t3">모듈별 고유 기능</span>
+          </div>
+        </div>
+      </section>
+
+      {/* 3. 공통기능 상세 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">3. 공통기능 상세</h3>
+        <div className="flex flex-col gap-3">
+          {COMMON_FEATURES.map((feature, idx) => (
+            <div key={feature.title} className="bg-bg-card border border-stroke rounded p-3">
+              <div className="flex items-center gap-2 mb-1.5">
+                <span className="inline-flex items-center justify-center w-5 h-5 rounded bg-color-accent text-white text-caption font-semibold shrink-0">
+                  {idx + 1}
+                </span>
+                <p className="text-caption font-semibold text-t1">{feature.title}</p>
+              </div>
+              <p className="text-caption text-t2 leading-relaxed mb-2 pl-7">{feature.description}</p>
+              <ul className="flex flex-col gap-1 pl-7">
+                {feature.details.map((detail) => (
+                  <li key={detail} className="text-caption text-t3 leading-relaxed list-disc">
+                    {detail}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 4. 공통 모듈 구조 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">4. 공통 모듈 디렉토리 구조</h3>
+        <div className="overflow-auto">
+          <table className="w-full text-caption border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+                {['디렉토리', '역할', '주요 파일'].map((h) => (
+                  <th
+                    key={h}
+                    className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                {
+                  dir: 'common/components/',
+                  role: '공통 UI 컴포넌트',
+                  files: 'auth/, layout/, map/, ui/, layer/',
+                },
+                {
+                  dir: 'common/hooks/',
+                  role: '공통 커스텀 훅',
+                  files: 'useLayers, useSubMenu, useFeatureTracking',
+                },
+                {
+                  dir: 'common/services/',
+                  role: 'API 통신 모듈',
+                  files: 'api.ts, authApi.ts, layerService.ts',
+                },
+                {
+                  dir: 'common/store/',
+                  role: '전역 상태 스토어',
+                  files: 'authStore.ts, menuStore.ts',
+                },
+                {
+                  dir: 'common/styles/',
+                  role: 'CSS @layer 스타일',
+                  files: 'base.css, components.css, wing.css',
+                },
+                {
+                  dir: 'common/types/',
+                  role: '공통 타입 정의',
+                  files: 'backtrack, hns, navigation 등',
+                },
+                {
+                  dir: 'common/utils/',
+                  role: '유틸리티 함수',
+                  files: 'coordinates, geo, sanitize, cn.ts',
+                },
+                { dir: 'common/constants/', role: '상수 정의', files: 'featureIds.ts' },
+                { dir: 'common/data/', role: 'UI 데이터', files: 'layerData.ts (레이어 트리)' },
+              ].map((row) => (
+                <tr key={row.dir} className="border-b border-stroke hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap font-mono">
+                    {row.dir}
+                  </td>
+                  <td className="px-3 py-2 text-t2">{row.role}</td>
+                  <td className="px-3 py-2 text-t3 font-mono">{row.files}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/FrameworkTab.tsx

@@ -0,0 +1,171 @@
+interface TechStackRow {
+  category: string;
+  tech: string;
+  version: string;
+  description: string;
+}
+
+const TECH_STACK: TechStackRow[] = [
+  { category: 'Frontend', tech: 'React', version: '19.x', description: '컴포넌트 기반 SPA' },
+  { category: 'Frontend', tech: 'TypeScript', version: '5.9', description: '정적 타입 시스템' },
+  { category: 'Frontend', tech: 'Vite', version: '7.x', description: '빌드 도구 (HMR)' },
+  { category: 'Frontend', tech: 'Tailwind CSS', version: '3.x', description: '유틸리티 기반 CSS' },
+  { category: 'Frontend', tech: 'MapLibre GL', version: '5.x', description: '오픈소스 GIS 엔진' },
+  { category: 'Frontend', tech: 'deck.gl', version: '9.x', description: '대규모 데이터 시각화' },
+  { category: 'Frontend', tech: 'Zustand', version: '-', description: '클라이언트 상태관리' },
+  { category: 'Frontend', tech: 'TanStack Query', version: '-', description: '서버 상태관리/캐싱' },
+  { category: 'Backend', tech: 'Express', version: '4.x', description: 'REST API 서버' },
+  { category: 'Backend', tech: 'Socket.IO', version: '-', description: '실시간 양방향 통신' },
+  { category: 'DB', tech: 'PostgreSQL', version: '16', description: '관계형 데이터베이스' },
+  { category: 'DB', tech: 'PostGIS', version: '-', description: '공간정보 확장' },
+  {
+    category: '인증',
+    tech: 'JWT',
+    version: '-',
+    description: '토큰 기반 인증 (HttpOnly Cookie)',
+  },
+  { category: '인증', tech: 'Google OAuth', version: '2.0', description: 'SSO 연동' },
+  { category: '보안', tech: 'Helmet', version: '-', description: 'HTTP 헤더 보안' },
+  { category: '보안', tech: 'Rate Limiting', version: '-', description: 'API 호출 제한' },
+  { category: 'CI/CD', tech: 'Gitea Actions', version: '-', description: '자동 빌드/배포' },
+];
+
+// ─── 탭 모듈 데이터 ───────────────────────────────────────────────────────────────
+
+export function FrameworkTab() {
+  return (
+    <div className="flex flex-col gap-6 p-5">
+      {/* 1. 개발 프레임워크 구성 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">1. 개발 프레임워크 구성</h3>
+        <div className="border border-stroke rounded overflow-hidden">
+          {/* 프레젠테이션 계층 */}
+          <div className="border-b border-stroke p-4 bg-bg-card">
+            <p className="text-caption font-semibold text-t2 mb-1">프레젠테이션 계층</p>
+            <p className="text-caption text-t3 mb-3">React 19 + TypeScript 5.9 + Tailwind CSS 3</p>
+            <div className="grid grid-cols-4 gap-2">
+              {[
+                { name: 'MapLibre', sub: 'GL JS 5' },
+                { name: 'deck.gl', sub: '9.x' },
+                { name: 'Zustand', sub: '상태관리' },
+                { name: 'TanStack', sub: 'Query' },
+              ].map((item) => (
+                <div
+                  key={item.name}
+                  className="bg-bg-elevated border border-stroke rounded p-2 text-center"
+                >
+                  <p className="text-caption font-medium text-t1">{item.name}</p>
+                  <p className="text-caption text-t3 mt-0.5">{item.sub}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/* 비즈니스 로직 계층 */}
+          <div className="border-b border-stroke p-4 bg-bg-surface">
+            <p className="text-caption font-semibold text-t2 mb-1">비즈니스 로직 계층</p>
+            <p className="text-caption text-t3 mb-3">Express 4 + TypeScript</p>
+            <div className="grid grid-cols-4 gap-2">
+              {[
+                { name: 'JWT 인증', sub: 'OAuth2.0' },
+                { name: 'RBAC', sub: '권한엔진' },
+                { name: 'Socket.IO', sub: '실시간' },
+                { name: 'Helmet', sub: '보안' },
+              ].map((item) => (
+                <div
+                  key={item.name}
+                  className="bg-bg-elevated border border-stroke rounded p-2 text-center"
+                >
+                  <p className="text-caption font-medium text-t1">{item.name}</p>
+                  <p className="text-caption text-t3 mt-0.5">{item.sub}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/* 데이터 접근 계층 */}
+          <div className="p-4 bg-bg-card">
+            <p className="text-caption font-semibold text-t2 mb-1">데이터 접근 계층</p>
+            <p className="text-caption text-t3 mb-3">PostgreSQL 16 + PostGIS</p>
+            <div className="grid grid-cols-3 gap-2 max-w-xs">
+              {[
+                { name: 'wing DB', sub: '운영 DB' },
+                { name: 'wing_auth', sub: '인증 DB' },
+                { name: 'PostGIS', sub: '공간정보' },
+              ].map((item) => (
+                <div
+                  key={item.name}
+                  className="bg-bg-elevated border border-stroke rounded p-2 text-center"
+                >
+                  <p className="text-caption font-medium text-t1">{item.name}</p>
+                  <p className="text-caption text-t3 mt-0.5">{item.sub}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 2. 기술 스택 상세 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">2. 기술 스택 상세</h3>
+        <div className="overflow-auto">
+          <table className="w-full text-caption border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+                {['구분', '기술', '버전', '설명'].map((h) => (
+                  <th
+                    key={h}
+                    className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {TECH_STACK.map((row, idx) => (
+                <tr key={idx} className="border-b border-stroke hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
+                    {row.category}
+                  </td>
+                  <td className="px-3 py-2 text-t1 whitespace-nowrap">{row.tech}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.version}</td>
+                  <td className="px-3 py-2 text-t2">{row.description}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* 3. 개발 표준 및 규칙 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">3. 개발 표준 및 규칙</h3>
+        <div className="grid grid-cols-1 gap-3">
+          {[
+            {
+              title: 'HTTP 정책',
+              content: 'GET/POST만 사용 (PUT/DELETE/PATCH 금지) — 한국 보안취약점 점검 가이드 준수',
+            },
+            {
+              title: '코드 표준',
+              content: 'ESLint + Prettier 적용, TypeScript strict 모드 필수',
+            },
+            {
+              title: '모듈 구조',
+              content: '@common/ (공통 모듈) + @components/ (업무별 탭) Path Alias 기반 분리',
+            },
+            {
+              title: '보안',
+              content: '입력 살균(sanitize), XSS/SQL Injection 방지, CORS 정책, Rate Limiting',
+            },
+          ].map((item) => (
+            <div key={item.title} className="bg-bg-card border border-stroke rounded p-3">
+              <p className="text-caption font-semibold text-t2 mb-1">{item.title}</p>
+              <p className="text-caption text-t2 leading-relaxed">{item.content}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/HeterogeneousTab.tsx

@@ -0,0 +1,367 @@
+interface HeterogeneousSystemRow {
+  system: string;
+  lang: string;
+  os: string;
+  location: string;
+  protocol: string;
+  description: string;
+}
+
+const HETEROGENEOUS_SYSTEMS: HeterogeneousSystemRow[] = [
+  {
+    system: 'KOSPS',
+    lang: 'Fortran',
+    os: 'Linux',
+    location: '광주',
+    protocol: 'HTTPS (REST 래퍼)',
+    description: '유출유 확산 예측 — Fortran DLL을 REST API로 래핑하여 연계',
+  },
+  {
+    system: '충북대 HNS',
+    lang: 'Python / C++',
+    os: 'Linux',
+    location: '충북대',
+    protocol: 'HTTPS',
+    description: 'HNS 대기확산 예측 — Python/C++ 모델을 REST API로 호출',
+  },
+  {
+    system: '긴급구난',
+    lang: 'Python',
+    os: 'Linux',
+    location: '해경 내부',
+    protocol: '내부망 API',
+    description: '구난 표류 분석 — Python 모델을 내부망 REST API로 연계',
+  },
+  {
+    system: 'HYCOM',
+    lang: 'Fortran / NetCDF',
+    os: 'Linux HPC',
+    location: '미 해군 공개',
+    protocol: 'HTTPS / FTP',
+    description: '전지구 해류·수온 예측 — NetCDF 파일 수신 후 ETL 전처리',
+  },
+  {
+    system: '기상청',
+    lang: '-',
+    os: '-',
+    location: '기상청 API Hub',
+    protocol: 'HTTPS',
+    description: '풍향·풍속·기온·강수 등 기상 데이터 REST API 수집',
+  },
+  {
+    system: 'KHOA',
+    lang: '-',
+    os: '-',
+    location: '해양조사원',
+    protocol: 'HTTPS',
+    description: '조위·해류·수온 등 해양관측 데이터 REST API 수집',
+  },
+  {
+    system: '해경 KBP',
+    lang: 'Java 전자정부',
+    os: 'Linux',
+    location: '해경 내부망',
+    protocol: '내부망 API',
+    description: '사용자·조직·직위 인사 데이터 배치 수집 (비식별화 적용)',
+  },
+  {
+    system: 'AIS',
+    lang: '-',
+    os: '-',
+    location: '해경 AIS 서버',
+    protocol: 'Socket / API',
+    description: '선박 위치·속도·방향 실시간 수신',
+  },
+];
+
+interface HeterogeneousStrategyCard {
+  challenge: string;
+  solution: string;
+  description: string;
+}
+
+interface IntegrationPlanItem {
+  title: string;
+  description: string;
+  details?: string[];
+}
+
+const INTEGRATION_PLANS: IntegrationPlanItem[] = [
+  {
+    title: '사용자 정보 연계',
+    description:
+      '해양경찰청의 인사관리플랫폼과 연계 또는 사용자 정보를 제공받아 구성할 수 있어야 함',
+  },
+  {
+    title: '해양공간 데이터 연계',
+    description:
+      "해경 해양공간 데이터 구축사업(해양공간정보 활용체계 구축 및 빅데이터 관련 사업)의 '데이터통합저장소' 시스템과 연계하여 현장탐색 전자지도 자동표출 기술 등에 영상 및 사진자료를 연계하여 구축",
+  },
+  {
+    title: 'DB 통합설계 기반 맞춤형 인터페이스',
+    description:
+      '플랫폼 변경 및 신규 통합설계 되는 데이터베이스(DB) 구조 설계를 기반으로 사용자 맞춤형 화면 인터페이스를 구현해야 함',
+    details: [
+      'DBMS는 분리되어 있는 시스템들을 통합설계를 통하여 공통, 분야별 등으로 설계하여야 함',
+    ],
+  },
+  {
+    title: '유출유 확산예측 정확성 향상 (KOSPS 연계)',
+    description:
+      '유출유 확산예측 정확성 향상을 위해, 해양오염방제지원시스템(KOSPS)를 연계·탑재하여야 함',
+    details: [
+      '다양한 유출유 확산 예측 결과를 사용자가 한눈에 확인 가능하여야 함',
+      '확산예측 기반으로 역추적, 최초 유출유 발생지점을 예측할 수 있어야 함',
+      '그 밖에 유출유 확산예측 정확성 향상을 위한 대책을 마련하여야 함',
+    ],
+  },
+  {
+    title: '기타 시스템 연계',
+    description: '그 밖에 시스템 구축 중 효율적인 사고대응을 위한 타 시스템 연계할 수 있음',
+  },
+];
+
+const HETEROGENEOUS_STRATEGIES: HeterogeneousStrategyCard[] = [
+  {
+    challenge: '언어 이질성',
+    solution: 'REST API 래퍼 계층',
+    description:
+      'Fortran, Python, C++, Java 등 각 언어로 작성된 모델을 REST API 래퍼로 감싸 언어·플랫폼 독립적인 표준 인터페이스 제공',
+  },
+  {
+    challenge: '데이터 형식 차이',
+    solution: 'ETL 전처리 파이프라인',
+    description:
+      'NetCDF, CSV, Binary, JSON 등 이기종 포맷을 ETL 파이프라인으로 표준 JSON/GeoJSON 형식으로 변환 후 DB 적재',
+  },
+  {
+    challenge: '네트워크 분리',
+    solution: '이중 네트워크 연계',
+    description:
+      '외부망(인터넷) 연계와 내부망(해경 내부) 연계를 분리 운영하여 보안 정책 준수 및 데이터 안전성 확보',
+  },
+  {
+    challenge: '가용성·장애 대응',
+    solution: '연계 모니터링 + 알림',
+    description:
+      '연계 상태를 실시간 모니터링하고 수신 지연·실패 발생 시 운영자에게 즉시 알림 발송하여 신속 대응',
+  },
+  {
+    challenge: '인증·보안 차이',
+    solution: 'API Gateway 패턴',
+    description:
+      '시스템별 상이한 인증 방식(API Key, JWT, IP 제한 등)을 API Gateway 계층에서 통합 관리하여 단일 보안 정책 적용',
+  },
+  {
+    challenge: '프로토콜 차이',
+    solution: '어댑터 패턴 적용',
+    description:
+      'HTTP REST, FTP, Socket, 배치 파일 등 다양한 프로토콜을 어댑터 패턴으로 추상화하여 표준 인터페이스로 통일',
+  },
+];
+
+const HETEROGENEOUS_FLOW_STEPS = [
+  '원본 데이터',
+  '수집 어댑터',
+  'ETL 전처리',
+  '표준 변환',
+  'DB 적재',
+  'API 제공',
+];
+
+interface SecurityPolicyCard {
+  title: string;
+  items: string[];
+}
+
+const HETEROGENEOUS_SECURITY: SecurityPolicyCard[] = [
+  {
+    title: '외부망 연계',
+    items: [
+      'TLS 1.2+ 암호화 통신',
+      'API Key / OAuth 인증',
+      'IP 화이트리스트 제한',
+      'Rate Limiting 적용',
+    ],
+  },
+  {
+    title: '내부망 연계',
+    items: [
+      '전용 내부망 구간 분리',
+      '상호 인증서 검증',
+      '비식별화 자동 처리',
+      '접근 이력 감사로그',
+    ],
+  },
+  {
+    title: '데이터 보호',
+    items: [
+      '개인정보 수집 최소화',
+      'ETL 단계 비식별화',
+      '전송 구간 암호화',
+      '저장 데이터 접근 제어',
+    ],
+  },
+];
+
+// ─── 탭 4: 이기종시스템연계 ───────────────────────────────────────────────────────
+
+export function HeterogeneousTab() {
+  return (
+    <div className="p-5 space-y-6">
+      {/* 1. 이기종시스템 연계 개요 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">1. 이기종시스템 연계 개요</h3>
+        <p className="text-caption text-t2 leading-relaxed mb-4">
+          통합지원시스템은 Fortran, Python, C++, Java 등 다양한 언어와 플랫폼으로 구현된 이기종
+          시스템과 연계한다. REST API 표준화, ETL 전처리, 어댑터 패턴을 통해 언어·플랫폼 독립적인
+          연계 구조를 구현하며, 외부망·내부망 이중 네트워크 정책을 준수한다.
+        </p>
+        <div className="flex items-stretch gap-2">
+          <div className="flex-1 bg-bg-elevated border border-stroke rounded p-3 text-center">
+            <p className="text-caption font-semibold text-t2 mb-2">이기종 시스템</p>
+            {['Fortran KOSPS', 'Python/C++ 충북대', 'Java 해경KBP', 'NetCDF HYCOM'].map((item) => (
+              <p key={item} className="text-caption text-t3 leading-relaxed">
+                {item}
+              </p>
+            ))}
+          </div>
+          <div className="flex flex-col items-center justify-center shrink-0 gap-0.5">
+            <span className="text-t3 text-lg">→</span>
+            <span className="text-t3 text-lg">←</span>
+          </div>
+          <div className="flex-1 bg-[rgba(6,182,212,0.1)] border border-stroke rounded p-3 text-center">
+            <p className="text-caption font-semibold text-t2 mb-2">연계 어댑터 계층</p>
+            {['REST API 래퍼', 'ETL 전처리', '프로토콜 변환', '인증 통합'].map((item) => (
+              <p key={item} className="text-caption text-t3 leading-relaxed">
+                {item}
+              </p>
+            ))}
+          </div>
+          <div className="flex flex-col items-center justify-center shrink-0 gap-0.5">
+            <span className="text-t3 text-lg">→</span>
+            <span className="text-t3 text-lg">←</span>
+          </div>
+          <div className="flex-1 bg-bg-elevated border border-stroke rounded p-3 text-center">
+            <p className="text-caption font-semibold text-t2 mb-2">통합지원시스템</p>
+            {['Express REST API', 'PostgreSQL+PostGIS', 'React SPA', '표준 JSON'].map((item) => (
+              <p key={item} className="text-caption text-t3 leading-relaxed">
+                {item}
+              </p>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 2. 이기종 시스템 간의 연계 방안 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">2. 이기종 시스템 간의 연계 방안</h3>
+        <div className="flex flex-col gap-2">
+          {INTEGRATION_PLANS.map((item, idx) => (
+            <div key={item.title} className="bg-bg-card border border-stroke rounded p-3">
+              <p className="text-caption font-semibold text-t2 mb-1">
+                {idx + 1}. {item.title}
+              </p>
+              <p className="text-caption text-t2 leading-relaxed">{item.description}</p>
+              {item.details && (
+                <ul className="mt-1.5 flex flex-col gap-1 pl-3">
+                  {item.details.map((detail) => (
+                    <li key={detail} className="text-caption text-t3 leading-relaxed list-disc">
+                      {detail}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 3. 연계 대상 이기종 시스템 목록 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">3. 연계 대상 이기종 시스템 목록</h3>
+        <div className="overflow-auto">
+          <table className="w-full text-caption border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+                {['시스템', '구현 언어', 'OS', '위치', '연계 프로토콜', '연계 설명'].map((h) => (
+                  <th
+                    key={h}
+                    className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {HETEROGENEOUS_SYSTEMS.map((row) => (
+                <tr key={row.system} className="border-b border-stroke hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.system}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.lang}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.os}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.location}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.protocol}</td>
+                  <td className="px-3 py-2 text-t2">{row.description}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* 4. 이기종 연계 전략 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">4. 이기종 연계 전략</h3>
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {HETEROGENEOUS_STRATEGIES.map((card) => (
+            <div key={card.challenge} className="bg-bg-card border border-stroke rounded p-3">
+              <div className="flex items-center gap-1.5 mb-1.5">
+                <span className="text-caption font-semibold text-color-danger">{card.challenge}</span>
+                <span className="text-t3 text-caption">→</span>
+                <span className="text-caption font-semibold text-color-accent">{card.solution}</span>
+              </div>
+              <p className="text-caption text-t2 leading-relaxed">{card.description}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 5. 이기종 데이터 변환 흐름 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">5. 이기종 데이터 변환 흐름</h3>
+        <div className="flex items-center gap-1 flex-wrap">
+          {HETEROGENEOUS_FLOW_STEPS.map((step, idx) => (
+            <div key={step} className="flex items-center gap-1">
+              <div className="bg-bg-elevated border border-stroke rounded px-3 py-2 text-center min-w-16">
+                <p className="text-caption font-medium text-t1">{step}</p>
+              </div>
+              {idx < HETEROGENEOUS_FLOW_STEPS.length - 1 && (
+                <span className="text-t3 text-lg shrink-0">→</span>
+              )}
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 6. 이기종 연계 보안 정책 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">6. 이기종 연계 보안 정책</h3>
+        <div className="grid grid-cols-3 gap-3">
+          {HETEROGENEOUS_SECURITY.map((card) => (
+            <div key={card.title} className="bg-bg-card border border-stroke rounded p-3">
+              <p className="text-caption font-semibold text-t2 mb-2">{card.title}</p>
+              <ul className="flex flex-col gap-1">
+                {card.items.map((item) => (
+                  <li key={item} className="text-caption text-t2 leading-relaxed">
+                    · {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/InterfaceTab.tsx

@@ -0,0 +1,236 @@
+interface InterfaceRow {
+  system: string;
+  method: string;
+  data: string;
+  cycle: string;
+  protocol: string;
+}
+
+const INTERFACES: InterfaceRow[] = [
+  {
+    system: 'KHOA (해양조사원)',
+    method: 'REST API',
+    data: '조위, 해류, 수온',
+    cycle: '실시간/1시간',
+    protocol: 'HTTPS',
+  },
+  {
+    system: '기상청',
+    method: 'REST API',
+    data: '풍향/풍속, 기압, 기온, 강수',
+    cycle: '3시간',
+    protocol: 'HTTPS',
+  },
+  {
+    system: 'HYCOM',
+    method: '파일 수신',
+    data: 'SST, 해류(U/V), SSH',
+    cycle: '6시간',
+    protocol: 'HTTPS/FTP',
+  },
+  {
+    system: '해경 KBP (인사)',
+    method: '배치 수집',
+    data: '사용자, 부서, 직위, 조직',
+    cycle: '1일 1회',
+    protocol: '내부망 API',
+  },
+  {
+    system: 'AIS 선박위치',
+    method: '실시간 수집',
+    data: '선박 위치, 속도, 방향',
+    cycle: '실시간',
+    protocol: 'Socket/API',
+  },
+  {
+    system: '포세이돈 R&D',
+    method: 'API 연계',
+    data: '유출유 확산 예측 결과',
+    cycle: '요청 시',
+    protocol: 'HTTPS',
+  },
+  {
+    system: 'KOSPS (광주)',
+    method: 'DLL 호출',
+    data: '유출유 확산 예측 결과',
+    cycle: '요청 시',
+    protocol: 'HTTPS (Fortran DLL)',
+  },
+  {
+    system: '충북대 HNS',
+    method: 'API 호출',
+    data: 'HNS 대기확산 결과',
+    cycle: '요청 시',
+    protocol: 'HTTPS',
+  },
+  {
+    system: '긴급구난 R&D',
+    method: '내부 연계',
+    data: '구난 분석 결과',
+    cycle: '요청 시',
+    protocol: '내부망 API',
+  },
+];
+
+// ─── 탭 1: 표준 프레임워크 ────────────────────────────────────────────────────────
+
+export function InterfaceTab() {
+  const dataFlowSteps = ['수집', '전처리', '저장', '분석/예측', '시각화', '의사결정지원'];
+
+  return (
+    <div className="flex flex-col gap-6 p-5">
+      {/* 1. 외부 시스템 연계 구성도 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">1. 외부 시스템 연계 구성도</h3>
+        <div className="flex items-stretch gap-2">
+          {/* 외부 시스템 */}
+          <div className="flex-1 bg-bg-card border border-stroke rounded p-3 flex flex-col gap-1.5">
+            <p className="text-caption font-semibold text-t2 mb-1 text-center">외부 시스템</p>
+            {['KHOA API', '기상청 API', '해경 KBP', 'AIS 선박'].map((item) => (
+              <div
+                key={item}
+                className="bg-bg-elevated border border-stroke rounded px-2 py-1 text-center"
+              >
+                <p className="text-caption text-t2">{item}</p>
+              </div>
+            ))}
+          </div>
+          {/* 화살표 */}
+          <div className="flex flex-col items-center justify-center gap-1 shrink-0">
+            <span className="text-t3 text-lg">→</span>
+            <span className="text-t3 text-lg">←</span>
+          </div>
+          {/* 통합지원시스템 */}
+          <div className="flex-[2] bg-bg-surface border-2 border-stroke rounded p-3 flex flex-col gap-2">
+            <p className="text-caption font-semibold text-t1 text-center">
+              해양환경 위기대응
+              <br />
+              통합지원시스템
+            </p>
+            <div className="border border-stroke rounded p-2 bg-bg-elevated">
+              <p className="text-caption font-medium text-t2 mb-1 text-center">연계관리 모듈</p>
+              <div className="flex flex-col gap-1">
+                {['수집자료 관리', '연계 모니터링', '비식별화 조치'].map((item) => (
+                  <p key={item} className="text-caption text-t3 text-center">
+                    - {item}
+                  </p>
+                ))}
+              </div>
+            </div>
+          </div>
+          {/* 화살표 */}
+          <div className="flex flex-col items-center justify-center gap-1 shrink-0">
+            <span className="text-t3 text-lg">←</span>
+            <span className="text-t3 text-lg">→</span>
+          </div>
+          {/* R&D 시스템 */}
+          <div className="flex-1 bg-bg-card border border-stroke rounded p-3 flex flex-col gap-1.5">
+            <p className="text-caption font-semibold text-t2 mb-1 text-center">R&D 시스템</p>
+            {['포세이돈', 'KOSPS', '충북대 HNS', '긴급구난'].map((item) => (
+              <div
+                key={item}
+                className="bg-bg-elevated border border-stroke rounded px-2 py-1 text-center"
+              >
+                <p className="text-caption text-t2">{item}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 2. 연계 인터페이스 목록 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">2. 연계 인터페이스 목록</h3>
+        <div className="overflow-auto">
+          <table className="w-full text-caption border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+                {['연계 시스템', '연계 방식', '데이터', '주기', '프로토콜'].map((h) => (
+                  <th
+                    key={h}
+                    className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {INTERFACES.map((row) => (
+                <tr key={row.system} className="border-b border-stroke hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.system}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.method}</td>
+                  <td className="px-3 py-2 text-t2">{row.data}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.cycle}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.protocol}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* 3. 데이터 흐름도 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">3. 데이터 흐름도</h3>
+        <div className="flex items-center gap-1 flex-wrap">
+          {dataFlowSteps.map((step, idx) => (
+            <div key={step} className="flex items-center gap-1">
+              <div className="bg-bg-elevated border border-stroke rounded px-3 py-2 text-center min-w-16">
+                <p className="text-caption font-medium text-t1">{step}</p>
+              </div>
+              {idx < dataFlowSteps.length - 1 && (
+                <span className="text-t3 text-lg shrink-0">→</span>
+              )}
+            </div>
+          ))}
+        </div>
+        <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+          {[
+            { step: '수집', desc: 'KHOA, 기상청, HYCOM, AIS 등 외부 원천 데이터 수신' },
+            { step: '전처리', desc: '포맷 변환, 좌표계 통일, 비식별화, 품질 검사' },
+            { step: '저장', desc: 'PostgreSQL 16 + PostGIS 공간정보 DB 적재' },
+            { step: '분석/예측', desc: 'R&D 모델 연계 (포세이돈, KOSPS, 충북대, 긴급구난)' },
+            { step: '시각화', desc: 'MapLibre GL + deck.gl 기반 지도 레이어 렌더링' },
+            { step: '의사결정지원', desc: '방제작전 시나리오, 구조분석, 경보 발령 지원' },
+          ].map((item) => (
+            <div key={item.step} className="bg-bg-card border border-stroke rounded p-2.5">
+              <p className="text-caption font-semibold text-t2 mb-1">{item.step}</p>
+              <p className="text-caption text-t2 leading-relaxed">{item.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 4. 연계 장애 대응 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">4. 연계 장애 대응</h3>
+        <div className="flex flex-col gap-2">
+          {[
+            {
+              title: '연계 모니터링',
+              content: '관리자 > 연계관리 > 연계모니터링에서 실시간 연계 상태 확인',
+            },
+            {
+              title: 'R&D 파이프라인 모니터링',
+              content: '관리자 > 연계관리 > R&D과제에서 과제별 데이터 수신 이력 및 처리 현황 확인',
+            },
+            {
+              title: '장애 알림',
+              content: '데이터 수신 지연/실패 발생 시 알림 발생 — 운영자 즉시 인지 가능',
+            },
+            {
+              title: '비식별화 조치',
+              content: '개인정보 포함 데이터(해경 KBP 인사 등) 수집 시 자동 비식별화 처리 적용',
+            },
+          ].map((item) => (
+            <div key={item.title} className="bg-bg-card border border-stroke rounded p-3">
+              <p className="text-caption font-semibold text-t2 mb-1">{item.title}</p>
+              <p className="text-caption text-t2 leading-relaxed">{item.content}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/PermCell.tsx

@@ -0,0 +1,70 @@
+import type { PermState } from '../PermissionsPanel';
+
+interface PermCellProps {
+  state: PermState;
+  onToggle: () => void;
+  label?: string;
+  readOnly?: boolean;
+}
+
+export function PermCell({ state, onToggle, label, readOnly = false }: PermCellProps) {
+  const isDisabled = state === 'forced-denied' || readOnly;
+
+  const baseClasses =
+    'w-5 h-5 rounded border text-caption font-bold transition-all flex items-center justify-center';
+
+  let classes: string;
+  let icon: string;
+
+  switch (state) {
+    case 'explicit-granted':
+      classes = readOnly
+        ? `${baseClasses} bg-[rgba(6,182,212,0.2)] border-color-accent text-color-accent cursor-default`
+        : `${baseClasses} bg-[rgba(6,182,212,0.2)] border-color-accent text-color-accent cursor-pointer hover:bg-[rgba(6,182,212,0.3)]`;
+      icon = '✓';
+      break;
+    case 'inherited-granted':
+      classes = readOnly
+        ? `${baseClasses} bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)] text-[rgba(6,182,212,0.5)] cursor-default`
+        : `${baseClasses} bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)] text-[rgba(6,182,212,0.5)] cursor-pointer hover:border-color-accent`;
+      icon = '✓';
+      break;
+    case 'explicit-denied':
+      classes = readOnly
+        ? `${baseClasses} bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)] text-color-danger cursor-default`
+        : `${baseClasses} bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)] text-color-danger cursor-pointer hover:border-color-danger`;
+      icon = '—';
+      break;
+    case 'forced-denied':
+      classes = `${baseClasses} bg-bg-elevated border-stroke text-fg-disabled opacity-40 cursor-not-allowed`;
+      icon = '—';
+      break;
+  }
+
+  return (
+    <button
+      onClick={isDisabled ? undefined : onToggle}
+      disabled={isDisabled}
+      className={classes}
+      title={
+        readOnly
+          ? state === 'explicit-granted'
+            ? `${label ?? ''} 허용`
+            : state === 'inherited-granted'
+              ? `${label ?? ''} 상속 허용`
+              : state === 'explicit-denied'
+                ? `${label ?? ''} 거부`
+                : `${label ?? ''} 비활성`
+          : state === 'explicit-granted'
+            ? `${label ?? ''} 명시적 허용 (클릭: 거부로 전환)`
+            : state === 'inherited-granted'
+              ? `${label ?? ''} 부모 상속 허용 (클릭: 명시적 거부)`
+              : state === 'explicit-denied'
+                ? `${label ?? ''} 명시적 거부 (클릭: 허용으로 전환)`
+                : `${label ?? ''} 부모 거부로 비활성`
+      }
+    >
+      {icon}
+    </button>
+  );
+}

frontend/src/components/admin/components/contents/PermLegend.tsx

@@ -0,0 +1,36 @@
+export function PermLegend() {
+  return (
+    <div
+      className="flex items-center gap-3 px-4 py-1.5 border-b border-stroke bg-bg-surface text-caption text-fg-disabled font-korean"
+      style={{ flexShrink: 0 }}
+    >
+      <span className="flex items-center gap-1">
+        <span className="inline-block w-3 h-3 rounded border bg-[rgba(6,182,212,0.2)] border-color-accent text-color-accent text-center text-caption leading-3">
+          ✓
+        </span>
+        허용
+      </span>
+      <span className="flex items-center gap-1">
+        <span className="inline-block w-3 h-3 rounded border bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)] text-[rgba(6,182,212,0.5)] text-center text-caption leading-3">
+          ✓
+        </span>
+        상속
+      </span>
+      <span className="flex items-center gap-1">
+        <span className="inline-block w-3 h-3 rounded border bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)] text-color-danger text-center text-caption leading-3">
+          —
+        </span>
+        거부
+      </span>
+      <span className="flex items-center gap-1">
+        <span className="inline-block w-3 h-3 rounded border bg-bg-elevated border-stroke text-fg-disabled opacity-40 text-center text-caption leading-3">
+          —
+        </span>
+        비활성
+      </span>
+      <span className="ml-2 border-l border-stroke pl-2 text-fg-disabled">
+        R=조회 C=생성 U=수정 D=삭제
+      </span>
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/ProgressBar.tsx

@@ -0,0 +1,15 @@
+export function ProgressBar({ value }: { value: number }) {
+  const colorClass =
+    value === 100 ? 'bg-color-success' : value > 0 ? 'bg-color-accent' : 'bg-bg-elevated';
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex-1 h-1.5 bg-bg-elevated rounded-full overflow-hidden">
+        <div
+          className={`h-full rounded-full transition-all ${colorClass}`}
+          style={{ width: `${value}%` }}
+        />
+      </div>
+      <span className="text-t3 w-8 text-right">{value}%</span>
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/RegisterModal.tsx

@@ -0,0 +1,228 @@
+import { useState } from 'react';
+import { createUserApi, type RoleWithPermissions, type OrgItem } from '@common/services/authApi';
+import { getRoleColor } from '../adminConstants';
+
+interface RegisterModalProps {
+  allRoles: RoleWithPermissions[];
+  allOrgs: OrgItem[];
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalProps) {
+  const [account, setAccount] = useState('');
+  const [password, setPassword] = useState('');
+  const [name, setName] = useState('');
+  const [rank, setRank] = useState('');
+  const [orgSn, setOrgSn] = useState<number | ''>(() => {
+    const defaultOrg = allOrgs.find((o) => o.orgNm === '기동방제과');
+    return defaultOrg ? defaultOrg.orgSn : '';
+  });
+  const [email, setEmail] = useState('');
+  const [roleSns, setRoleSns] = useState<number[]>([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const toggleRole = (sn: number) => {
+    setRoleSns((prev) => (prev.includes(sn) ? prev.filter((s) => s !== sn) : [...prev, sn]));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!account.trim() || !password.trim() || !name.trim()) {
+      setError('계정, 비밀번호, 사용자명은 필수 항목입니다.');
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      await createUserApi({
+        account: account.trim(),
+        password,
+        name: name.trim(),
+        rank: rank.trim() || undefined,
+        orgSn: orgSn !== '' ? orgSn : undefined,
+        roleSns: roleSns.length > 0 ? roleSns : undefined,
+      });
+      onSuccess();
+      onClose();
+    } catch (err) {
+      setError('사용자 등록에 실패했습니다.');
+      console.error('사용자 등록 실패:', err);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+      <div className="bg-bg-surface border border-stroke rounded-lg shadow-lg w-[480px] max-h-[90vh] flex flex-col">
+        {/* 헤더 */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
+          <h2 className="text-body-2 font-bold text-fg font-korean">사용자 등록</h2>
+          <button onClick={onClose} className="text-fg-disabled hover:text-fg transition-colors">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.5"
+            >
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* 폼 */}
+        <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto">
+          <div className="px-6 py-4 space-y-4">
+            {/* 계정 */}
+            <div>
+              <label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
+                계정 <span className="text-color-danger">*</span>
+              </label>
+              <input
+                type="text"
+                value={account}
+                onChange={(e) => setAccount(e.target.value)}
+                placeholder="로그인 계정 ID"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
+              />
+            </div>
+
+            {/* 비밀번호 */}
+            <div>
+              <label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
+                비밀번호 <span className="text-color-danger">*</span>
+              </label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="초기 비밀번호"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
+              />
+            </div>
+
+            {/* 사용자명 */}
+            <div>
+              <label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
+                사용자명 <span className="text-color-danger">*</span>
+              </label>
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="실명"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+              />
+            </div>
+
+            {/* 직급 */}
+            <div>
+              <label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
+                직급
+              </label>
+              <input
+                type="text"
+                value={rank}
+                onChange={(e) => setRank(e.target.value)}
+                placeholder="예: 팀장, 주임 등"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+              />
+            </div>
+
+            {/* 소속 */}
+            <div>
+              <label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
+                소속
+              </label>
+              <select
+                value={orgSn}
+                onChange={(e) => setOrgSn(e.target.value !== '' ? Number(e.target.value) : '')}
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+              >
+                <option value="">소속 없음</option>
+                {allOrgs.map((org) => (
+                  <option key={org.orgSn} value={org.orgSn}>
+                    {org.orgNm}
+                    {org.orgAbbrNm ? ` (${org.orgAbbrNm})` : ''}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* 이메일 */}
+            <div>
+              <label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
+                이메일
+              </label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="이메일 주소"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
+              />
+            </div>
+
+            {/* 역할 */}
+            <div>
+              <label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
+                역할
+              </label>
+              <div className="bg-bg-elevated border border-stroke rounded-md p-2 space-y-1 max-h-[120px] overflow-y-auto">
+                {allRoles.length === 0 ? (
+                  <p className="text-caption text-fg-disabled font-korean px-1 py-1">역할 없음</p>
+                ) : (
+                  allRoles.map((role, idx) => {
+                    const color = getRoleColor(role.code, idx);
+                    return (
+                      <label
+                        key={role.sn}
+                        className="flex items-center gap-2 px-2 py-1.5 hover:bg-[rgba(6,182,212,0.08)] rounded cursor-pointer"
+                      >
+                        <input
+                          type="checkbox"
+                          checked={roleSns.includes(role.sn)}
+                          onChange={() => toggleRole(role.sn)}
+                          style={{ accentColor: color }}
+                        />
+                        <span className="text-caption font-korean" style={{ color }}>
+                          {role.name}
+                        </span>
+                        <span className="text-caption text-fg-disabled font-mono">{role.code}</span>
+                      </label>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+
+            {/* 에러 메시지 */}
+            {error && <p className="text-label-2 text-color-danger font-korean">{error}</p>}
+          </div>
+
+          {/* 푸터 */}
+          <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-stroke">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-caption border border-stroke text-fg-sub rounded-md hover:bg-[rgba(6,182,212,0.08)] transition-all font-korean"
+            >
+              취소
+            </button>
+            <button
+              type="submit"
+              disabled={submitting}
+              className="px-4 py-2 text-caption font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all disabled:opacity-50 font-korean"
+            >
+              {submitting ? '등록 중...' : '등록'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/RolePermTab.tsx

@@ -0,0 +1,312 @@
+import type { PermTreeNode, RoleWithPermissions } from '@common/services/authApi';
+import type { PermState, OperCode } from '../PermissionsPanel';
+import { OPER_CODES, OPER_FULL_LABELS, OPER_LABELS, buildEffectiveStates } from '../PermissionsPanel';
+import { TreeRow } from './TreeRow';
+import { PermLegend } from './PermLegend';
+
+interface RolePermTabProps {
+  roles: RoleWithPermissions[];
+  permTree: PermTreeNode[];
+  rolePerms: Map<number, Map<string, boolean>>;
+  setRolePerms: React.Dispatch<React.SetStateAction<Map<number, Map<string, boolean>>>>;
+  selectedRoleSn: number | null;
+  setSelectedRoleSn: (sn: number | null) => void;
+  dirty: boolean;
+  saving: boolean;
+  saveError: string | null;
+  handleSave: () => Promise<void>;
+  handleToggleExpand: (code: string) => void;
+  handleTogglePerm: (code: string, oper: OperCode, currentState: PermState) => void;
+  expanded: Set<string>;
+  flatNodes: PermTreeNode[];
+  editingRoleSn: number | null;
+  editRoleName: string;
+  setEditRoleName: (name: string) => void;
+  handleStartEditName: (role: RoleWithPermissions) => void;
+  handleSaveRoleName: (roleSn: number) => Promise<void>;
+  setEditingRoleSn: (sn: number | null) => void;
+  toggleDefault: (roleSn: number) => Promise<void>;
+  handleDeleteRole: (roleSn: number, roleName: string) => Promise<void>;
+  showCreateForm: boolean;
+  setShowCreateForm: (show: boolean) => void;
+  setCreateError: (err: string) => void;
+  newRoleCode: string;
+  setNewRoleCode: (code: string) => void;
+  newRoleName: string;
+  setNewRoleName: (name: string) => void;
+  newRoleDesc: string;
+  setNewRoleDesc: (desc: string) => void;
+  creating: boolean;
+  createError: string;
+  handleCreateRole: () => Promise<void>;
+}
+
+export function RolePermTab({
+  roles,
+  permTree,
+  selectedRoleSn,
+  setSelectedRoleSn,
+  dirty,
+  saving,
+  saveError,
+  handleSave,
+  handleToggleExpand,
+  handleTogglePerm,
+  expanded,
+  flatNodes,
+  rolePerms,
+  editingRoleSn,
+  editRoleName,
+  setEditRoleName,
+  handleStartEditName,
+  handleSaveRoleName,
+  setEditingRoleSn,
+  toggleDefault,
+  handleDeleteRole,
+  showCreateForm,
+  setShowCreateForm,
+  setCreateError,
+  newRoleCode,
+  setNewRoleCode,
+  newRoleName,
+  setNewRoleName,
+  newRoleDesc,
+  setNewRoleDesc,
+  creating,
+  createError,
+  handleCreateRole,
+}: RolePermTabProps) {
+  const currentStateMap = selectedRoleSn
+    ? buildEffectiveStates(flatNodes, rolePerms.get(selectedRoleSn) ?? new Map())
+    : new Map<string, PermState>();
+
+  return (
+    <>
+      {/* 헤더 액션 버튼 */}
+      <div
+        className="flex items-center gap-2 px-4 py-2 border-b border-stroke"
+        style={{ flexShrink: 0 }}
+      >
+        <button
+          onClick={() => {
+            setShowCreateForm(true);
+            setCreateError('');
+          }}
+          className="px-3 py-1.5 text-label-2 font-semibold rounded-md border border-color-accent text-color-accent hover:bg-[rgba(6,182,212,0.08)] transition-all font-korean"
+        >
+          + 역할 추가
+        </button>
+        <button
+          onClick={handleSave}
+          disabled={!dirty || saving}
+          className={`px-3 py-1.5 text-label-2 font-semibold rounded-md transition-all font-korean ${
+            dirty
+              ? 'bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)]'
+              : 'bg-bg-card text-fg-disabled cursor-not-allowed'
+          }`}
+        >
+          {saving ? '저장 중...' : '변경사항 저장'}
+        </button>
+        {saveError && (
+          <span className="text-label-2 text-color-danger font-korean">{saveError}</span>
+        )}
+      </div>
+
+      {/* 역할 탭 바 */}
+      <div
+        className="flex items-center gap-1.5 px-4 py-2 border-b border-stroke bg-bg-surface overflow-x-auto"
+        style={{ flexShrink: 0 }}
+      >
+        {roles.map((role) => {
+          const isSelected = selectedRoleSn === role.sn;
+          return (
+            <div key={role.sn} className="flex items-center gap-0.5 flex-shrink-0">
+              <button
+                onClick={() => setSelectedRoleSn(role.sn)}
+                className={`px-2.5 py-1 text-label-2 font-semibold rounded-md transition-all font-korean ${
+                  isSelected
+                    ? 'border-2 border-color-accent text-color-accent shadow-[0_0_8px_rgba(6,182,212,0.2)]'
+                    : 'border border-stroke text-fg-disabled hover:border-stroke-light hover:text-fg-sub'
+                }`}
+              >
+                {editingRoleSn === role.sn ? (
+                  <input
+                    type="text"
+                    value={editRoleName}
+                    onChange={(e) => setEditRoleName(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') handleSaveRoleName(role.sn);
+                      if (e.key === 'Escape') setEditingRoleSn(null);
+                    }}
+                    onBlur={() => handleSaveRoleName(role.sn)}
+                    onClick={(e) => e.stopPropagation()}
+                    autoFocus
+                    className="w-20 px-1 py-0 text-label-2 font-semibold bg-bg-elevated border border-color-accent rounded text-center text-fg focus:outline-none font-korean"
+                  />
+                ) : (
+                  <span onDoubleClick={() => handleStartEditName(role)}>{role.name}</span>
+                )}
+                <span className="ml-1 text-caption font-mono opacity-50">{role.code}</span>
+                {role.isDefault && (
+                  <span className="ml-1 text-caption text-color-accent">기본</span>
+                )}
+              </button>
+              {isSelected && (
+                <div className="flex items-center gap-0.5">
+                  <button
+                    onClick={() => toggleDefault(role.sn)}
+                    className={`px-1.5 py-0.5 text-caption rounded transition-all font-korean ${
+                      role.isDefault
+                        ? 'bg-[rgba(6,182,212,0.15)] text-color-accent'
+                        : 'text-fg-disabled hover:text-fg-sub'
+                    }`}
+                    title="신규 사용자 기본 역할 설정"
+                  >
+                    {role.isDefault ? '기본역할' : '기본설정'}
+                  </button>
+                  {role.code !== 'ADMIN' && (
+                    <button
+                      onClick={() => handleDeleteRole(role.sn, role.name)}
+                      className="w-5 h-5 flex items-center justify-center text-fg-disabled hover:text-color-danger transition-colors"
+                      title="역할 삭제"
+                    >
+                      <svg
+                        width="10"
+                        height="10"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2.5"
+                      >
+                        <line x1="18" y1="6" x2="6" y2="18" />
+                        <line x1="6" y1="6" x2="18" y2="18" />
+                      </svg>
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 범례 */}
+      <PermLegend />
+
+      {/* CRUD 매트릭스 테이블 */}
+      {selectedRoleSn ? (
+        <div className="flex-1 overflow-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-stroke bg-bg-surface sticky top-0 z-10">
+                <th className="px-3 py-1.5 text-left text-caption font-semibold text-fg-disabled font-korean min-w-[200px]">
+                  기능
+                </th>
+                {OPER_CODES.map((oper) => (
+                  <th key={oper} className="px-1 py-1.5 text-center w-12">
+                    <div className="text-caption font-semibold text-fg-sub">
+                      {OPER_LABELS[oper]}
+                    </div>
+                    <div className="text-caption text-fg-disabled font-korean">
+                      {OPER_FULL_LABELS[oper]}
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {permTree.map((rootNode) => (
+                <TreeRow
+                  key={rootNode.code}
+                  node={rootNode}
+                  stateMap={currentStateMap}
+                  expanded={expanded}
+                  onToggleExpand={handleToggleExpand}
+                  onTogglePerm={handleTogglePerm}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div className="flex-1 flex items-center justify-center text-fg-disabled text-body-2 font-korean">
+          역할을 선택하세요
+        </div>
+      )}
+
+      {/* 역할 생성 모달 */}
+      {showCreateForm && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <div className="w-[400px] bg-bg-surface rounded-lg border border-stroke shadow-2xl">
+            <div className="px-5 py-4 border-b border-stroke">
+              <h3 className="text-body-2 font-bold text-fg font-korean">새 역할 추가</h3>
+            </div>
+            <div className="px-5 py-4 flex flex-col gap-3">
+              <div>
+                <label className="text-label-2 text-fg-disabled font-korean block mb-1">
+                  역할 코드
+                </label>
+                <input
+                  type="text"
+                  value={newRoleCode}
+                  onChange={(e) =>
+                    setNewRoleCode(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, ''))
+                  }
+                  placeholder="CUSTOM_ROLE"
+                  className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
+                />
+                <p className="text-caption text-fg-disabled mt-1 font-korean">
+                  영문 대문자, 숫자, 언더스코어만 허용 (생성 후 변경 불가)
+                </p>
+              </div>
+              <div>
+                <label className="text-label-2 text-fg-disabled font-korean block mb-1">
+                  역할 이름
+                </label>
+                <input
+                  type="text"
+                  value={newRoleName}
+                  onChange={(e) => setNewRoleName(e.target.value)}
+                  placeholder="사용자 정의 역할"
+                  className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+                />
+              </div>
+              <div>
+                <label className="text-label-2 text-fg-disabled font-korean block mb-1">
+                  설명 (선택)
+                </label>
+                <input
+                  type="text"
+                  value={newRoleDesc}
+                  onChange={(e) => setNewRoleDesc(e.target.value)}
+                  placeholder="역할에 대한 설명"
+                  className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+                />
+              </div>
+              {createError && (
+                <div className="px-3 py-2 text-label-2 text-color-danger bg-[rgba(239,68,68,0.08)] border border-[rgba(239,68,68,0.2)] rounded-md font-korean">
+                  {createError}
+                </div>
+              )}
+            </div>
+            <div className="px-5 py-3 border-t border-stroke flex justify-end gap-2">
+              <button
+                onClick={() => setShowCreateForm(false)}
+                className="px-4 py-2 text-caption text-fg-disabled border border-stroke rounded-md hover:bg-bg-surface-hover font-korean"
+              >
+                취소
+              </button>
+              <button
+                onClick={handleCreateRole}
+                disabled={!newRoleCode || !newRoleName || creating}
+                className="px-4 py-2 text-caption font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all font-korean disabled:opacity-50"
+              >
+                {creating ? '생성 중...' : '생성'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

frontend/src/components/admin/components/contents/Step1.tsx

@@ -0,0 +1,120 @@
+import type { ApiConfig, DbConfig, SourceType, WizardState } from '../DeidentifyPanel';
+
+interface Step1Props {
+  wizard: WizardState;
+  onChange: (patch: Partial<WizardState>) => void;
+}
+
+export function Step1({ wizard, onChange }: Step1Props) {
+  const handleDbChange = (key: keyof DbConfig, value: string) => {
+    onChange({ dbConfig: { ...wizard.dbConfig, [key]: value } });
+  };
+  const handleApiChange = (key: keyof ApiConfig, value: string) => {
+    onChange({ apiConfig: { ...wizard.apiConfig, [key]: value } });
+  };
+
+  return (
+    <div className="space-y-5">
+      <div>
+        <label className="block text-caption font-medium text-t2 mb-1">작업명 *</label>
+        <input
+          type="text"
+          value={wizard.taskName}
+          onChange={(e) => onChange({ taskName: e.target.value })}
+          placeholder="작업 이름을 입력하세요"
+          className="w-full px-3 py-2 text-caption rounded bg-bg-elevated border border-stroke text-t1 placeholder:text-t3 focus:outline-none focus:border-color-accent"
+        />
+      </div>
+
+      <div>
+        <label className="block text-caption font-medium text-t2 mb-2">소스 유형 *</label>
+        <div className="flex flex-col gap-2">
+          {(
+            [
+              ['db', '데이터베이스 연결'],
+              ['file', '파일 업로드'],
+              ['api', 'API 호출'],
+            ] as [SourceType, string][]
+          ).map(([val, label]) => (
+            <label key={val} className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="radio"
+                name="sourceType"
+                value={val}
+                checked={wizard.sourceType === val}
+                onChange={() => onChange({ sourceType: val })}
+                className="accent-cyan-500"
+              />
+              <span className="text-caption text-t1">{label}</span>
+            </label>
+          ))}
+        </div>
+      </div>
+
+      {wizard.sourceType === 'db' && (
+        <div className="grid grid-cols-2 gap-3 p-4 rounded bg-bg-surface border border-stroke">
+          {(
+            [
+              ['host', '호스트', 'localhost'],
+              ['port', '포트', '5432'],
+              ['database', '데이터베이스', 'wing'],
+              ['tableName', '테이블명', 'public.customers'],
+            ] as [keyof DbConfig, string, string][]
+          ).map(([key, labelText, placeholder]) => (
+            <div key={key}>
+              <label className="block text-label-2 text-t3 mb-1">{labelText}</label>
+              <input
+                type="text"
+                value={wizard.dbConfig[key]}
+                onChange={(e) => handleDbChange(key, e.target.value)}
+                placeholder={placeholder}
+                className="w-full px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 placeholder:text-t3 focus:outline-none focus:border-color-accent"
+              />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {wizard.sourceType === 'file' && (
+        <div className="p-8 rounded border-2 border-dashed border-stroke bg-bg-surface flex flex-col items-center gap-2 text-center">
+          <svg className="w-8 h-8 text-t3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+            />
+          </svg>
+          <p className="text-caption text-t2">파일을 드래그하거나 클릭하여 업로드</p>
+          <p className="text-label-2 text-t3">CSV, XLSX, JSON 지원 (최대 500MB)</p>
+        </div>
+      )}
+
+      {wizard.sourceType === 'api' && (
+        <div className="p-4 rounded bg-bg-surface border border-stroke space-y-3">
+          <div>
+            <label className="block text-label-2 text-t3 mb-1">API URL</label>
+            <input
+              type="text"
+              value={wizard.apiConfig.url}
+              onChange={(e) => handleApiChange('url', e.target.value)}
+              placeholder="https://api.example.com/data"
+              className="w-full px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 placeholder:text-t3 focus:outline-none focus:border-color-accent"
+            />
+          </div>
+          <div>
+            <label className="block text-label-2 text-t3 mb-1">메서드</label>
+            <select
+              value={wizard.apiConfig.method}
+              onChange={(e) => handleApiChange('method', e.target.value)}
+              className="px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
+            >
+              <option value="GET">GET</option>
+              <option value="POST">POST</option>
+            </select>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/Step2.tsx

@@ -0,0 +1,77 @@
+import type { WizardState } from '../DeidentifyPanel';
+
+interface Step2Props {
+  wizard: WizardState;
+  onChange: (patch: Partial<WizardState>) => void;
+}
+
+export function Step2({ wizard, onChange }: Step2Props) {
+  const toggleField = (idx: number) => {
+    const updated = wizard.fields.map((f, i) => (i === idx ? { ...f, selected: !f.selected } : f));
+    onChange({ fields: updated });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-3 gap-3">
+        {[
+          { label: '총 데이터 건수', value: '15,240건', color: 'text-t1' },
+          { label: '중복', value: '0건', color: 'text-color-success' },
+          { label: '누락값', value: '23건', color: 'text-color-caution' },
+        ].map((stat) => (
+          <div key={stat.label} className="p-3 rounded bg-bg-surface border border-stroke">
+            <p className="text-label-2 text-t3 mb-1">{stat.label}</p>
+            <p className={`text-body-2 font-semibold ${stat.color}`}>{stat.value}</p>
+          </div>
+        ))}
+      </div>
+
+      <div>
+        <h4 className="text-caption font-medium text-t2 mb-2">스키마 분석 결과 — 포함 필드 선택</h4>
+        <div className="rounded border border-stroke overflow-hidden">
+          <table className="w-full text-caption border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3">
+                <th className="px-3 py-2 text-left font-medium border-b border-stroke w-8">
+                  <input
+                    type="checkbox"
+                    checked={wizard.fields.every((f) => f.selected)}
+                    onChange={(e) =>
+                      onChange({
+                        fields: wizard.fields.map((f) => ({ ...f, selected: e.target.checked })),
+                      })
+                    }
+                    className="accent-cyan-500"
+                  />
+                </th>
+                <th className="px-3 py-2 text-left font-medium border-b border-stroke">필드명</th>
+                <th className="px-3 py-2 text-left font-medium border-b border-stroke">
+                  데이터 타입
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {wizard.fields.map((field, idx) => (
+                <tr key={field.name} className="border-b border-stroke hover:bg-bg-surface/50">
+                  <td className="px-3 py-2">
+                    <input
+                      type="checkbox"
+                      checked={field.selected}
+                      onChange={() => toggleField(idx)}
+                      className="accent-cyan-500"
+                    />
+                  </td>
+                  <td className="px-3 py-2 font-medium text-t1">{field.name}</td>
+                  <td className="px-3 py-2 text-t3">{field.dataType}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <p className="mt-1.5 text-label-2 text-t3">
+          {wizard.fields.filter((f) => f.selected).length}개 선택됨 (전체 {wizard.fields.length}개)
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/Step3.tsx

@@ -0,0 +1,97 @@
+import type { FieldConfig, WizardState } from '../DeidentifyPanel';
+import { TECHNIQUES, TEMPLATES } from '../DeidentifyPanel';
+
+interface Step3Props {
+  wizard: WizardState;
+  onChange: (patch: Partial<WizardState>) => void;
+}
+
+export function Step3({ wizard, onChange }: Step3Props) {
+  const updateField = (idx: number, key: keyof FieldConfig, value: string | boolean) => {
+    const updated = wizard.fields.map((f, i) => (i === idx ? { ...f, [key]: value } : f));
+    onChange({ fields: updated });
+  };
+
+  const selectedFields = wizard.fields.filter((f) => f.selected);
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded border border-stroke overflow-hidden">
+        <table className="w-full text-caption border-collapse">
+          <thead>
+            <tr className="bg-bg-elevated text-t3">
+              <th className="px-3 py-2 text-left font-medium border-b border-stroke">필드명</th>
+              <th className="px-3 py-2 text-left font-medium border-b border-stroke">
+                데이터타입
+              </th>
+              <th className="px-3 py-2 text-left font-medium border-b border-stroke">
+                선택된 기법
+              </th>
+              <th className="px-3 py-2 text-left font-medium border-b border-stroke">설정값</th>
+            </tr>
+          </thead>
+          <tbody>
+            {selectedFields.map((field) => {
+              const globalIdx = wizard.fields.findIndex((f) => f.name === field.name);
+              return (
+                <tr key={field.name} className="border-b border-stroke hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 font-medium text-t1">{field.name}</td>
+                  <td className="px-3 py-2 text-t3">{field.dataType}</td>
+                  <td className="px-3 py-2">
+                    <select
+                      value={field.technique}
+                      onChange={(e) => updateField(globalIdx, 'technique', e.target.value)}
+                      className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
+                    >
+                      {TECHNIQUES.map((t) => (
+                        <option key={t} value={t}>
+                          {t}
+                        </option>
+                      ))}
+                    </select>
+                  </td>
+                  <td className="px-3 py-2">
+                    <input
+                      type="text"
+                      value={field.configValue}
+                      onChange={(e) => updateField(globalIdx, 'configValue', e.target.value)}
+                      className="w-full px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
+                    />
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-4 pt-1">
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={wizard.saveAsTemplate}
+            onChange={(e) => onChange({ saveAsTemplate: e.target.checked })}
+            className="accent-cyan-500"
+          />
+          <span className="text-caption text-t2">템플릿으로 저장</span>
+        </label>
+
+        <div className="flex items-center gap-2">
+          <span className="text-caption text-t3">이전 템플릿 적용:</span>
+          <select
+            value={wizard.applyTemplate}
+            onChange={(e) => onChange({ applyTemplate: e.target.value })}
+            className="px-2.5 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
+          >
+            <option value="">선택 안 함</option>
+            {TEMPLATES.map((t) => (
+              <option key={t} value={t}>
+                {t}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/Step4.tsx

@@ -0,0 +1,160 @@
+import type { OneshotConfig, ProcessMode, RepeatType, ScheduleConfig, WizardState } from '../DeidentifyPanel';
+import { HOURS, WEEKDAYS } from '../DeidentifyPanel';
+
+interface Step4Props {
+  wizard: WizardState;
+  onChange: (patch: Partial<WizardState>) => void;
+}
+
+export function Step4({ wizard, onChange }: Step4Props) {
+  const handleScheduleChange = (key: keyof ScheduleConfig, value: string | boolean) => {
+    onChange({ scheduleConfig: { ...wizard.scheduleConfig, [key]: value } });
+  };
+  const handleOneshotChange = (key: keyof OneshotConfig, value: string) => {
+    onChange({ oneshotConfig: { ...wizard.oneshotConfig, [key]: value } });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-3">
+        {(
+          [
+            ['immediate', '즉시 처리', '지금 바로 데이터를 비식별화합니다.'],
+            ['scheduled', '배치 처리 - 정기 스케줄링', '반복 일정에 따라 자동으로 처리합니다.'],
+            ['oneshot', '배치 처리 - 일회성', '지정한 날짜/시간에 한 번 처리합니다.'],
+          ] as [ProcessMode, string, string][]
+        ).map(([val, label, desc]) => (
+          <div key={val}>
+            <label className="flex items-start gap-2.5 cursor-pointer">
+              <input
+                type="radio"
+                name="processMode"
+                value={val}
+                checked={wizard.processMode === val}
+                onChange={() => onChange({ processMode: val })}
+                className="mt-0.5 accent-cyan-500"
+              />
+              <div>
+                <span className="text-caption font-medium text-t1">{label}</span>
+                <p className="text-label-2 text-t3 mt-0.5">{desc}</p>
+              </div>
+            </label>
+
+            {val === 'scheduled' && wizard.processMode === 'scheduled' && (
+              <div className="mt-3 ml-5 p-4 rounded bg-bg-surface border border-stroke space-y-3">
+                <div className="flex items-center gap-3">
+                  <label className="text-caption text-t3 w-16 shrink-0">실행 시간</label>
+                  <select
+                    value={wizard.scheduleConfig.hour}
+                    onChange={(e) => handleScheduleChange('hour', e.target.value)}
+                    className="px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
+                  >
+                    {HOURS.map((h) => (
+                      <option key={h} value={h}>
+                        {h}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className="flex items-start gap-3">
+                  <label className="text-caption text-t3 w-16 shrink-0 mt-1">반복</label>
+                  <div className="flex flex-col gap-2">
+                    {(
+                      [
+                        ['daily', '매일'],
+                        ['weekly', '주 1회'],
+                        ['monthly', '월 1회'],
+                      ] as [RepeatType, string][]
+                    ).map(([rt, rl]) => (
+                      <div key={rt} className="flex items-center gap-2">
+                        <input
+                          type="radio"
+                          name="repeatType"
+                          value={rt}
+                          checked={wizard.scheduleConfig.repeatType === rt}
+                          onChange={() => handleScheduleChange('repeatType', rt)}
+                          className="accent-cyan-500"
+                        />
+                        <span className="text-caption text-t1">{rl}</span>
+                        {rt === 'weekly' && wizard.scheduleConfig.repeatType === 'weekly' && (
+                          <select
+                            value={wizard.scheduleConfig.weekday}
+                            onChange={(e) => handleScheduleChange('weekday', e.target.value)}
+                            className="ml-1 px-2 py-0.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
+                          >
+                            {WEEKDAYS.map((d) => (
+                              <option key={d} value={d}>
+                                {d}요일
+                              </option>
+                            ))}
+                          </select>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                <div className="flex items-center gap-3">
+                  <label className="text-caption text-t3 w-16 shrink-0">시작일</label>
+                  <input
+                    type="date"
+                    value={wizard.scheduleConfig.startDate}
+                    onChange={(e) => handleScheduleChange('startDate', e.target.value)}
+                    className="px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
+                  />
+                </div>
+                <div className="flex flex-col gap-1.5 mt-1">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={wizard.scheduleConfig.notifyOnComplete}
+                      onChange={(e) => handleScheduleChange('notifyOnComplete', e.target.checked)}
+                      className="accent-cyan-500"
+                    />
+                    <span className="text-caption text-t2">처리 완료 시 이메일 알림</span>
+                  </label>
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={wizard.scheduleConfig.notifyOnError}
+                      onChange={(e) => handleScheduleChange('notifyOnError', e.target.checked)}
+                      className="accent-cyan-500"
+                    />
+                    <span className="text-caption text-t2">오류 발생 시 즉시 알림</span>
+                  </label>
+                </div>
+              </div>
+            )}
+
+            {val === 'oneshot' && wizard.processMode === 'oneshot' && (
+              <div className="mt-3 ml-5 p-4 rounded bg-bg-surface border border-stroke space-y-3">
+                <div className="flex items-center gap-3">
+                  <label className="text-caption text-t3 w-16 shrink-0">실행 날짜</label>
+                  <input
+                    type="date"
+                    value={wizard.oneshotConfig.date}
+                    onChange={(e) => handleOneshotChange('date', e.target.value)}
+                    className="px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
+                  />
+                </div>
+                <div className="flex items-center gap-3">
+                  <label className="text-caption text-t3 w-16 shrink-0">실행 시간</label>
+                  <select
+                    value={wizard.oneshotConfig.hour}
+                    onChange={(e) => handleOneshotChange('hour', e.target.value)}
+                    className="px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
+                  >
+                    {HOURS.map((h) => (
+                      <option key={h} value={h}>
+                        {h}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/Step5.tsx

@@ -0,0 +1,62 @@
+import type { ProcessMode, WizardState } from '../DeidentifyPanel';
+
+interface Step5Props {
+  wizard: WizardState;
+  onChange: (patch: Partial<WizardState>) => void;
+}
+
+export function Step5({ wizard, onChange }: Step5Props) {
+  const selectedCount = wizard.fields.filter((f) => f.selected).length;
+  const ruleCount = wizard.fields.filter((f) => f.selected && f.technique !== '유지').length;
+
+  const processModeLabel: Record<ProcessMode, string> = {
+    immediate: '즉시 처리',
+    scheduled: `배치 - 정기 (${wizard.scheduleConfig.hour} / ${wizard.scheduleConfig.repeatType === 'daily' ? '매일' : wizard.scheduleConfig.repeatType === 'weekly' ? `주1회 ${wizard.scheduleConfig.weekday}요일` : '월1회'})`,
+    oneshot: `배치 - 일회성 (${wizard.oneshotConfig.date} ${wizard.oneshotConfig.hour})`,
+  };
+
+  const summaryRows = [
+    { label: '작업명', value: wizard.taskName || '(미입력)' },
+    {
+      label: '소스',
+      value:
+        wizard.sourceType === 'db'
+          ? `DB: ${wizard.dbConfig.database}.${wizard.dbConfig.tableName}`
+          : wizard.sourceType === 'file'
+            ? '파일 업로드'
+            : `API: ${wizard.apiConfig.url}`,
+    },
+    { label: '데이터 건수', value: '15,240건' },
+    { label: '선택 필드 수', value: `${selectedCount}개` },
+    { label: '비식별화 규칙 수', value: `${ruleCount}개` },
+    { label: '처리 방식', value: processModeLabel[wizard.processMode] },
+    { label: '예상 처리시간', value: '약 3~5분' },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded border border-stroke overflow-hidden">
+        <table className="w-full text-caption border-collapse">
+          <tbody>
+            {summaryRows.map(({ label, value }) => (
+              <tr key={label} className="border-b border-stroke last:border-b-0">
+                <td className="px-4 py-2.5 text-t3 bg-bg-elevated w-36 font-medium">{label}</td>
+                <td className="px-4 py-2.5 text-t1">{value}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <label className="flex items-center gap-2 cursor-pointer p-3 rounded border border-stroke bg-bg-surface">
+        <input
+          type="checkbox"
+          checked={wizard.confirmed}
+          onChange={(e) => onChange({ confirmed: e.target.checked })}
+          className="accent-cyan-500"
+        />
+        <span className="text-caption text-t1 font-medium">위 정보를 확인했습니다.</span>
+      </label>
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/StepIndicator.tsx

@@ -0,0 +1,53 @@
+import { STEP_LABELS } from '../DeidentifyPanel';
+
+export function StepIndicator({ current }: { current: number }) {
+  return (
+    <div className="flex items-center justify-center gap-0 px-6 py-4 border-b border-stroke">
+      {STEP_LABELS.map((label, i) => {
+        const stepNum = i + 1;
+        const isDone = stepNum < current;
+        const isActive = stepNum === current;
+        return (
+          <div key={label} className="flex items-center">
+            <div className="flex flex-col items-center">
+              <div
+                className={`w-7 h-7 rounded-full flex items-center justify-center text-caption font-semibold transition-colors ${
+                  isDone
+                    ? 'bg-color-success text-white'
+                    : isActive
+                      ? 'bg-color-accent text-white'
+                      : 'bg-bg-elevated text-t3'
+                }`}
+              >
+                {isDone ? (
+                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2.5}
+                      d="M5 13l4 4L19 7"
+                    />
+                  </svg>
+                ) : (
+                  stepNum
+                )}
+              </div>
+              <span
+                className={`mt-1 text-label-2 whitespace-nowrap ${
+                  isActive ? 'text-color-accent' : isDone ? 'text-color-success' : 'text-t3'
+                }`}
+              >
+                {stepNum}.{label}
+              </span>
+            </div>
+            {i < STEP_LABELS.length - 1 && (
+              <div
+                className={`w-10 h-px mx-1 mb-4 ${i + 1 < current ? 'bg-color-success' : 'bg-stroke-1'}`}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/TargetArchTab.tsx

@@ -0,0 +1,196 @@
+interface TabModuleRow {
+  module: string;
+  name: string;
+  feature: string;
+  integration: string;
+}
+
+const TAB_MODULES: TabModuleRow[] = [
+  {
+    module: '확산예측',
+    name: 'prediction',
+    feature: '유출유 확산 시뮬레이션, 역추적 분석, 오일붐 배치',
+    integration: 'KOSPS, 포세이돈 R&D',
+  },
+  {
+    module: 'HNS 분석',
+    name: 'hns',
+    feature: '화학물질 확산 예측, 물질 DB, 위험도 평가',
+    integration: '충북대 R&D, 물질 DB',
+  },
+  {
+    module: '구조 시나리오',
+    name: 'rescue',
+    feature: '긴급구난 분석, 표류 예측',
+    integration: '긴급구난 R&D',
+  },
+  {
+    module: '항공 방제',
+    name: 'aerial',
+    feature: '위성영상 분석, 드론 영상, 유막 면적 분석',
+    integration: '위성/드론 데이터',
+  },
+  {
+    module: '해양 기상',
+    name: 'weather',
+    feature: '기상·해상 정보, 조위·해류 관측',
+    integration: 'KHOA API, 기상청 API',
+  },
+  {
+    module: '사건/사고',
+    name: 'incidents',
+    feature: '해양오염 사고 등록·관리·이력',
+    integration: '해경 사고 DB',
+  },
+  {
+    module: '자산 관리',
+    name: 'assets',
+    feature: '기관·장비·선박 보험 관리',
+    integration: '해경 자산 DB',
+  },
+  {
+    module: 'SCAT 조사',
+    name: 'scat',
+    feature: 'Pre-SCAT 해안 조사 기록',
+    integration: '현장 조사 데이터',
+  },
+  {
+    module: '관리자',
+    name: 'admin',
+    feature: '사용자/권한/메뉴/설정/연계 관리',
+    integration: '전체 시스템',
+  },
+];
+
+// ─── 연계 인터페이스 데이터 ───────────────────────────────────────────────────────
+
+export function TargetArchTab() {
+  return (
+    <div className="flex flex-col gap-6 p-5">
+      {/* 1. 시스템 전체 구성도 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">1. 시스템 전체 구성도</h3>
+        <div className="flex flex-col items-stretch gap-0 border border-stroke rounded overflow-hidden">
+          {/* 사용자 접근 계층 */}
+          <div className="p-4 bg-bg-card">
+            <p className="text-caption font-semibold text-t2 mb-1">사용자 접근 계층</p>
+            <p className="text-caption text-t1 font-medium mb-1">웹 브라우저 (React SPA)</p>
+            <p className="text-caption text-t3 leading-relaxed">
+              확산예측 | HNS분석 | 구조시나리오 | 항공방제 | 기상정보 | 사고관리 | SCAT조사 |
+              자산관리 | 관리자
+            </p>
+          </div>
+          {/* 화살표 + 프로토콜 */}
+          <div className="flex flex-col items-center py-2 bg-bg-base border-y border-stroke">
+            <span className="text-t3 text-lg">↕</span>
+            <span className="text-caption text-t3">HTTPS (TLS 1.2+)</span>
+          </div>
+          {/* API 서버 계층 */}
+          <div className="p-4 bg-bg-surface border-b border-stroke">
+            <p className="text-caption font-semibold text-t2 mb-1">API 서버 계층</p>
+            <p className="text-caption text-t1 font-medium mb-2">Express 4 REST API (Port 3001)</p>
+            <div className="grid grid-cols-2 gap-1.5 sm:grid-cols-4">
+              {[
+                'JWT 인증 미들웨어',
+                'RBAC 권한 엔진 (permResolver)',
+                '감사로그 자동 기록',
+                '입력 살균 / Rate Limiting / Helmet',
+              ].map((item) => (
+                <div
+                  key={item}
+                  className="bg-bg-elevated border border-stroke rounded px-2 py-1.5 text-center"
+                >
+                  <p className="text-caption text-t2 leading-snug">{item}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/* 화살표 + 프로토콜 */}
+          <div className="flex flex-col items-center py-2 bg-bg-base border-b border-stroke">
+            <span className="text-t3 text-lg">↕</span>
+            <span className="text-caption text-t3">pg connection pool</span>
+          </div>
+          {/* 데이터 계층 */}
+          <div className="p-4 bg-bg-card">
+            <p className="text-caption font-semibold text-t2 mb-1">데이터 계층</p>
+            <p className="text-caption text-t1 font-medium mb-2">PostgreSQL 16 + PostGIS</p>
+            <div className="flex gap-2">
+              {[
+                { name: 'wing DB', sub: '운영' },
+                { name: 'wing_auth', sub: '인증' },
+              ].map((item) => (
+                <div
+                  key={item.name}
+                  className="bg-bg-elevated border border-stroke rounded p-2 text-center min-w-24"
+                >
+                  <p className="text-caption font-medium text-t1">{item.name}</p>
+                  <p className="text-caption text-t3 mt-0.5">({item.sub})</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 2. 탭 기반 업무 모듈 구조 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">2. 탭 기반 업무 모듈 구조</h3>
+        <div className="overflow-auto">
+          <table className="w-full text-caption border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+                {['모듈', '패키지명', '기능', '주요 연계'].map((h) => (
+                  <th
+                    key={h}
+                    className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {TAB_MODULES.map((row) => (
+                <tr key={row.name} className="border-b border-stroke hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.module}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.name}</td>
+                  <td className="px-3 py-2 text-t2">{row.feature}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.integration}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* 3. RBAC 권한 체계 */}
+      <section>
+        <h3 className="text-body-2 font-semibold text-t1 mb-3">3. RBAC 권한 체계</h3>
+        <div className="flex flex-col gap-3">
+          {[
+            {
+              title: '2차원 권한 엔진',
+              content:
+                'AUTH_PERM OPER_CD 기반: R(조회), C(생성), U(수정), D(삭제) — 역할별 메뉴·기능 접근 제어',
+            },
+            {
+              title: 'permResolver',
+              content:
+                '역할(Role)과 권한(Permission)의 2차원 매핑으로 메뉴 표시 여부 및 기능 사용 가능 여부를 동적으로 판단',
+            },
+            {
+              title: '감사로그 자동 기록',
+              content:
+                '누가(사용자) / 언제(타임스탬프) / 무엇을(기능) / 어디서(IP, 메뉴) — 모든 주요 작업 자동 기록',
+            },
+          ].map((item) => (
+            <div key={item.title} className="bg-bg-card border border-stroke rounded p-3">
+              <p className="text-caption font-semibold text-t2 mb-1">{item.title}</p>
+              <p className="text-caption text-t2 leading-relaxed">{item.content}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/TaskTable.tsx

@@ -0,0 +1,100 @@
+import type { DeidentifyTask } from '../DeidentifyPanel';
+import { TABLE_HEADERS, getStatusBadgeClass } from '../DeidentifyPanel';
+import { ProgressBar } from './ProgressBar';
+
+interface TaskTableProps {
+  rows: DeidentifyTask[];
+  loading: boolean;
+  onAction: (action: string, task: DeidentifyTask) => void;
+}
+
+export function TaskTable({ rows, loading, onAction }: TaskTableProps) {
+  return (
+    <div className="overflow-auto">
+      <table className="w-full text-caption border-collapse">
+        <thead>
+          <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+            {TABLE_HEADERS.map((h) => (
+              <th
+                key={h}
+                className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
+              >
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {loading && rows.length === 0
+            ? Array.from({ length: 5 }).map((_, i) => (
+                <tr key={i} className="border-b border-stroke animate-pulse">
+                  {TABLE_HEADERS.map((_, j) => (
+                    <td key={j} className="px-3 py-2">
+                      <div className="h-3 bg-bg-elevated rounded w-14" />
+                    </td>
+                  ))}
+                </tr>
+              ))
+            : rows.map((row) => (
+                <tr key={row.id} className="border-b border-stroke hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 text-t3 font-mono">{row.id}</td>
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.name}</td>
+                  <td
+                    className="px-3 py-2 text-t2 whitespace-nowrap max-w-[240px] truncate"
+                    title={row.target}
+                  >
+                    {row.target}
+                  </td>
+                  <td className="px-3 py-2">
+                    <span
+                      className={`inline-block px-2 py-0.5 rounded text-label-2 font-medium ${getStatusBadgeClass(row.status)}`}
+                    >
+                      {row.status}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.startTime}</td>
+                  <td className="px-3 py-2 min-w-[120px]">
+                    <ProgressBar value={row.progress} />
+                  </td>
+                  <td className="px-3 py-2 text-t2">{row.createdBy}</td>
+                  <td className="px-3 py-2">
+                    <div className="flex items-center gap-1 flex-wrap">
+                      <button
+                        onClick={() => onAction('detail', row)}
+                        className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors whitespace-nowrap"
+                      >
+                        상세보기
+                      </button>
+                      <button
+                        onClick={() => onAction('download', row)}
+                        className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors whitespace-nowrap"
+                      >
+                        결과다운로드
+                      </button>
+                      <button
+                        onClick={() => onAction('retry', row)}
+                        className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors whitespace-nowrap"
+                      >
+                        재실행
+                      </button>
+                      <button
+                        onClick={() => onAction('delete', row)}
+                        className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-color-danger transition-colors whitespace-nowrap"
+                      >
+                        삭제
+                      </button>
+                      <button
+                        onClick={() => onAction('audit', row)}
+                        className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors whitespace-nowrap"
+                      >
+                        감사로그
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/TreeRow.tsx

@@ -0,0 +1,103 @@
+import type { PermTreeNode } from '@common/services/authApi';
+import type { PermState, OperCode } from '../PermissionsPanel';
+import { OPER_CODES, OPER_FULL_LABELS, makeKey } from '../PermissionsPanel';
+import { PermCell } from './PermCell';
+
+interface TreeRowProps {
+  node: PermTreeNode;
+  stateMap: Map<string, PermState>;
+  expanded: Set<string>;
+  onToggleExpand: (code: string) => void;
+  onTogglePerm: (code: string, oper: OperCode, currentState: PermState) => void;
+  readOnly?: boolean;
+}
+
+export function TreeRow({
+  node,
+  stateMap,
+  expanded,
+  onToggleExpand,
+  onTogglePerm,
+  readOnly = false,
+}: TreeRowProps) {
+  const hasChildren = node.children.length > 0;
+  const isExpanded = expanded.has(node.code);
+  const indent = node.level * 16;
+
+  // 이 노드의 READ 상태 (CUD 비활성 판단용)
+  const readState = stateMap.get(makeKey(node.code, 'READ')) ?? 'forced-denied';
+  const readDenied = readState === 'explicit-denied' || readState === 'forced-denied';
+
+  return (
+    <>
+      <tr className="border-b border-stroke hover:bg-[rgba(6,182,212,0.04)] transition-colors">
+        <td className="px-3 py-1">
+          <div className="flex items-center" style={{ paddingLeft: indent }}>
+            {hasChildren ? (
+              <button
+                onClick={() => onToggleExpand(node.code)}
+                className="w-4 h-4 flex items-center justify-center text-fg-disabled hover:text-fg transition-colors mr-1 flex-shrink-0"
+              >
+                <svg
+                  width="10"
+                  height="10"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                  className={`transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+                >
+                  <polyline points="9 18 15 12 9 6" />
+                </svg>
+              </button>
+            ) : (
+              <span className="w-4 mr-1 flex-shrink-0 text-center text-fg-disabled text-caption">
+                {node.level > 0 ? '├' : ''}
+              </span>
+            )}
+            {node.icon && <span className="mr-1 flex-shrink-0 text-label-2">{node.icon}</span>}
+            <div className="min-w-0">
+              <div
+                className={`text-label-2 font-korean truncate ${node.level === 0 ? 'font-bold text-fg' : 'font-medium text-fg-sub'}`}
+              >
+                {node.name}
+              </div>
+            </div>
+          </div>
+        </td>
+        {OPER_CODES.map((oper) => {
+          const key = makeKey(node.code, oper);
+          const state = stateMap.get(key) ?? 'forced-denied';
+          // READ 거부 시 CUD도 강제 거부
+          const effectiveState =
+            oper !== 'READ' && readDenied ? ('forced-denied' as PermState) : state;
+          return (
+            <td key={oper} className="px-1 py-1 text-center">
+              <div className="flex justify-center">
+                <PermCell
+                  state={effectiveState}
+                  label={OPER_FULL_LABELS[oper]}
+                  onToggle={() => onTogglePerm(node.code, oper, effectiveState)}
+                  readOnly={readOnly}
+                />
+              </div>
+            </td>
+          );
+        })}
+      </tr>
+      {hasChildren &&
+        isExpanded &&
+        node.children.map((child: PermTreeNode) => (
+          <TreeRow
+            key={child.code}
+            node={child}
+            stateMap={stateMap}
+            expanded={expanded}
+            onToggleExpand={onToggleExpand}
+            onTogglePerm={onTogglePerm}
+            readOnly={readOnly}
+          />
+        ))}
+    </>
+  );
+}

frontend/src/components/admin/components/contents/UserDetailModal.tsx

@@ -0,0 +1,293 @@
+import { useState } from 'react';
+import { changePasswordApi, updateUserApi, type UserListItem, type OrgItem, type RoleWithPermissions } from '@common/services/authApi';
+import { statusLabels } from '../adminConstants';
+import { formatDate } from '../UsersPanel';
+
+interface UserDetailModalProps {
+  user: UserListItem;
+  allRoles: RoleWithPermissions[];
+  allOrgs: OrgItem[];
+  onClose: () => void;
+  onUpdated: () => void;
+}
+
+export function UserDetailModal({ user, allOrgs, onClose, onUpdated }: UserDetailModalProps) {
+  const [name, setName] = useState(user.name);
+  const [rank, setRank] = useState(user.rank || '');
+  const [orgSn, setOrgSn] = useState<number | ''>(user.orgSn ?? '');
+  const [saving, setSaving] = useState(false);
+  const [newPassword, setNewPassword] = useState('');
+  const [resetPwLoading, setResetPwLoading] = useState(false);
+  const [resetPwDone, setResetPwDone] = useState(false);
+  const [unlockLoading, setUnlockLoading] = useState(false);
+  const [message, setMessage] = useState<{ text: string; type: 'success' | 'error' } | null>(null);
+
+  const handleSaveInfo = async () => {
+    setSaving(true);
+    setMessage(null);
+    try {
+      await updateUserApi(user.id, {
+        name: name.trim(),
+        rank: rank.trim() || undefined,
+        orgSn: orgSn !== '' ? orgSn : null,
+      });
+      setMessage({ text: '사용자 정보가 수정되었습니다.', type: 'success' });
+      onUpdated();
+    } catch {
+      setMessage({ text: '사용자 정보 수정에 실패했습니다.', type: 'error' });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleResetPassword = async () => {
+    if (!newPassword.trim()) {
+      setMessage({ text: '새 비밀번호를 입력하세요.', type: 'error' });
+      return;
+    }
+    setResetPwLoading(true);
+    setMessage(null);
+    try {
+      await changePasswordApi(user.id, newPassword);
+      setMessage({ text: '비밀번호가 초기화되었습니다.', type: 'success' });
+      setResetPwDone(true);
+      setNewPassword('');
+    } catch {
+      setMessage({ text: '비밀번호 초기화에 실패했습니다.', type: 'error' });
+    } finally {
+      setResetPwLoading(false);
+    }
+  };
+
+  const handleUnlock = async () => {
+    setUnlockLoading(true);
+    setMessage(null);
+    try {
+      await updateUserApi(user.id, { status: 'ACTIVE' });
+      setMessage({ text: '계정 잠금이 해제되었습니다.', type: 'success' });
+      onUpdated();
+    } catch {
+      setMessage({ text: '잠금 해제에 실패했습니다.', type: 'error' });
+    } finally {
+      setUnlockLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+      <div className="bg-bg-surface border border-stroke rounded-lg shadow-lg w-[480px] max-h-[90vh] flex flex-col">
+        {/* 헤더 */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
+          <div>
+            <h2 className="text-body-2 font-bold text-fg font-korean">사용자 정보</h2>
+            <p className="text-caption text-fg-disabled font-mono mt-0.5">{user.account}</p>
+          </div>
+          <button onClick={onClose} className="text-fg-disabled hover:text-fg transition-colors">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.5"
+            >
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto px-6 py-4 space-y-5">
+          {/* 기본 정보 수정 */}
+          <div>
+            <h3 className="text-label-2 font-semibold text-fg-sub font-korean mb-3">
+              기본 정보 수정
+            </h3>
+            <div className="space-y-3">
+              <div>
+                <label className="block text-caption text-fg-disabled font-korean mb-1">
+                  사용자명
+                </label>
+                <input
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="w-full px-3 py-1.5 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+                />
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-caption text-fg-disabled font-korean mb-1">
+                    직급
+                  </label>
+                  <input
+                    type="text"
+                    value={rank}
+                    onChange={(e) => setRank(e.target.value)}
+                    placeholder="예: 팀장"
+                    className="w-full px-3 py-1.5 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+                  />
+                </div>
+                <div>
+                  <label className="block text-caption text-fg-disabled font-korean mb-1">
+                    소속
+                  </label>
+                  <select
+                    value={orgSn}
+                    onChange={(e) => setOrgSn(e.target.value !== '' ? Number(e.target.value) : '')}
+                    className="w-full px-3 py-1.5 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+                  >
+                    <option value="">소속 없음</option>
+                    {allOrgs.map((org) => (
+                      <option key={org.orgSn} value={org.orgSn}>
+                        {org.orgNm}
+                        {org.orgAbbrNm ? ` (${org.orgAbbrNm})` : ''}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+              <button
+                onClick={handleSaveInfo}
+                disabled={saving || !name.trim()}
+                className="px-4 py-1.5 text-label-2 font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all disabled:opacity-50 font-korean"
+              >
+                {saving ? '저장 중...' : '정보 저장'}
+              </button>
+            </div>
+          </div>
+
+          {/* 구분선 */}
+          <div className="border-t border-stroke" />
+
+          {/* 비밀번호 초기화 */}
+          <div>
+            <h3 className="text-label-2 font-semibold text-fg-sub font-korean mb-3">
+              비밀번호 초기화
+            </h3>
+            <div className="flex items-end gap-2">
+              <div className="flex-1">
+                <label className="block text-caption text-fg-disabled font-korean mb-1">
+                  새 비밀번호
+                </label>
+                <input
+                  type="password"
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  placeholder="새 비밀번호 입력"
+                  className="w-full px-3 py-1.5 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
+                />
+              </div>
+              <button
+                onClick={handleResetPassword}
+                disabled={resetPwLoading || !newPassword.trim()}
+                className="px-4 py-1.5 text-label-2 font-semibold rounded-md border border-color-caution text-color-caution hover:bg-[rgba(234,179,8,0.12)] transition-all disabled:opacity-50 font-korean flex-shrink-0"
+              >
+                {resetPwLoading ? '초기화 중...' : resetPwDone ? '초기화 완료' : '비밀번호 초기화'}
+              </button>
+              <button
+                onClick={handleUnlock}
+                disabled={unlockLoading || user.status !== 'LOCKED'}
+                className="px-4 py-1.5 text-label-2 font-semibold rounded-md border border-color-success text-color-success hover:bg-[rgba(34,197,94,0.12)] transition-all disabled:opacity-50 font-korean flex-shrink-0"
+                title={user.status !== 'LOCKED' ? '잠금 상태가 아닙니다' : ''}
+              >
+                {unlockLoading ? '해제 중...' : '패스워드잠금해제'}
+              </button>
+            </div>
+            <p className="text-caption text-fg-disabled font-korean mt-1.5">
+              초기화 후 사용자에게 새 비밀번호를 전달하세요.
+            </p>
+          </div>
+
+          {/* 구분선 */}
+          <div className="border-t border-stroke" />
+
+          {/* 계정 잠금 해제 */}
+          <div>
+            <h3 className="text-label-2 font-semibold text-fg-sub font-korean mb-2">계정 상태</h3>
+            <div className="flex items-center justify-between bg-bg-elevated border border-stroke rounded-md px-4 py-3">
+              <div>
+                <div className="flex items-center gap-2">
+                  <span
+                    className={`inline-flex items-center gap-1.5 text-label-2 font-semibold font-korean ${(statusLabels[user.status] || statusLabels.INACTIVE).color}`}
+                  >
+                    <span
+                      className={`w-1.5 h-1.5 rounded-full ${(statusLabels[user.status] || statusLabels.INACTIVE).dot}`}
+                    />
+                    {(statusLabels[user.status] || statusLabels.INACTIVE).label}
+                  </span>
+                  {user.failCount > 0 && (
+                    <span className="text-caption text-color-danger font-korean">
+                      (로그인 실패 {user.failCount}회)
+                    </span>
+                  )}
+                </div>
+                {user.status === 'LOCKED' && (
+                  <p className="text-caption text-fg-disabled font-korean mt-1">
+                    비밀번호 5회 이상 오류로 잠금 처리됨
+                  </p>
+                )}
+              </div>
+              {user.status === 'LOCKED' && (
+                <button
+                  onClick={handleUnlock}
+                  disabled={unlockLoading}
+                  className="px-4 py-1.5 text-label-2 font-semibold rounded-md border border-color-success text-color-success hover:bg-[rgba(34,197,94,0.12)] transition-all disabled:opacity-50 font-korean flex-shrink-0"
+                >
+                  {unlockLoading ? '해제 중...' : '잠금 해제'}
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* 기타 정보 (읽기 전용) */}
+          <div>
+            <h3 className="text-label-2 font-semibold text-fg-sub font-korean mb-2">기타 정보</h3>
+            <div className="grid grid-cols-2 gap-2 text-caption font-korean">
+              <div className="bg-bg-elevated border border-stroke rounded px-3 py-2">
+                <span className="text-fg-disabled">이메일: </span>
+                <span className="text-fg-sub font-mono">{user.email || '-'}</span>
+              </div>
+              <div className="bg-bg-elevated border border-stroke rounded px-3 py-2">
+                <span className="text-fg-disabled">OAuth: </span>
+                <span className="text-fg-sub">{user.oauthProvider || '-'}</span>
+              </div>
+              <div className="bg-bg-elevated border border-stroke rounded px-3 py-2">
+                <span className="text-fg-disabled">최종 로그인: </span>
+                <span className="text-fg-sub">
+                  {user.lastLogin ? formatDate(user.lastLogin) : '-'}
+                </span>
+              </div>
+              <div className="bg-bg-elevated border border-stroke rounded px-3 py-2">
+                <span className="text-fg-disabled">등록일: </span>
+                <span className="text-fg-sub">{formatDate(user.regDtm)}</span>
+              </div>
+            </div>
+          </div>
+
+          {/* 메시지 */}
+          {message && (
+            <div
+              className={`px-3 py-2 text-label-2 rounded-md font-korean ${
+                message.type === 'success'
+                  ? 'text-color-success bg-[rgba(34,197,94,0.08)] border border-[rgba(34,197,94,0.3)]'
+                  : 'text-color-danger bg-[rgba(239,68,68,0.08)] border border-[rgba(239,68,68,0.2)]'
+              }`}
+            >
+              {message.text}
+            </div>
+          )}
+        </div>
+
+        {/* 푸터 */}
+        <div className="flex items-center justify-end px-6 py-3 border-t border-stroke">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-caption border border-stroke text-fg-sub rounded-md hover:bg-[rgba(6,182,212,0.08)] transition-all font-korean"
+          >
+            닫기
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/UserPermTab.tsx

@@ -0,0 +1,336 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { UserListItem, PermTreeNode, RoleWithPermissions } from '@common/services/authApi';
+import { fetchUsers, assignRolesApi } from '@common/services/authApi';
+import { getRoleColor } from '../adminConstants';
+import type { OperCode, PermState } from '../PermissionsPanel';
+import { OPER_CODES, OPER_FULL_LABELS, OPER_LABELS, flattenTree, buildEffectiveStates } from '../PermissionsPanel';
+import { TreeRow } from './TreeRow';
+import { PermLegend } from './PermLegend';
+
+interface UserPermTabProps {
+  roles: RoleWithPermissions[];
+  permTree: PermTreeNode[];
+  rolePerms: Map<number, Map<string, boolean>>;
+}
+
+export function UserPermTab({ roles, permTree, rolePerms }: UserPermTabProps) {
+  const [users, setUsers] = useState<UserListItem[]>([]);
+  const [loadingUsers, setLoadingUsers] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<UserListItem | null>(null);
+  const [assignedRoleSns, setAssignedRoleSns] = useState<number[]>([]);
+  const [savingRoles, setSavingRoles] = useState(false);
+  const [rolesDirty, setRolesDirty] = useState(false);
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const flatNodes = flattenTree(permTree);
+
+  useEffect(() => {
+    const loadUsers = async () => {
+      setLoadingUsers(true);
+      try {
+        const data = await fetchUsers();
+        setUsers(data);
+      } catch (err) {
+        console.error('사용자 목록 조회 실패:', err);
+      } finally {
+        setLoadingUsers(false);
+      }
+    };
+    loadUsers();
+  }, []);
+
+  // 최상위 노드 기본 펼침
+  useEffect(() => {
+    if (permTree.length > 0) {
+      setExpanded(new Set(permTree.map((n) => n.code)));
+    }
+  }, [permTree]);
+
+  // 드롭다운 외부 클릭 시 닫기
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setShowDropdown(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const filteredUsers = users.filter((u) => {
+    if (!searchQuery) return true;
+    const q = searchQuery.toLowerCase();
+    return (
+      u.name.toLowerCase().includes(q) ||
+      u.account.toLowerCase().includes(q) ||
+      (u.orgName?.toLowerCase().includes(q) ?? false)
+    );
+  });
+
+  const handleSelectUser = (user: UserListItem) => {
+    setSelectedUser(user);
+    setSearchQuery(user.name);
+    setShowDropdown(false);
+    setAssignedRoleSns(user.roleSns ?? []);
+    setRolesDirty(false);
+  };
+
+  const handleToggleRole = (roleSn: number) => {
+    setAssignedRoleSns((prev) => {
+      const next = prev.includes(roleSn) ? prev.filter((sn) => sn !== roleSn) : [...prev, roleSn];
+      return next;
+    });
+    setRolesDirty(true);
+  };
+
+  const handleSaveRoles = async () => {
+    if (!selectedUser) return;
+    setSavingRoles(true);
+    try {
+      await assignRolesApi(selectedUser.id, assignedRoleSns);
+      setRolesDirty(false);
+      // 로컬 users 상태 갱신
+      setUsers((prev) =>
+        prev.map((u) =>
+          u.id === selectedUser.id
+            ? {
+                ...u,
+                roleSns: assignedRoleSns,
+                roles: roles.filter((r) => assignedRoleSns.includes(r.sn)).map((r) => r.name),
+              }
+            : u,
+        ),
+      );
+      setSelectedUser((prev) =>
+        prev
+          ? {
+              ...prev,
+              roleSns: assignedRoleSns,
+              roles: roles.filter((r) => assignedRoleSns.includes(r.sn)).map((r) => r.name),
+            }
+          : null,
+      );
+    } catch (err) {
+      console.error('역할 저장 실패:', err);
+    } finally {
+      setSavingRoles(false);
+    }
+  };
+
+  const handleToggleExpand = useCallback((code: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(code)) next.delete(code);
+      else next.add(code);
+      return next;
+    });
+  }, []);
+
+  // 사용자의 유효 권한: 할당된 역할들의 권한 병합 (OR 결합)
+  const effectiveStateMap = (() => {
+    if (!selectedUser || assignedRoleSns.length === 0) {
+      return new Map<string, PermState>();
+    }
+
+    // 각 역할의 명시적 권한 병합: 어느 역할이든 granted=true면 허용
+    const mergedPerms = new Map<string, boolean>();
+    for (const roleSn of assignedRoleSns) {
+      const perms = rolePerms.get(roleSn);
+      if (!perms) continue;
+      for (const [key, granted] of perms) {
+        if (granted) {
+          mergedPerms.set(key, true);
+        } else if (!mergedPerms.has(key)) {
+          mergedPerms.set(key, false);
+        }
+      }
+    }
+
+    return buildEffectiveStates(flatNodes, mergedPerms);
+  })();
+
+  const noOpToggle = useCallback((_code: string, _oper: OperCode, _state: PermState): void => {
+    void _code;
+    void _oper;
+    void _state;
+    // 읽기 전용 — 토글 없음
+  }, []);
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      {/* 사용자 검색/선택 */}
+      <div className="px-4 py-2.5 border-b border-stroke" style={{ flexShrink: 0 }}>
+        <label className="text-caption text-fg-disabled font-korean block mb-1.5">
+          사용자 선택
+        </label>
+        <div className="relative" ref={dropdownRef}>
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+              setShowDropdown(true);
+              if (selectedUser && e.target.value !== selectedUser.name) {
+                setSelectedUser(null);
+                setAssignedRoleSns([]);
+                setRolesDirty(false);
+              }
+            }}
+            onFocus={() => setShowDropdown(true)}
+            placeholder={loadingUsers ? '불러오는 중...' : '이름, 계정, 조직으로 검색...'}
+            disabled={loadingUsers}
+            className="w-full max-w-sm px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean disabled:opacity-50"
+          />
+          {showDropdown && filteredUsers.length > 0 && (
+            <div className="absolute left-0 top-full mt-1 w-full max-w-sm bg-bg-surface border border-stroke rounded-md shadow-xl z-20 overflow-auto max-h-52">
+              {filteredUsers.map((user) => (
+                <button
+                  key={user.id}
+                  onClick={() => handleSelectUser(user)}
+                  className="w-full px-3 py-2 text-left hover:bg-bg-surface-hover transition-colors flex items-center gap-2"
+                >
+                  <div className="min-w-0 flex-1">
+                    <div className="text-caption font-semibold text-fg font-korean truncate">
+                      {user.name}
+                      {user.rank && (
+                        <span className="ml-1 text-caption text-fg-disabled font-korean">
+                          {user.rank}
+                        </span>
+                      )}
+                    </div>
+                    <div className="text-caption text-fg-disabled font-mono truncate">
+                      {user.account}
+                    </div>
+                  </div>
+                  {user.orgName && (
+                    <span className="text-caption text-fg-disabled font-korean flex-shrink-0 truncate max-w-[100px]">
+                      {user.orgName}
+                    </span>
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+          {showDropdown && !loadingUsers && filteredUsers.length === 0 && searchQuery && (
+            <div className="absolute left-0 top-full mt-1 w-full max-w-sm bg-bg-surface border border-stroke rounded-md shadow-xl z-20 px-3 py-2 text-caption text-fg-disabled font-korean">
+              검색 결과 없음
+            </div>
+          )}
+        </div>
+      </div>
+
+      {selectedUser ? (
+        <>
+          {/* 역할 할당 섹션 */}
+          <div
+            className="px-4 py-2.5 border-b border-stroke bg-bg-surface"
+            style={{ flexShrink: 0 }}
+          >
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-caption font-semibold text-fg-sub font-korean">역할 할당</span>
+              <button
+                onClick={handleSaveRoles}
+                disabled={!rolesDirty || savingRoles}
+                className={`px-3 py-1.5 text-label-2 font-semibold rounded-md transition-all font-korean ${
+                  rolesDirty
+                    ? 'bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)]'
+                    : 'bg-bg-card text-fg-disabled cursor-not-allowed'
+                }`}
+              >
+                {savingRoles ? '저장 중...' : '역할 저장'}
+              </button>
+            </div>
+            <div className="flex flex-wrap gap-1.5">
+              {roles.map((role, idx) => {
+                const color = getRoleColor(role.code, idx);
+                const isChecked = assignedRoleSns.includes(role.sn);
+                return (
+                  <label
+                    key={role.sn}
+                    className={[
+                      'flex items-center gap-1 px-2 py-1 rounded-md border cursor-pointer transition-all font-korean text-label-2 select-none',
+                      isChecked ? '' : 'border-stroke text-fg-disabled hover:border-text-2',
+                    ].join(' ')}
+                    style={
+                      isChecked
+                        ? { borderColor: color, color, backgroundColor: `${color}18` }
+                        : undefined
+                    }
+                  >
+                    <input
+                      type="checkbox"
+                      checked={isChecked}
+                      onChange={() => handleToggleRole(role.sn)}
+                      className="w-3 h-3 accent-primary-cyan"
+                    />
+                    <span>{role.name}</span>
+                    <span className="text-caption font-mono opacity-60">{role.code}</span>
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* 유효 권한 매트릭스 (읽기 전용) */}
+          <div
+            className="px-4 py-1.5 border-b border-stroke bg-bg-surface text-caption text-fg-disabled font-korean"
+            style={{ flexShrink: 0 }}
+          >
+            <span className="font-semibold text-fg-sub">유효 권한 (읽기 전용)</span>
+            <span className="ml-2">— 할당된 역할의 권한 합산 결과</span>
+          </div>
+
+          <PermLegend />
+
+          {assignedRoleSns.length > 0 ? (
+            <div className="flex-1 overflow-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-stroke bg-bg-surface sticky top-0 z-10">
+                    <th className="px-4 py-3 text-left text-label-2 font-semibold text-fg-disabled font-korean min-w-[240px]">
+                      기능
+                    </th>
+                    {OPER_CODES.map((oper) => (
+                      <th key={oper} className="px-2 py-3 text-center w-16">
+                        <div className="text-label-2 font-semibold text-fg-sub">
+                          {OPER_LABELS[oper]}
+                        </div>
+                        <div className="text-caption text-fg-disabled font-korean">
+                          {OPER_FULL_LABELS[oper]}
+                        </div>
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {permTree.map((rootNode) => (
+                    <TreeRow
+                      key={rootNode.code}
+                      node={rootNode}
+                      stateMap={effectiveStateMap}
+                      expanded={expanded}
+                      onToggleExpand={handleToggleExpand}
+                      onTogglePerm={noOpToggle}
+                      readOnly={true}
+                    />
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ) : (
+            <div className="flex-1 flex items-center justify-center text-fg-disabled text-body-2 font-korean">
+              역할을 하나 이상 할당하면 유효 권한이 표시됩니다
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="flex-1 flex items-center justify-center text-fg-disabled text-body-2 font-korean">
+          사용자를 선택하세요
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/admin/components/contents/WizardModal.tsx

@@ -0,0 +1,112 @@
+import { useState, useCallback } from 'react';
+import type { WizardState } from '../DeidentifyPanel';
+import { INITIAL_WIZARD } from '../DeidentifyPanel';
+import { StepIndicator } from './StepIndicator';
+import { Step1 } from './Step1';
+import { Step2 } from './Step2';
+import { Step3 } from './Step3';
+import { Step4 } from './Step4';
+import { Step5 } from './Step5';
+
+interface WizardModalProps {
+  onClose: () => void;
+  onSubmit: (wizard: WizardState) => void;
+}
+
+export function WizardModal({ onClose, onSubmit }: WizardModalProps) {
+  const [wizard, setWizard] = useState<WizardState>(INITIAL_WIZARD);
+
+  const patch = useCallback((update: Partial<WizardState>) => {
+    setWizard((prev) => ({ ...prev, ...update }));
+  }, []);
+
+  const handleNext = () => {
+    if (wizard.step < 5) patch({ step: wizard.step + 1 });
+  };
+  const handlePrev = () => {
+    if (wizard.step > 1) patch({ step: wizard.step - 1 });
+  };
+  const handleSubmit = () => {
+    onSubmit(wizard);
+    onClose();
+  };
+
+  const canProceed = () => {
+    if (wizard.step === 1) return wizard.taskName.trim().length > 0;
+    if (wizard.step === 2) return wizard.fields.some((f) => f.selected);
+    if (wizard.step === 5) return wizard.confirmed;
+    return true;
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+      <div className="bg-bg-card border border-stroke rounded-lg shadow-2xl w-full max-w-4xl mx-4 flex flex-col max-h-[90vh]">
+        {/* 모달 헤더 */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-stroke shrink-0">
+          <h3 className="text-body-2 font-semibold text-t1">새 비식별화 작업</h3>
+          <button
+            onClick={onClose}
+            className="p-1 rounded text-t3 hover:text-t1 hover:bg-bg-elevated transition-colors"
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+
+        {/* 단계 표시기 */}
+        <StepIndicator current={wizard.step} />
+
+        {/* 단계 내용 */}
+        <div className="flex-1 overflow-auto px-6 py-5">
+          {wizard.step === 1 && <Step1 wizard={wizard} onChange={patch} />}
+          {wizard.step === 2 && <Step2 wizard={wizard} onChange={patch} />}
+          {wizard.step === 3 && <Step3 wizard={wizard} onChange={patch} />}
+          {wizard.step === 4 && <Step4 wizard={wizard} onChange={patch} />}
+          {wizard.step === 5 && <Step5 wizard={wizard} onChange={patch} />}
+        </div>
+
+        {/* 푸터 버튼 */}
+        <div className="flex items-center justify-between px-6 py-4 border-t border-stroke shrink-0">
+          <button
+            onClick={handlePrev}
+            disabled={wizard.step === 1}
+            className="px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          >
+            이전
+          </button>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={onClose}
+              className="px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors"
+            >
+              취소
+            </button>
+            {wizard.step < 5 ? (
+              <button
+                onClick={handleNext}
+                disabled={!canProceed()}
+                className="px-3 py-1.5 text-caption rounded bg-color-accent hover:bg-color-accent-muted text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+              >
+                다음
+              </button>
+            ) : (
+              <button
+                onClick={handleSubmit}
+                disabled={!canProceed()}
+                className="px-3 py-1.5 text-caption rounded bg-color-accent hover:bg-color-accent-muted text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+              >
+                처리 시작
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}