diff --git a/src/main/java/com/study/reactTest/StringtoArray.java b/src/main/java/com/study/reactTest/StringtoArray.java index 7e84ea1..a930c38 100644 --- a/src/main/java/com/study/reactTest/StringtoArray.java +++ b/src/main/java/com/study/reactTest/StringtoArray.java @@ -5,6 +5,20 @@ public static String[] stringToArray(String foodName){ String[] arr = foodName.split(","); for (String item : arr) { System.out.println(item); +<<<<<<< HEAD +======= + } + return arr; + } + + public static String[] stringToArray(){ // 긴 스트링을 스페이스 바 2칸 기준으로 나눠서 배열에 저장 + //String food = "Gamjatang Chicken Gomtan"; + //String foodString = "불고기 김치 잡채 된장찌개 삼겹살 짱통"; + String foodString = StaticData.FoodList; + String[] arr = foodString.split(" "); // + for (String item : arr) { + System.out.println(item); +>>>>>>> 0bc70600ad971915cfe9fed51c8bcd77556398fe } return arr; } diff --git a/src/main/java/com/study/reactTest/controller/FoodController.java b/src/main/java/com/study/reactTest/controller/FoodController.java index e87eeff..62fd4ed 100644 --- a/src/main/java/com/study/reactTest/controller/FoodController.java +++ b/src/main/java/com/study/reactTest/controller/FoodController.java @@ -24,6 +24,7 @@ public class FoodController { private final FoodService foodService; // 이 필드를 매개변수로하는 컨트롤러 생성자를 만들어줌 @PostMapping("/compare-food") +<<<<<<< HEAD public List compareFood(@RequestBody Map request) { String foodName=request.get("foodName"); System.out.println(foodName); @@ -38,6 +39,10 @@ public List compareFood(@RequestBody Map request) { array=StringtoArray.stringToArray(foodName); // 배열 만들어서 안에 음식이름 차례대로 삽입 } +======= + public List compareFood(@RequestBody String foodName) { + String[] array = StringtoArray.stringToArray(foodName); // 배열 만들어서 안에 음식이름 차례대로 삽입 +>>>>>>> 0bc70600ad971915cfe9fed51c8bcd77556398fe List foodDtoList = foodService.searchFood(array); // 리스트 만들어서 서비스 이용해서 해당 음식 데이터 가져오기 for (FoodDTO foodDTO : foodDtoList) { diff --git a/src/main/ketchup/public/index.html b/src/main/ketchup/public/index.html index 3151222..fa25a43 100644 --- a/src/main/ketchup/public/index.html +++ b/src/main/ketchup/public/index.html @@ -8,6 +8,11 @@ async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuISEVEDwkElLoYRbG2EYmbxvvrzJ-W3g&libraries=places,geometry"> Ketchup + diff --git a/src/main/ketchup/src/component/Common/BottomNav.js b/src/main/ketchup/src/component/Common/BottomNav.js index e4864f1..dcbf1be 100644 --- a/src/main/ketchup/src/component/Common/BottomNav.js +++ b/src/main/ketchup/src/component/Common/BottomNav.js @@ -9,7 +9,6 @@ const Wrapper = styled.div` bottom: 0; left: 0; right: 0; - height: 55px; border-top: 1px solid #dee2e6; z-index: 3; `; @@ -27,21 +26,21 @@ const BottomNav = () => { } + icon={} component={Link} // Link로 변경 to="/main" // 링크의 목적지 설정 /> } + icon={} component={Link} // Link로 변경 to="/main/picture" /> } + icon={} component={Link} // Link로 변경 to="/googleMap" // 링크의 목적지 설정 /> diff --git a/src/main/ketchup/src/component/ResInfo.js b/src/main/ketchup/src/component/ResInfo.js index b56ab75..61d65fe 100644 --- a/src/main/ketchup/src/component/ResInfo.js +++ b/src/main/ketchup/src/component/ResInfo.js @@ -93,8 +93,42 @@ const ResInfo = () => { const name = params.get("name"); //const img = params.get("img"); // 단일 이미지 URL로 변경 const rating = params.get("star"); +<<<<<<< HEAD const location = params.get("location"); //const user_ratings_total = null; +======= + const placeLocation = params.get("location"); + + const key = `${name}-${placeLocation}`; + + useEffect(() => { + const checkAndSaveData = async () => { + const exists = await checkIfDataExists(key); + if (exists) { + const data = await getDataFromFirebase(key); + setMenu(data.menu); // 데이터가 존재하면 menu 상태 업데이트 + + // menu 문자열을 배열로 변환하고 콘솔에 출력 + if (data.menu) { + const menuArray = data.menu.split(","); + const response = await axios.post('http://localhost:8080/compare-food', { + foodName: menu, // Set an empty string or any default value as needed + }); + console.log(response.data); + menuArray.forEach((item, index) => { + console.log(`Menu item ${index + 1}: ${item}`); + }); + } + } else { + saveToFirebase(name, placeLocation, menu); + } + }; + + if (name && placeLocation) { + checkAndSaveData(); + } + }, [name, placeLocation, key, menu]); +>>>>>>> 0bc70600ad971915cfe9fed51c8bcd77556398fe const handleSoundImageClick = async () => { setSoundImageSrc( diff --git a/src/main/ketchup/src/component/RestructureItem.js b/src/main/ketchup/src/component/RestructureItem.js index e1d01c2..97e18a2 100644 --- a/src/main/ketchup/src/component/RestructureItem.js +++ b/src/main/ketchup/src/component/RestructureItem.js @@ -1,4 +1,3 @@ -//메뉴판 재구성 아이템 import { Link } from "react-router-dom"; import styled from "styled-components"; import { useState } from "react"; @@ -14,7 +13,7 @@ const Box = styled.div` padding: 20px; max-width: 300px; transition: transform 0.2s; - + width: 300px; /* 고정 너비 설정 */ display: flex; flex-direction: column; align-items: center; @@ -60,12 +59,6 @@ const SoundImage = styled.img` width: 30px; cursor: pointer; `; -const CollapsibleDescription = styled.div` - max-height: ${({ isOpen }) => (isOpen ? '1000px' : '100px')}; - overflow: hidden; - transition: max-height 0.3s ease-in-out; - -`; const Description = styled.p` font-size: 1rem; @@ -88,14 +81,27 @@ const Icon = styled.span` margin-right: 5px; font-size: 2rem; color: #c35050; // 아이콘의 색상 - `; -const MinusIcon = styled(MdRemove)``; const PlusIcon = styled(MdAdd)``; +const MinusIcon = styled(MdRemove)``; + +const AccordionContent = styled.div` + max-height: ${({ isOpen }) => (isOpen ? "500px" : "0")}; + overflow: hidden; + transition: max-height 0.3s ease-out; + p { + font-size: 1.0rem; /* 글자 크기 더 작게 설정 */ + color: #6d6b6b; + margin: 0; + line-height: 1.5; + } +`; const RestructureItem = ({ food }) => { const [soundImageSrc, setSoundImageSrc] = useState("https://img.icons8.com/?size=100&id=2795&format=png&color=000000"); + const [isOpen, setIsOpen] = useState(false); + const handleSoundImageClick = async () => { setSoundImageSrc("https://img.icons8.com/?size=100&id=9982&format=png&color=000000"); // 음향 이미지 try { @@ -105,9 +111,10 @@ const RestructureItem = ({ food }) => { setSoundImageSrc("https://img.icons8.com/?size=100&id=2795&format=png&color=000000"); } }; + const { id = 1, - foodimage = "", + base64Image = "", foodcalcium = 0, foodcalorie = 0, foodcarbohydrate = 0, @@ -123,44 +130,47 @@ const RestructureItem = ({ food }) => { foodsugars = 0 } = food || {}; - console.log(food); - - // 각 음식 설명의 접기/펼치기 상태를 관리하는 useState 훅 사용. - const [expanded, setExpanded] = useState({}); - - const toggleDescription = (id) => { - setExpanded((prevExpanded) => ({ - ...prevExpanded, - [id]: !prevExpanded[id], - })); - }; - return ( + {/* 음식 이미지 */} - {foodname} + {foodname} + + {/* 음식 이름과 소리 이미지 */} {foodname} - {/* CollapsibleDescription을 사용하여 설명을 감싸고, 접기/펼치기 버튼을 추가합니다. */} - - toggleDescription(id)}>{foodprofile} - - {/* 접기/펼치기 버튼을 클릭할 때 해당 음식 설명의 상태를 변경합니다. */} - - toggleDescription(id)}> - {expanded[id] ? - : - - } + + {/* 음식 설명 */} + {!isOpen && {foodprofile}} + + {/* 아코디언 콘텐츠 */} + {isOpen && ( + +

calorie: {foodcalorie} kcal

+

protein: {foodprotein} g

+

fat: {foodfat} g

+

carbohydrate: {foodcarbohydrate} g

+

sugars: {foodsugars} g

+

calcium: {foodcalcium} mg

+

iron: {foodiron} mg

+

potassium: {foodpotassium} mg

+

salt: {foodsalt} g

+ + )} + + {/* + 버튼 */} + setIsOpen(!isOpen)}> + {isOpen ? : } + + ); }; - -export default RestructureItem; \ No newline at end of file +export default RestructureItem; diff --git a/src/main/ketchup/src/component/TTS.js b/src/main/ketchup/src/component/TTS.js index 6456843..e422287 100644 --- a/src/main/ketchup/src/component/TTS.js +++ b/src/main/ketchup/src/component/TTS.js @@ -43,7 +43,7 @@ export const getSpeech = (text) => { if (voice) { utterThis.voice = voice; } else { - alert("Voice list is empty"); + //alert("Voice list is empty"); return; } diff --git a/src/main/ketchup/src/pages/GoogleMap.js b/src/main/ketchup/src/pages/GoogleMap.js index 5afb20a..e62ad9d 100644 --- a/src/main/ketchup/src/pages/GoogleMap.js +++ b/src/main/ketchup/src/pages/GoogleMap.js @@ -1,19 +1,188 @@ -import styled from "styled-components"; -import React, { useEffect, useState } from "react"; -import '../style/ggmapApi.css'; - -const Wrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; +import styled, { css } from "styled-components"; +import React, { useEffect, useRef, useState } from "react"; +import '../style/ggmapApi.css'; +import { Link } from "react-router-dom"; + +// Styled components +const Wrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; // Full height of the viewport. +`; + +const SearchForm = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 8vh; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 그림자 추가 */ + margin-bottom: 3px; + z-index: 1000; + +`; + +const InputKeyword = styled.input` + width: 60%; + padding: 10px; /* 입력창 패딩 추가 */ + font-size: 16px; /* 폰트 크기 조정 */ + border: 1px solid #ccc; /* 테두리 추가 */ + border-radius: 5px; /* 테두리를 둥글게 만듦 */ + margin-right: 10px; /* 오른쪽 여백 추가 */ +`; + +const ButtonKeyword = styled.button` + padding: 10px 20px; /* 버튼 내부 여백 추가 */ + font-size: 16px; /* 폰트 크기 조정 */ + background-color: #c35050; /* 배경색 변경 */ + color: #fff; /* 텍스트 색상 변경 */ + border: none; /* 테두리 제거 */ + border-radius: 5px; /* 테두리를 둥글게 만듦 */ + cursor: pointer; +`; + +const MapContainer = styled.div` + top: 8vh; /* SearchForm의 높이만큼 밀어내기 */ + width: 100%; + height: ${props => props.expanded ? '56vh' : '86vh'}; + position: fixed; /* 고정 위치 */ + overflow: hidden; +`; + +const CategoryButtonContainer = styled.div` // Container for buttons within the info container. + position: absolute; + top: 10px; + right: 10px; + display: flex; + flex-direction: column; + gap: 5px; + // 추가된 스타일 + button { + background-color: white; /* 배경색 변경 */ + color: #c35050; /* 텍스트 색상 변경 */ + border: 1px solid black; /* 얇은 테두리 추가 */ + + border-radius: 5px; /* 테두리를 둥글게 만듦 */ + padding: 3px 5px; /* 버튼 내부 여백 추가 */ + font-size: 15px; /* 폰트 크기 조정 */ + font-weight: bold; /* 텍스트 굵게 설정 */ + cursor: pointer; + } + button:active { + background-color: #dc143c; /* 클릭 상태일 때 배경색 변경 */ + } +`; + +const PositionButtonContainer = styled.div` + position: absolute; + bottom: 15px; + right: 10px; + display: flex; + flex-direction: column; + gap: 5px; +`; + +const RoundButton = styled.button` + color: #fff; /* 텍스트 색상 변경 */ + border: none; /* 테두리 제거 */ + border-radius: 50%; /* 테두리를 원형으로 만듦 */ + padding: 10px; /* 버튼 내부 여백 추가 */ + font-size: 16px; /* 폰트 크기 조정 */ + cursor: pointer; + width: 40px; /* 원의 지름 설정 */ + height: 40px; /* 원의 지름 설정 */ + display: flex; + align-items: center; + justify-content: center; + + // 조건부 스타일 적용 + background-color: ${(props) => (props.id === 'kmu' ? '#6c94fb' : '#c35050')}; + +`; + +const InfoContainer = styled.div` + position: fixed; + bottom: 0; + left: 0; + width: 100%; + overflow-y: auto; + background: #fff; + z-index: 1000; + transition: height 0.5s ease; + border-top: 1px solid #dee2e6; /* 얇은 밑줄 추가 */ + + ${props => props.expanded && css` + height: 36vh; + `} +`; + +const ButtonContainer = styled.div` // Container for buttons within the info container. + position: absolute; + top: 15px; + right: 15px; + display: flex; + flex-direction: column; + gap: 10px; + + // 추가된 스타일 + button { + background-color: #c35050; /* 배경색 변경 */ + color: #fff; /* 텍스트 색상 변경 */ + border: none; /* 테두리 제거 */ + border-radius: 5px; /* 테두리를 둥글게 만듦 */ + padding: 5px 10px; /* 버튼 내부 여백 추가 */ + font-size: 16px; /* 폰트 크기 조정 */ + cursor: pointer; + } +`; + +const DetailContainer = styled.div` + background-color: #ffffff; /* 배경색 흰색 */ + padding: 10px; + padding-left: 20px; + border-radius: 10px; `; +const StyledLink = styled(Link)` + color: #c35050; + text-decoration: underline #c35050; +`; + +const DetailTitle = styled.h3` + font-size: 20px; +`; + +const DetailInfo = styled.div` + color: #666666; /* 글자색 회색 */ + font-size: 15px; + margin-bottom: 5px; +`; + +// GoogleMap export default function GoogleMap() { - const [markers, setMarkers] = useState([]); - const [infowindow, setInfowindow] = useState(null); + // State variables declaration + // 상태 변수 선언 + const [markers, setMarkers] = useState([]); // Markers array state + const [selectedPlaceDetails, setSelectedPlaceDetails] = useState(null); // Selected place details state + const [map, setMap] = useState(null); // Map state + + const [isExpanded, setIsExpanded] = useState(false); // Expanded state + const [highlightedMarker, setHighlightedMarker] = useState(null); // Highlighted marker state + const [searchKeyword, setSearchKeyword] = useState(''); // Search keyword state + + // 유저 위치 정보를 저장하는 변수 추가 ( 현재 위치 vs 계명대 ) + const [userLocation, setUserLocation] = useState(null); + + + const markersRef = useRef([]); // 기존 마커 제거를 위해 저장하는 마커 + + // [#1] 사용자 위치 기반 지도 초기화 useEffect(() => { const container = document.getElementById('map'); @@ -22,157 +191,308 @@ export default function GoogleMap() { const lat = position.coords.latitude; const lng = position.coords.longitude; + setUserLocation({ latitude: lat, longitude: lng }); const options = { center: { lat: lat, lng: lng }, - zoom: 15 + zoom: 15, + disableDefaultUI: true // 기본 UI(확대/축소 컨트롤 등) 비활성화 }; - const map = new window.google.maps.Map(container, options); + const mapInstance = new window.google.maps.Map(container, options); + setMap(mapInstance); - const userMarker = new window.google.maps.Marker({ - position: { lat: lat, lng: lng }, + const currentLocation = new window.google.maps.LatLng(lat, lng); + const marker = new window.google.maps.Marker({ + position: currentLocation, + map: mapInstance, + title: "Current Location", + icon: { + url: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png', + scaledSize: new window.google.maps.Size(40, 40) // 아이콘 크기를 64x64로 설정 + } + }); + }); + } else { + console.log("Geolocation is not supported by this browser."); + } + }, []); + + // [#2] 지도 중심 위치 설정 ( 사용자 vs 계명대 ) + const handleRoundButtonClick = (locationType) => { + if (locationType === "me") { + // Me 버튼 클릭 시 유저의 현재 위치를 가져와 저장 + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition(function (position) { + const lat = position.coords.latitude; + const lng = position.coords.longitude; + setUserLocation({ latitude: lat, longitude: lng }); + + // 사용자의 현재 위치로 지도 이동 + if (map) { + const currentLocation = new window.google.maps.LatLng(lat, lng); + map.panTo(currentLocation); + } + }); + } else { + console.log("Geolocation is not supported by this browser."); + } + } + else if (locationType === "kmu") { + // KMU 위치를 저장하고 직접 좌표를 사용하여 지도 이동 및 마커 생성 + const kmuLat = 35.8558462; + const kmuLng = 128.4889252; + setUserLocation({ + latitude: kmuLat, + longitude: kmuLng + }); + + // KMU 위치로 지도 이동 + if (map) { + const kmuLocation = new window.google.maps.LatLng(kmuLat, kmuLng); + map.panTo(kmuLocation); + + // KMU 위치에 마커 생성 + const marker = new window.google.maps.Marker({ + position: kmuLocation, map: map, - title: "Your current location" + title: "KMU", + icon: { + url: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png', + scaledSize: new window.google.maps.Size(40, 40) // 아이콘 크기를 40x40로 설정 + } }); + } + } - const placesService = new window.google.maps.places.PlacesService(map); - const searchButton = document.getElementById('searchButton'); - if (searchButton) { - searchButton.addEventListener('click', searchPlaces); - } + }; + + // [#3] 마커 설정 + const fetchPlaceDetails = (placeId, marker) => { + const service = new window.google.maps.places.PlacesService(map); + service.getDetails({ placeId }, (place, status) => { + if (status === window.google.maps.places.PlacesServiceStatus.OK) { + setSelectedPlaceDetails(place); + setIsExpanded(true); + + // 이 부분에서 마커의 아이콘을 변경합니다. + // 마커의 아이콘을 변경하고 크기를 36x36으로 설정합니다. + marker.setIcon({ + url: 'http://maps.google.com/mapfiles/ms/icons/ltblue-dot.png', + scaledSize: new window.google.maps.Size(36, 36) + }); - function searchPlaces() { - const keyword = document.getElementById('keyword').value.trim(); - if (!keyword) { - alert('Please enter a keyword!'); - return; + //console.log(marker); + //console.log(highlightedMarker); + + // 이전 상태를 활용하여 highlight 마커를 업데이트합니다. + // React의 상태 업데이트 함수는 이전 상태를 활용하는 함수형 업데이트를 사용 + setHighlightedMarker(prevMarker => { + if (prevMarker && prevMarker !== marker) { + prevMarker.setIcon({ + url: 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png', + scaledSize: new window.google.maps.Size(36, 36) + }); } + return marker; + }); - placesService.textSearch({ - query: keyword, - location: { lat: lat, lng: lng }, - radius: 3000, - type: 'restaurant' - }, placesSearchCallback); - } + // 현재 선택된 마커를 highlightedMarker에 저장. + setHighlightedMarker(marker); + // 지도 중앙 보기 + map.panTo(marker.getPosition()); + } + }); + }; + + // [#4] 카테고리별 검색 버튼 클릭 + const handleButtonClick = (keyword) => { + if (!userLocation) { + console.error('Current location not available.'); + return; + } + + //console.log(userLocation); + const location = new window.google.maps.LatLng(userLocation.latitude, userLocation.longitude); + window.searchPlaces(keyword, location); + map.panTo(location); + + // 이전에 생성된 마커들 제거 + markersRef.current.forEach(marker => { + marker.setMap(null); + }); + + }; + + // [#5] 키워드 검색 버튼 클릭 + const handleSearch = (event) => { + event.preventDefault(); + // console.log("handleSearch 함수가 호출되었습니다."); + const keyword = searchKeyword; + setIsExpanded(false); // Hide detail info when starting new search + + if (userLocation && map) { + const location = new window.google.maps.LatLng(userLocation.latitude, userLocation.longitude); + window.searchPlaces(keyword, location); + map.panTo(location); // + } + + // 이전에 생성된 마커들 제거 + markersRef.current.forEach(marker => { + marker.setMap(null); + }); + }; + + + + // 검색 기능과 지도 초기화를 위한 효과 훅 + useEffect(() => { + if (!map) return; + + const searchPlaces = (keyword, location) => { + if (!keyword || !location) { + return; + } + + setIsExpanded(false); // Hide info container when searching + + const request = { + query: keyword, + location: location, + radius: 3000, + }; + + const placesService = new window.google.maps.places.PlacesService(map); + placesService.textSearch(request, (results, status) => { + if (status === window.google.maps.places.PlacesServiceStatus.OK) { + const newMarkers = []; + + results.forEach((place, index) => { + const distance = window.google.maps.geometry.spherical.computeDistanceBetween( + location, + place.geometry.location + ); - function placesSearchCallback(results, status) { - if (status === window.google.maps.places.PlacesServiceStatus.OK) { - results.forEach(place => { + + if (distance <= 5000) { const marker = new window.google.maps.Marker({ position: place.geometry.location, map: map, - title: place.name + title: place.name, + icon: { + url: 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png', + scaledSize: new window.google.maps.Size(36, 36) // 아이콘 크기를 48x48로 설정 + } }); marker.addListener('click', function () { - if (infowindow) infowindow.close(); - const newInfowindow = new window.google.maps.InfoWindow({ content: place.name }); - setInfowindow(newInfowindow); - newInfowindow.open(map, this); + fetchPlaceDetails(place.place_id, marker); }); - setMarkers(prevMarkers => [...prevMarkers, marker]); - }); - - renderPlaceList(results); - } else { - alert('No results found!'); - } - } - - function renderPlaceList(places) { - const placesList = document.getElementById('placesList'); - placesList.innerHTML = ''; - places.forEach((place, index) => { - const listItem = document.createElement('li'); - listItem.className = 'item'; - - const markerImg = document.createElement('img'); - if (place.photos && place.photos.length > 0) { - markerImg.src = place.photos[0].getUrl({ maxWidth: 100, maxHeight: 100 }); - } else { - markerImg.src = 'placeholder.jpg'; - } - markerImg.alt = 'No image'; - markerImg.className = 'marker-img'; - listItem.appendChild(markerImg); - - const info = document.createElement('div'); - info.className = 'info'; - - const title = document.createElement('h5'); - title.textContent = place.name; - info.appendChild(title); - - const address = document.createElement('p'); - address.textContent = place.formatted_address; - address.className = 'gray'; - info.appendChild(address); - - if (place.geometry && place.geometry.location) { - const distance = document.createElement('p'); - distance.textContent = `Distance: ${place.geometry.location.distance}`; // Lấy thông tin khoảng cách - distance.className = 'gray'; - info.appendChild(distance); + newMarkers.push(marker); } - - if (place.rating) { - const rating = document.createElement('p'); - rating.textContent = `Rating: ${place.rating}`; - rating.className = 'gray'; - info.appendChild(rating); - } - - if (place.user_ratings_total) { - const reviews = document.createElement('p'); - reviews.textContent = `Reviews: ${place.user_ratings_total}`; - reviews.className = 'gray'; - info.appendChild(reviews); - } - - listItem.appendChild(info); - placesList.appendChild(listItem); - - listItem.addEventListener('click', () => { - if (infowindow) infowindow.close(); - const newInfowindow = new window.google.maps.InfoWindow({ content: place.name }); - setInfowindow(newInfowindow); - newInfowindow.open(map); - }); }); + markersRef.current = newMarkers; + setMarkers(newMarkers); + } else { + alert('No results found!'); } - - }); - } else { - console.log("Geolocation is not supported by this browser."); + }; + + window.searchPlaces = searchPlaces; + }, [map]); + + + // 마커 클릭시 생성되는 식당 정보 창 닫기 + const handleCloseInfo = () => { + setSelectedPlaceDetails(null); + setIsExpanded(false); + + // 마커의 아이콘을 파란색으로 변경 + if (highlightedMarker) { + highlightedMarker.setIcon({ + url: 'http://maps.google.com/mapfiles/ms/icons/ltblue-dot.png', + scaledSize: new window.google.maps.Size(36, 36) + }); } + setMarkers(highlightedMarker); - }, [infowindow]); + }; - function handleSubmit(event) { - event.preventDefault(); - } + + const handleContainerClick = () => { + setIsExpanded(!isExpanded); // 토글링 + }; return ( -
-
- -
+ + + + setSearchKeyword(e.target.value)} + placeholder="Enter keyword..." + size="15" + /> + Search + {/* 작은 버튼 추가 */} + + + + +
+ + + + + + + + + handleRoundButtonClick("kmu")}>KMU + handleRoundButtonClick("me")}>Me + + + + + {isExpanded && ( + + + + + {selectedPlaceDetails ? ( + + + + {selectedPlaceDetails.name} + + + + Address: {selectedPlaceDetails.formatted_address.replace("대한민국", "")} + + Phone: {selectedPlaceDetails.formatted_phone_number || 'None'} + + Opening Hours: + {selectedPlaceDetails.opening_hours && selectedPlaceDetails.opening_hours.weekday_text ? ( +
    + {selectedPlaceDetails.opening_hours.weekday_text.map((hours, index) => ( +
  • {hours}
    • + ))} +
+ ) : ( + 'None' + )} + + + ) : null} + + )} + + ); -} \ No newline at end of file +}