From 8500b574bdfc1cdfa7510bd2a096b17683b41a9a Mon Sep 17 00:00:00 2001 From: limjeein Date: Fri, 21 Jul 2023 02:14:30 +0900 Subject: [PATCH] =?UTF-8?q?:bulb:Docs=20:=20map=20=EC=A3=BC=EC=84=9D=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20#155?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mapInfo/PreschoolList.jsx | 6 ++++++ src/components/mapInfo/PreschoolMap.jsx | 22 ++++++++++++++-------- src/pages/map/Map.jsx | 13 ++++++++++--- 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/src/components/mapInfo/PreschoolList.jsx b/src/components/mapInfo/PreschoolList.jsx index bd449be..bc721cd 100644 --- a/src/components/mapInfo/PreschoolList.jsx +++ b/src/components/mapInfo/PreschoolList.jsx @@ -13,6 +13,7 @@ function PreschoolList({ list, onLocationChange, handleSearchChange }) { const [currentPage, setCurrentPage] = useState(0); const perPage = 10; + // 위치 아이콘 클릭 시 실행되는 함수 const handleLocationClick = (STCODE, LA, LO) => { if (LA && LO) { onLocationChange(STCODE); @@ -21,13 +22,16 @@ function PreschoolList({ list, onLocationChange, handleSearchChange }) { } }; + // 페이지 클릭 시 실행되는 함수 const handlePageClick = (data) => { setCurrentPage(data.selected); handleSearchChange(inputValue); }; + // 필터링된 유치원 목록을 가져옴 const filteredLists = useRecoilValue(filteredPreschoolListState); + // 표시할 유치원 목록을 계산 const displayedPreschools = filteredLists.slice( currentPage * perPage, currentPage * perPage + perPage, @@ -37,10 +41,12 @@ function PreschoolList({ list, onLocationChange, handleSearchChange }) { const [inputValue, setInputValue] = useState(''); + // 입력 값 변경 시 실행되는 함수 const handleInputChange = (event) => { setInputValue(event.target.value); }; + // 검색 버튼 클릭 시 실행되는 함수 const handleSubmit = () => { handleSearchChange(inputValue); setCurrentPage(0); // 페이지네이션을 1페이지로 되돌린다 diff --git a/src/components/mapInfo/PreschoolMap.jsx b/src/components/mapInfo/PreschoolMap.jsx index d5b97d5..4c1bdd9 100644 --- a/src/components/mapInfo/PreschoolMap.jsx +++ b/src/components/mapInfo/PreschoolMap.jsx @@ -18,6 +18,7 @@ function PreschoolMap({ const [openModal, setOpenModal] = useState(false); const [selectedPreschool, setSelectedPreschool] = useState({}); + // 모달 창 열고 닫기 핸들러 함수 const openModalHandler = (preschool) => { setSelectedPreschool(preschool); setOpenModal(true); @@ -27,6 +28,7 @@ function PreschoolMap({ setOpenModal(false); }; + // 카카오 맵 스크립트 불러오기 const loadScript = (url) => { return new Promise((resolve, reject) => { const script = document.createElement('script'); @@ -38,6 +40,7 @@ function PreschoolMap({ }); }; + // 초기 지도 렌더링 useEffect(() => { loadScript( `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.REACT_APP_KAKAO_MAP_KEY}&autoload=false&libraries=services`, @@ -69,6 +72,7 @@ function PreschoolMap({ }); }, []); + // 마커 업데이트 useEffect(() => { if (!map) return; @@ -91,6 +95,7 @@ function PreschoolMap({ content: `
${CRNAME}
`, }); + // 마커 이벤트 리스너 등록 kakao.maps.event.addListener(marker, 'mouseover', function () { infowindow.open(map, marker); }); @@ -126,6 +131,7 @@ function PreschoolMap({ }); }, [map, mapList, selectedLocationId, list]); + // 위치 변경 시 기능 처리 useEffect(() => { if (!map) return; @@ -143,7 +149,7 @@ function PreschoolMap({ selectedPreschool.LO, ); - map.setLevel(3); // 확대 수준 변경 + map.setLevel(3); map.setCenter(coordinates); // 확대할 위치 설정 setMapList([selectedPreschool]); // 지도에 표시된 핀을 선택한 업체로 업데이트 } @@ -152,7 +158,8 @@ function PreschoolMap({ handleLocationChange(displayPreschoolByLocationId); }, [map, handleLocationChange, list, searchValue, setSelectedLocationId]); - -useEffect(() => { + // 선택된 위치가 변경될 때 처리 + useEffect(() => { if (!selectedLocationId || !map || !list) return; const selectedPreschool = list @@ -170,21 +177,21 @@ function PreschoolMap({ map.getLevel() === 3 && map.getCenter().toString() === coordinates.toString() ) { - map.setLevel(8); // 축소 수준 변경 + map.setLevel(8); map.setCenter(new kakao.maps.LatLng(37.566824, 126.978652)); } else { - map.setLevel(3); // 확대 수준 변경 + map.setLevel(3); map.setCenter(coordinates); // 확대할 위치 설정 } } }, [selectedLocationId, map, list, searchValue]); - // 검색어가 변경될 때 지도를 초기 상태로 돌리는 코드 추가 + // 검색어 변경 시 지도 초기 상태로 리셋 useEffect(() => { if (!map) return; - // 검색어가 변경될 때 지도 상태를 초기화한다. - map.setLevel(8); // 축소 수준 변경 + // 검색어가 변경될 때 지도 상태를 초기화 + map.setLevel(8); map.setCenter(new kakao.maps.LatLng(37.566824, 126.978652)); }, [searchValue]); @@ -197,7 +204,6 @@ function PreschoolMap({ selectedItem={selectedPreschool} /> )} - ; ); } diff --git a/src/pages/map/Map.jsx b/src/pages/map/Map.jsx index 147503e..f6d75fb 100644 --- a/src/pages/map/Map.jsx +++ b/src/pages/map/Map.jsx @@ -1,6 +1,8 @@ import React, { useEffect, useState, lazy, Suspense } from 'react'; import TopFollowNav from '../../components/common/topNav/TopFollowNav'; import TabMenu from '../../components/common/tab/TabMenu'; + +// 레이지 로딩을 사용하여 PreschoolMap 및 PreschoolList 컴포넌트를 동적으로 가져옴 const PreschoolMap = lazy(() => import('../../components/mapInfo/PreschoolMap'), ); @@ -21,13 +23,16 @@ function Map() { const [markers, setMarkers] = useState([]); const [map, setMap] = useState(null); + // 컴포넌트 마운트 시, 유치원 API 데이터를 가져와 저장 useEffect(() => { let preschoolListAPIDatas = data[0].ChildCareInfo.row; setPreschoolList(preschoolListAPIDatas); setMapList(preschoolListAPIDatas); }, []); + // 선택한 유치원의 위치를 처리하는 함수 const handleMapLocation = (STCODE) => { + // 검색값이 포함된 유치원 목록에서 STCODE와 일치하는 항목 찾기 const selectedPreschool = preschoolList .filter((preschool) => preschool.CRNAME.includes(searchValue)) .find((preschool) => preschool.STCODE === STCODE); @@ -39,23 +44,25 @@ function Map() { selectedPreschool.LO, ); - // 이전에 생성된 마커 중에서 STCODE와 일치하는 것을 찾기 + // STCODE와 일치하는 이전에 생성된 마커 찾기 const selectedMarker = markers.find((marker) => marker.STCODE === STCODE); - // 만약 일치하는 마커가 있다면, 지도 이동 및 확대 + // 일치하는 마커가 있다면 지도 이동 및 확대 if (selectedMarker) { map.setLevel(3); map.setCenter(coordinates); } else { - // 일치하는 마커가 없으면 기다렸다가 다시 시도 + // 일치하는 마커가 없으면 기다린 후 다시 시도 setTimeout(() => handleMapLocation(STCODE), 200); } } }; + // 검색값이 변경될 때마다 실행되는 함수 const handleSearchChange = (value) => { setSearchValue(value); + // 검색값이 포함된 항목으로 필터링된 목록 생성 const filteredList = preschoolList.filter((item) => item.CRNAME.includes(value), );