아웃소싱 프로젝트

---

Search 기능 구현

import { Link, Outlet } from 'react-router-dom';
import * as S from '../../styles/aside';
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { changeSearchText } from '../../shared/store/modules/search';
// import { Map, MapMarker } from 'react-kakao-maps-sdk';

const Aside = () => {
  const dispatch = useDispatch();
  const keyword = useSelector((state) => state.search);
  const [places, setPlaces] = useState([]);
  const [loading, setLoading] = useState(false);
  const [map, setMap] = useState();
  const [markers, setMarkers] = useState([]);

  // 검색 버튼을 클릭했을 때 실행되는 함수
  const handleSearch = (e) => {
    e.preventDefault();
    // 검색어가 비어있는 경우 알림을 표시하고 함수를 종료합니다.
    if (!keyword.trim()) {
      alert('검색어를 입력해주세요!');
      return;
    }
    setLoading(true);

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

    ps.keywordSearch(keyword, (data, status) => {
      if (status === window.kakao.maps.services.Status.OK) {
        const bounds = new window.kakao.maps.LatLngBounds();

        const filtereData = data.filter(
          (place) => place.place_name.includes(keyword) && place.category_group_code === "CE7"
        );

        setPlaces(filtereData);
        console.log('검색 후 카페 검색 결과:', filtereData);

        const newMarkers = filtereData.map((place, index) => ({
          position: new window.kakao.maps.LatLng(place.y, place.x),
          title: place.place_name,
          id: index
        }));

        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
          });
          bounds.extend(new window.kakao.maps.LatLng(data[i].y, data[i].x));
        }
        setMarkers(newMarkers);
        map.setBounds(bounds);

        console.log('검색 시 설정된 마커:', newMarkers);
        dispatch(changeSearchText(keyword));
      } else {
        alert('검색 결과가 존재하지 않습니다.');
        setPlaces([]);
        setMarkers([]);
      }
      setLoading(false);
    });
  };

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

  return (
    <>
      <S.Aside>
        <Link to="/">COFFEEHOLIC</Link>
        <div>
          <form onSubmit={handleSearch}>
            <input type="text" value={keyword} onChange={handleKeywordChange} id="keyword" size="15" />
            <button type="submit" disabled={loading}>
              {loading ? '검색 중...' : '검색'}
            </button>
          </form>
        </div>
        <div>
          <ul>
            {places.map((place, index) => (
              <li key={index}>
                <span className={`markerbg marker_${index + 1}`}></span>
                <div className="info">
                  <h5>{place.place_name}</h5>
                  {/* 도로명 주소와 지번 주소가 있는 경우 각각 출력합니다. */}
                  <p>
                    {place.road_address_name && (
                      <>
                        <span>{place.road_address_name}</span>
                        <br />
                        <span className="jibun gray">{`(${place.address_name})`}</span>
                      </>
                    )}
                  </p>
                  {/* 도로명 주소만 있는 경우 출력합니다. */}
                  {!place.road_address_name && <span>{place.address_name}</span>}
                  {/* 전화번호 출력 */}
                  <span className="tel">{place.phone}</span>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </S.Aside>
      <Outlet />
    </>
  );
};

export default Aside;

---

문제점

1. 검색 버튼을 눌렀을 때 검색이 완료 된 이후에 다시 검색 버튼이 활성화 되어야하는데 활성화가 안됨.
2. "카페" 검색했을 때 2개밖에 안보여줌. 근데 다른 카페 이름을 검색해봤더니 그 카페는 또 나옴. "카페" 가 들어가있지만 "카페" 검색했을 때 나오는 리스트에는 포함이 안됨.

아직 해결중..