feat(frontend): 선박 유형 한글 카탈로그 + 중국 선박 분석 그리드 정합성

vessel_type 카탈로그
- shared/constants/vesselTypes.ts 신규 — TRAWL/PURSE/GILLNET/LONGLINE/
  TRAP/CARGO/UNKNOWN 7종 + getVesselTypeLabel / getVesselTypeIntent
  헬퍼. 기존 alertLevels 카탈로그 패턴 답습
- catalogRegistry 에 VESSEL_TYPES 등록 — design-system 쇼케이스에 자동
  노출

RealVesselAnalysis 필터 props 확장
- Props 에 mmsiPrefix / minRiskScore / size 추가 (all·spoofing mode)
- 선박 유형 컬럼을 한글 라벨로 렌더
- RealAllVessels 편의 export 를 mmsiPrefix='412' 로 고정 + 제목을
  '중국 선박 전체 분석 결과 (실시간)' 로 변경

효과
- Tab 1 상단 그리드가 중국 선박만 표시해 페이지 성격과 일치
- 선박 유형 '저인망/선망/유자망/연승/통발/운반선/미분류' 한글 표시
- 55점 HIGH 같은 중국 선박이 상단/하단 양쪽에 일관되게 노출

frontend/src/features/detection/ChinaFishing.tsx

@@ -9,6 +9,7 @@ import {
 } from 'lucide-react';
 import { formatDateTime } from '@shared/utils/dateFormat';
 import { ALERT_LEVELS, getAlertLevelLabel, type AlertLevel } from '@shared/constants/alertLevels';
+import { getVesselTypeLabel } from '@shared/constants/vesselTypes';
 import { getVesselRingMeta } from '@shared/constants/vesselAnalysisStatuses';
 import { useSettingsStore } from '@stores/settingsStore';
 import { useTranslation } from 'react-i18next';
@@ -52,18 +53,29 @@ function deriveVesselStatus(score: number): VesselStatus {
   return '양호';
 }
 
