Merge pull request #4 from AlongTheBlue/dev

바당따라 지도 적용
AlongTheBlue · Sep 27, 2024 · 34efd85 · 34efd85
2 parents d7d797e + 94e08ea
commit 34efd85
Show file tree

Hide file tree

Showing 25 changed files with 612 additions and 86 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="src/images/icon/logo.svg" />
+    <link rel="icon" type="image/svg+xml" href="/images/icon/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>바당따라</title>
   </head>

diff --git a/src/images/course/jeju2.jpg → public/images/course/jeju2.jpg b/src/images/course/jeju2.jpg → public/images/course/jeju2.jpg
diff --git a/src/images/course/jeju3.jpg → public/images/course/jeju3.jpg b/src/images/course/jeju3.jpg → public/images/course/jeju3.jpg
diff --git a/src/images/course/jeju4.jpg → public/images/course/jeju4.jpg b/src/images/course/jeju4.jpg → public/images/course/jeju4.jpg
diff --git a/src/App.jsx b/src/App.jsx
@@ -8,6 +8,7 @@ import ItemDetail from './pages/ItemDetail.jsx';
 import AlongCourses from './pages/AlongCourses.jsx';
 import AlongBlues from './pages/AlongBlues.jsx';
 import AlongBluesPlan from './pages/AlongBluesPlan.jsx';
