아웃소싱 팀프로젝트

---

- Search 코드 정리

const Search = () => {
  const dispatch = useDispatch();

  const [loading, setLoading] = useState(false);

  const searchText = useSelector((state) => state.search.searchText);
  const searchResults = useSelector((state) => state.search.searchResults);

  const handleKeywordChange = (e) => {
    dispatch(changeSearchText(e.target.value));
  };

  const handleSearch = (e) => {
    e.preventDefault();
  };

  const handleClickCard = (place) => {
    dispatch(connection(place));
    dispatch(info(place));
  };

일단 useSearchParams 사용하던건 빼고 reducer 로 전역관리를 하는걸로 바꿨다. 그리고 이미 Location.jsx 라는 컴포넌트에서 API 에서 데이터를 받고있어서 Search 에서는 제거했다.

---

- Location

useEffect(() => {
    if (!map || !location.lat || !location.lng) return;

    const ps = new window.kakao.maps.services.Places();

    ps.keywordSearch(
      searchText,
      (data, status) => {
        if (!Array.isArray(data)) {
          return;
        }
        dispatch(containSearchResults(data));

        if (status === window.kakao.maps.services.Status.OK) {
          const bounds = new window.kakao.maps.LatLngBounds();
          //검색된 장소로 범위 재설정
          let newMarkers = [];

          for (var i = 0; i < Math.min(15, data.length); i++) {
            newMarkers.push({
              position: {
                lat: data[i].y,
                lng: data[i].x
              },
              content: data[i].place_name,
              address: data[i].address_name,
              id: data[i].id,
              phone: data[i].phone
            });
            bounds.extend(new window.kakao.maps.LatLng(data[i].y, data[i].x));
          }

          setMarkers(newMarkers);
          map.setBounds(bounds);
          // console.log('설정된 마커:', newMarkers);
        }
      },
      { category_group_code: 'CE7', location: new window.kakao.maps.LatLng(location.lat, location.lng), radius: 1000 }
    );
  }, [searchText, map, location.lat, location.lng]);

Location 에서 전역 상태로 관리하는 searchText 를 가져오고 useEffect 를 사용해서 데이터를 불러오고 searchText 와 지도가 변경 될 때만 데이터를 불러오도록 했다.