kcg-monitoring/frontend/src/components/icons/FishingNetIcon.tsx
Nan Kyung Lee 7174dfd629 feat: 중국어선 조업분석, 어구/어망 분류, 이란 시설, 레이어 재구성
- 어선 분류 개선: AIS Ship Type 30 + category fallback + 선박명 패턴
- 어구/어망 카테고리 신설: 선박명_숫자_ / 선박명% 패턴으로 분류
- 중국어선 조업분석: GC-KCG-2026-001 + CSSA 보고서 기반 (안강망 추가)
- 중국어선 선단 탐지: 본선-부속선 쌍, 운반선 환적, 선망 선단
- 어구/어망 → 모선 연결선 시각화
- 어구 SVG 아이콘 5종 (트롤/자망/안강망/선망/기본)
- 이란 주변국 시설 레이어 (MEFacilityLayer 35개소)
- 사우스파르스 가스전 피격 + 카타르 라스라판 보복 공격 반영
- 한국 해군부대 10개소 추가
- 레이어 재구성: 선박(최상위) → 항공망(항공기+위성) → 해양안전 → 국가기관망
- 어선 국적별 하위 분류 (선박 분류 내 어선 펼치기)
- 오른쪽 패널 접기/펼치기 (한국현황, 중국현황, 조업분석, OSINT)
- 항공망 기본 접힘 처리
- 센서차트 기본 숨김

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-19 16:46:27 +09:00

122 lines
6.2 KiB
TypeScript

