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),
);