-function mapToVesselItem(item: VesselAnalysisItem, idx: number): VesselItem {
+function mapToVesselItem(
+  item: VesselAnalysisItem,
+  idx: number,
+  t: (k: string, opts?: { defaultValue?: string }) => string,
+  lang: 'ko' | 'en',
+): VesselItem {
   const score = item.algorithms.riskScore.score;
   const vt = item.classification.vesselType;
   const hasType = vt && vt !== 'UNKNOWN' && vt !== '';
+  // 이름: fleet_vessels 매핑으로 vessel_type 이 채워진 경우 한글 유형 라벨, 아니면 '중국어선'
+  const name = hasType ? getVesselTypeLabel(vt, t, lang) : '중국어선';
+  // 타입 뱃지: fishingPct 기반 Fishing / 그 외는 vessel_type 라벨
+  const type = item.classification.fishingPct > 0.5
+    ? 'Fishing'
+    : hasType ? getVesselTypeLabel(vt, t, lang) : getVesselTypeLabel('UNKNOWN', t, lang);
   return {
     id: String(idx + 1),
     mmsi: item.mmsi,
     callSign: '-',
     channel: '',
     source: 'AIS',
-    name: hasType ? vt : '중국어선',
+    name,
-    type: item.classification.fishingPct > 0.5 ? 'Fishing' : hasType ? 'Cargo' : '미분류',
+    type,
     country: 'China',
     status: deriveVesselStatus(score),
     riskPct: score,
@@ -289,8 +301,8 @@ export function ChinaFishing() {
 
   // 특이운항 선박 리스트 (서버에서 이미 riskScore >= 40 로 필터링된 상위 20척)
   const vesselList: VesselItem[] = useMemo(
-    () => topVessels.map((item, idx) => mapToVesselItem(item, idx)),
+    () => topVessels.map((item, idx) => mapToVesselItem(item, idx, tcCommon, lang)),
-    [topVessels],
+    [topVessels, tcCommon, lang],
   );
 
   // 위험도별 분포 (도넛 차트용) — apiStats 기반

frontend/src/features/detection/RealVesselAnalysis.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useState, useCallback, useMemo } from 'react';
 import { Loader2, RefreshCw, EyeOff, AlertTriangle, Radar } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { Card, CardContent } from '@shared/components/ui/card';
 import { Badge } from '@shared/components/ui/badge';
 import { getAlertLevelIntent } from '@shared/constants/alertLevels';
+import { getVesselTypeLabel } from '@shared/constants/vesselTypes';
 import type { VesselAnalysisItem } from '@/services/vesselAnalysisApi';
 import {
   getAnalysisVessels,
@@ -21,6 +23,12 @@ interface Props {
   mode: 'dark' | 'spoofing' | 'transship' | 'all';
   title: string;
   icon?: React.ReactNode;
+  /** 'all' / 'spoofing' mode 에서 MMSI prefix 필터 (예: '412' — 중국 선박 한정) */
+  mmsiPrefix?: string;
+  /** 'all' / 'spoofing' mode 에서 서버 측 최소 riskScore 필터 */
+  minRiskScore?: number;
+  /** 서버 조회 건수 (dark/transship 기본 200) */
+  size?: number;
 }
 
 const ZONE_LABELS: Record<string, string> = {
@@ -40,7 +48,9 @@ const ENDPOINT_LABEL: Record<Props['mode'], string> = {
   spoofing: 'GET /api/analysis/vessels (spoofing_score ≥ 0.3)',
 };
 
-export function RealVesselAnalysis({ mode, title, icon }: Props) {
+export function RealVesselAnalysis({ mode, title, icon, mmsiPrefix, minRiskScore, size = 200 }: Props) {
+  const { t, i18n } = useTranslation('common');
+  const lang = (i18n.language as 'ko' | 'en') || 'ko';
   const [items, setItems] = useState<VesselAnalysisItem[]>([]);
   const [available, setAvailable] = useState(true);
   const [loading, setLoading] = useState(false);
@@ -51,10 +61,10 @@ export function RealVesselAnalysis({ mode, title, icon }: Props) {
     setLoading(true); setError('');
     try {
       const page = mode === 'dark'
-        ? await getDarkVessels({ hours: 1, size: 200 })
+        ? await getDarkVessels({ hours: 1, size })
         : mode === 'transship'
-          ? await getTransshipSuspects({ hours: 1, size: 200 })
+          ? await getTransshipSuspects({ hours: 1, size })
-          : await getAnalysisVessels({ hours: 1, size: 200 });
+          : await getAnalysisVessels({ hours: 1, size, mmsiPrefix, minRiskScore });
       setItems(page.content.map(toVesselItem));
       setAvailable(true);
     } catch (e: unknown) {
@@ -63,7 +73,7 @@ export function RealVesselAnalysis({ mode, title, icon }: Props) {
     } finally {
       setLoading(false);
     }
-  }, [mode]);
+  }, [mode, mmsiPrefix, minRiskScore, size]);
 
   useEffect(() => { load(); }, [load]);
 
@@ -160,8 +170,10 @@ export function RealVesselAnalysis({ mode, title, icon }: Props) {
                   <tr key={v.mmsi} className="border-t border-border hover:bg-surface-overlay/50">
                     <td className="px-2 py-1.5 text-cyan-400 font-mono">{v.mmsi}</td>
                     <td className="px-2 py-1.5 text-heading font-medium">
-                      {v.classification.vesselType}
+                      {getVesselTypeLabel(v.classification.vesselType, t, lang)}
-                      <span className="text-hint ml-1 text-[9px]">({(v.classification.confidence * 100).toFixed(0)}%)</span>
+                      {v.classification.confidence > 0 && (
+                        <span className="text-hint ml-1 text-[9px]">({(v.classification.confidence * 100).toFixed(0)}%)</span>
+                      )}
                     </td>
                     <td className="px-2 py-1.5 text-center">
                       <Badge intent={getAlertLevelIntent(v.algorithms.riskScore.level)} size="sm">
@@ -221,4 +233,12 @@ function StatBox({ label, value, color }: { label: string; value: number | undef
 export const RealDarkVessels = () => <RealVesselAnalysis mode="dark" title="Dark Vessel (실시간)" icon={<EyeOff className="w-4 h-4 text-purple-400" />} />;
 export const RealSpoofingVessels = () => <RealVesselAnalysis mode="spoofing" title="GPS 스푸핑 의심 (실시간)" icon={<AlertTriangle className="w-4 h-4 text-orange-400" />} />;
 export const RealTransshipSuspects = () => <RealVesselAnalysis mode="transship" title="전재 의심 (실시간)" icon={<Radar className="w-4 h-4 text-red-400" />} />;
-export const RealAllVessels = () => <RealVesselAnalysis mode="all" title="전체 분석 결과 (실시간)" icon={<Radar className="w-4 h-4 text-blue-400" />} />;
+// 중국 선박 감시 페이지 전용 — MMSI prefix 412 고정
+export const RealAllVessels = () => (
+  <RealVesselAnalysis
+    mode="all"
+    title="중국 선박 전체 분석 결과 (실시간)"
+    icon={<Radar className="w-4 h-4 text-blue-400" />}
+    mmsiPrefix="412"
+  />
+);

frontend/src/shared/constants/catalogRegistry.ts

@@ -43,6 +43,7 @@ import { MLOPS_JOB_STATUSES } from './mlopsJobStatuses';
 import { THREAT_LEVELS, AGENT_PERM_TYPES, AGENT_EXEC_RESULTS } from './aiSecurityStatuses';
 import { ZONE_CODES } from './zoneCodes';
 import { GEAR_VIOLATION_CODES } from './gearViolationCodes';
+import { VESSEL_TYPES } from './vesselTypes';
 
 /**
  * 카탈로그 공통 메타 — 쇼케이스 렌더와 UI 일관성을 위한 최소 스키마
@@ -91,6 +92,15 @@ export const CATALOG_REGISTRY: CatalogEntry[] = [
     source: 'backend ViolationType enum',
     items: VIOLATION_TYPES,
   },
+  {
+    id: 'vessel-type',
+    showcaseId: 'TRK-CAT-vessel-type',
+    titleKo: '선박 유형',
+    titleEn: 'Vessel Type',
+    description: 'TRAWL / PURSE / GILLNET / LONGLINE / TRAP / CARGO / UNKNOWN — prediction 분류 + fleet_vessels 매핑',
+    source: 'prediction AnalysisResult.vessel_type',
+    items: VESSEL_TYPES,
+  },
   {
     id: 'event-status',
     showcaseId: 'TRK-CAT-event-status',

frontend/src/shared/constants/vesselTypes.ts

@@ -0,0 +1,53 @@
+/**
+ * 선박 유형 공통 카탈로그
+ *
+ * SSOT: prediction `AnalysisResult.vessel_type` (TRAWL / PURSE / LONGLINE / TRAP / GILLNET / CARGO / UNKNOWN).
+ * prediction 은 분류 파이프라인 결과 + fleet_vessels 등록 fishery_code → vessel_type 매핑으로 값을 채운다.
+ *
+ * 사용처: RealVesselAnalysis '선박 유형' 컬럼, ChinaFishing 특이운항 리스트,
+ *         VesselDetail / EventList 등 선박 유형 배지.
+ */
+
+import type { BadgeIntent } from '@lib/theme/variants';
+
+export type VesselTypeCode =
+  | 'TRAWL'
+  | 'PURSE'
+  | 'LONGLINE'
+  | 'TRAP'
+  | 'GILLNET'
+  | 'CARGO'
+  | 'UNKNOWN';
+
+export interface VesselTypeMeta {
+  code: VesselTypeCode;
+  i18nKey: string;
+  fallback: { ko: string; en: string };
+  intent: BadgeIntent;
+}
+
+export const VESSEL_TYPES: Record<VesselTypeCode, VesselTypeMeta> = {
+  TRAWL:    { code: 'TRAWL',    i18nKey: 'vesselType.trawl',    fallback: { ko: '저인망', en: 'Trawl' },        intent: 'warning' },
+  PURSE:    { code: 'PURSE',    i18nKey: 'vesselType.purse',    fallback: { ko: '선망',   en: 'Purse Seine' },  intent: 'warning' },
+  GILLNET:  { code: 'GILLNET',  i18nKey: 'vesselType.gillnet',  fallback: { ko: '유자망', en: 'Gillnet' },      intent: 'warning' },
+  LONGLINE: { code: 'LONGLINE', i18nKey: 'vesselType.longline', fallback: { ko: '연승',   en: 'Longline' },     intent: 'info' },
+  TRAP:     { code: 'TRAP',     i18nKey: 'vesselType.trap',     fallback: { ko: '통발',   en: 'Trap' },         intent: 'info' },
+  CARGO:    { code: 'CARGO',    i18nKey: 'vesselType.cargo',    fallback: { ko: '운반선', en: 'Cargo' },        intent: 'muted' },
+  UNKNOWN:  { code: 'UNKNOWN',  i18nKey: 'vesselType.unknown',  fallback: { ko: '미분류', en: 'Unknown' },      intent: 'muted' },
+};
+
+export function getVesselTypeLabel(
+  code: string | null | undefined,
+  t: (k: string, opts?: { defaultValue?: string }) => string,
+  lang: 'ko' | 'en' = 'ko',
+): string {
+  if (!code) return t(VESSEL_TYPES.UNKNOWN.i18nKey, { defaultValue: VESSEL_TYPES.UNKNOWN.fallback[lang] });
+  const meta = VESSEL_TYPES[code as VesselTypeCode];
+  if (!meta) return code;
+  return t(meta.i18nKey, { defaultValue: meta.fallback[lang] });
+}
+
+export function getVesselTypeIntent(code: string | null | undefined): BadgeIntent {
+  if (!code) return VESSEL_TYPES.UNKNOWN.intent;
+  return VESSEL_TYPES[code as VesselTypeCode]?.intent ?? 'muted';
+}