// ═══ 어구/어망 아이콘 — 그물망 형태 SVG ═══
interface Props {
color?: string;
size?: number;
}
/** 기본 어망 아이콘 (반달형 그물 + 부표) */
export function FishingNetIcon({ color = '#f97316', size = 16 }: Props) {
return (
<svg width={size} height={size} viewBox="0 0 24 20" fill="none">
{/* 그물망 곡선 (반달형) */}
<path d="M2 4 Q6 18 12 18 Q18 18 22 4" stroke={color} strokeWidth="1.2" fill="none" />
{/* 가로 그물선 */}
<path d="M4 8 Q8 14 12 14 Q16 14 20 8" stroke={color} strokeWidth="0.6" opacity="0.7" />
<path d="M6 12 Q9 16 12 16 Q15 16 18 12" stroke={color} strokeWidth="0.6" opacity="0.5" />
{/* 세로 그물선 */}
<line x1="7" y1="5.5" x2="8" y2="15" stroke={color} strokeWidth="0.5" opacity="0.6" />
<line x1="12" y1="4" x2="12" y2="18" stroke={color} strokeWidth="0.5" opacity="0.6" />
<line x1="17" y1="5.5" x2="16" y2="15" stroke={color} strokeWidth="0.5" opacity="0.6" />
{/* 대각선 그물 */}
<line x1="4" y1="6" x2="10" y2="16" stroke={color} strokeWidth="0.4" opacity="0.4" />
<line x1="20" y1="6" x2="14" y2="16" stroke={color} strokeWidth="0.4" opacity="0.4" />
<line x1="6" y1="10" x2="12" y2="18" stroke={color} strokeWidth="0.4" opacity="0.4" />
<line x1="18" y1="10" x2="12" y2="18" stroke={color} strokeWidth="0.4" opacity="0.4" />
{/* 부표 (상단 구슬) */}
<circle cx="2" cy="4" r="1.5" fill={color} />
<circle cx="7" cy="2" r="1.5" fill={color} />
<circle cx="12" cy="1.5" r="1.5" fill={color} />
<circle cx="17" cy="2" r="1.5" fill={color} />
<circle cx="22" cy="4" r="1.5" fill={color} />
</svg>
);
}
/** 트롤(저인망) 아이콘 — 자루형 그물 */
export function TrawlNetIcon({ color = '#ef4444', size = 16 }: Props) {
return (
<svg width={size} height={size} viewBox="0 0 24 20" fill="none">
{/* 자루형 망 */}
<path d="M1 2 L8 10 L8 18 L16 18 L16 10 L23 2" stroke={color} strokeWidth="1.2" fill="none" />
{/* 그물 패턴 */}
<line x1="4" y1="5" x2="10" y2="14" stroke={color} strokeWidth="0.5" opacity="0.5" />
<line x1="20" y1="5" x2="14" y2="14" stroke={color} strokeWidth="0.5" opacity="0.5" />
<line x1="8" y1="12" x2="16" y2="12" stroke={color} strokeWidth="0.5" opacity="0.5" />
<line x1="8" y1="15" x2="16" y2="15" stroke={color} strokeWidth="0.5" opacity="0.5" />
<line x1="12" y1="6" x2="12" y2="18" stroke={color} strokeWidth="0.5" opacity="0.5" />
{/* 전개판 */}
<rect x="0" y="1" width="3" height="2" rx="0.5" fill={color} opacity="0.8" />
<rect x="21" y="1" width="3" height="2" rx="0.5" fill={color} opacity="0.8" />
</svg>
);
}
/** 자망(유자망) 아이콘 — 수직 그물벽 */
export function GillnetIcon({ color = '#f97316', size = 16 }: Props) {
return (
<svg width={size} height={size} viewBox="0 0 24 20" fill="none">
{/* 수직 그물 */}
<line x1="2" y1="3" x2="2" y2="18" stroke={color} strokeWidth="0.8" />
<line x1="6" y1="3" x2="6" y2="18" stroke={color} strokeWidth="0.8" />
<line x1="10" y1="3" x2="10" y2="18" stroke={color} strokeWidth="0.8" />
<line x1="14" y1="3" x2="14" y2="18" stroke={color} strokeWidth="0.8" />
<line x1="18" y1="3" x2="18" y2="18" stroke={color} strokeWidth="0.8" />
<line x1="22" y1="3" x2="22" y2="18" stroke={color} strokeWidth="0.8" />
{/* 가로 연결 */}
<line x1="2" y1="6" x2="22" y2="6" stroke={color} strokeWidth="0.5" opacity="0.5" />
<line x1="2" y1="10" x2="22" y2="10" stroke={color} strokeWidth="0.5" opacity="0.5" />
<line x1="2" y1="14" x2="22" y2="14" stroke={color} strokeWidth="0.5" opacity="0.5" />
{/* 상단 부표 */}
<circle cx="2" cy="2" r="1.3" fill={color} />
<circle cx="8" cy="2" r="1.3" fill={color} />
<circle cx="14" cy="2" r="1.3" fill={color} />
<circle cx="20" cy="2" r="1.3" fill={color} />
{/* 하단 침자 */}
<rect x="1" y="18" width="2" height="1.5" fill={color} opacity="0.6" />
<rect x="7" y="18" width="2" height="1.5" fill={color} opacity="0.6" />
<rect x="13" y="18" width="2" height="1.5" fill={color} opacity="0.6" />
<rect x="19" y="18" width="2" height="1.5" fill={color} opacity="0.6" />
</svg>
);
}
/** 안강망(Stow net) 아이콘 — 조류 방향 자루형 */
export function StowNetIcon({ color = '#eab308', size = 16 }: Props) {
return (
<svg width={size} height={size} viewBox="0 0 24 20" fill="none">
{/* 프레임 */}
<rect x="2" y="2" width="8" height="16" rx="1" stroke={color} strokeWidth="1" fill="none" />
{/* 자루 */}
<path d="M10 4 L20 8 L20 12 L10 16" stroke={color} strokeWidth="1" fill="none" />
{/* 그물 패턴 */}
<line x1="4" y1="2" x2="4" y2="18" stroke={color} strokeWidth="0.4" opacity="0.5" />
<line x1="7" y1="2" x2="7" y2="18" stroke={color} strokeWidth="0.4" opacity="0.5" />
<line x1="2" y1="7" x2="10" y2="7" stroke={color} strokeWidth="0.4" opacity="0.5" />
<line x1="2" y1="13" x2="10" y2="13" stroke={color} strokeWidth="0.4" opacity="0.5" />
{/* 조류 화살표 */}
<path d="M22 10 L18 8 M22 10 L18 12" stroke={color} strokeWidth="0.8" opacity="0.4" />
</svg>
);
}
/** 선망(위망) 아이콘 — 원형 포위 그물 */
export function PurseSeineIcon({ color = '#3b82f6', size = 16 }: Props) {
return (
<svg width={size} height={size} viewBox="0 0 24 20" fill="none">
{/* 원형 그물 */}
<ellipse cx="12" cy="10" rx="10" ry="8" stroke={color} strokeWidth="1" fill="none" />
{/* 그물 패턴 */}
<ellipse cx="12" cy="10" rx="6" ry="5" stroke={color} strokeWidth="0.5" opacity="0.4" />
<line x1="12" y1="2" x2="12" y2="18" stroke={color} strokeWidth="0.4" opacity="0.4" />
<line x1="2" y1="10" x2="22" y2="10" stroke={color} strokeWidth="0.4" opacity="0.4" />
{/* 죔줄 */}
<path d="M4 16 Q12 20 20 16" stroke={color} strokeWidth="0.8" strokeDasharray="2 1" opacity="0.6" />
{/* 부표 */}
<circle cx="2" cy="10" r="1.3" fill={color} />
<circle cx="22" cy="10" r="1.3" fill={color} />
<circle cx="12" cy="2" r="1.3" fill={color} />
</svg>
);
}