diff --git a/frontend/src/assets/footprint.svg b/frontend/src/assets/footprint.svg new file mode 100644 index 00000000..6ccb1958 --- /dev/null +++ b/frontend/src/assets/footprint.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/component/IconGuide/GuestMarker.tsx b/frontend/src/component/IconGuide/GuestMarker.tsx index ceeafb40..44d00b7d 100644 --- a/frontend/src/component/IconGuide/GuestMarker.tsx +++ b/frontend/src/component/IconGuide/GuestMarker.tsx @@ -13,9 +13,12 @@ interface IGuestMarkerProps { export const GusetMarker = (props: IGuestMarkerProps) => { const markerData: IMarkerData[] = [ - { name: '내 위치', icon: }, - { name: '도착지', icon: }, - { name: '출발지', icon: }, + { + name: '내 위치', + icon: , + }, + { name: '도착지', icon: }, + { name: '출발지', icon: }, ]; const iconContextValue = useMemo(() => ({ color: 'purple', className: 'size-5' }), []); diff --git a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx index fd665a52..1cf0a7a1 100644 --- a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx +++ b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx @@ -126,7 +126,12 @@ export const MapCanvasForView = ({ pointerEvents: 'auto', }} /> -
+
diff --git a/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx b/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx index 20e090be..18763f0a 100644 --- a/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx +++ b/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx @@ -359,7 +359,12 @@ export const MapCanvasForDraw = ({
-
+
diff --git a/frontend/src/component/common/modal/ModalFooter.tsx b/frontend/src/component/common/modal/ModalFooter.tsx index 8612db9a..c255754b 100644 --- a/frontend/src/component/common/modal/ModalFooter.tsx +++ b/frontend/src/component/common/modal/ModalFooter.tsx @@ -13,7 +13,7 @@ export const ModalFooter = (props: IModalFooterProps) => (
-
+
+
{ + e.stopPropagation(); + }} + > @@ -112,7 +121,6 @@ export const Content = (props: IContentProps) => { - {/* {isMenuOpen && (드롭다운 메뉴)} */}
); diff --git a/frontend/src/component/header/HeaderBackButton.tsx b/frontend/src/component/header/HeaderBackButton.tsx index 1780749b..5ef31022 100644 --- a/frontend/src/component/header/HeaderBackButton.tsx +++ b/frontend/src/component/header/HeaderBackButton.tsx @@ -19,7 +19,7 @@ export const HeaderBackButton = () => { return ( ); }; diff --git a/frontend/src/component/header/HeaderDropdown.tsx b/frontend/src/component/header/HeaderDropdown.tsx index d374b6bd..b335f024 100644 --- a/frontend/src/component/header/HeaderDropdown.tsx +++ b/frontend/src/component/header/HeaderDropdown.tsx @@ -62,7 +62,7 @@ export const HeaderDropdown = () => {
- + {DropdownItems()} diff --git a/frontend/src/hooks/useRedraw.ts b/frontend/src/hooks/useRedraw.ts index 18f95e13..1944b0d2 100644 --- a/frontend/src/hooks/useRedraw.ts +++ b/frontend/src/hooks/useRedraw.ts @@ -7,6 +7,7 @@ import mylocation from '@/assets/mylocation.svg'; import character1 from '@/assets/character1.png'; import character2 from '@/assets/character2.png'; import { IMarkerStyle } from '@/lib/types/canvasInterface.ts'; +import footprint from '@/assets/footprint.svg'; interface ILatLng { lat: number; @@ -65,6 +66,7 @@ export const useRedrawCanvas = ({ const mylocationRef = useRef(null); const character1Ref = useRef(null); const character2Ref = useRef(null); + const footprintRef = useRef(null); useEffect(() => { startImageRef.current = new Image(); @@ -81,6 +83,9 @@ export const useRedrawCanvas = ({ character2Ref.current = new Image(); character2Ref.current.src = character2; + + footprintRef.current = new Image(); + footprintRef.current.src = footprint; }, []); const drawMarker = ( @@ -155,20 +160,83 @@ export const useRedrawCanvas = ({ ctx.restore(); }; + // const drawPath = (ctx: CanvasRenderingContext2D, points: ILatLng[]) => { + // if (points.length === 0 || !footprintRef.current) return; + + // const footprintImage = footprintRef.current; + + // for (let i = 0; i < points.length - 1; i++) { + // const start = latLngToCanvasPoint(points[i]); + // const end = latLngToCanvasPoint(points[i + 1]); + + // /* eslint-disable no-continue */ + // if (!start || !end) { + // continue; + // } + + // const angle = Math.atan2(end.y - start.y, end.x - start.x); + + // const distance = 30; + // const totalDistance = Math.sqrt((end.x - start.x) ** 2 + (end.y - start.y) ** 2); + // const steps = Math.floor(totalDistance / distance); + + // for (let j = 0; j < steps; j++) { + // const progress = j / steps; + // const x = start.x + progress * (end.x - start.x); + // const y = start.y + progress * (end.y - start.y); + + // if (footprintImage && map) { + // ctx.save(); + // ctx.translate(x, y); + // ctx.rotate(angle + Math.PI / 2); + // const markerSize = Math.min(map.getZoom() * 2, 20); + // ctx.drawImage(footprintImage, -markerSize / 2, -markerSize / 2, markerSize, markerSize); + // ctx.restore(); + // } + // } + // } + // }; const drawPath = (ctx: CanvasRenderingContext2D, points: ILatLng[]) => { - if (points.length === 0) return; + if (points.length === 0 || !footprintRef.current || !map) return; - ctx.beginPath(); - const firstPoint = latLngToCanvasPoint(points[0]); - if (firstPoint) { - ctx.moveTo(firstPoint.x, firstPoint.y); - for (let i = 1; i < points.length; i++) { - const point = latLngToCanvasPoint(points[i]); - if (point) { - ctx.lineTo(point.x, point.y); - } + const footprintImage = footprintRef.current; + const markerSize = Math.min(map.getZoom() * 2, 20); + const offscreenCanvas = document.createElement('canvas'); + const offscreenCtx = offscreenCanvas.getContext('2d'); + + if (!offscreenCtx) return; + + offscreenCanvas.width = markerSize; + offscreenCanvas.height = markerSize; + + offscreenCtx.drawImage(footprintImage, 0, 0, markerSize, markerSize); + + for (let i = 0; i < points.length - 1; i++) { + const start = latLngToCanvasPoint(points[i]); + const end = latLngToCanvasPoint(points[i + 1]); + + /* eslint-disable no-continue */ + if (!start || !end) { + continue; + } + + const angle = Math.atan2(end.y - start.y, end.x - start.x); + + const distance = 30; + const totalDistance = Math.sqrt((end.x - start.x) ** 2 + (end.y - start.y) ** 2); + const steps = Math.floor(totalDistance / distance); + + for (let j = 0; j < steps; j++) { + const progress = j / steps; + const x = start.x + progress * (end.x - start.x); + const y = start.y + progress * (end.y - start.y); + + ctx.save(); + ctx.translate(x, y); + ctx.rotate(angle + Math.PI / 2); + ctx.drawImage(offscreenCanvas, -markerSize / 2, -markerSize / 2); + ctx.restore(); } - ctx.stroke(); } }; diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx index 0562fa9d..245dce0f 100644 --- a/frontend/src/pages/Main.tsx +++ b/frontend/src/pages/Main.tsx @@ -124,7 +124,7 @@ export const Main = () => { onClick={handleLogout} className="flex flex-col items-center gap-2 text-gray-700" > - + 로그아웃 )}