From 0c9c8badeef522c4054a707c0cc84eff4bde0c9c Mon Sep 17 00:00:00 2001 From: leeeunbin Date: Tue, 13 Aug 2024 13:20:04 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B0=9D=EC=B2=B4=20delete=20=ED=82=A4?= =?UTF-8?q?=EB=A1=9C=20=EC=82=AD=EC=A0=9C=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/map/ico_dot_thin_custom.svg | 2 +- src/components/map/BaseMap/BaseMap.tsx | 94 +++++++++++++++++++++----- 2 files changed, 77 insertions(+), 19 deletions(-) diff --git a/src/assets/map/ico_dot_thin_custom.svg b/src/assets/map/ico_dot_thin_custom.svg index 10b29f4..8dbcb02 100644 --- a/src/assets/map/ico_dot_thin_custom.svg +++ b/src/assets/map/ico_dot_thin_custom.svg @@ -1,5 +1,5 @@ - + \ No newline at end of file diff --git a/src/components/map/BaseMap/BaseMap.tsx b/src/components/map/BaseMap/BaseMap.tsx index f2d07f8..0362f4f 100644 --- a/src/components/map/BaseMap/BaseMap.tsx +++ b/src/components/map/BaseMap/BaseMap.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; import ReactDOMServer from 'react-dom/server'; -import { Map, DrawingManager, MapMarker } from 'react-kakao-maps-sdk'; +import { Map, DrawingManager, MapMarker, Polyline } from 'react-kakao-maps-sdk'; import useKakaoLoader from '../../../hooks/useKakaoLoader'; import styles from './BaseMap.module.scss'; import EditDesignPanel from './EditDesignPanel'; @@ -23,7 +23,7 @@ interface Marker { interface DrawingObjects { polyline?: kakao.maps.drawing.DrawingPolylineData[]; - polygon?:kakao.maps.drawing.DrawingPolylineData[]; + polygon?: kakao.maps.drawing.DrawingPolylineData[]; } const BaseMap: React.FC = ({ mode }) => { @@ -43,8 +43,8 @@ const BaseMap: React.FC = ({ mode }) => { const [dot, setDot] = useState(''); // 저장할 데이터는 Base64 문자열 const [dotShape, setDotShape] = useState('dot thin'); const [dotColor, setDotColor] = useState('#111111'); - const [isShare, setIsShare] = useState(false); + const [selectedMarker, setSelectedMarker] = useState< kakao.maps.Marker | null>(null); // 마커 지우기 위해서 사용 const managerRef = useRef< @@ -61,7 +61,7 @@ const BaseMap: React.FC = ({ mode }) => { setIsObject(type); if (manager && type !== 'dot') { manager.cancel(); - manager.select(type); + manager.select(type); // polyline 인지 polygon 인지 선택하기 } }; @@ -176,23 +176,85 @@ const BaseMap: React.FC = ({ mode }) => { const objects = manager?.getOverlays(['polyline', 'polygon']); setIsObject(''); setObjects(objects); - }); + manager.setStrokeWeight(1.5); + manager.setStrokeColor('#111111'); + manager.setStyle( + kakao.maps.drawing.OverlayType.POLYGON, + 'fillColor', + '#111111', + ); + manager.setStyle( + kakao.maps.drawing.OverlayType.POLYGON, + 'fillOpacity', + 0.2, + ); + }); // 그리기 끝나면 => objects 안에 넣기 manager?.addListener('remove', () => { const objects = manager?.getOverlays(['polyline', 'polygon']); setObjects(objects); - }); + }); // 제거되면 남아있는 객체 정보로 업데이트 }, [manager, objects]); useEffect(() => { - console.log('objects:', objects); - console.log('marker:', marker); - if ((Array.isArray(objects.polygon) && objects.polygon?.length > 0) || (Array.isArray(objects.polyline) && objects.polyline?.length > 0) || (marker !== undefined && marker !== null && marker.length > 0)) { + if ( + (Array.isArray(objects.polygon) && objects.polygon?.length > 0) || + (Array.isArray(objects.polyline) && objects.polyline?.length > 0) || + (marker !== undefined && marker !== null && marker.length > 0) + ) { setIsShare(true); } else { setIsShare(false); } - }, [objects, marker]); + }, [objects, marker]); + + let select: kakao.maps.drawing.ExtendsOverlay | null = null; + + // 전역에서 keydown 이벤트 리스너를 등록 + window.addEventListener('keydown', (ev: KeyboardEvent) => { + if (ev.key === 'Delete' && select) { + manager?.remove(select); + select = null; + } else if (ev.key === 'Delete' && selectedMarker) { + setMarker((pre) => { + return (pre || []).filter( + (marker) => + marker.pos.lat !== selectedMarker.getPosition().getLat() || + marker.pos.lng !== selectedMarker.getPosition().getLng(), + ); + }); + setIsObject(''); + setSelectedMarker(null); + } + }); + + // drawend 이벤트 리스너 등록 + manager?.addListener('drawend', (e: kakao.maps.drawing.MouseEvent) => { + const object = e.target; + + // 클릭 이벤트 리스너 등록 + kakao.maps.event.addListener(object, 'click', () => { + select = object; + }); + }); + + + useEffect(()=> { + window.addEventListener('keydown', (ev: KeyboardEvent) => { + if (ev.key === 'Delete' && selectedMarker) { + selectedMarker.setMap(null); + setMarker((pre) => { + return (pre || []).filter( + (marker) => + marker.pos.lat !== selectedMarker.getPosition().getLat() || + marker.pos.lng !== selectedMarker.getPosition().getLng(), + ); + }); + setSelectedMarker(null); + } + }); + },[marker, selectedMarker]); + return ( <> @@ -205,6 +267,7 @@ const BaseMap: React.FC = ({ mode }) => { if (isObject === 'dot') { const latlng = mouseEvent.latLng; getMarker({ lat: latlng.getLat(), lng: latlng.getLng() }); + // setIsObject('') } }} > @@ -220,12 +283,7 @@ const BaseMap: React.FC = ({ mode }) => { }, }} onClick={(marker: kakao.maps.Marker) => { - marker.setMap(null); - setMarker((pre) => { - return (pre || []).filter( - (marker) => marker.pos.lat !== item.pos.lat || marker.pos.lng !== item.pos.lng - ); - }); + setSelectedMarker(marker); }} /> ))} @@ -238,7 +296,7 @@ const BaseMap: React.FC = ({ mode }) => { guideTooltip={['draw', 'drag', 'edit']} polylineOptions={{ draggable: false, - removable: true, + removable: false, editable: true, strokeWeight: strokeWeight, strokeColor: '#111111', @@ -247,7 +305,7 @@ const BaseMap: React.FC = ({ mode }) => { }} polygonOptions={{ draggable: false, - removable: true, + removable: false, editable: true, strokeColor: '#111111', strokeWeight: strokeWeight,