🙏🏻검색 결과 리스트를 회색 컴포넌트 안으로 넣어주고 싶다.
🔥맵 컴포넌트 화면 위에 붙어버렸다.
💡 구조를 잘못 짰고, 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;