feat: SKSY-73 모바일 유저는 마커를 클릭했을때 인포를 확인하고, 인포를 클릭하면 네이버 검색창으로 이동한다

Author: ryu9663

package.json

@@ -49,7 +49,7 @@
     "jest": "^29.7.0",
     "jsdom": "^22.1.0",
     "lodash": "^4.17.21",
-    "msw": "latest",
+    "msw": "2.3.1",
     "prettier": "^2.7.1",
     "stylelint": "^13.8.0",
     "stylelint-config-prettier": "^8.0.2",

src/utils/handleMapMarkers.ts

@@ -2,6 +2,9 @@ import { infoWindowGenerator, mapInfoWindowGenerator } from '@/utils/infoGenerat
 import { MarkerType, PlaceType } from '@/pages/Home/types';
 import { PositionType } from './hooks/useCurrentPosition';
 import { OTHER_MARKER_IMAGE } from '@/utils/constant';
+import { detectDevice } from '@/utils/detectDevice';
+
+const device = detectDevice();
 
 export const openInfoWindow = (map: any, marker: any) => {
   const infowindow = new window.kakao.maps.InfoWindow({
@@ -16,6 +19,8 @@ export const addZoomControler = (map: any) => {
 };
 
 export const makeMarkers = (map: any, places: PlaceType[]): MarkerType[] => {
+  let openedInfoWindow: any = null;
+
   const markers = places
     .map(({ title, mapy, mapx, firstimage, contentid }) => ({
       hoverBox: mapInfoWindowGenerator(title, firstimage || '/images/no-image.png'),
@@ -38,12 +43,25 @@ export const makeMarkers = (map: any, places: PlaceType[]): MarkerType[] => {
 
       new window.kakao.maps.event.addListener(marker, 'mouseover', () => infowindow.open(map, marker));
       new window.kakao.maps.event.addListener(marker, 'mouseout', () => infowindow.close());
-      new window.kakao.maps.event.addListener(map, 'bounds_changed', () => infowindow.close());
-      new window.kakao.maps.event.addListener(marker, 'click', () =>
-        window.open(
-          `https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=${place.title}`
-        )
-      );
+      new window.kakao.maps.event.addListener(map, 'bounds_changed', () => device === 'PC' && infowindow.close());
+      new window.kakao.maps.event.addListener(marker, 'click', () => {
+        if (device === 'PC') {
+          window.open(
+            `https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=${place.title}`
+          );
+        } else {
+          // 이전에 열려있던 infowindow가 있다면 닫기
+          if (openedInfoWindow) {
+            openedInfoWindow.close();
+          }
+
+          // 현재 infowindow 열기
+          infowindow.open(map, marker);
+
+          // 열려 있는 infowindow 업데이트
+          openedInfoWindow = infowindow;
+        }
+      });
       return marker;
     });
   return markers;

src/utils/infoGenerator.ts

@@ -1,9 +1,12 @@
+import { detectDevice } from '@/utils/detectDevice';
 import styles from './infoGenerator.module.scss';
 
 export const infoWindowGenerator = (content: string) => {
   return `<div class=${styles.info_window}>${content}</div>`;
 };
 
+const device = detectDevice();
+
 export const mapInfoWindowGenerator = (title: string, img: string) => {
   return `<div class=${styles.info_wrapper}>
   <div class=${styles.info}>
@@ -12,10 +15,10 @@ export const mapInfoWindowGenerator = (title: string, img: string) => {
 
       </div>
       <div class="body">
-          <div class="img">
+          <div class="img" onclick="window.open('https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=${title}')">
               <img width='200' height='150' src=${img} alt=${title}>
          </div>
-         <span>노란색 마커를 클릭하면 네이버 검색창으로 이동합니다.</span>
+         <span>${`${device === 'PC' ? '노란색 마커를' : '사진을'} 클릭하면 네이버 검색창으로 이동합니다.`}</span>
       </div>
   </div>
 </div>`;