🐛 Fix: 삭제된 코드 재업 feat/#43

src/components/common/UserLocationMap.jsx

@@ -1,12 +1,130 @@
-import { useKakaoLoader, Map, MapMarker } from 'react-kakao-maps-sdk';
+import { useState, useEffect, useRef } from 'react';
+import { Map, MapMarker, useKakaoLoader } from 'react-kakao-maps-sdk';
 import Remix from './Remix';
 
-const UserLocationMap = () => {
+const { kakao } = window;
+
+const UserLocationMap = ({
+    locationType = 'address',
+    onLocationSelect = () => {},
+}) => {
     useKakaoLoader({
         appkey: import.meta.env.VITE_KAKAO_APP_KEY,
-        libraries: ['drawing'],
+        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,
     });
 
+    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">
@@ -18,25 +136,51 @@ const UserLocationMap = () => {
             <div id="user-location-map-container">
                 <Map
                     id="user-location-map"
-                    center={{ lat: 35.183749, lng: 129.042256 }}
+                    center={mapCenter}
                     level={3}
+                    onClick={handleClick}
+                    ref={mapRef}
                 >
-                    <MapMarker position={{ lat: 35.183749, lng: 129.042256 }}>
-                        <div className="temp-location-marker">마커다</div>
-                    </MapMarker>
+                    {locationInfo.coordinates && (
+                        <MapMarker position={locationInfo.coordinates}>
+                            <div className="temp-location-marker">
+                                {getDisplayText()}
+                            </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>
-                    <span className="map-marker">
-                        목격 위치 직접 표시일까 현재 위치 표시일까
-                    </span>
+                    <div className="map-marker">{getDisplayText()}</div>
                 </div>
                 <div className="button-map-content">
-                    <button className="button-selection-submit">
+                    <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,
+                                );
+                            }
+                        }}
+                    >
                         <div className="icon-check">
                             <Remix iconName={'check-line'} />
                         </div>

src/pages/ComponentMuseum.jsx

@@ -10,8 +10,14 @@ 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"
@@ -101,6 +107,14 @@ const ComponentMuseum = () => {
                     <ArticleItem index={2} isEditMode={true} />
                 </div>
             </div>
+            <div>
+                <UserLocationMap
+                    locationType="address"
+                    // 주소 정보를 원할 때 address (도로명주소, 지번주소 표시)
+                    // 행정동 정보를 원할 때 administrativeDong는
+                    onLocationSelect={handleLocationSelect}
+                />
+            </div>
         </aside>
     );
 };