htlee
c0ce01eaf6
KCG AI 기반 불법조업 탐지·차단 플랫폼 프론트엔드. React 19 + TypeScript 5.9 + Vite 8 + MapLibre + deck.gl + Zustand + Tailwind CSS. SFR 20개 전체 UI 구현 완료, 백엔드 연동 대기. - npm + Nexus 프록시 레지스트리 설정 - 팀 워크플로우 v1.6.1 부트스트랩 파일 배치 - .githooks (commit-msg, post-checkout) - package.json name: kcg-ai-monitoring v0.1.0 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
50 lines
4.2 KiB
TypeScript
50 lines
4.2 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import { Card, CardContent } from '@shared/components/ui/card';
|
|
import { Badge } from '@shared/components/ui/badge';
|
|
import { DataTable, type DataColumn } from '@shared/components/common/DataTable';
|
|
import { Globe, Shield, Clock, BarChart3, ExternalLink, Lock, Unlock } from 'lucide-react';
|
|
|
|
/* SFR-14: 외부 서비스(예보·경보) 제공 결과 연계 */
|
|
|
|
interface Service { id: string; name: string; target: string; type: string; format: string; cycle: string; privacy: string; status: string; calls: string; [key: string]: unknown; }
|
|
const DATA: Service[] = [
|
|
{ id: 'EXT-01', name: '위험도 지도 제공', target: '해수부', type: 'API', format: 'JSON', cycle: '1시간', privacy: '비식별', status: '운영', calls: '12,450' },
|
|
{ id: 'EXT-02', name: '의심 선박 목록', target: '해수부', type: 'API', format: 'JSON', cycle: '실시간', privacy: '비식별', status: '운영', calls: '8,320' },
|
|
{ id: 'EXT-03', name: '단속 통계', target: '수협', type: '파일', format: 'Excel', cycle: '일 1회', privacy: '익명화', status: '운영', calls: '365' },
|
|
{ id: 'EXT-04', name: '어구 현황', target: '해양조사원', type: 'API', format: 'JSON', cycle: '6시간', privacy: '공개', status: '테스트', calls: '540' },
|
|
{ id: 'EXT-05', name: '경보 이력', target: '기상청', type: 'API', format: 'XML', cycle: '실시간', privacy: '비공개', status: '계획', calls: '-' },
|
|
];
|
|
const cols: DataColumn<Service>[] = [
|
|
{ key: 'id', label: 'ID', width: '70px', render: v => <span className="text-hint font-mono text-[10px]">{v as string}</span> },
|
|
{ key: 'name', label: '서비스명', sortable: true, render: v => <span className="text-heading font-medium">{v as string}</span> },
|
|
{ key: 'target', label: '제공 대상', width: '80px', sortable: true },
|
|
{ key: 'type', label: '방식', width: '50px', align: 'center', render: v => <Badge className="bg-cyan-500/20 text-cyan-400 border-0 text-[9px]">{v as string}</Badge> },
|
|
{ key: 'format', label: '포맷', width: '60px', align: 'center' },
|
|
{ key: 'cycle', label: '갱신주기', width: '70px' },
|
|
{ key: 'privacy', label: '정보등급', width: '70px', align: 'center',
|
|
render: v => { const p = v as string; const c = p === '비공개' ? 'bg-red-500/20 text-red-400' : p === '비식별' ? 'bg-yellow-500/20 text-yellow-400' : p === '익명화' ? 'bg-blue-500/20 text-blue-400' : 'bg-green-500/20 text-green-400'; return <Badge className={`border-0 text-[9px] ${c}`}>{p}</Badge>; } },
|
|
{ key: 'status', label: '상태', width: '60px', align: 'center', sortable: true,
|
|
render: v => { const s = v as string; const c = s === '운영' ? 'bg-green-500/20 text-green-400' : s === '테스트' ? 'bg-blue-500/20 text-blue-400' : 'bg-muted text-muted-foreground'; return <Badge className={`border-0 text-[9px] ${c}`}>{s}</Badge>; } },
|
|
{ key: 'calls', label: '호출 수', width: '70px', align: 'right', render: v => <span className="text-heading font-bold">{v as string}</span> },
|
|
];
|
|
|
|
export function ExternalService() {
|
|
const { t } = useTranslation('statistics');
|
|
return (
|
|
<div className="p-5 space-y-4">
|
|
<div>
|
|
<h2 className="text-lg font-bold text-heading whitespace-nowrap flex items-center gap-2"><Globe className="w-5 h-5 text-green-400" />{t('externalService.title')}</h2>
|
|
<p className="text-[10px] text-hint mt-0.5">{t('externalService.desc')}</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{[{ l: '운영 서비스', v: DATA.filter(d => d.status === '운영').length, c: 'text-green-400' }, { l: '테스트', v: DATA.filter(d => d.status === '테스트').length, c: 'text-blue-400' }, { l: '총 호출', v: '21,675', c: 'text-heading' }].map(k => (
|
|
<div key={k.l} className="flex-1 flex items-center gap-2 px-3 py-2 rounded-xl border border-border bg-card">
|
|
<span className={`text-base font-bold ${k.c}`}>{k.v}</span><span className="text-[9px] text-hint">{k.l}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<DataTable data={DATA} columns={cols} pageSize={10} searchPlaceholder="서비스명, 대상기관 검색..." searchKeys={['name', 'target']} exportFilename="외부서비스연계" />
|
|
</div>
|
|
);
|
|
}
|