Merge branch 'frontend' into feature/fe/#249-canvasMap

.github/workflows/ci.yml

@@ -30,7 +30,7 @@ jobs:
 
       - name: Run Build
         run: pnpm build  # pnpm을 사용하여 빌드 실행
-        continue-on-error: false # 빌드 실패 시 워크플로우 실패로 처리
+#        continue-on-error: false # 빌드 실패 시 워크플로우 실패로 처리
 
       - name: Run Tests
         run: pnpm test  # pnpm을 사용하여 테스트 실행

frontend/src/component/canvas/Canvas.tsx

@@ -242,3 +242,4 @@
 //     </div>
 //   );
 // });
+

frontend/src/component/canvas/CanvasWithMap.tsx

@@ -111,4 +111,4 @@
 //       />
 //     </div>
 //   );
-// };
+// };

frontend/src/component/canvas/useEventHandlers.tsx

@@ -0,0 +1,86 @@
+import { useRef } from 'react';
+import { ICanvasRefMethods } from '@/component/canvas/Canvas.tsx';
+import { IMapObject, IMapRefMethods } from '@/component/maps/Map.types.ts';
+
+// TODO:  리팩토룅 시 null을 처리하기
+interface IUseEventHandlers {
+  (
+    canvasElement: HTMLCanvasElement | null,
+    canvasRefMethods: ICanvasRefMethods | null,
+    mapElement: HTMLElement | null,
+    mapRefMethods: IMapRefMethods | null,
+    mapObject: IMapObject | null, // 비동기 로딩 시 null로 처리가 될 수 있어서 예외처리 필요
+  ): {
+    handleClick: (event: React.MouseEvent) => void;
+    handleMouseDown: (event: React.MouseEvent) => void;
+    handleMouseMove: (event: React.MouseEvent) => void;
+    handleMouseUp: (event: React.MouseEvent) => void;
+  };
+}
+
+interface IMouseEventState {
+  isMouseDown: boolean;
+  mouseDownPosition: { x: number; y: number };
+  // mouseMovePosition: { x: number; y: number };
+  mouseDeltaPosition: { x: number; y: number };
+}
+
+const MouseEventStateInitialValue = {
+  isMouseDown: false,
+  mouseDownPosition: { x: 0, y: 0 },
+  // mouseMovePosition: { x: 0, y: 0 },
+  mouseDeltaPosition: { x: 0, y: 0 },
+};
+
+export const useEventHandlers: IUseEventHandlers = (
+  canvasElement,
+  canvasRefMethods,
+  mapElement,
+  mapRefMethods,
+  mapObject,
+) => {
+  // if (!canvasElement || !canvasElement || !mapElement || !mapRefMethods || !mapObject)
+  //   throw new Error('🚀 useEventHandler error : null 값이 포함되어 있습니다.');
+
+  const mouseEventState = useRef<IMouseEventState>({ ...MouseEventStateInitialValue });
+
+  const handleClick = (event: React.MouseEvent) => {
+    mapRefMethods?.onMouseClickHandler(event);
+    canvasRefMethods?.onMouseClickHandler(event);
+  };
+
+  const handleMouseDown = (event: React.MouseEvent) => {
+    if (!mapElement || !canvasElement) return;
+    mouseEventState.current.isMouseDown = true;
+    mouseEventState.current.mouseDownPosition = { x: event.clientX, y: event.clientY };
+    canvasRefMethods?.onMouseDownHandler(event);
+  };
+
+  const handleMouseMove = (event: React.MouseEvent) => {
+    if (!mapElement || !canvasElement || !mouseEventState.current.isMouseDown) return;
+
+    // TODO: 쓰로틀링 걸기
+    mouseEventState.current.mouseDeltaPosition = {
+      x: -(event.clientX - mouseEventState.current.mouseDownPosition.x),
+      y: -(event.clientY - mouseEventState.current.mouseDownPosition.y),
+    };
+
+    // TODO: 범용 지도에 따른 Refactoring 필요, 우선은 네이버 지도에 한해서만 수행
+    mapObject?.panBy(
+      new naver.maps.Point(
+        mouseEventState.current.mouseDeltaPosition.x,
+        mouseEventState.current.mouseDeltaPosition.y,
+      ),
+    );
+
+    canvasRefMethods?.onMouseMoveHandler(event);
+  };
+
+  const handleMouseUp = (event: React.MouseEvent) => {
+    if (!mapElement || !canvasElement) return;
+    mouseEventState.current = { ...MouseEventStateInitialValue };
+    canvasRefMethods?.onMouseUpHandler(event);
+  };
+
+  return { handleClick, handleMouseDown, handleMouseMove, handleMouseUp };
+};

