From 15922a5ea1560ccc4195cf4800ad6aa29fe3f8f5 Mon Sep 17 00:00:00 2001 From: juwon5272 Date: Mon, 2 Dec 2024 16:00:09 +0900 Subject: [PATCH 1/8] =?UTF-8?q?[FE][Feat]=20:=20content=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=EB=B2=94=EC=9C=84=20=EC=A1=B0=EC=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/content/Content.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/frontend/src/component/content/Content.tsx b/frontend/src/component/content/Content.tsx index 5483e14c..d68b2c06 100644 --- a/frontend/src/component/content/Content.tsx +++ b/frontend/src/component/content/Content.tsx @@ -70,13 +70,13 @@ export const Content = (props: IContentProps) => { }; return ( -
- +
@@ -102,7 +102,6 @@ export const Content = (props: IContentProps) => { 삭제하기 - {/* {isMenuOpen && (드롭다운 메뉴)} */}
); From 19de080910e34a0aac3af6e50da769eef10100ef Mon Sep 17 00:00:00 2001 From: juwon5272 Date: Mon, 2 Dec 2024 16:16:23 +0900 Subject: [PATCH 2/8] =?UTF-8?q?[FE][Feat]=20#358=20:=20=EC=84=A0=20?= =?UTF-8?q?=EB=8C=80=EC=8B=A0=EC=97=90=20=EB=B0=9C=EC=9E=90=EA=B5=AD=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/footprint.svg | 1 + frontend/src/hooks/useRedraw.ts | 45 ++++++++++++++++++++++++------- 2 files changed, 36 insertions(+), 10 deletions(-) create mode 100644 frontend/src/assets/footprint.svg 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/hooks/useRedraw.ts b/frontend/src/hooks/useRedraw.ts index 18f95e13..0bdb023d 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 = ( @@ -156,19 +161,39 @@ export const useRedrawCanvas = ({ }; const drawPath = (ctx: CanvasRenderingContext2D, points: ILatLng[]) => { - if (points.length === 0) return; + if (points.length === 0 || !character1Ref.current) 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; + + 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(); } } - ctx.stroke(); } }; From 62e8c727aff99478c9ea234719172858b60325fb Mon Sep 17 00:00:00 2001 From: juwon5272 Date: Mon, 2 Dec 2024 17:42:50 +0900 Subject: [PATCH 3/8] =?UTF-8?q?[FE][Refactor]=20#358=20:=20=EC=84=A0=20?= =?UTF-8?q?=EB=8C=80=EC=8B=A0=EC=97=90=20=EB=B0=9C=EC=9E=90=EA=B5=AD=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?=EC=97=B0=EC=82=B0=20=EC=A4=84=EC=9D=B4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/useRedraw.ts | 61 ++++++++++++++++++++++++++++----- 1 file changed, 52 insertions(+), 9 deletions(-) diff --git a/frontend/src/hooks/useRedraw.ts b/frontend/src/hooks/useRedraw.ts index 0bdb023d..b48ac668 100644 --- a/frontend/src/hooks/useRedraw.ts +++ b/frontend/src/hooks/useRedraw.ts @@ -160,10 +160,56 @@ 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 || !character1Ref.current) return; + if (points.length === 0 || !footprintRef.current) return; 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]); @@ -185,14 +231,11 @@ export const useRedrawCanvas = ({ 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(); - } + ctx.save(); + ctx.translate(x, y); + ctx.rotate(angle + Math.PI / 2); + ctx.drawImage(offscreenCanvas, -markerSize / 2, -markerSize / 2); + ctx.restore(); } } }; From 22bb911473ff71e585106cdd4d454f822a2419bc Mon Sep 17 00:00:00 2001 From: juwon5272 Date: Mon, 2 Dec 2024 17:43:27 +0900 Subject: [PATCH 4/8] =?UTF-8?q?[FE][Desgin]=20:=20map=20slider=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvasWithMapForView/MapCanvasForView.tsx | 7 ++++++- .../canvasWithMapforDraw/MapCanvasForDraw.tsx | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) 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 = ({
-
+
From b43e0f703daa84c702ad5804932aa84042f32195 Mon Sep 17 00:00:00 2001 From: juwon5272 Date: Mon, 2 Dec 2024 17:43:48 +0900 Subject: [PATCH 5/8] =?UTF-8?q?[FE][Fix]=20:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8?= =?UTF-8?q?=20=EC=A0=84=ED=8C=8C=20=EB=A7=89=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/content/Content.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/component/content/Content.tsx b/frontend/src/component/content/Content.tsx index d68b2c06..d3f505d5 100644 --- a/frontend/src/component/content/Content.tsx +++ b/frontend/src/component/content/Content.tsx @@ -90,7 +90,12 @@ export const Content = (props: IContentProps) => { )} -
+
{ + e.stopPropagation(); + }} + > From 4cf868bac5151cc6e143bab052e032710017b436 Mon Sep 17 00:00:00 2001 From: juwon5272 Date: Mon, 2 Dec 2024 18:03:55 +0900 Subject: [PATCH 6/8] =?UTF-8?q?[FE][Design]=20:=20primary=20color=EB=A1=9C?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/IconGuide/GuestMarker.tsx | 9 ++++++--- frontend/src/component/common/modal/ModalFooter.tsx | 2 +- frontend/src/component/header/HeaderBackButton.tsx | 2 +- frontend/src/component/header/HeaderDropdown.tsx | 2 +- frontend/src/pages/Main.tsx | 2 +- 5 files changed, 10 insertions(+), 7 deletions(-) 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/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) => (
); }; 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/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" > - + 로그아웃 )} From 2d57d9d872786ef4672e42e84675325a5b3fa83f Mon Sep 17 00:00:00 2001 From: juwon5272 <98096178+juwon5272@users.noreply.github.com> Date: Mon, 2 Dec 2024 18:29:45 +0900 Subject: [PATCH 7/8] =?UTF-8?q?[FE][Fix]=20:=20=EC=B6=A9=EB=8F=8C=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/content/Content.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/component/content/Content.tsx b/frontend/src/component/content/Content.tsx index 6bc807a3..b2426028 100644 --- a/frontend/src/component/content/Content.tsx +++ b/frontend/src/component/content/Content.tsx @@ -80,13 +80,14 @@ export const Content = (props: IContentProps) => { return (
{ - navigate(props.link); - }} + onClick={goToHostViewPage} > + {/*
*/}
-
{props.title}
-
+
+ {props.title} +
+
From 359244c34d6ed582d2e6abd4f46f82922cf8d820 Mon Sep 17 00:00:00 2001 From: juwon5272 <98096178+juwon5272@users.noreply.github.com> Date: Mon, 2 Dec 2024 18:37:03 +0900 Subject: [PATCH 8/8] =?UTF-8?q?[FE][Feat]=20:=20null=EB=A1=9C=20=EC=9D=B8?= =?UTF-8?q?=ED=95=9C=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/useRedraw.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/hooks/useRedraw.ts b/frontend/src/hooks/useRedraw.ts index b48ac668..1944b0d2 100644 --- a/frontend/src/hooks/useRedraw.ts +++ b/frontend/src/hooks/useRedraw.ts @@ -197,7 +197,7 @@ export const useRedrawCanvas = ({ // } // }; const drawPath = (ctx: CanvasRenderingContext2D, points: ILatLng[]) => { - if (points.length === 0 || !footprintRef.current) return; + if (points.length === 0 || !footprintRef.current || !map) return; const footprintImage = footprintRef.current; const markerSize = Math.min(map.getZoom() * 2, 20);