정성훈 / MEALKHU

Go to a project
Toggle navigation Toggle navigation pinning
swa07016
edb19f49 1 parent 716f4d1e

LandingMap 컴포넌트 구현

Inline Side-by-side
Showing 3 changed files with 105 additions and 13 deletions
...@@ -32,6 +32,22 @@ height: 100%; ...@@ -32,6 +32,22 @@ height: 100%;
32 <style> 32 <style>
33 #root, .modalClass{font-family: 'Do Hyeon', sans-serif;} 33 #root, .modalClass{font-family: 'Do Hyeon', sans-serif;}
34 </style> 34 </style>
35 + <style>
36 + body::-webkit-scrollbar {
37 + width: 10px;
38 + background: transparent;
39 + }
40 + body::-webkit-scrollbar-thumb {
41 + background-color: #940f0f;
42 + border-radius: 10px;
43 + }
44 + html,
45 + body {
46 + /* width:100vw; or % */
47 + /* height:100vh; or % */
48 + overflow-x: hidden;
49 + }
50 + </style>
35 </head> 51 </head>
36 <body class="pt-5" style="width : 100%; height:100%; margin: 0;"> 52 <body class="pt-5" style="width : 100%; height:100%; margin: 0;">
37 <noscript>You need to enable JavaScript to run this app.</noscript> 53 <noscript>You need to enable JavaScript to run this app.</noscript>
......
1 +/*global kakao*/
2 +import React, { useEffect, useState } from 'react'
3 +import appKey from '../config/appKey.json';
4 +
5 +const LandingMap = (props) => {
6 +
7 + useEffect(()=>{
8 +
9 + const script = document.createElement("script");
10 + script.async = true;
11 + script.src =
12 + `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${appKey.value}&autoload=false`;
13 + document.head.appendChild(script);
14 +
15 + script.onload = () => {
16 + kakao.maps.load(() => {
17 + let container = document.getElementById("map");
18 + let options = {
19 + center: new kakao.maps.LatLng(37.2464876, 127.0768072),
20 + level: 3
21 + };
22 + let map = new window.kakao.maps.Map(container, options);
23 + let positions = [];
24 + // 마커 이미지를 생성합니다
25 + // 마커 이미지의 이미지 크기 입니다
26 + let imageSize = new kakao.maps.Size(40, 40);
27 + // let imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
28 + let imageSrc_cafe = "https://cdn.icon-icons.com/icons2/882/PNG/512/1-68_icon-icons.com_68826.png";
29 + let imageSrc_meal = "https://cdn.icon-icons.com/icons2/882/PNG/512/1-63_icon-icons.com_68800.png";
30 + let imageSrc_pub = "https://cdn.icon-icons.com/icons2/882/PNG/512/1-71_icon-icons.com_68803.png";
31 +
32 + const CreateMarkerImage = (type) => {
33 + if(type === '술집' || type === '호프') return new kakao.maps.MarkerImage(imageSrc_pub, imageSize);
34 + else if(type === '카페' || type === '디저트') return new kakao.maps.MarkerImage(imageSrc_cafe, imageSize);
35 + else return new kakao.maps.MarkerImage(imageSrc_meal, imageSize);
36 + }
37 +
38 + for(let i=0; i<props.datas.length; i++) {
39 + const temp = props.datas[i];
40 + positions.push({
41 + title: temp.name,
42 + latlng: new kakao.maps.LatLng(temp.latitude, temp.longitude),
43 + image : CreateMarkerImage(temp.type)
44 + });
45 + }
46 +
47 +
48 + for (let i = 0; i < positions.length; i ++) {
49 +
50 +
51 +
52 +
53 +
54 + // 마커를 생성합니다
55 + let marker = new kakao.maps.Marker({
56 + map: map, // 마커를 표시할 지도
57 + position: positions[i].latlng, // 마커를 표시할 위치
58 + title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
59 + image : positions[i].image // 마커 이미지
60 + });
61 + }
62 + });
63 +
64 +
65 + };
66 + });
67 +
68 +
69 + return (
70 + <>
71 + <h1 className="text-center">
72 + <span className="font-weight-bold">MEALKHU MAP</span>
73 + </h1>
74 + <div id='map' style={{
75 + 'width':'100%',
76 + 'height':'30rem'
77 + }}></div>
78 + </>
79 + )
80 +}
81 +
82 +export default LandingMap;
...\ No newline at end of file ...\ No newline at end of file
1 import React, { useState, useEffect } from 'react'; 1 import React, { useState, useEffect } from 'react';
2 import NavBar from '../components/NavBar'; 2 import NavBar from '../components/NavBar';
3 -import MealCard from '../components/MealCard'; 3 +import LandingMap from '../components/LandingMap';
4 import { CustomInput } from 'reactstrap'; 4 import { CustomInput } from 'reactstrap';
5 import { Container, Row, Col } from "reactstrap"; 5 import { Container, Row, Col } from "reactstrap";
6 import axios from 'axios'; 6 import axios from 'axios';
7 -import Loading from '../components/Loading'; 7 +
8 8
9 const LandingPage = (props) => { 9 const LandingPage = (props) => {
10 const [datas, setDatas] = useState([]); 10 const [datas, setDatas] = useState([]);
...@@ -21,6 +21,7 @@ const LandingPage = (props) => { ...@@ -21,6 +21,7 @@ const LandingPage = (props) => {
21 const [cafe, setCafe] = useState(false); 21 const [cafe, setCafe] = useState(false);
22 const [etc, setEtc] = useState(false); 22 const [etc, setEtc] = useState(false);
23 23
24 +
24 useEffect(() => { 25 useEffect(() => {
25 const fetchData = async () => { 26 const fetchData = async () => {
26 const result = await axios( 27 const result = await axios(
...@@ -152,21 +153,14 @@ const LandingPage = (props) => { ...@@ -152,21 +153,14 @@ const LandingPage = (props) => {
152 onChange={()=>setEtc(!etc)} 153 onChange={()=>setEtc(!etc)}
153 /> 154 />
154 </Col> 155 </Col>
155 - 156 +
156 </Row> 157 </Row>
158 + {datas ? <LandingMap
159 + datas = {datas}
160 + /> : 'loading...'}
157 </Container> 161 </Container>
158 162
159 163
160 - <Container>
161 - {/* ???????? ???? */}
162 - {/* <FormGroup>
163 - <Label for="exampleCheckbox">??</Label>
164 - <div>
165 - <CustomInput type="checkbox" id="exampleCustomInline" label="??" inline />
166 -
167 - </div>
168 - </FormGroup> */}
169 - </Container>
170 164
171 165
172 166
......