frontend/src/component/maps/Map.tsx

@@ -77,4 +77,4 @@
 //       {MapComponent}
 //     </article>
 //   );
-// });
+// });

frontend/src/component/maps/Map.types.ts

@@ -0,0 +1,42 @@
+export type IMapObject = naver.maps.Map;
+
+export type IMapLatLngBound = naver.maps.LatLngBounds;
+
+export interface IMapOptions {
+  lat: number;
+  lng: number;
+  zoom?: number;
+}
+
+/**
+ * Forward Ref 를 통해서, 부모에서 자식 컴포넌트의 Ref에 접근할 때 쓰이는 인터페이스.
+ * 다음과 같은 목적으로 쓰인다.
+ *    1. 지도 컨테이너 요소와, 지도 객체를 가져온다.
+ *    2. 지도 객체의 이벤트 위임을 위해 자신을 컨트롤 할 수 있는 Handler를 부모에게 전달하는 역할을 한다.
+ * 이렇게 전달받은 핸들러로 부모 컴포넌트에서 자식에 있는 지도 객체를 컨트롤 할 수 있다.
+ * */
+export interface IMapRefMethods {
+  getMapObject: () => naver.maps.Map | null;
+  getMapContainer: () => HTMLElement | null;
+  onMouseClickHandler: (event?: React.MouseEvent) => void;
+}
+
+// lat: 위도(y), lng: 경도(x) INaverMapVertexPosition
+export interface IMapVertexCoordinate {
+  ne: {
+    lng: number;
+    lat: number;
+  };
+  nw: {
+    lng: number;
+    lat: number;
+  };
+  se: {
+    lng: number;
+    lat: number;
+  };
+  sw: {
+    lng: number;
+    lat: number;
+  };
+}

frontend/src/component/maps/NaverMap.tsx

