Merge pull request #361 from boostcampwm-2024/feature/fe/#358-footprint

[FE][Feat] #358 : 선 대신에 발자국 이미지로 변경
boostcampwm-2024 · Dec 2, 2024 · 8fad341 · 8fad341
2 parents feaf39a + 359244c
commit 8fad341
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 25 deletions.
diff --git a/frontend/src/assets/footprint.svg b/frontend/src/assets/footprint.svg
diff --git 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: <MdAssistantNavigation color={props.markerColor && 'black'} /> },
-    { name: '도착지', icon: <MdFlag color={props.markerColor && 'black'} /> },
-    { name: '출발지', icon: <MdLocationOn color={props.markerColor && 'black'} /> },
+    {
+      name: '내 위치',
+      icon: <MdAssistantNavigation color={props.markerColor && '#333C4A'} />,
+    },
+    { name: '도착지', icon: <MdFlag color={props.markerColor && '#333C4A'} /> },
+    { name: '출발지', icon: <MdLocationOn color={props.markerColor && '#333C4A'} /> },
   ];
 
   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
@@ -126,7 +126,12 @@ export const MapCanvasForView = ({
           pointerEvents: 'auto',
         }}
       />
-      <div className="absolute right-2 top-4 z-10 flex gap-2">
+      <div
+        className="absolute right-2 top-1/2 z-10 flex gap-2"
+        style={{
+          transform: 'translateY(-50%)',
+        }}
+      >
         <ZoomSlider map={map} redrawCanvas={redrawCanvas} />
       </div>
     </div>

diff --git a/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx b/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx
@@ -359,7 +359,12 @@ export const MapCanvasForDraw = ({
       <div className="relative flex">
         <ToolDescription />
       </div>
-      <div className="absolute bottom-3 left-3 z-10 flex gap-2">
+      <div
+        className="absolute right-5 top-1/2 z-10 flex gap-2"
+        style={{
+          transform: 'translateY(-50%)',
+        }}
+      >
         <ZoomSlider map={map} redrawCanvas={redrawCanvas} />
       </div>
     </div>

diff --git 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) => (
   <div className="flex w-full flex-row-reverse items-center justify-start gap-5 rounded-lg bg-white py-4 shadow-sm">
     <button
       type="button"
-      className="bg-blueGray-600 h-[40px] rounded-lg px-4 py-2 text-sm font-semibold text-white hover:bg-blue-800"
+      className="bg-blueGray-800 hover:bg-blueGray-600 h-[40px] rounded-lg px-4 py-2 text-sm font-semibold text-white"
       onClick={props.onClick}
     >
       {props.text}

diff --git a/frontend/src/component/content/Content.tsx b/frontend/src/component/content/Content.tsx
@@ -78,8 +78,12 @@ export const Content = (props: IContentProps) => {
   };
 
   return (
-    <div className="relative flex w-full flex-row justify-between px-4 py-5">
-      <button type="button" onClick={goToHostViewPage}>
+    <div
+      className="relative flex w-full flex-row items-center justify-between px-4 py-5"
+      onClick={goToHostViewPage}
+    >
+      {/* <div className="relative flex w-full flex-row justify-between px-4 py-5"> */}
+      <div>
         <header className="border-gray-200 pb-1 text-start text-base font-normal">
           {props.title}
         </header>
@@ -94,8 +98,13 @@ export const Content = (props: IContentProps) => {
             </>
           )}
         </section>
-      </button>
-      <div className="relative">
+      </div>
+      <div
+        className="relative"
+        onClick={e => {
+          e.stopPropagation();
+        }}
+      >
         <Dropdown>
           <Dropdown.Trigger>
             <MdMoreVert className="h-6 w-6" />
@@ -112,7 +121,6 @@ export const Content = (props: IContentProps) => {
             </Dropdown.Item>
           </Dropdown.Menu>
         </Dropdown>
-        {/* {isMenuOpen && (드롭다운 메뉴)} */}
       </div>
     </div>
   );

diff --git a/frontend/src/component/header/HeaderBackButton.tsx b/frontend/src/component/header/HeaderBackButton.tsx
@@ -19,7 +19,7 @@ export const HeaderBackButton = () => {
 
   return (
     <Button onClick={handleHeaderBackButtonClick}>
-      <MdArrowBackIos className="h-6 w-6" />
+      <MdArrowBackIos className="text-blueGray-800 h-6 w-6" />
     </Button>
   );
 };
diff --git a/frontend/src/component/header/HeaderDropdown.tsx b/frontend/src/component/header/HeaderDropdown.tsx
@@ -62,7 +62,7 @@ export const HeaderDropdown = () => {
     <div>
       <Dropdown>
         <Dropdown.Trigger>
-          <MdMenu className="h-6 w-6" />
+          <MdMenu className="text-blueGray-800 h-6 w-6" />
         </Dropdown.Trigger>
         <Dropdown.Menu>{DropdownItems()}</Dropdown.Menu>
       </Dropdown>

diff --git 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<HTMLImageElement | null>(null);
   const character1Ref = useRef<HTMLImageElement | null>(null);
   const character2Ref = useRef<HTMLImageElement | null>(null);
+  const footprintRef = useRef<HTMLImageElement | null>(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
@@ -124,7 +124,7 @@ export const Main = () => {
             onClick={handleLogout}
             className="flex flex-col items-center gap-2 text-gray-700"
           >
-            <MdLogout size={24} />
+            <MdLogout size={24} className="text-blueGray-800" />
             <span className="text-xs">로그아웃</span>
           </button>
         )}