[FE][Feat] : 경로 발자국 걷는 형태로 구현

frontend/src/component/zoomslider/ZoomSlider.css

@@ -0,0 +1,34 @@
+.rangeInput {
+  width: 90%;
+  border-radius: 8px;
+  outline: none;
+  transition: background 450ms ease-in;
+  -webkit-appearance: none;
+  accent-color: #333c4a;
+  height: 8px;
+}
+
+.rangeInput::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 15px;
+  width: 15px;
+  background-color: #333c4a;
+  border-radius: 50%;
+  cursor: pointer;
+  transform: translateY(-25%);
+  position: relative;
+}
+.rangeInput::-moz-range-thumb {
+  height: 15px;
+  width: 15px;
+  background-color: #333c4a;
+  border-radius: 50%;
+  cursor: pointer;
+  transform: translateY(-25%);
+  position: relative;
+}
+
+.rangeInput::-webkit-slider-runnable-track {
+  height: 8px;
+  border-radius: 8px;
+}

frontend/src/component/zoomslider/ZoomSlider.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { MdOutlineAdd, MdRemove } from 'react-icons/md';
+import './ZoomSlider.css';
 
 interface IZoomSliderProps {
   /** Naver 지도 객체 */
@@ -28,29 +29,41 @@ const ZoomButton = ({ label, onClick }: IZoomButtonProps) => (
   </button>
 );
 
-const ZoomSliderInput = ({ zoomLevel, onSliderChange }: IZoomSliderInputProps) => (
-  <div className="relative flex w-[130px] flex-grow items-center justify-center px-1">
-    <input
-      type="range"
-      min="6"
-      max="22"
-      value={zoomLevel}
-      onChange={onSliderChange}
-      className="h-1 w-full rounded-full"
-      style={{
-        transform: 'rotate(-90deg)',
-        transformOrigin: 'center',
-      }}
-    />
-    <div
-      className="absolute flex items-center justify-center"
-      style={{
-        height: '100%',
-        bottom: 0,
-      }}
-    />
-  </div>
-);
+const ZoomSliderInput = ({ zoomLevel, onSliderChange }: IZoomSliderInputProps) => {
+  const minZoom = 6;
+  const maxZoom = 22;
+
+  const getBackgroundStyle = () => {
+    const gradientValue = ((zoomLevel - minZoom) / (maxZoom - minZoom)) * 100;
+    return `linear-gradient(to right, #333C4A 0%, #333C4A ${gradientValue}%, #ececec ${gradientValue}%, #ececec 100%)`;
+  };
+
+  return (
+    <div className="range-slider-container relative flex w-[130px] flex-grow items-center justify-center px-1">
+      <input
+        id="rangeInput"
+        type="range"
+        min={minZoom}
+        max={maxZoom}
+        value={zoomLevel}
+        onChange={onSliderChange}
+        className="rangeInput h-1 w-full appearance-none rounded-full focus:outline-none"
+        style={{
+          background: getBackgroundStyle(),
+          transform: 'rotate(-90deg)',
+          transformOrigin: 'center',
+        }}
+      />
+      <div
+        className="absolute flex items-center justify-center"
+        style={{
+          height: '100%',
+          bottom: 0,
+        }}
+      />
+    </div>
+  );
+};
 
 export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => {
   const [zoomLevel, setZoomLevel] = useState(map?.getZoom() ?? 10);

frontend/src/hooks/useRedraw.ts

@@ -255,9 +255,25 @@ export const useRedrawCanvas = ({
 
     const footprintImage = footprintRef.current;
     const markerSize = Math.min(map.getZoom() * 2, 20);
-
+    const offsetDistance = markerSize * 0.3;
     const offscreenCanvas = colorizeImage(footprintImage, color, markerSize, markerSize);
 
+    const path = new Path2D();
+
+    ctx.beginPath();
+    ctx.setLineDash([10, 5]);
+
+    if (points.length === 1) {
+      const point = latLngToCanvasPoint(points[0]);
+      if (point) {
+        ctx.save();
+        ctx.translate(point.x, point.y);
+        ctx.drawImage(offscreenCanvas, -markerSize / 2, -markerSize / 2); // 발자국 이미지 그리기
+        ctx.restore();
+      }
+      return;
+    }
+
     for (let i = 0; i < points.length - 1; i++) {
       const start = latLngToCanvasPoint(points[i]);
       const end = latLngToCanvasPoint(points[i + 1]);
@@ -267,9 +283,11 @@ export const useRedrawCanvas = ({
         continue;
       }
 
-      const angle = Math.atan2(end.y - start.y, end.x - start.x);
+      path.moveTo(start.x, start.y);
+      path.lineTo(end.x, end.y);
 
-      const distance = 30;
+      const angle = Math.atan2(end.y - start.y, end.x - start.x);
+      const distance = 25;
       const totalDistance = Math.sqrt((end.x - start.x) ** 2 + (end.y - start.y) ** 2);
       const steps = Math.floor(totalDistance / distance);
 
@@ -278,14 +296,24 @@ export const useRedrawCanvas = ({
         const x = start.x + progress * (end.x - start.x);
         const y = start.y + progress * (end.y - start.y);
 
+        const isLeftFoot = j % 2 === 0;
+        const offsetX =
+          Math.cos(angle + (isLeftFoot ? Math.PI / 2 : -Math.PI / 2)) * offsetDistance;
+        const offsetY =
+          Math.sin(angle + (isLeftFoot ? Math.PI / 2 : -Math.PI / 2)) * offsetDistance;
+
         ctx.save();
-        ctx.translate(x, y);
+        ctx.translate(x + offsetX, y + offsetY);
         ctx.rotate(angle + Math.PI / 2);
-        ctx.drawImage(offscreenCanvas, -markerSize / 2, -markerSize / 2);
+        ctx.drawImage(offscreenCanvas, -markerSize / 2, -markerSize / 2); // 발자국 이미지 그리기
         ctx.restore();
       }
-      ctx.stroke();
     }
+
+    ctx.strokeStyle = hexToRgba(color, 0.1);
+    ctx.lineWidth = 10;
+    ctx.stroke(path);
+    ctx.setLineDash([]);
   };
 
   const redrawCanvas = () => {
@@ -303,12 +331,11 @@ export const useRedrawCanvas = ({
 
     const clusteredMarkerSet = new Set<string>();
     clusters?.forEach(cluster => {
-      cluster.markers.forEach(marker =>
+      cluster.markers.forEach((marker: any) =>
         clusteredMarkerSet.add(`${marker.lat.toFixed(6)}_${marker.lng.toFixed(6)}`),
       );
     });
 
-    // 호스트가 게스트 경로 그릴때 쓰이는 디자인
     const zoom = map.getZoom();
     if (startMarker) {
       const startPoint = latLngToCanvasPoint(startMarker);