fix: 마커 사진 표시 방식 변경

BCSDLab · Jul 17, 2023 · 0c9f5fb · 0c9f5fb
1 parent 0979644
commit 0c9f5fb
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 18 deletions.
diff --git a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
@@ -46,7 +46,7 @@
     border-radius: 89.5px;
     position: absolute;
     top: 10px;
-    left: 28px;
+    left: 29px;
 
     @include media.media-breakpoint-down(mobile) {
       width: 30px;
@@ -62,13 +62,13 @@
     border-radius: 89.5px;
     position: absolute;
     top: 2px;
-    left: 23px;
+    left: 22px;
 
     @include media.media-breakpoint-down(mobile) {
       width: 36px;
       height: 36px;
       top: 2px;
-      left: 22px;
+      left: 21px;
     }
   }
 
@@ -111,16 +111,33 @@
   &__index {
     color: #ffffff;
     position: absolute;
-    top: 20px;
-    left: 28px;
+    top: 18px;
+    left: 43px;
     font-size: 24px;
     font-weight: 700;
     z-index: 999;
 
     @include media.media-breakpoint-down(mobile) {
       font-size: 16px;
-      top: 12px;
-      left: 20px;
+      top: 13px;
+      left: 46px;
+    }
+
+    &--clidked{
+      color: #ffffff;
+      position: absolute;
+      top: 18px;
+      left: 43px;
+      font-size: 24px;
+      font-weight: 700;
+      z-index: 999;
+      top: 15px;
+
+       @include media.media-breakpoint-down(mobile) {
+        font-size: 16px;
+        top: 10px;
+        left:35px;
+    }
     }
   }
 }
diff --git a/src/pages/Home/components/Map/components/MarkerHtml/index.tsx b/src/pages/Home/components/Map/components/MarkerHtml/index.tsx
@@ -3,16 +3,16 @@ import MarkerLogo from 'assets/images/home/location-marker.png';
 import Selected from 'assets/images/home/selected-marker.png';
 import styles from './MarkerHtml.module.scss';
 
-export function MarkerHtml(defaultImg:string, name:string, index:number) {
+export function MarkerHtml(thumbnail:string | null, name:string, index:number) {
   return `
   <div class=${styles.container}>
     <img src=${MarkerLogo}  class=${styles.marker} alt="marker" />
       <div class=${styles.bubble}>
         <div class=${styles.bubble__photo}>
-          <img src=${defaultImg} alt=""/>
+          <img src=${thumbnail || Default} alt=""/>
         </div>
         <div class=${styles.bubble__index}>
-          ${defaultImg === Default ? index : ''}
+          ${!thumbnail ? index : ''}
           
         </div>
         <div class=${styles.bubble__name}>
@@ -23,16 +23,16 @@ export function MarkerHtml(defaultImg:string, name:string, index:number) {
   `;
 }
 
-export function ClickedMarkerHtml(defaultImg:string, name:string, index:number) {
+export function ClickedMarkerHtml(thumbnail:string | null, name:string, index:number) {
   return `
   <div class=${styles.continer}>
     <img src=${Selected} class=${styles['marker--clicked']}>
       <div class=${styles.bubble}>
         <div class=${styles['bubble__photo--clicked']}>
-          <img src=${defaultImg} alt="" />
+          <img src=${thumbnail || Default} alt="" />
         </div>
-        <div class=${styles.bubble__index}>
-          ${defaultImg === Default ? index : ''}
+        <div class=${styles['bubble__index--clidked']}>
+          ${!thumbnail ? index : ''}
         </div>
         <div class=${styles['bubble__name--clicked']}>
           ${name}

diff --git a/src/pages/Home/components/Map/index.tsx b/src/pages/Home/components/Map/index.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useRef } from 'react';
 import useGeolocation from 'utils/hooks/useGeolocation';
 import MARKER from 'pages/Home/static/marker';
-import defaultImg from 'assets/images/search/default-image.png';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import styles from './Map.module.scss';
 import OptionButtons from './components/OptionButtons';
@@ -28,7 +27,7 @@ export default function Map(): JSX.Element {
       if (selectedMarker.current) {
         selectedMarker.current.setIcon({
           content: MarkerHtml(
-            defaultImg,
+            '',
             selectedMarker.current.getTitle(),
             selectedMarker.current.getZIndex(),
           ),
@@ -38,7 +37,8 @@ export default function Map(): JSX.Element {
       }
 
       markerCur.setIcon({
-        content: ClickedMarkerHtml(defaultImg, item.placeName, item.index),
+        // 추후 각 마커벼로 이미지파일이 주어지면 첫번째 인자로 해당 이미지를 넘겨주도록 해야함
+        content: ClickedMarkerHtml('', item.placeName, item.index),
         size: new naver.maps.Size(50, 52),
         anchor: new naver.maps.Point(25, 26),
       });
@@ -84,7 +84,7 @@ export default function Map(): JSX.Element {
           map: mapRef.current,
           zIndex: item.index,
           icon: {
-            content: MarkerHtml(defaultImg, item.placeName, item.index),
+            content: MarkerHtml('', item.placeName, item.index),
             size: new naver.maps.Size(50, 52),
             anchor: new naver.maps.Point(25, 26),
           },