From a1c521792d1f3af801818d269b2c794de9b1dddc Mon Sep 17 00:00:00 2001
From: htlee <htlee@gcsc.co.kr>
Date: Wed, 8 Apr 2026 11:51:32 +0900
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20detection=20=EA=B3=84?=
 =?UTF-8?q?=EC=97=B4=20PageContainer/PageHeader=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DarkVesselDetection: icon=EyeOff color=red
- GearDetection: icon=Anchor color=orange
- ChinaFishing: PageContainer size=sm (tab 기반 멀티뷰 루트)

GearIdentification/RealVesselAnalysis/RealGearGroups는 ChinaFishing의 서브
컴포넌트라 독립 마이그레이션 불필요.
---
 .../src/features/detection/ChinaFishing.tsx     |  5 +++--
 .../features/detection/DarkVesselDetection.tsx  | 17 +++++++++--------
 .../src/features/detection/GearDetection.tsx    | 15 +++++++++------
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/frontend/src/features/detection/ChinaFishing.tsx b/frontend/src/features/detection/ChinaFishing.tsx
index 60a7881..fcd62dd 100644
--- a/frontend/src/features/detection/ChinaFishing.tsx
+++ b/frontend/src/features/detection/ChinaFishing.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { Card, CardContent } from '@shared/components/ui/card';
 import { Badge } from '@shared/components/ui/badge';
+import { PageContainer } from '@shared/components/layout';
 import {
   Search, Ship, Clock, ChevronRight, ChevronLeft, Cloud,
   Eye, AlertTriangle, Radio, RotateCcw,
@@ -287,7 +288,7 @@ export function ChinaFishing() {
   ];
 
   return (
-    <div className="space-y-3">
+    <PageContainer size="sm">
       {/* ── 모드 탭 (AI 대시보드 / 환적 탐지) ── */}
       <div className="flex items-center gap-1 bg-surface-raised rounded-lg p-1 border border-slate-700/30 w-fit">
         {modeTabs.map((tab) => (
@@ -677,6 +678,6 @@ export function ChinaFishing() {
       </div>
 
       </>}
-    </div>
+    </PageContainer>
   );
 }
diff --git a/frontend/src/features/detection/DarkVesselDetection.tsx b/frontend/src/features/detection/DarkVesselDetection.tsx
index f6e168d..445cc39 100644
--- a/frontend/src/features/detection/DarkVesselDetection.tsx
+++ b/frontend/src/features/detection/DarkVesselDetection.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState, useMemo, useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card, CardContent } from '@shared/components/ui/card';
 import { Badge } from '@shared/components/ui/badge';
+import { PageContainer, PageHeader } from '@shared/components/layout';
 import { DataTable, type DataColumn } from '@shared/components/common/DataTable';
 import { EyeOff, AlertTriangle, Radio, Tag, Loader2 } from 'lucide-react';
 import { BaseMap, STATIC_LAYERS, createMarkerLayer, createRadiusLayer, useMapLayers, type MapHandle } from '@lib/map';
@@ -147,13 +148,13 @@ export function DarkVesselDetection() {
   useMapLayers(mapRef, buildLayers, [DATA]);
 
   return (
-    <div className="p-5 space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-lg font-bold text-heading whitespace-nowrap flex items-center gap-2"><EyeOff className="w-5 h-5 text-red-400" />{t('darkVessel.title')}</h2>
-          <p className="text-[10px] text-hint mt-0.5">{t('darkVessel.desc')}</p>
-        </div>
-      </div>
+    <PageContainer>
+      <PageHeader
+        icon={EyeOff}
+        iconColor="text-red-400"
+        title={t('darkVessel.title')}
+        description={t('darkVessel.desc')}
+      />
 
       {!serviceAvailable && (
         <div className="flex items-center gap-2 px-4 py-3 rounded-lg border border-yellow-500/30 bg-yellow-500/5 text-yellow-400 text-xs">
@@ -216,6 +217,6 @@ export function DarkVesselDetection() {
           </div>
         </CardContent>
       </Card>
-    </div>
+    </PageContainer>
   );
 }
diff --git a/frontend/src/features/detection/GearDetection.tsx b/frontend/src/features/detection/GearDetection.tsx
index cd3f734..aad29cb 100644
--- a/frontend/src/features/detection/GearDetection.tsx
+++ b/frontend/src/features/detection/GearDetection.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState, useMemo, useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card, CardContent } from '@shared/components/ui/card';
 import { Badge } from '@shared/components/ui/badge';
+import { PageContainer, PageHeader } from '@shared/components/layout';
 import { DataTable, type DataColumn } from '@shared/components/common/DataTable';
 import { Anchor, AlertTriangle, Loader2 } from 'lucide-react';
 import { BaseMap, STATIC_LAYERS, createMarkerLayer, createRadiusLayer, useMapLayers, type MapHandle } from '@lib/map';
@@ -131,11 +132,13 @@ export function GearDetection() {
   useMapLayers(mapRef, buildLayers, [DATA]);
 
   return (
-    <div className="p-5 space-y-4">
-      <div>
-        <h2 className="text-lg font-bold text-heading whitespace-nowrap flex items-center gap-2"><Anchor className="w-5 h-5 text-orange-400" />{t('gearDetection.title')}</h2>
-        <p className="text-[10px] text-hint mt-0.5">{t('gearDetection.desc')}</p>
-      </div>
+    <PageContainer>
+      <PageHeader
+        icon={Anchor}
+        iconColor="text-orange-400"
+        title={t('gearDetection.title')}
+        description={t('gearDetection.desc')}
+      />
 
       {!serviceAvailable && (
         <div className="flex items-center gap-2 px-4 py-3 rounded-lg border border-yellow-500/30 bg-yellow-500/5 text-yellow-400 text-xs">
@@ -193,6 +196,6 @@ export function GearDetection() {
           </div>
         </CardContent>
       </Card>
-    </div>
+    </PageContainer>
   );
 }