Skip to content

Commit

Permalink
Merge pull request #42 from Spaces-Place/dusqo
Browse files Browse the repository at this point in the history 
mappage 수정 및 booking name > user_name으로 수정
  • Loading branch information
@KangYeonbae
KangYeonbae authored Dec 4, 2024
2 parents fe5e014 + 8aa04a7 commit 5580413
Show file tree
Hide file tree
Showing 4 changed files with 369 additions and 58 deletions.
4 changes: 2 additions & 2 deletions src/pages/booking.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,15 +60,15 @@ export default function BookingForm() {
? {
// 일단위 예약
date: bookingData.date,
name: bookingData.name,
user_name: bookingData.name,
phone: bookingData.phone,
email: bookingData.email
}
: {
// 시간단위 예약
start_time: bookingData.start_time,
end_time: bookingData.end_time,
name: bookingData.name,
user_name: bookingData.name,
phone: bookingData.phone,
email: bookingData.email
};
Expand Down
208 changes: 152 additions & 56 deletions src/pages/myMapPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,82 @@
import { useEffect, useState } from "react"
import { Map, MapMarker, MapTypeControl, ZoomControl, MapTypeId } from "react-kakao-maps-sdk"
import { getNearbySpaces } from '../utils/spaceService';
import "../styles/mymappage.css";

export default function MyMapPage(){
// center와 position을 하나의 state로 통합
export default function MyMapPage() {
const [position, setPosition] = useState({
lat: '',
lng:''
})
const [latitude, setLatitude] = useState(null);
const [longitude, setLongitude] = useState(null);
lng: ''
});
const [places, setPlaces] = useState([]);
const [userAddress, setUserAddress] = useState("");
const [traffic, setTraffic] = useState(false);
const [mapTypeId, setMapTypeId] = useState();
const [selectedPlace, setSelectedPlace] = useState(null);
const [radius, setRadius] = useState(1.0);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

const fetchNearbyPlaces = async (lat, lng) => {
try {
setLoading(true);
setError(null);
const data = await getNearbySpaces(lat, lng, radius);
setPlaces(data);
} catch (error) {
console.error('Error fetching nearby places:', error);
setError(error.message);
setPlaces([]);
} finally {
setLoading(false);
}
};

// 현재 위치를 가져오는 함수
const getCurrentLocation = () => {
navigator.geolocation.getCurrentPosition((pos) => {
const currentPos = {
lat: pos.coords.latitude,
lng: pos.coords.longitude
};
// 지도 중심과 마커 위치를 동시에 업데이트
setPosition(currentPos);
setLatitude(currentPos.lat);
setLongitude(currentPos.lng);

// 현재 위치의 주소 가져오기
const geocoder = new window.kakao.maps.services.Geocoder();
geocoder.coord2Address(currentPos.lng, currentPos.lat, function(results, status) {
if (status === window.kakao.maps.services.Status.OK) {
const addressName = results[0].address.address_name;
setUserAddress(addressName);
}
});
});
}
navigator.geolocation.getCurrentPosition(
(pos) => {
const currentPos = {
lat: pos.coords.latitude,
lng: pos.coords.longitude
};
setPosition(currentPos);

const geocoder = new window.kakao.maps.services.Geocoder();
geocoder.coord2Address(currentPos.lng, currentPos.lat, function(results, status) {
if (status === window.kakao.maps.services.Status.OK) {
const addressName = results[0].address.address_name;
setUserAddress(addressName);
}
});

fetchNearbyPlaces(currentPos.lat, currentPos.lng);
},
(error) => {
console.error('Geolocation error:', error);
setError('위치 정보를 가져올 수 없습니다.');
}
);
};

// 페이지로드시 1회만 내위치 호출
useEffect(() => {
getCurrentLocation();
}, []);

const [traffic, setTraffic] = useState(false);
const [mapTypeId, setMapTypeId] = useState();

// 교통정보 토글 함수
const toggleTraffic = () => {
setTraffic(!traffic);
setMapTypeId(traffic ? null : "TRAFFIC");
};

// 마커 드래그 핸들러
const handleMarkerDragEnd = (marker) => {
const markerPosition = marker.getPosition();
const newLatitude = markerPosition.getLat();
const newLongitude = markerPosition.getLng();

// 마커와 지도 중심 위치를 동시에 업데이트
const newPosition = {
lat: newLatitude,
lng: newLongitude
};
setPosition(newPosition);
setLatitude(newLatitude);
setLongitude(newLongitude);

const geocoder = new window.kakao.maps.services.Geocoder();
geocoder.coord2Address(newLongitude, newLatitude, function (results, status) {
Expand All @@ -70,29 +85,110 @@ export default function MyMapPage(){
setUserAddress(addressName);
}
});

fetchNearbyPlaces(newLatitude, newLongitude);
};

return(
<>
<div>
return (
<div className="mymap-container">
<Map
id="map"
center={position} // center를 position으로 통일
level={4}
style={{width:"100%", height:"90vh"}}>
<MapMarker
draggable={true}
position={position}
onDragEnd={(marker) => handleMarkerDragEnd(marker)}
/>
<MapTypeControl position={"TOPRIGHT"} />
<ZoomControl position={"RIGHT"} />
{mapTypeId && <MapTypeId type={mapTypeId}/>}
center={position}
level={4}
style={{width:"100%", height:"100%"}}
>
<MapMarker
position={position}
draggable={true}
onDragEnd={(marker) => handleMarkerDragEnd(marker)}
image={{
src: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png",
size: { width: 64, height: 69 },
}}
/>

{places.map((place, index) => (
<MapMarker
key={index}
position={{ lat: place.latitude, lng: place.longitude }}
onClick={() => setSelectedPlace(place)}
/>
))}

<MapTypeControl position="TOPRIGHT" />
<ZoomControl position="RIGHT" />
{mapTypeId && <MapTypeId type={mapTypeId} />}
</Map>
<button onClick={toggleTraffic}>교통정보</button>
<button onClick={getCurrentLocation}>내위치</button>
{userAddress && <p>현재 주소: {userAddress}</p>}

<div className="mymap-controls">
<div className="mymap-controls-row">
<button
className="mymap-button mymap-button-blue"
onClick={toggleTraffic}
>
교통정보
</button>
<button
className="mymap-button mymap-button-green"
onClick={getCurrentLocation}
>
내 위치
</button>
</div>

<div className="mymap-radius-container">
<span className="mymap-radius-label">반경:</span>
{[1.0, 3.0, 5.0].map((r) => (
<button
key={r}
onClick={() => {
setRadius(r);
if (position.lat && position.lng) {
fetchNearbyPlaces(position.lat, position.lng);
}
}}
className={`mymap-radius-button ${
radius === r
? 'mymap-radius-button-active'
: 'mymap-radius-button-inactive'
}`}
>
{r}km
</button>
))}
</div>
</div>

{userAddress && (
<div className="mymap-address">
<p>현재 주소: {userAddress}</p>
</div>
)}

{loading && (
<div className="mymap-loading">
데이터를 불러오는 중...
</div>
)}

{error && (
<div className="mymap-error">
{error}
</div>
)}

{selectedPlace && (
<div className="mymap-info">
<h3 className="mymap-info-title">{selectedPlace.space_name}</h3>
<p className="mymap-info-text">{selectedPlace.address}</p>
<p className="mymap-info-text">{selectedPlace.description}</p>
<button
onClick={() => setSelectedPlace(null)}
className="mymap-info-close"
>
✕
</button>
</div>
)}
</div>
</>
)
);
}
Loading

0 comments on commit 5580413

Please sign in to comment.