Feat(util function): 건물 정보 컴포넌트 드래그를 위한 유틸 함수 구현

src/utils/map/regist-drag-event.ts

@@ -0,0 +1,59 @@
+export const inrange = (v: number, min: number, max: number) => {
+  if (v < min) return min;
+  if (v > max) return max;
+  return v;
+};
+
+export const isTouchScreen =
+  typeof window !== 'undefined' &&
+  window.matchMedia('(hover: none) and (pointer: coarse)').matches;
+
+export const eventType = isTouchScreen ? 'touchstart' : 'click';
+
+export const registDragEvent = (
+  onDragChange: (deltaY: number) => void,
+  stopPropagation?: boolean,
+) => {
+  if (isTouchScreen) {
+    return {
+      onTouchStart: (touchEvent: React.TouchEvent<HTMLDivElement>) => {
+        if (stopPropagation) touchEvent.stopPropagation();
+
+        const touchMoveHandler = (moveEvent: TouchEvent) => {
+          if (moveEvent.cancelable) moveEvent.preventDefault();
+
+          const deltaY =
+            moveEvent.touches[0].screenY - touchEvent.touches[0].screenY;
+          onDragChange(deltaY);
+        };
+
+        const touchEndHandler = () => {
+          document.removeEventListener('touchmove', touchMoveHandler);
+        };
+
+        document.addEventListener('touchmove', touchMoveHandler, {
+          passive: false,
+        });
+        document.addEventListener('touchend', touchEndHandler, { once: true });
+      },
+    };
+  }
+
+  return {
+    onMouseDown: (clickEvent: React.MouseEvent<Element, MouseEvent>) => {
+      if (stopPropagation) clickEvent.stopPropagation();
+
+      const mouseMoveHandler = (moveEvent: MouseEvent) => {
+        const deltaY = moveEvent.screenY - clickEvent.screenY;
+        onDragChange(deltaY);
+      };
+
+      const mouseUpHandler = () => {
+        document.removeEventListener('mousemove', mouseMoveHandler);
+      };
+
+      document.addEventListener('mousemove', mouseMoveHandler);
+      document.addEventListener('mouseup', mouseUpHandler, { once: true });
+    },
+  };
+};