[FE][Feat] #224 : 캔버스와 지도 연동

boostcampwm-2024 · Nov 21, 2024 · be0fd8f · be0fd8f
1 parent e0fe6db
commit be0fd8f
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 23 deletions.
diff --git a/frontend/src/component/canvas/Canvas.tsx b/frontend/src/component/canvas/Canvas.tsx
@@ -11,6 +11,7 @@ interface ICanvasProps {
 
 export interface ICanvasRefMethods {
   getCanvasElement: () => HTMLCanvasElement | null;
+  onMouseClickHandler: (event?: React.MouseEvent) => void;
 }
 
 export const Canvas = forwardRef<ICanvasRefMethods, ICanvasProps>((props, ref) => {
@@ -25,12 +26,13 @@ export const Canvas = forwardRef<ICanvasRefMethods, ICanvasProps>((props, ref) =
 
     canvas.width = canvas.offsetWidth;
     canvas.height = canvas.offsetHeight;
-
-    context.fillRect(0, 0, 200, 200);
   }, []);
 
   useImperativeHandle(ref, () => ({
     getCanvasElement: () => canvasRef.current ?? null,
+    onMouseClickHandler: event => {
+      console.log(event?.screenX, event?.screenY);
+    },
   }));
 
   return (

diff --git a/frontend/src/component/canvas/CanvasWithMap.tsx b/frontend/src/component/canvas/CanvasWithMap.tsx
@@ -1,4 +1,4 @@
-import { Canvas, ICanvasRefMethods } from '@/component/canvas/Canvas.tsx';
+import { Canvas, ICanvasRefMethods } from '@/component/canvas/LineDrawer_test.tsx';
 import { Map, IMapRefMethods } from '@/component/maps/Map.tsx';
 import classNames from 'classnames';
 import { ICanvasVertex } from '@/utils/screen/canvasUtils.ts';
@@ -33,35 +33,36 @@ const MouseEventStateInitialValue = {
 };
 
 export const CanvasWithMap = (props: ICanvasWithMapProps) => {
-  const mapRef = useRef<IMapRefMethods | null>(null);
+  const mapRefMethods = useRef<IMapRefMethods | null>(null);
   const mapElement = useRef<HTMLElement | null>(null);
-  const canvasMethods = useRef<ICanvasRefMethods | null>(null);
+  const canvasRefMethods = useRef<ICanvasRefMethods | null>(null);
   const canvasElement = useRef<HTMLCanvasElement | null>(null);
   const mouseEventState = useRef<IMouseEventState>({ ...MouseEventStateInitialValue });
   const [mapObject, setMapObject] = useState<naver.maps.Map | null>(null);
 
   useEffect(() => {
-    if (canvasMethods.current?.getCanvasElement)
-      canvasElement.current = canvasMethods.current.getCanvasElement();
+    if (canvasRefMethods.current?.getCanvasElement)
+      canvasElement.current = canvasRefMethods.current.getCanvasElement();
   }, []);
 
   useEffect(() => {
-    mapElement.current = mapRef.current?.getMapContainer() ?? null;
+    mapElement.current = mapRefMethods.current?.getMapContainer() ?? null;
   }, [mapObject]);
 
   const initMap = (mapObj: naver.maps.Map | null) => {
     setMapObject(mapObj);
   };
 
-  const handleClick = () => {
-    mapElement.current?.click();
-    canvasElement.current?.click();
+  const handleClick = (event: React.MouseEvent) => {
+    mapRefMethods.current?.onMouseClickHandler(event);
+    canvasRefMethods.current?.onMouseClickHandler(event);
   };
 
   const handleMouseDown = (event: React.MouseEvent<HTMLElement>) => {
     if (!mapElement.current || !canvasElement.current) return;
     mouseEventState.current.isMouseDown = true;
     mouseEventState.current.mouseDownPosition = { x: event.clientX, y: event.clientY };
+    canvasRefMethods.current?.onMouseDownHandler(event);
   };
 
   const handleMouseMove = (event: React.MouseEvent<HTMLElement>) => {
@@ -70,8 +71,8 @@ export const CanvasWithMap = (props: ICanvasWithMapProps) => {
 
     // TODO: 쓰로틀링 걸기
     mouseEventState.current.mouseDeltaPosition = {
-      x: event.clientX - mouseEventState.current.mouseDownPosition.x,
-      y: event.clientY - mouseEventState.current.mouseDownPosition.y,
+      x: -(event.clientX - mouseEventState.current.mouseDownPosition.x),
+      y: -(event.clientY - mouseEventState.current.mouseDownPosition.y),
     };
 
     mapObject?.panBy(
@@ -80,11 +81,14 @@ export const CanvasWithMap = (props: ICanvasWithMapProps) => {
         mouseEventState.current.mouseDeltaPosition.y,
       ),
     );
+
+    canvasRefMethods.current?.onMouseMoveHandler(event);
   };
 
-  const handleMouseUp = () => {
+  const handleMouseUp = (event: React.MouseEvent) => {
     if (!mapElement.current || !canvasElement.current) return;
     mouseEventState.current = { ...MouseEventStateInitialValue };
+    canvasRefMethods.current?.onMouseUpHandler(event);
   };
 
   return (
@@ -95,13 +99,13 @@ export const CanvasWithMap = (props: ICanvasWithMapProps) => {
       onMouseMove={handleMouseMove}
       onMouseUp={handleMouseUp}
     >
-      <Canvas ref={canvasMethods} />
+      <Canvas ref={canvasRefMethods} />
       <Map
         lat={props.lat}
         lng={props.lng}
         type={props.mapType}
         zoom={props.zoom}
-        ref={mapRef}
+        ref={mapRefMethods}
         initMap={initMap}
       />
     </div>

diff --git a/frontend/src/component/maps/Map.tsx b/frontend/src/component/maps/Map.tsx
@@ -20,6 +20,7 @@ interface IMapProps extends IMapOptions {
 export interface IMapRefMethods {
   getMapObject: () => naver.maps.Map | null;
   getMapContainer: () => HTMLElement | null;
+  onMouseClickHandler: (event?: React.MouseEvent) => void;
 }
 
 const validateKindOfMap = (type: string) => ['naver'].includes(type);
@@ -59,6 +60,7 @@ export const Map = forwardRef<IMapRefMethods, IMapProps>((props, ref) => {
   useImperativeHandle(ref, () => ({
     getMapObject: () => mapObject,
     getMapContainer: () => mapContainer.current,
+    onMouseClickHandler: () => {},
   }));
 
   return (

diff --git a/frontend/src/component/maps/NaverMap.tsx b/frontend/src/component/maps/NaverMap.tsx
@@ -30,14 +30,11 @@ export const NaverMap = forwardRef<IMapRefMethods, INaverMapProps>((props, ref)
     }
   }, [mapOptions]);
 
-  const clickHandler = () => {
-    console.log('clicked!');
-  };
-
   useImperativeHandle(ref, () => ({
     getMapObject: () => naverMapObject.current,
     getMapContainer: () => naverMapContainer.current,
+    onMouseClickHandler: () => {},
   }));
 
-  return <section ref={naverMapContainer} className="h-full w-full" onClick={clickHandler} />;
+  return <section ref={naverMapContainer} className="h-full w-full" />;
 });
diff --git a/frontend/src/hooks/usePanning.ts b/frontend/src/hooks/usePanning.ts
@@ -11,7 +11,7 @@ export const usePanning = (props: IUsePanningProps) => {
   const panningRef = useRef(false);
   const startPosRef = useRef(INITIAL_POSITION);
 
-  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
+  const handleMouseMove = (e: React.MouseEvent) => {
     if (!panningRef.current || !props.viewPosRef.current) return;
 
     const viewPos = props.viewPosRef.current;
@@ -23,7 +23,7 @@ export const usePanning = (props: IUsePanningProps) => {
     props.draw();
   };
 
-  const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
+  const handleMouseDown = (e: React.MouseEvent) => {
     if (!props.viewPosRef.current) return;
 
     const viewPos = props.viewPosRef.current;