Merge pull request #486 from LEEJW1953/fe-fix-map

[Fix] 지도 초기 좌표 추가, 마커 이미지 경로 수정
boostcampwm2023 · Dec 13, 2023 · e9d265d · e9d265d
2 parents 14765fe + 2d1c65d
commit e9d265d
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/app/frontend/src/components/Map/Marker.tsx b/app/frontend/src/components/Map/Marker.tsx
@@ -1,3 +1,5 @@
+import markerGreen from '@/assets/icons/marker-green.svg';
+import markerRed from '@/assets/icons/marker-red.svg';
 import { TMap, TMapLatLng } from '@/types';
 import { reactElementToString } from '@/utils';
 
@@ -19,10 +21,11 @@ export function Marker({
   theme,
   labelText,
 }: MarkerProps) {
+  const markerIcon = theme === 'green' ? markerGreen : markerRed;
   return new Tmapv3.Marker({
     position,
     map: mapContent,
-    icon: `/src/assets/icons/marker-${theme}.svg`,
+    icon: markerIcon,
     iconSize: new Tmapv3.Size(50, 50),
     label: labelText
       ? reactElementToString(

diff --git a/app/frontend/src/components/Map/index.css.ts b/app/frontend/src/components/Map/index.css.ts
@@ -19,7 +19,7 @@ export const label = recipe({
       padding: '0.2rem',
       color: grayscaleWhite,
       borderRadius: '0.5rem',
-      top: '-6.5rem',
+      top: '-5.5rem',
       left: '50%',
       transform: 'translate(-50%)',
       whiteSpace: 'pre',

diff --git a/app/frontend/src/hooks/useMap.ts b/app/frontend/src/hooks/useMap.ts
@@ -6,6 +6,8 @@ import {
   DEFAULT_ZOOM_LEVEL,
   MAX_ZOOM_LEVEL,
   MIN_ZOOM_LEVEL,
+  INITIAL_LATITUDE,
+  INITIAL_LONGITUDE,
 } from '@/constants';
 import { TMap, TMapMarker } from '@/types';
 
@@ -21,6 +23,7 @@ export const useMap = (mapRef: React.RefObject<HTMLDivElement>) => {
     }
 
     const map = new Tmapv3.Map('map', {
+      center: new Tmapv3.LatLng(INITIAL_LATITUDE, INITIAL_LONGITUDE),
       zoom: DEFAULT_ZOOM_LEVEL,
       zoomControl: false,
     });