momokji / react-kakao-api

Go to a project
Toggle navigation Toggle navigation pinning
노강호
7a91acf7 1 parent 9219c4d5

반응형 웹 형태로 만듦

Inline Side-by-side
Showing 10 changed files with 220 additions and 24 deletions
......@@ -25,7 +25,7 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Momokji</title>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=059ebad3d5ccd28178357c542b8c80d1
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=059ebad3d5ccd28178357c542b8c80d1&libraries=services
"></script>
</head>
<body>
......
import React from "react";
import PropTypes from "prop-types";
import "./Foodlist.css";
//img의 alt와 title은 사진에 마우스 올렸을 때 나오는 제목 표시하기 위함
//css를 하기 위해서 style={{}}를 사용할 수 있다.
function Foodlist({ id, year, title, summary, poster, genres }) {
return (
<Link
to={{
pathname: `/movie/${id}`,
state: {
year,
title,
summary,
poster,
genres,
},
}}
>
<div className="movie">
<img src={poster} alt={title} title={title} />
<div className="movie__data">
<h3 className="movie__title">{title}</h3>
<h5 className="movie__year">{year}</h5>
<ul className="movie__genres">
{genres.map((genre, index) => (
//map은 (현재값, 인덱스) 두개의 아규먼트를 넘김
//key값이 없으면 오류가 나기때문에 index로 key를 만들어서 제공한다
<li key={index} className="genres__genre">
{genre}
</li>
))}
</ul>
<p className="movie__summary">{summary.slice(0, 180) + "..."}</p>
</div>
</div>
</Link>
);
}
Foodlist.propTypes = {
id: PropTypes.number.isRequired,
year: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
summary: PropTypes.string.isRequired,
poster: PropTypes.string.isRequired,
genres: PropTypes.arrayOf(PropTypes.string).isRequired,
};
export default Foodlist;
/*global kakao*/
import React, { useEffect } from "react";
const Location = () => {
useEffect(() => {
var container = document.getElementById("map");
var options = {
center: new kakao.maps.LatLng(37.365264512305174, 127.10676860117488),
level: 3,
};
var map = new kakao.maps.Map(container, options);
}, []);
return <div></div>;
};
export default Location;
......@@ -4,7 +4,9 @@ import styled from "styled-components";
const { kakao } = window;
var map;
var nowlat, nowlon;
var infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });
class MapContainer extends Component {
constructor(props) {
......@@ -41,7 +43,7 @@ class MapContainer extends Component {
//return locPosition;
});
} else {
// HTML5의 GeoLocation을 사용할 수 없을때 마
// HTML5의 GeoLocation을 사용할 수 없을때, 사용자가 위치정보 거부했을 땐
nowlat = 37.506502; // 위도
nowlon = 127.053617; // 경도커 표시 위치와 인포윈도우 내용을 설정합니다
......@@ -52,7 +54,6 @@ class MapContainer extends Component {
callback();
}
};
getMap = () => {
this.getLocation(() => {
this.setState({ lat: nowlat, lon: nowlon });
......@@ -62,7 +63,56 @@ class MapContainer extends Component {
level: 7,
};
const map = new window.kakao.maps.Map(container, options);
map = new window.kakao.maps.Map(container, options);
// 장소 검색 객체를 생성합니다
console.log(kakao.maps);
var ps = new kakao.maps.services.Places();
// 키워드로 장소를 검색합니다
ps.keywordSearch("닭갈비", this.placesSearchCB, {
radius: 1000,
location: new kakao.maps.LatLng(nowlat, nowlon),
});
ps.keywordSearch("칼국수", this.placesSearchCB, {
radius: 1000,
location: new kakao.maps.LatLng(nowlat, nowlon),
});
});
};
// 키워드 검색 완료 시 호출되는 콜백함수 입니다
placesSearchCB = (data, status, pagination) => {
if (status === kakao.maps.services.Status.OK) {
console.log(data);
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
// LatLngBounds 객체에 좌표를 추가합니다
var bounds = new kakao.maps.LatLngBounds();
for (var i = 0; i < data.length; i++) {
this.displayMarker(data[i]);
bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
}
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds);
}
};
// 지도에 마커를 표시하는 함수입니다
displayMarker = (place) => {
// 마커를 생성하고 지도에 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(place.y, place.x),
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, "click", function () {
// 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
infowindow.setContent(
`<div style="padding:5px;font-size:12px;"><a href="${place.place_url}" target="_blank">${place.place_name}</a></div>`
);
infowindow.open(map, marker);
});
};
......@@ -76,8 +126,10 @@ class MapContainer extends Component {
}
const MapContents = styled.div`
width: 500px;
height: 400px;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
`;
export default MapContainer;
......
File mode changed
@import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap");
body {
background-color: #facac0;
}
.map-container {
width: 100%;
display: flex;
justify-content: center;
}
header {
display: flex;
justify-content: center;
font-family: "Nanum Pen Script", cursive;
font-size: 55px;
font-weight: 800;
}
header > div {
width: 400px;
}
h1 {
/*text-align: center;*/
margin: 10px 25px;
font-size: 55px;
}
#weather {
}
#day {
}
.js-input {
text-align: center;
}
.align-right {
text-align: right;
}
/*div {
font-size: 30px;
text-align: center;
}*/
.main {
width: 60%;
margin: 10px 30px;
display: grid;
grid-template-columns: 3fr 1fr;
}
.main .contents {
min-height: 500px;
background-color: white;
margin-right: 10px;
}
.main .sidebar {
min-height: 500px;
background-color: white;
}
.footer {
margin-top: 10px;
background-color: white;
}
@media (max-width: 600px) {
/*가로 너비가 600px 이하일 때 아래 스타일 적용*/
header {
width: auto;
}
.main {
display: block;
}
.main .contents {
margin-bottom: 10px;
margin-right: 0px;
}
.main .sidebar {
min-height: 0;
}
}
/**/
.map_wrap,
.map_wrap * {
margin: 0;
......
import React, { useEffect } from "react";
import MapContainer from "../components/MapContainer";
import Map from "../components/Map";
import "./Home.css";
const Home = () => {
return (
<div>
<header>
<div>
{/*<Weather />*/}
<h1>오늘은</h1>
<div className="js-input">
<span id="weather">비가 오는</span> <span id="day">일요일</span>
</div>
<h1 className="align-right">이네요.</h1>
</div>
</header>
<div className="map-container">
<div className="main">
<div className="contents">
<div className="food-list">
<ul>
{/*<Foodlist />*/}
<li>닭갈비</li>
<li>칼국수</li>
</ul>
</div>
<div className="map_wrap">
<MapContainer />
</div>
</div>
<div className="sidebar">사이드바 영역입니다.</div>
</div>
</div>
<div className="footer">푸터 영역입니다.</div>
</div>
);
};
......