diff --git a/project/src/components/KakaoMap.tsx b/project/src/components/KakaoMap.tsx index a961857b..640f97ee 100644 --- a/project/src/components/KakaoMap.tsx +++ b/project/src/components/KakaoMap.tsx @@ -1,7 +1,6 @@ -import { useState, useEffect } from "react"; +import { useEffect } from "react"; import styled from "styled-components"; - declare global { interface Window { kakao: any; @@ -57,13 +56,7 @@ const MyPosition = styled.div` } ` - const KakaoMap = ({width, height, dataList, position, left, regionFilter, component, dataset, modalData ,filterOrPosition, setFilterOrPosition}:Map) =>{ - //const [filterOrPosition, setFilterOrPosition] = useState(false); - // false 일때는 필터링, - // true일때는 내위치 - - // 여기 useEffect(()=>{ const container = document.getElementById('map');// 지도를 담을 dom영역 @@ -72,7 +65,7 @@ const KakaoMap = ({width, height, dataList, position, left, regionFilter, compon const options = { // center에 위도, 경도 좌표를 설정 center: new window.kakao.maps.LatLng(37.573898277022,126.9731314753), // 지도의 중심 좌표 - level:4 // 확대되어 보여지는 레벨 설정 + level:5 // 확대되어 보여지는 레벨 설정 }; // 기본 주소 객체 생성 @@ -86,8 +79,6 @@ const KakaoMap = ({width, height, dataList, position, left, regionFilter, compon // 내 위치 찾는거 누르면? if(filterOrPosition === true){ - - // 내위치 받아오기 예제 if (navigator.geolocation) { console.log('내 위치를 받아오기') @@ -95,7 +86,6 @@ const KakaoMap = ({width, height, dataList, position, left, regionFilter, compon // 주변 데이터 보여주기 위해서 값 불러오기 console.log('리스트 데이터',dataset) - // 내 위치먼저 불러온 다음에 // GeoLocation을 이용해서 접속 위치를 얻어옵니다 navigator.geolocation.getCurrentPosition(function(position) { @@ -108,7 +98,6 @@ const KakaoMap = ({width, height, dataList, position, left, regionFilter, compon }); } - // 근처 렌더링된 데이터 보여주기 dataset.forEach(function(addr:any,index:number){ geocoder.addressSearch(addr.attractionAddress, function(result:any, status:any) { @@ -165,78 +154,78 @@ const KakaoMap = ({width, height, dataList, position, left, regionFilter, compon disableAutoPan: false }); infowindow.open(map, marker); - // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다 - // map.setCenter(coords); } }); }) }else { - console.log('주변 필터링 데이터 보여주기') - console.log('아이디',modalData.attractionId) - // 모달데이터를 클릭한 곳으로 위치를 이동시킵니다. - geocoder.addressSearch(modalData.attractionAddress, function(result:any, status:any){ - if (status === window.kakao.maps.services.Status.OK){ - console.log('좌표 검색 완료',result[0].y, result[0].x) - var placePosition = new window.kakao.maps.LatLng(result[0].y, result[0].x); - // 결과값으로 받은 위치를 마커로 표시합니다 - var marker = new window.kakao.maps.Marker({ - map: map, - position: placePosition, - }); - - // 인포 윈도우 설정 - var infowindow = new window.kakao.maps.InfoWindow({ - content: - `
-

- ${modalData.attractionName} -

-

- ${modalData.attractionAddress} + console.log('주변 필터링 데이터 한 개 보여주기') + + // 모달데이터를 클릭한 곳으로 위치를 이동시킵니다. + if(modalData){ + geocoder.addressSearch(modalData.attractionAddress, function(result:any, status:any){ + if (status === window.kakao.maps.services.Status.OK){ + console.log('좌표 검색 완료',result[0].y, result[0].x) + var placePosition = new window.kakao.maps.LatLng(result[0].y, result[0].x); + // 결과값으로 받은 위치를 마커로 표시합니다 + var marker = new window.kakao.maps.Marker({ + map: map, + position: placePosition, + }); + + // 인포 윈도우 설정 + var infowindow = new window.kakao.maps.InfoWindow({ + content: + `
+

+ ${modalData.attractionName}

- - 더보기 - -
`, - disableAutoPan: false - }); - - // 인포윈도우 표시 - infowindow.open(map, marker); - - //map.setCenter(coords); - map.panTo(placePosition); - map.relayout(); - } - }) +

+ ${modalData.attractionAddress} +

+ + 더보기 + +
`, + disableAutoPan: false + }); + + // 인포윈도우 표시 + infowindow.open(map, marker); + + //map.setCenter(coords); + map.panTo(placePosition); + map.relayout(); + } + }) + } } } @@ -253,7 +242,7 @@ const KakaoMap = ({width, height, dataList, position, left, regionFilter, compon //map.setCenter(latlng); } }); - } + }; // Map Control - 공통 // 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다 @@ -263,9 +252,6 @@ const KakaoMap = ({width, height, dataList, position, left, regionFilter, compon map.addControl(mapTypeControl, window.kakao.maps.ControlPosition.TOPLEFT); },[filterOrPosition,dataset=== undefined, modalData]) - //document.getElementsByClassName(class) - - return( <> diff --git a/project/src/components/Ranking/index.tsx b/project/src/components/Ranking/index.tsx index cd9441f4..c90e0ae6 100644 --- a/project/src/components/Ranking/index.tsx +++ b/project/src/components/Ranking/index.tsx @@ -32,13 +32,6 @@ const Ranking = () => { const newRankingData = [...rankingData, ...rankingData.slice(0, 1)]; const currentTime = new Intl.DateTimeFormat("ko", options).format(new Date()); useEffect(() => { - // axios - - // .post( - // `http://pikcha36.o-r.kr:8080/attractions/filter?page=1&size=10&sort=likes`, - // { provinces: [] } - // ) - // .then((res) => console.log(res.data.data)); timerIdRef.current = setInterval(() => { setStartAnimation(true); setTimeout(() => { diff --git a/project/src/pages/Map.tsx b/project/src/pages/Map.tsx index 5488a603..677feb89 100644 --- a/project/src/pages/Map.tsx +++ b/project/src/pages/Map.tsx @@ -320,7 +320,7 @@ const Map = () => { ]; const url = - "http://pikcha36.o-r.kr:8080/attractions/maps?page=1&size=100&sort=posts"; + "http://pikcha36.o-r.kr:8080/attractions/maps?page=1&size=99&sort=posts"; //const url2 = 'http://pikcha36.o-r.kr:8080/attractions/mapdetails/1'; const [filterOrPosition, setFilterOrPosition] = useState(false); diff --git a/project/src/pages/PlaceDetail.tsx b/project/src/pages/PlaceDetail.tsx index facc17f0..7efea39a 100644 --- a/project/src/pages/PlaceDetail.tsx +++ b/project/src/pages/PlaceDetail.tsx @@ -12,9 +12,11 @@ import "../index.css"; import axios from "axios"; import PostCardComponent from "../components/PostCardComponent"; import { ArrayPostType } from "./Post"; -import { useRecoilState } from "recoil"; -import { LoginState } from "../recoil/state"; -import Modal from "../components/Modal"; +import {CopyToClipboard} from 'react-copy-to-clipboard'; + + + + const GlobalStyle = createGlobalStyle` * { box-sizing: content-box; @@ -195,9 +197,6 @@ type PlaceData = { saves: number | undefined; }; -const dummyLikes = [1, 10, 11, 13, 16, 20, 22, 25, 50]; -const dummyBookmarks = [10, 13, 20, 50, 60, 81, 90]; - const PlaceDetail = (): JSX.Element => { let [view, setView] = useState("info"); const scrollRefContent = useRef(null); @@ -206,41 +205,19 @@ const PlaceDetail = (): JSX.Element => { const [attractionData, setAttractionData] = useState(); // 명소 정보 저장 const [postData, setPostData] = useState(); - const [isLogin] = useRecoilState(LoginState); - const [isModalVisible, setIsModalVisible] = useState(false); + const [bookmarkSaves, setBookmarkSaves] = useState(false); + const [likes,setLikes] = useState(false); const { id } = useParams(); - const [bookmarkSaves, setBookmarkSaves] = useState(false); - const [likes, setLikes] = useState(false); const url = `http://pikcha36.o-r.kr:8080/attractions/${id}`; - const url2 = `http://pikcha36.o-r.kr:8080/posts/${id}?page=1&size=8`; + const url2 = `http://pikcha36.o-r.kr:8080/posts/${id}?page=1&size=9`; //const url3 = "http://pikcha36.o-r.kr:8080/posts/attractions?page=1&size=100"; const url4 = `http://localhost:3000/attractions/saves/1/1`; const url5 = `http://localhost:3000/attractions/likes/1/1`; - - useEffect(() => { - /*api주소로 로그인한 사용자가 해당 명소를 좋아요 했는지, 즐겨찾기 했는지 확인하고 상태로 저장 */ - dummyBookmarks.includes(Number(id)); - dummyLikes.includes(Number(id)); - - return () => { - /* 초기값과 다르면 api주소로 요청 보내기 */ - }; - }, []); - + const navigate = useNavigate(); - // useEffect(( - // axios.post(url5).then((res) => { - // console.log(res.data.data.isVoted); - // if (res.data.data.isVoted) { - // setLikes(res.data.data.isVoted); - // console.log(likes); - // } - // }) - // )=>{ - // return - // },[])나중에 수정----------- + function onScroll() { if (window.scrollY <= 700) { setTimeout(function () { @@ -263,44 +240,46 @@ const PlaceDetail = (): JSX.Element => { } }; - const handleCopyClipBoard = async (text: string) => { + const handleCopyClipBoard = async (text:string) => { try { await navigator.clipboard.writeText(text); - alert("url이 성공적으로 복사되었습니다."); - } catch (err) { - console.log("복사 실패"); + alert('url이 성공적으로 복사되었습니다.') + }catch(err){ + console.log('복사 실패') } - }; + } //console.log('여기',attractionData) - const handleClickBookmark = () => { - if (isLogin) setBookmarkSaves(!bookmarkSaves); - else setIsModalVisible(true); - }; + const handleClickBookmark = async () => { + + axios.post(url4).then((res)=>{ + console.log(res.data.data) + if(res.data.data.isSaves){ + setBookmarkSaves(true); + console.log(bookmarkSaves) + } + }) + } // 여기 const handleClickLikes = () => { - if (isLogin) { - console.log("누름"); - axios.post(url5).then((res) => { - console.log(res.data.data.isVoted); - if (res.data.data.isVoted) { - setLikes(res.data.data.isVoted); - console.log(likes); - } - }); - } else { - setIsModalVisible(true); - } - }; + console.log('누름') + axios.post(url5).then((res)=>{ + console.log(res.data.data.isVoted) + if(res.data.data.isVoted){ + setLikes(res.data.data.isVoted); + console.log(likes) + } + }) + } useEffect(() => { - //잠깐 멈춤 + //잠깐 멈춤 axios.all([axios.get(url), axios.get(url2)]).then( axios.spread((res1, res2) => { setAttractionData(res1.data.data); setPostData(res2.data.data); - console.log("요청중"); + console.log('요청중') }) ); @@ -313,25 +292,10 @@ const PlaceDetail = (): JSX.Element => { }; }, []); - useEffect(() => { - axios.post(`/attractions/likes/${id}`).then((res) => console.log(res.data)); - }, []); - const handlePostWriteClick = () => { - if (isLogin) navigate("/write"); - else setIsModalVisible(true); - }; - /*로그인 했으면 - -로그인 안했으면 모달 -*/ - const handleLikeCheck = () => { - if (!isLogin) setIsModalVisible(true); - }; return ( <> - {isModalVisible && } {attractionData !== undefined ? ( @@ -340,25 +304,34 @@ const PlaceDetail = (): JSX.Element => { 배경이미지 +
{ + handleCopyClipBoard(document.location.href); + }} + > + +
+
{ - handleCopyClipBoard(document.location.href); + navigate("/write"); }} > - -
- -
+ {" "}
{/* */} -
handleClickBookmark()}> - +
handleClickBookmark()}> +
- {attractionData!.saves} -
handleClickLikes()}> - + + {attractionData!.saves} + +
handleClickLikes()}> + + +
{attractionData!.likes} @@ -407,12 +380,18 @@ const PlaceDetail = (): JSX.Element => {

포스트

- + {postData && ( )} @@ -424,4 +403,4 @@ const PlaceDetail = (): JSX.Element => { ); }; -export default PlaceDetail; +export default PlaceDetail; \ No newline at end of file