Skip to content

Commit

Permalink
✨ Feat: 위치 선택으로 주소 입력 모달 기능 구현 feat/#43
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryan-g00
ryan-g00 committed Dec 1, 2024
1 parent 3e4fe07 commit 7d98fa6
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 169 deletions.
166 changes: 11 additions & 155 deletions src/components/common/UserLocationMap.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,130 +1,12 @@
import { useState, useEffect, useRef } from 'react';
import { Map, MapMarker, useKakaoLoader } from 'react-kakao-maps-sdk';
import { useKakaoLoader, Map, MapMarker } from 'react-kakao-maps-sdk';
import Remix from './Remix';

const { kakao } = window;

const UserLocationMap = ({
locationType = 'address',
onLocationSelect = () => {},
}) => {
const UserLocationMap = () => {
useKakaoLoader({
appkey: import.meta.env.VITE_KAKAO_APP_KEY,
libraries: ['services'],
});

const defaultCenter = {
lat: 35.183749,
lng: 129.042256,
};

const mapRef = useRef();
const [mapCenter, setMapCenter] = useState(defaultCenter);
const [locationInfo, setLocationInfo] = useState({
administrativeDong: '',
roadAddress: '',
jibunAddress: '',
coordinates: null,
libraries: ['drawing'],
});

useEffect(() => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
setMapCenter({
lat: position.coords.latitude,
lng: position.coords.longitude,
});
},
(error) => {
console.log('사용자 위치를 가져올 수 없습니다:', error);
},
);
}
}, []);

const handleClick = (_, mouseEvent) => {
const latlng = mouseEvent.latLng;
const newCoordinates = {
lat: latlng.getLat(),
lng: latlng.getLng(),
};

if (mapRef.current) {
mapRef.current.panTo(
new kakao.maps.LatLng(newCoordinates.lat, newCoordinates.lng),
);
}

const geocoder = new kakao.maps.services.Geocoder();

if (locationType === 'administrativeDong') {
geocoder.coord2RegionCode(
latlng.getLng(),
latlng.getLat(),
(result, status) => {
if (status === kakao.maps.services.Status.OK) {
const region = result.find(
(item) => item.region_type === 'H',
);

const newLocationInfo = {
administrativeDong: region
? region.address_name
: '',
roadAddress: '',
jibunAddress: '',
coordinates: newCoordinates,
};

setLocationInfo(newLocationInfo);
onLocationSelect?.(newLocationInfo);
}
},
);
} else {
geocoder.coord2Address(
latlng.getLng(),
latlng.getLat(),
(result, status) => {
if (status === kakao.maps.services.Status.OK) {
const newLocationInfo = {
administrativeDong: '',
roadAddress: result[0].road_address
? `도로명주소: ${result[0].road_address.address_name}`
: '',
jibunAddress: `지번주소: ${result[0].address.address_name}`,
coordinates: newCoordinates,
};

setLocationInfo(newLocationInfo);
onLocationSelect?.(newLocationInfo);
}
},
);
}
};

const getDisplayText = () => {
if (!locationInfo.coordinates) return '위치를 지도에 표시해 주세요.';

if (locationType === 'administrativeDong') {
return locationInfo.administrativeDong || '행정동을 불러오는 중...';
} else {
if (!locationInfo.roadAddress && !locationInfo.jibunAddress) {
return '주소를 불러오는 중...';
}
return (
<div>
{locationInfo.roadAddress && (
<div>{locationInfo.roadAddress}</div>
)}
<div>{locationInfo.jibunAddress}</div>
</div>
);
}
};

return (
<div className="user-location-container">
<div className="section-titlebar">
Expand All @@ -136,51 +18,25 @@ const UserLocationMap = ({
<div id="user-location-map-container">
<Map
id="user-location-map"
center={mapCenter}
center={{ lat: 35.183749, lng: 129.042256 }}
level={3}
onClick={handleClick}
ref={mapRef}
>
{locationInfo.coordinates && (
<MapMarker position={locationInfo.coordinates}>
<div className="temp-location-marker">
{getDisplayText()}
</div>
</MapMarker>
)}
<MapMarker position={{ lat: 35.183749, lng: 129.042256 }}>
<div className="temp-location-marker">마커다</div>
</MapMarker>
</Map>
</div>
<div className="map-bottom-content">
<div className="notification-map-content">
<div className="icon-location-area">
<Remix iconName={'map-pin-range-fill'} />
</div>
<div className="map-marker">{getDisplayText()}</div>
<span className="map-marker">
목격 위치 직접 표시일까 현재 위치 표시일까
</span>
</div>
<div className="button-map-content">
<button
className="button-selection-submit"
onClick={() => {
if (locationInfo.coordinates) {
console.log(
'Selected Coordinates:',
locationInfo.coordinates,
);
console.log(
'Selected Road Address:',
locationInfo.roadAddress,
);
console.log(
'Selected Jibun Address:',
locationInfo.jibunAddress,
);
console.log(
'Selected Administrative Dong:',
locationInfo.administrativeDong,
);
}
}}
>
<button className="button-selection-submit">
<div className="icon-check">
<Remix iconName={'check-line'} />
</div>
Expand Down
14 changes: 0 additions & 14 deletions src/pages/ComponentMuseum.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,8 @@ import ModalFormInput from '../components/common/ModalFormInput';
import ReplyItem from '../components/common/ReplyItem';
import StarRating from '../components/common/StarRating';
import ChatItem from '../components/common/ChatItem';
import UserLocationMap from '../components/common/UserLocationMap';

const ComponentMuseum = () => {
// 위치 선택 시 실행될 핸들러 함수
const handleLocationSelect = (locationInfo) => {
console.log('선택된 위치:', locationInfo);
};

return (
<aside
className="inner-wrapper"
Expand Down Expand Up @@ -107,14 +101,6 @@ const ComponentMuseum = () => {
<ArticleItem index={2} isEditMode={true} />
</div>
</div>
<div>
<UserLocationMap
locationType="address"
// 주소 정보를 원할 때 address (도로명주소, 지번주소 표시)
// 행정동 정보를 원할 때 administrativeDong는
onLocationSelect={handleLocationSelect}
/>
</div>
</aside>
);
};
Expand Down

0 comments on commit 7d98fa6

Please sign in to comment.