Merge pull request #90 from 2025-All4Land-RideOn/test

test

Author: shinubin

src/pages/MapView.jsx

@@ -28,6 +28,8 @@ import { useGeoServerLayers } from "../hooks/useGeoServerLayers";
 import { useElevationPanel } from "../hooks/useElevationPanel";
 import WeatherLayer from "../components/WeatherLayer";
 import ElevationPanel from "../components/ElevationPanel";
+// 팝업 컴포넌트 추가
+import MarkerPopup from '../components/MarkerPopup';
 
 const MapView = ({
   activeTab,
@@ -94,6 +96,9 @@ const MapView = ({
     clearSelectedRouteMarkerRef,
     previewRoute,
     highlightStep,
+    // ✨ 추가된 부분: 팝업 관련 상태와 함수
+    selectedFacility,
+    closeFacilityPopup,
   } = useRouting(mapInstance);
 
   // 고도 패널 훅
@@ -415,6 +420,91 @@ const MapView = ({
         </div>
       )}
 
+      {/* 경로 선 편의시설 추가 */}
+      {selectedFacility && (
+        <div
+          style={{
+            position: 'absolute',
+            top: '20px',
+            right: '20px',
+            zIndex: 1000,
+            backgroundColor: 'white',
+            padding: '15px',
+            borderRadius: '8px',
+            boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
+            minWidth: '220px',
+            fontFamily: "'Pretendard', sans-serif"
+          }}
+        >
+          <button
+            onClick={closeFacilityPopup}
+            style={{
+              float: 'right',
+              border: 'none',
+              background: 'none',
+              cursor: 'pointer',
+              fontSize: '18px',
+              padding: '0 5px'
+            }}
+          >
+            ✕
+          </button>
+          
+          {/* 시설 이름 */}
+          <h3 style={{ marginTop: 0, marginBottom: '10px', fontSize: '16px', color: '#333' }}>
+            {selectedFacility.name}
+          </h3>
+          
+          {/* 주소 */}
+          <p style={{ margin: '8px 0', fontSize: '13px', color: '#666', lineHeight: '1.4' }}>
+            <strong>주소:</strong><br/>
+            {selectedFacility.address}
+          </p>
+
+          <hr style={{ border: 'none', borderTop: '1px solid #eee', margin: '10px 0' }} />
+
+          {/* 시설 타입별 상세 정보 */}
+          {selectedFacility.type === 'station' && (
+            <>
+              <p style={{ margin: '5px 0', fontSize: '13px' }}>
+                <span style={{color:'#4CAF50'}}>🚲</span> <strong>자전거 수:</strong> {selectedFacility.bikeCount ?? 0}대
+              </p>
+              <p style={{ margin: '5px 0', fontSize: '13px' }}>
+                <strong>운영시간:</strong> {selectedFacility.operationStart ? `${selectedFacility.operationStart} ~ ${selectedFacility.operationEnd}` : '정보 없음'}
+              </p>
+            </>
+          )}
+
+          {selectedFacility.type === 'toilet' && (
+            <>
+              <p style={{ margin: '5px 0', fontSize: '13px' }}>
+                <span style={{color:'#2196F3'}}>🚻</span> <strong>운영시간:</strong> {selectedFacility.openHours || '정보 없음'}
+              </p>
+              <p style={{ margin: '5px 0', fontSize: '13px' }}>
+                <strong>유형:</strong> {selectedFacility.openType || '정보 없음'}
+              </p>
+            </>
+          )}
+
+          {selectedFacility.type === 'fountain' && (
+            <p style={{ margin: '5px 0', fontSize: '13px' }}>
+              <span style={{color:'#03A9F4'}}>💧</span> <strong>운영시간:</strong> {selectedFacility.operationHours || '상시'}
+            </p>
+          )}
+
+          {selectedFacility.type === 'repair' && (
+            <>
+              <p style={{ margin: '5px 0', fontSize: '13px' }}>
+                <span style={{color:'#FF9800'}}>🔧</span> <strong>시설 유형:</strong> {selectedFacility.facilityType === 'AIR_PUMP' ? '공기주입기' : '수리센터'}
+              </p>
+              <p style={{ margin: '5px 0', fontSize: '13px' }}>
+                <strong>운영시간:</strong> {selectedFacility.operationHours || '정보 없음'}
+              </p>
+            </>
+          )}
+        </div>
+      )}
+
       {/* 고도 패널 차트 - 경로가 있을 때만 표시 */}
       {isRoutingMode && routeInfo && (
         <ElevationPanel
@@ -430,4 +520,4 @@ const MapView = ({
   );
 };
 
-export default MapView;
+export default MapView;