본문 바로가기

개인공부/메인프로젝트15

지도페이지 완료 이렇게 지도페이지 기능 구현은 끝낫다!!!! //place.tsx //지도페이지 import React, { useState, useEffect, lazy, Suspense } from "react"; import { useNavigate } from "react-router-dom"; import axios from "axios"; import styled from "styled-components"; import { ButtonDark } from "../components/Common/Button"; import { useDispatch } from "react-redux"; import { setMarker } from "../redux/slice/store"; const MapComponent .. 2023. 5. 17.
suspense, lazy 적용 //place //지도페이지 import React, { useState, useEffect, lazy, Suspense } from "react"; import { useNavigate } from "react-router-dom"; import axios from "axios"; import styled from "styled-components"; import { ButtonDark } from "../components/Common/Button"; // import MapComponent from "./Map"; const MapComponent = lazy(() => import("./Map")); /*--------------------------------스타일-----------------.. 2023. 5. 16.
카카오맵-사용자위치조회,마커, 커스텀어레이 //map 완성코드 import React, { useEffect } from "react"; // import styled from "styled-components"; import { markerdata } from "./MarkerData"; declare global { interface Window { kakao: any; closeOverlay: () => void; } } const MapComponent = () => { useEffect(() => { mapscript(); }, []); const mapscript = () => { const container = document.getElementById("map"); const options = { center: new window... 2023. 5. 16.
카카오맵 - 마커 클릭하면 설정한 창 뜨기 마커를 내맘대로 박아놨다. 마커를 클릭하면 매장 정보를 볼수있게 하고싶은데 일단은 어찌 할수 있는 아이디어가 없어서 정보를 볼수있는 네이버 창이 뜨게 했다. // //map // // 지도 컴포넌트 import React, { useEffect } from "react"; import { markerdata } from "./MarkerData"; declare global { interface Window { kakao: any; } } interface SearchProps { Place: string; } const MapComponent = ({ Place }: SearchProps) => { useEffect(() => { mapscript(); }, [Place]); const mapscrip.. 2023. 5. 16.