@@ -1,14 +1,15 @@
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { setNaverMapSync } from '@/component/maps/naverMapUtils.ts';
-import { IMapOptions, IMapRefMethods } from '@/component/maps/Map.tsx';
+import { IMapOptions, IMapRefMethods } from '@/component/maps/Map.types.ts';
 
 interface INaverMapProps extends IMapOptions {
   onMapInit: (map: naver.maps.Map) => void; // 콜백 프로퍼티 추가
 }
 
 export const NaverMap = forwardRef<IMapRefMethods, INaverMapProps>((props, ref) => {
-  const naverMapObject = useRef<naver.maps.Map | null>(null);
-  const naverMapContainer = useRef<HTMLElement | null>(null);
+  const mapObject = useRef<naver.maps.Map | null>(null);
+  const mapContainer = useRef<HTMLElement | null>(null);
+
   const [mapOptions, setMapOptions] = useState<IMapOptions>({
     lat: props.lat,
     lng: props.lng,
@@ -24,17 +25,23 @@ export const NaverMap = forwardRef<IMapRefMethods, INaverMapProps>((props, ref)
   }, [props.lat, props.lng, props.zoom]);
 
   useEffect(() => {
-    if (naverMapContainer.current && mapOptions !== null) {
-      naverMapObject.current = setNaverMapSync(naverMapContainer.current, mapOptions);
-      if (naverMapObject.current !== null) props.onMapInit(naverMapObject.current); // 콜백 호출
+    if (mapContainer.current && mapOptions) {
+      mapObject.current = setNaverMapSync(mapContainer.current, mapOptions);
+      if (mapObject.current) props.onMapInit(mapObject.current); // 콜백 호출
     }
   }, [mapOptions]);
 
   useImperativeHandle(ref, () => ({
-    getMapObject: () => naverMapObject.current,
-    getMapContainer: () => naverMapContainer.current,
+    getMapObject: () => {
+      if (mapObject) return mapObject.current;
+      throw new Error('🚀 지도 로딩 오류 : 지도 객체가 존재하지 않습니다.');
+    },
+    getMapContainer: () => {
+      if (mapContainer) return mapContainer.current;
+      throw new Error('🚀 지도 로딩 오류 : 지도 컨테이너가 존재하지 않습니다.');
+    },
     onMouseClickHandler: () => {},
   }));
 
-  return <section ref={naverMapContainer} className="h-full w-full" />;
+  return <section ref={mapContainer} className="h-full w-full" />;
 });

frontend/src/component/maps/mapUtils.ts

@@ -0,0 +1,32 @@
+import { IMapVertexCoordinate, IMapObject, IMapLatLngBound } from '@/component/maps/Map.types.ts';
+
+export const getMapVertexCoordinate = (map: IMapObject): IMapVertexCoordinate => {
+  let bounds: IMapLatLngBound;
+
+  if (map instanceof naver.maps.Map) {
+    bounds = map.getBounds() as naver.maps.LatLngBounds;
+  } else {
+    throw new Error('🚀 꼭지점 좌표 가져오기 오류 : 지도 객체가 없습니다.');
+  }
+
+  const sw = bounds.getSW();
+  const ne = bounds.getNE();
+  return {
+    se: {
+      lng: ne.lng(),
+      lat: sw.lat(),
+    },
+    sw: {
+      lng: sw.lng(),
+      lat: sw.lat(),
+    },
+    ne: {
+      lng: ne.lng(),
+      lat: ne.lat(),
+    },
+    nw: {
+      lng: sw.lng(),
+      lat: ne.lat(),
+    },
+  };
+};

frontend/src/component/maps/naverMapUtils.ts

@@ -1,48 +1,4 @@
-import { IMapOptions } from '@/component/maps/Map.tsx';
-
-// lat: 위도(y), lng: 경도(x)
-export interface INaverMapVertexPosition {
-  ne: {
-    lng: number;
-    lat: number;
-  };
-  nw: {
-    lng: number;
-    lat: number;
-  };
-  se: {
-    lng: number;
-    lat: number;
-  };
-  sw: {
-    lng: number;
-    lat: number;
-  };
-}
-
-export const getNaverMapVertexPosition = (map: naver.maps.Map): INaverMapVertexPosition => {
-  const bounds = map.getBounds() as naver.maps.LatLngBounds;
-  const sw = bounds.getSW();
-  const ne = bounds.getNE();
-  return {
-    se: {
-      lng: ne.lng(),
-      lat: sw.lat(),
-    },
-    sw: {
-      lng: sw.lng(),
-      lat: sw.lat(),
-    },
-    ne: {
-      lng: ne.lng(),
-      lat: ne.lat(),
-    },
-    nw: {
-      lng: sw.lng(),
-      lat: ne.lat(),
-    },
-  };
-};
+import { IMapOptions } from '@/component/maps/Map.types.ts';
 
 export const setNaverMapOption = (mapOptions: IMapOptions): IMapOptions => {
   return {
@@ -53,7 +9,6 @@ export const setNaverMapOption = (mapOptions: IMapOptions): IMapOptions => {
   };
 };
 
-// utils에 있는 일반 함수로 사용
 export const setNaverMap = (
   htmlElement: HTMLElement,
   mapOptions: IMapOptions,