From 364a34ce102782e64a76e019d690950a8036aceb Mon Sep 17 00:00:00 2001 From: htlee Date: Thu, 26 Mar 2026 10:30:58 +0900 Subject: [PATCH] =?UTF-8?q?refactor(debug):=20=EC=9E=90=EC=B2=B4=20?= =?UTF-8?q?=EC=99=84=EA=B2=B0=ED=98=95=20DevCoordDebug=EB=A1=9C=20?= =?UTF-8?q?=EC=A0=84=ED=99=98=20=E2=80=94=20=ED=94=84=EB=A1=9C=EB=8D=95?= =?UTF-8?q?=EC=85=98=20=EB=B2=88=EB=93=A4=20=EC=99=84=EC=A0=84=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20=EB=B3=B4=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - lazy + 동적 import로 DEV에서만 청크 로드 - mapRef 기반 이벤트 등록으로 KoreaMap 코드에 디버그 흔적 없음 - 이전 CoordDebugTool/useCoordDebug 삭제 --- frontend/src/components/korea/KoreaMap.tsx | 15 +++---- .../{CoordDebugTool.tsx => DevCoordDebug.tsx} | 44 ++++++++++++++++--- .../components/korea/debug/useCoordDebug.ts | 30 ------------- 3 files changed, 46 insertions(+), 43 deletions(-) rename frontend/src/components/korea/debug/{CoordDebugTool.tsx => DevCoordDebug.tsx} (58%) delete mode 100644 frontend/src/components/korea/debug/useCoordDebug.ts diff --git a/frontend/src/components/korea/KoreaMap.tsx b/frontend/src/components/korea/KoreaMap.tsx index e28d316..1df454a 100644 --- a/frontend/src/components/korea/KoreaMap.tsx +++ b/frontend/src/components/korea/KoreaMap.tsx @@ -201,9 +201,11 @@ const FILTER_I18N_KEY: Record = { cnFishing: 'filters.cnFishingMonitor', }; -// [DEBUG] 좌표 디버그 도구 — 프로덕션 빌드에서 tree-shaking 제거 -import { useCoordDebug } from './debug/useCoordDebug'; -import { CoordDebugOverlay } from './debug/CoordDebugTool'; +// [DEBUG] 좌표 디버그 — DEV에서만 동적 로드, 프로덕션 번들에서 완전 제거 +import { lazy, Suspense } from 'react'; +const DevCoordDebug = import.meta.env.DEV + ? lazy(() => import('./debug/DevCoordDebug')) + : null; export function KoreaMap({ ships, allShips, aircraft, satellites, layers, osintFeed, currentTime, koreaFilters, transshipSuspects, cableWatchSuspects, dokdoWatchSuspects, dokdoAlerts, vesselAnalysis, groupPolygons, hiddenShipCategories, hiddenNationalities, externalFlyTo, onExternalFlyToDone, opsRoute }: Props) { const { t } = useTranslation(); @@ -216,8 +218,6 @@ export function KoreaMap({ ships, allShips, aircraft, satellites, layers, osintF const [selectedFleetData, setSelectedFleetData] = useState(null); const { fontScale } = useFontScale(); const [zoomLevel, setZoomLevel] = useState(KOREA_MAP_ZOOM); - // [DEBUG] 좌표 디버그 — DEV에서만 활성화, 프로덕션 빌드에서 tree-shaking 제거 - const coordDebug = useCoordDebug(!import.meta.env.DEV); const zoomRef = useRef(KOREA_MAP_ZOOM); const handleZoom = useCallback((e: { viewState: { zoom: number } }) => { const z = Math.floor(e.viewState.zoom); @@ -612,12 +612,11 @@ export function KoreaMap({ ships, allShips, aircraft, satellites, layers, osintF style={{ width: '100%', height: '100%' }} mapStyle={MAP_STYLE} onZoom={handleZoom} - onClick={coordDebug ? coordDebug.handleMapClick : undefined} > - {/* [DEBUG] Ctrl+Click 좌표 표시 — 프로덕션에서 제거 */} - {coordDebug && } + {/* [DEBUG] Ctrl+Click 좌표 표시 — 프로덕션 번들에서 완전 제거 */} + {DevCoordDebug && } = 0 ? 'N' : 'S') : (dd >= 0 ? 'E' : 'W'); @@ -15,7 +23,33 @@ function toDMS(dd: number, axis: 'lat' | 'lng'): string { return `${d}°${String(m).padStart(2, '0')}′${String(s).padStart(5, '0')}″${dir}`; } -export function CoordDebugOverlay({ points, onRemove }: { points: CoordPoint[]; onRemove: (id: number) => void }) { +interface Props { + mapRef: React.RefObject; +} + +/** + * 자체 완결형 디버그 오버레이. + * mapRef를 받아서 직접 click 이벤트를 등록/해제. + * KoreaMap의 기존 코드에 어떤 것도 섞이지 않음. + */ +export default function DevCoordDebug({ mapRef }: Props) { + const [points, setPoints] = useState([]); + + useEffect(() => { + const map = mapRef.current?.getMap(); + if (!map) return; + + const handler = (e: maplibregl.MapMouseEvent) => { + if (e.originalEvent.ctrlKey || e.originalEvent.metaKey) { + e.originalEvent.preventDefault(); + setPoints(prev => [...prev, { lat: e.lngLat.lat, lng: e.lngLat.lng, id: Date.now() }]); + } + }; + + map.on('click', handler); + return () => { map.off('click', handler); }; + }, [mapRef]); + return ( <> {points.map(cp => ( @@ -30,7 +64,7 @@ export function CoordDebugOverlay({ points, onRemove }: { points: CoordPoint[]; onRemove(cp.id)} + onClose={() => setPoints(prev => prev.filter(p => p.id !== cp.id))} closeButton={true} closeOnClick={false} anchor="bottom" diff --git a/frontend/src/components/korea/debug/useCoordDebug.ts b/frontend/src/components/korea/debug/useCoordDebug.ts deleted file mode 100644 index c8fae87..0000000 --- a/frontend/src/components/korea/debug/useCoordDebug.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * [DEBUG] Ctrl+Click 좌표 디버그 훅 - * - disabled=true 시 noop (프로덕션 빌드에서 dead code 제거) - */ -import { useState, useCallback } from 'react'; -import type { MapLayerMouseEvent } from 'react-map-gl/maplibre'; - -export interface CoordPoint { - lat: number; - lng: number; - id: number; -} - -export function useCoordDebug(disabled = false) { - const [points, setPoints] = useState([]); - - const handleMapClick = useCallback((e: MapLayerMouseEvent) => { - if (disabled) return; - if (e.originalEvent.ctrlKey || e.originalEvent.metaKey) { - e.originalEvent.preventDefault(); - setPoints(prev => [...prev, { lat: e.lngLat.lat, lng: e.lngLat.lng, id: Date.now() }]); - } - }, [disabled]); - - const removePoint = useCallback((id: number) => { - setPoints(prev => prev.filter(p => p.id !== id)); - }, []); - - return { points, handleMapClick, removePoint, disabled }; -}