htlee
85cb6b40a2
- MonitoringDashboard: 표준 PageHeader - MapControl: demo 배지 - RiskMap: 수집 중 배지 + secondary Button 2개 액션 - Dashboard: PageContainer 래핑 (커스텀 DEFCON 헤더는 유지) - LiveMapView: PageContainer fullBleed + flex 레이아웃 유지 - VesselDetail: PageContainer fullBleed + -m-4 해킹 제거 - TransferDetection: PageHeader 적용 Phase B 전체 완료. 실제 프론트엔드의 모든 주요 페이지가 쇼케이스 기준 공통 컴포넌트(PageContainer/PageHeader/Button/Select/Badge)를 사용한다. 카탈로그/variant 변경 시 쇼케이스와 실 페이지 동시 반영됨. 최종 통계: - 7개 batch에서 총 30+ 파일 마이그레이션 - PageContainer 도입률: ~100% (SPA 메인 라우트 기준) - PageHeader 도입률: ~95% - 신규 Button 컴포넌트 도입: admin/enforcement/parent-inference 등 주요 액션 빌드 검증: - tsc ✅, eslint ✅ (경고만), vite build ✅
42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
import { Card, CardContent } from '@shared/components/ui/card';
|
|
import { PageContainer, PageHeader } from '@shared/components/layout';
|
|
import { RefreshCw } from 'lucide-react';
|
|
import { RealTransshipSuspects } from '@features/detection/RealVesselAnalysis';
|
|
|
|
export function TransferDetection() {
|
|
return (
|
|
<PageContainer>
|
|
<PageHeader
|
|
icon={RefreshCw}
|
|
iconColor="text-cyan-400"
|
|
title="환적·접촉 탐지"
|
|
description="선박 간 근접 접촉 및 환적 의심 행위 분석"
|
|
/>
|
|
|
|
{/* prediction 분석 결과 기반 실시간 환적 의심 선박 */}
|
|
<RealTransshipSuspects />
|
|
|
|
{/* 탐지 조건 */}
|
|
<Card className="bg-surface-overlay border-slate-700/40">
|
|
<CardContent className="p-5">
|
|
<div className="text-xs text-muted-foreground mb-3">탐지 조건</div>
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div className="bg-surface-raised rounded-lg p-4">
|
|
<div className="text-[11px] text-hint mb-1">거리</div>
|
|
<div className="text-xl font-bold text-heading">≤ 100m</div>
|
|
</div>
|
|
<div className="bg-surface-raised rounded-lg p-4">
|
|
<div className="text-[11px] text-hint mb-1">시간</div>
|
|
<div className="text-xl font-bold text-heading">≥ 30분</div>
|
|
</div>
|
|
<div className="bg-surface-raised rounded-lg p-4">
|
|
<div className="text-[11px] text-hint mb-1">속도</div>
|
|
<div className="text-xl font-bold text-heading">≤ 3kn</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</PageContainer>
|
|
);
|
|
}
|