[TIL] 내배캠4기-Typescript-88일차

카카오 맵 키워드 검색 결과

🙏🏻검색 결과 리스트를 회색 컴포넌트 안으로 넣어주고 싶다.

🔥맵 컴포넌트 화면 위에 붙어버렸다.

💡 구조를 잘못 짰고, state값을 넘겨주는 것에서 많이 헤맸다.

//Main.tsx
import Maps from './Maps';

💡import { IMarkers } from './Maps';

const Main = () => {
  const [isOpenListUp, setIsOpenListUp] = useState(false);
  const [place, setPlace] = useState('');
  💡const [markers, setMarkers] = useState<IMarkers[]>([]);
  return (
    <MainPageContainer>
      <Header setIsOpenListUp={setIsOpenListUp} isOpenListUp={isOpenListUp} />
      <MapContainer>
        💡<Maps searchPlace={place} setMarkers={setMarkers} markers={markers} />
        💡{isOpenListUp && <ListUp setPlace={setPlace} list={markers} />}
      </MapContainer>
    </MainPageContainer>
  );
};

const MainPageContainer = styled.main``;
const MapContainer = styled.div`
  position: fixed;
  height: calc(100vh - 60px);
  width: 100%;
`;

export default Main;

Map을 불러오는 컴포넌트로 setState를 넘겨준다.
여기에 검색 결과 리스트(=마커)를 저장한다.
값이 변경될 때마다 목록(회색 ui)이 렌더링 된다.

//Maps.tsx
import { Map, MapMarker, CustomOverlayMap } from 'react-kakao-maps-sdk';
import { MapProps } from 'react-kakao-maps-sdk';

💡interface IMapsProps {
  searchPlace: string;
  markers: IMarkers[];
  setMarkers: React.Dispatch<React.SetStateAction<IMarkers[]>>;
}
💡export interface IMarkers {
  position: { lat: number; lng: number };
  content?: string;
  address?: string;
}

💡const Maps = ({ searchPlace, setMarkers, markers }: IMapsProps) => {
  const [info, setInfo] = useState<IMarkers>();
  🔥// const [markers, setMarkers] = useState<IMarkers[]>([]);
  const [map, setMap] = useState<kakao.maps.Map>();
  const [isPopupMemoOpen, setIsPopupMemoOpen] = useState(false);

  const [state, setState] = useState<MapProps>({
    // 지도의 초기 위치
    center: { lat: 37.49676871972202, lng: 127.02474726969814 },
    // 지도 위치 변경시 panto를 이용할지(부드럽게 이동)
    isPanto: true,
  });

  useEffect(() => {
    if (!map) return;
    const ps = new kakao.maps.services.Places();
    ps.keywordSearch(searchPlace, (data, status, _pagination) => {
      if (status === kakao.maps.services.Status.OK) {
        const bounds = new kakao.maps.LatLngBounds();
        let newMarkers = [];
        for (var i = 0; i < data.length; i++) {
          // @ts-ignore
          newMarkers.push({
            position: {
              lat: data[i].y as unknown as number,
              lng: data[i].x as unknown as number,
            },
            content: data[i].place_name,
            address: data[i].address_name,
          });
          // @ts-ignore
          bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
        }
        💡setMarkers(newMarkers);
        map.setBounds(bounds);
      } else if (status === kakao.maps.services.Status.ZERO_RESULT) {
        alert('검색 결과가 존재하지 않습니다.');
        return;
      } else if (status === kakao.maps.services.Status.ERROR) {
        alert('검색 결과 중 오류가 발생했습니다.');
        return;
      }
    });
  }, [searchPlace]);

  return (
    //생략
  );
};
export default Maps;