gc/kcg-monitoring
7
0
포크 0
코드 이슈 풀 리퀘스트 1 Actions 위키 활동

feat(korea): 작전가이드 창 드래그 이동 가능 + 크기 조절

소스 검색
This commit is contained in:
Nan Kyung Lee 2026-03-24 15:37:23 +09:00
부모 e4b6b1502b
커밋 4edb8236f3
1개의 변경된 파일과 23개의 추가작업 그리고 5개의 파일을 삭제
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/korea/OpsGuideModal.tsx
파일 보기

@ -1,4 +1,4 @@
import { useState, useMemo } from 'react';
import { useState, useMemo, useRef, useCallback } from 'react';
import type { Ship } from '../../types';
import { COAST_GUARD_FACILITIES, CG_TYPE_LABEL } from '../../services/coastGuard';
import type { CoastGuardFacility } from '../../services/coastGuard';
@ -32,6 +32,23 @@ const RISK_ICON = { CRITICAL: '🔴', HIGH: '🟡', MEDIUM: '🔵' };
export function OpsGuideModal({ ships, onClose, onFlyTo }: Props) {
const [selectedKCG, setSelectedKCG] = useState<CoastGuardFacility | null>(null);
const [searchRadius, setSearchRadius] = useState(30); // NM
const [pos, setPos] = useState({ x: 60, y: 60 });
const dragRef = useRef<{ startX: number; startY: number; origX: number; origY: number } | null>(null);
const onDragStart = useCallback((e: React.MouseEvent) => {
e.preventDefault();
dragRef.current = { startX: e.clientX, startY: e.clientY, origX: pos.x, origY: pos.y };
const onMove = (ev: MouseEvent) => {
if (!dragRef.current) return;
setPos({
x: dragRef.current.origX + (ev.clientX - dragRef.current.startX),
y: dragRef.current.origY + (ev.clientY - dragRef.current.startY),
});
};
const onUp = () => { dragRef.current = null; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
window.addEventListener('mousemove', onMove);
window.addEventListener('mouseup', onUp);
}, [pos]);
// 해경서/지방청만 (파출소 제외)
const kcgBases = useMemo(() =>
@ -108,11 +125,12 @@ export function OpsGuideModal({ ships, onClose, onFlyTo }: Props) {
const highCount = suspects.filter(s => s.riskLevel === 'HIGH').length;
return (
<div style={{ position: 'fixed', inset: 0, zIndex: 9999, background: 'rgba(0,0,0,0.7)', display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={onClose}>
<div style={{ width: '92vw', maxWidth: 800, maxHeight: '90vh', overflow: 'hidden', background: '#0a0f1a', borderRadius: 8, border: '1px solid #1e293b', display: 'flex', flexDirection: 'column' }} onClick={e => e.stopPropagation()}>
<div style={{ position: 'fixed', left: pos.x, top: pos.y, zIndex: 9999, width: 720, maxHeight: '80vh', overflow: 'hidden', background: '#0a0f1a', borderRadius: 8, border: '1px solid #1e293b', display: 'flex', flexDirection: 'column', boxShadow: '0 8px 32px rgba(0,0,0,0.6)', resize: 'both' }}>
<div>
{/* Header */}
<div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 16px', borderBottom: '1px solid #1e293b', background: 'rgba(30,58,95,0.5)', flexShrink: 0 }}>
{/* Header — drag handle */}
<div onMouseDown={onDragStart} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 16px', borderBottom: '1px solid #1e293b', background: 'rgba(30,58,95,0.5)', flexShrink: 0, cursor: 'grab', userSelect: 'none' }}>
<span style={{ fontSize: 10, color: '#475569', cursor: 'grab', letterSpacing: 2 }}>⠿</span>
<span style={{ fontSize: 14 }}>⚓</span>
<span style={{ fontSize: 14, fontWeight: 700, color: '#e2e8f0' }}>경비함정 작전 가이드</span>
<span style={{ fontSize: 9, color: '#64748b' }}>해경 기지 기준 주변 불법어선·어구 탐지</span>