KakaoMap

client/src/components/KakaoMap/KakaoMap.js

@@ -37,18 +37,7 @@ const KakaoMap = ({ keyword }) => {
         function placesSearchCB(data, status, pagination) {
             if (status === kakao.maps.services.Status.OK) {
                 displayPlaces(data);
-
-                // 페이지 번호를 표출합니다
-                displayPagination(pagination);
-                // let bounds = new kakao.maps.LatLngBounds()
-                // for (let i = 0; i < data.length; i++) {
-                //     displayMarker(data[i])
-                //     bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x))
-                // }
-                // map.setBounds(bounds)
-                // // 페이지 목록 보여주는 displayPagination() 추가
-                // displayPagination(pagination)
-                // setPlaces(data)
+                displayPagination(pagination); // 페이지 번호를 표출합니다
             } else if (status === kakao.maps.services.Status.ZERO_RESULT) {
                 alert('검색 결과가 존재하지 않습니다.');
                 return
@@ -63,8 +52,7 @@ const KakaoMap = ({ keyword }) => {
             let listEl = searchList.current,
                 menuEl = menu.current,
                 fragment = document.createDocumentFragment(),
-                bounds = new kakao.maps.LatLngBounds(),
-                listStr = '';
+                bounds = new kakao.maps.LatLngBounds();
 
             for (let i = 0; i < places.length; i++) {
                 // 마커를 생성하고 지도에 표시합니다
@@ -96,14 +84,16 @@ const KakaoMap = ({ keyword }) => {
                 infowindow.close();
             })
             itemEl.onmouseover = function () {
+                itemEl.style.background = 'rgba(0, 0, 0, 0.075)';
+                itemEl.style.cursor = 'pointer';
                 infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>')
                 infowindow.open(map, marker)
             };
             itemEl.onmouseout = function () {
+                itemEl.style.background = '#fff';
                 infowindow.close();
             };
         }
-
     }, [keyword])
 
     // 검색결과 목록 하단에 페이지번호를 표시는 함수입니다
@@ -114,7 +104,7 @@ const KakaoMap = ({ keyword }) => {
 
         for (i = 1; i <= pagination.last; i++) {
             let el = document.createElement('a');
-            el.href = "#";
+            // el.href = "#";
             el.innerHTML = i;
             if (i === pagination.current) {
                 el.className = 'on';
@@ -132,9 +122,8 @@ const KakaoMap = ({ keyword }) => {
 
     // 검색결과 항목을 Element로 반환하는 함수입니다
     function getListItem(index, places) {
-        let el = document.createElement('li'),
-            itemStr = '<span className="markerbg marker_' + (index + 1) + '"></span>' +
-                '<div className="info">' +
+        let el = document.createElement('div'),
+            itemStr = '<div className="info">' +
                 '   <h5>' + places.place_name + '</h5>';
 
         if (places.road_address_name) {
@@ -152,47 +141,11 @@ const KakaoMap = ({ keyword }) => {
         return el;
     }
 
-    // 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
-    // function addMarker(position, idx, title) {
-    //     const imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
-    //         imageSize = new kakao.maps.Size(36, 37),  // 마커 이미지의 크기
-    //         imgOptions = {
-    //             spriteSize: new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
-    //             spriteOrigin: new kakao.maps.Point(0, (idx * 46) + 10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
-    //             offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
-    //         },
-    //         markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions),
-    //         marker = new kakao.maps.Marker({
-    //             position: position, // 마커의 위치
-    //             image: markerImage
-    //         });
-
-    //     marker.setMap(map); // 지도 위에 마커를 표출합니다
-    //     markers.push(marker);  // 배열에 생성된 마커를 추가합니다
-
-    //     return marker;
-    // }
     return (
         <>
             <div ref={kakaoMapDiv} style={{ width: "500px", height: "400px" }}></div>
-            <div ref={menu} className="bg-white">
+            <div ref={menu} className={`${styles.menu} bg-white`}>
                 <div ref={searchList}></div>
-                {/* {places.map((item, i) => (
-                    <div key={i} style={{ marginTop: '20px' }}>
-                        <h5>{i + 1}. {item.place_name}</h5>
-                        <div>
-                            {item.road_address_name ? (
-                                <div>
-                                    <span>{item.road_address_name}</span>
-                                    <span>{item.address_name}</span>
-                                </div>
-                            ) : (
-                                <span>{item.address_name}</span>
-                            )}
-                            <span>{item.phone}</span>
-                        </div>
-                    </div>
-                ))} */}
                 <div ref={page}></div>
             </div>
         </>

client/src/components/KakaoMap/kakao-map.module.scss

+// .menu {
+//     position:absolute;
+//     top:0;
+//     left:0;
+//     bottom:0;
+//     width:250px;
+//     margin:10px 0 30px 10px;
+//     padding:5px;
+//     overflow-y:auto;
+//     background:rgba(255, 255, 255, 0.7);
+//     z-index: 1;
+//     font-size:12px;
+//     border-radius: 10px;
+// }
\ No newline at end of file