Merge pull request #158 from FRONTENDSCHOOL5/feature/map

💡Docs : map 주석 추가 #155

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페이지로 되돌린다

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: `<div style="padding:5px; font-size:12px;">${CRNAME}</div>`,
         });
 
+        // 마커 이벤트 리스너 등록
         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}
         />
       )}
-      ;
     </>
   );
 }

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