Skip to content

Commit

Permalink
Feat attraction detail (#123)
Browse files Browse the repository at this point in the history 
* fix : git lfs 적용

* feat: Post 카드 컴포넌트

* fix : 페이지네이션 오류 수정

* feat: postcard 컴포넌트 페이지네이션 적용 1차

* design: postcard 컴포넌트 사이즈 조절

* chore : merge

* feat: 카카오맵 위치기반 설정

* design: navbar 여백 수정

* feat: 공유링크 버튼 기능 생성

* feat: 위치기반 검색 버튼 생성

* chore: merge

* feat: 구 별로 데이터 조회

* fix: 카카오맵 api 로직 수정 1차

* feat: map 페이지 장소 렌더링

* feat:map 페이지 컴포넌트 분리

* feat: 소셜 로그인 구현(Google, Kakao) #111

* feat: 마커 전체 렌더링

* feat: map 페이지 마커 이동

* feat: 위치기반 검색시 주변 명소 렌더링

* feat: 마커 중심으로 relayout

* fix: 카카오맵 401 에러 해결

---------

Co-authored-by: Lee SeungHyun <[email protected]>
Co-authored-by: NowVic99 <[email protected]>
  • Loading branch information
@namnam-5799 @NowVic99
3 people authored Jan 27, 2023
1 parent c566647 commit 4cb9ba8
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 177 deletions.
152 changes: 69 additions & 83 deletions project/src/components/KakaoMap.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { useState, useEffect } from "react";
import { useEffect } from "react";
import styled from "styled-components";


declare global {
interface Window {
kakao: any;
Expand Down Expand Up @@ -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영역
Expand All @@ -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 // 확대되어 보여지는 레벨 설정
};

// 기본 주소 객체 생성
Expand All @@ -86,16 +79,13 @@ const KakaoMap = ({width, height, dataList, position, left, regionFilter, compon
// 내 위치 찾는거 누르면?
if(filterOrPosition === true){



// 내위치 받아오기 예제
if (navigator.geolocation) {
console.log('내 위치를 받아오기')

// 주변 데이터 보여주기 위해서 값 불러오기
console.log('리스트 데이터',dataset)


// 내 위치먼저 불러온 다음에
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function(position) {
Expand All @@ -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) {
Expand Down Expand Up @@ -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:
`<div
style="
width:180px;
height:110px;
background-color:white;
padding:5px 5px;
border:none;
position:relative;
left:-1px;
text-align:center;
top:-1px;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
border-radius:2px">
<h3
style="
color:#6255F8;
width:100%;
height:30px;
background-color:#faf7df;
line-height:30px">
${modalData.attractionName}
</h3>
<h3 style="
font-size:12px;
color:#515151;
font-weight:500;
padding:8px 0">
${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:
`<div
style="
width:180px;
height:110px;
background-color:white;
padding:5px 5px;
border:none;
position:relative;
left:-1px;
text-align:center;
top:-1px;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
border-radius:2px">
<h3
style="
color:#6255F8;
width:100%;
height:30px;
background-color:#faf7df;
line-height:30px">
${modalData.attractionName}
</h3>
<a href="/attractions/detail/${modalData.attractionId}"
style="
font-size:11px;
text-decoration-line:none;
font-weight:600;
margin-left:130px">
더보기
</a>
</div>`,
disableAutoPan: false
});

// 인포윈도우 표시
infowindow.open(map, marker);

//map.setCenter(coords);
map.panTo(placePosition);
map.relayout();
}
})
<h3 style="
font-size:12px;
color:#515151;
font-weight:500;
padding:8px 0">
${modalData.attractionAddress}
</h3>
<a href="/attractions/detail/${modalData.attractionId}"
style="
font-size:11px;
text-decoration-line:none;
font-weight:600;
margin-left:130px">
더보기
</a>
</div>`,
disableAutoPan: false
});

// 인포윈도우 표시
infowindow.open(map, marker);

//map.setCenter(coords);
map.panTo(placePosition);
map.relayout();
}
})
}
}
}

Expand All @@ -253,7 +242,7 @@ const KakaoMap = ({width, height, dataList, position, left, regionFilter, compon
//map.setCenter(latlng);
}
});
}
};

// Map Control - 공통
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
Expand All @@ -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(
<>
Expand Down
7 changes: 0 additions & 7 deletions project/src/components/Ranking/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
2 changes: 1 addition & 1 deletion project/src/pages/Map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<any>(false);

Expand Down
Loading

0 comments on commit 4cb9ba8

Please sign in to comment.