+import Courses from './pages/Courses.jsx';
 
 function App() {
 
@@ -19,7 +20,7 @@ function App() {
       return new Promise((resolve, reject) => {
         const kakaoAppKey = import.meta.env.VITE_KAKAO_APP_KEY;
         const script = document.createElement('script');
-        script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${kakaoAppKey}&autoload=false`;  // autoload=false 옵션 사용
+        script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${kakaoAppKey}&libraries=services&autoload=false`;  // autoload=false 옵션 사용
         script.onload = () => {
           window.kakao.maps.load(() => { // Kakao API가 완전히 로드된 후에 실행
             setIsKakaoLoaded(true);
@@ -51,6 +52,7 @@ function App() {
           <Route path="/along/courses" element={<AlongCourses />} />
           <Route path="/along/blues" element={<AlongBlues />} />
           <Route path="/along/blues/:id" element={<AlongBluesPlan />} />
+          <Route path="/courses" element={<Courses />} />
         </Routes>
       </div>
     </BrowserRouter>

diff --git a/src/components/AroundMap.jsx b/src/components/AroundMap.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import "../styles/AroundMap.css"; // 스타일은 여기에 추가합니다.
 
-function AroundMap({keyword, searchTrigger}) {
+function AroundMap({keyword, searchTrigger, selectedBlue}) {
   const [position, setPosition] = useState(null); // 현재 위치 상태 관리
   const [currCategory, setCurrCategory] = useState(''); // 현재 선택된 카테고리
 
@@ -12,12 +12,15 @@ function AroundMap({keyword, searchTrigger}) {
   const placeOverlayRef = useRef(null); // placeOverlay를 Ref로 관리
   const contentNodeRef = useRef(null); // 오버레이 콘텐츠 노드를 Ref로 관리
   const currCategoryRef = useRef(currCategory);
+
+  const overNodeRef = useRef(null);
+  const infoOverlayRef = useRef(null);
 
   const categories = [
-    { id: 'AT4', name: '관광', url: '../src/images/icon/category_6.svg' },
-    { id: 'AD5', name: '숙박', url: '../src/images/icon/category_7.svg' },
-    { id: 'FD6', name: '음식', url: '../src/images/icon/category_8.svg' },
-    { id: 'CE7', name: '카페', url: '../src/images/icon/category_9.svg' }
+    { id: 'AT4', name: '관광', url: '/images/icon/category_6.svg' },
+    { id: 'AD5', name: '숙박', url: '/images/icon/category_7.svg' },
+    { id: 'FD6', name: '음식', url: '/images/icon/category_8.svg' },
+    { id: 'CE7', name: '카페', url: '/images/icon/category_9.svg' }
   ]; // 카테고리 리스트
 
   useEffect(() => {
@@ -69,7 +72,10 @@ function AroundMap({keyword, searchTrigger}) {
 
   // 현재 위치 가져오기
   useEffect(() => {
-    if (navigator.geolocation) {
+    if(selectedBlue){
+      setPosition({lat: selectedBlue.yMap, lng: selectedBlue.xMap})
+
+    } else if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition((pos) => {
         const { latitude, longitude } = pos.coords;
         setPosition({ lat: latitude, lng: longitude });
@@ -110,6 +116,18 @@ function AroundMap({keyword, searchTrigger}) {
       });
       placeOverlayRef.current = customOverlay;
 
+      // 커스텀 오버레이 생성 및 설정
+      const infolayNode = document.createElement('div');
+      infolayNode.className = 'over-info-wrap';
+      overNodeRef.current = infolayNode; // Ref로 오버레이 콘텐츠 노드를 관리
+
+      // placeOverlay를 Ref로 관리
+      const infoOverlay = new window.kakao.maps.CustomOverlay({
+        content: infolayNode,
+        zIndex: 1,
+      });
+      infoOverlayRef.current = infoOverlay;
+
       // 줌 컨트롤 추가
       const zoomControl = new window.kakao.maps.ZoomControl();
       kakaoMap.addControl(zoomControl, window.kakao.maps.ControlPosition.RIGHT); // 줌 컨트롤러 추가
@@ -168,6 +186,15 @@ function AroundMap({keyword, searchTrigger}) {
         // 마커 클릭 이벤트 등록
         window.kakao.maps.event.addListener(marker, 'click', () => {
           displayPlaceInfo(place); // 클릭 시 오버레이를 표시
+          closeOverInfo();
+        });
+
+        window.kakao.maps.event.addListener(marker, 'mouseover', function() {
+            displayOverInfo(place);
+        });
+
+        window.kakao.maps.event.addListener(marker, 'mouseout', function() {
+            closeOverInfo();
         });
 
         return marker;
@@ -234,7 +261,9 @@ function AroundMap({keyword, searchTrigger}) {
       content += `<span title="${place.address_name}">${place.address_name}</span>`;
     }
 
-    content += `<span class="tel">${place.phone}</span></div><div class="after"></div>`;
+    content += `<span class="tel">${place.phone}</span></div>
+              <span>추가</span>
+              <div class="after"></div>`;
 
     // 오버레이 내용 업데이트 및 위치 설정
     contentNodeRef.current.innerHTML = content; // Ref로 관리되는 contentNode에 콘텐츠 설정
@@ -259,6 +288,33 @@ function AroundMap({keyword, searchTrigger}) {
     }
   };
 
+  // 마우스 올리면 오버레이 표시
+  const displayOverInfo = (place) => {
+    // 오버레이가 정의되지 않은 상태에서는 작동하지 않도록 예외 처리
+    if (!overNodeRef.current) {
+      return;
+    }
+
+    // 기존 오버레이가 남아 있을 경우 닫기
+    if (infoOverlayRef.current) {
+      infoOverlayRef.current.setMap(null); // 기존 오버레이를 숨기기
+    }
+
+    // 오버레이 콘텐츠 설정
+    let content = `<div class="over-info-text">${place.place_name}</div>`;
+
+    // 오버레이 내용 업데이트 및 위치 설정
+    overNodeRef.current.innerHTML = content; // Ref로 관리되는 contentNode에 콘텐츠 설정
+    infoOverlayRef.current.setContent(overNodeRef.current); // 오버레이 콘텐츠 업데이트
+    infoOverlayRef.current.setPosition(new window.kakao.maps.LatLng(place.y, place.x));
+    infoOverlayRef.current.setMap(mapRef.current); // 오버레이를 지도에 표시
+  };
+
+  const closeOverInfo = () => {
+    if(!infoOverlayRef) return;
+    infoOverlayRef.current.setMap(null); // 오버레이 닫기
+  }
+
   return (
     <div className="map-container">
       <div id="map" className='around-map'></div>