Skip to content

GitLab

Commit d7800303 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'kimpen'

parents f1c0c87d 2757306f
Hide whitespace changes
Inline Side-by-side
client/src/components/Admin/CinemaEdit.js
View file @ d7800303
......@@ -3,7 +3,7 @@ import KakaoMap from "../KakaoMap";
import styles from "./admin.module.scss";
const CinemaEdit = () => {
const [cinemaInfo, setCinemaInfo] = useState({ cinema: "", transportation: "", parking: "", keyword: "" })
const [cinemaInfo, setCinemaInfo] = useState({ cinema: "", transportation: "", parking: "", keyword: "", address: "" })
const [search, setSearch] = useState("")
function handleChange(e) {
......@@ -26,12 +26,15 @@ const CinemaEdit = () => {
</div>
<label for="keyword" className="form-label">지도보기</label>
<div className="input-group mb-3">
<span className="input-group-text" id="currentMap"><i className="bi bi-geo-alt-fill"></i></span>
<span className="input-group-text" id="address"><i className="bi bi-geo-alt-fill"></i></span>
<input type="text" className={`form-control ${styles.shadowNone}`} id="address" name="address" aria-label="map" aria-describedby="address" onChange={handleChange} value={cinemaInfo.address} />
</div>
<div className="input-group mb-3">
<input type="text" className={`form-control ${styles.shadowNone}`} id="keyword" name="keyword" aria-label="map" aria-describedby="currentMap" onChange={handleChange} />
<button className="btn btn-dark" type="button" id="currentMap" onClick={() => setSearch(cinemaInfo.keyword)}><i className="bi bi-search"></i></button>
</div>
<div className="d-flex justify-content-center mb-5">
<KakaoMap keyword={search} />
<KakaoMap keyword={search} cinemaInfo={cinemaInfo} setCinemaInfo={setCinemaInfo} />
</div>
</>
)
......
client/src/components/KakaoMap/KakaoMap.js
View file @ d7800303
......@@ -3,7 +3,7 @@ import styles from "./kakao-map.module.scss";
const { kakao } = window;
const KakaoMap = ({ keyword }) => {
const KakaoMap = ({ keyword, cinemaInfo, setCinemaInfo }) => {
const kakaoMapDiv = useRef(null)
const menu = useRef(null)
const searchList = useRef(null)
......@@ -37,18 +37,7 @@ const KakaoMap = ({ keyword }) => {
function placesSearchCB(data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
displayPlaces(data);
// 페이지 번호를 표출합니다
displayPagination(pagination);
// let bounds = new kakao.maps.LatLngBounds()
// for (let i = 0; i < data.length; i++) {
// displayMarker(data[i])
// bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x))
// }
// map.setBounds(bounds)
// // 페이지 목록 보여주는 displayPagination() 추가
// displayPagination(pagination)
// setPlaces(data)
displayPagination(pagination); // 페이지 번호를 표출합니다
} else if (status === kakao.maps.services.Status.ZERO_RESULT) {
alert('검색 결과가 존재하지 않습니다.');
return
......@@ -63,8 +52,7 @@ const KakaoMap = ({ keyword }) => {
let listEl = searchList.current,
menuEl = menu.current,
fragment = document.createDocumentFragment(),
bounds = new kakao.maps.LatLngBounds(),
listStr = '';
bounds = new kakao.maps.LatLngBounds();
for (let i = 0; i < places.length; i++) {
// 마커를 생성하고 지도에 표시합니다
......@@ -96,14 +84,19 @@ const KakaoMap = ({ keyword }) => {
infowindow.close();
})
itemEl.onmouseover = function () {
itemEl.style.background = 'rgba(0, 0, 0, 0.075)';
itemEl.style.cursor = 'pointer';
infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>')
infowindow.open(map, marker)
};
itemEl.onmouseout = function () {
itemEl.style.background = '#fff';
infowindow.close();
};
itemEl.onclick = function () {
setCinemaInfo({ ...cinemaInfo, address: place.address_name })
}
}
}, [keyword])
// 검색결과 목록 하단에 페이지번호를 표시는 함수입니다
......@@ -114,7 +107,7 @@ const KakaoMap = ({ keyword }) => {
for (i = 1; i <= pagination.last; i++) {
let el = document.createElement('a');
el.href = "#";
// el.href = "#";
el.innerHTML = i;
if (i === pagination.current) {
el.className = 'on';
......@@ -132,9 +125,8 @@ const KakaoMap = ({ keyword }) => {
// 검색결과 항목을 Element로 반환하는 함수입니다
function getListItem(index, places) {
let el = document.createElement('li'),
itemStr = '<span className="markerbg marker_' + (index + 1) + '"></span>' +
'<div className="info">' +
let el = document.createElement('div'),
itemStr = '<div className="info">' +
' <h5>' + places.place_name + '</h5>';
if (places.road_address_name) {
......@@ -152,47 +144,11 @@ const KakaoMap = ({ keyword }) => {
return el;
}
// 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
// function addMarker(position, idx, title) {
// const imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
// imageSize = new kakao.maps.Size(36, 37), // 마커 이미지의 크기
// imgOptions = {
// spriteSize: new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
// spriteOrigin: new kakao.maps.Point(0, (idx * 46) + 10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
// offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
// },
// markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions),
// marker = new kakao.maps.Marker({
// position: position, // 마커의 위치
// image: markerImage
// });
// marker.setMap(map); // 지도 위에 마커를 표출합니다
// markers.push(marker); // 배열에 생성된 마커를 추가합니다
// return marker;
// }
return (
<>
<div ref={kakaoMapDiv} style={{ width: "500px", height: "400px" }}></div>
<div ref={menu} className="bg-white">
<div ref={menu} className={`${styles.menu} bg-white`}>
<div ref={searchList}></div>
{/* {places.map((item, i) => (
<div key={i} style={{ marginTop: '20px' }}>
<h5>{i + 1}. {item.place_name}</h5>
<div>
{item.road_address_name ? (
<div>
<span>{item.road_address_name}</span>
<span>{item.address_name}</span>
</div>
) : (
<span>{item.address_name}</span>
)}
<span>{item.phone}</span>
</div>
</div>
))} */}
<div ref={page}></div>
</div>
</>
......
client/src/components/KakaoMap/kakao-map.module.scss
View file @ d7800303
// .menu {
// position:absolute;
// top:0;
// left:0;
// bottom:0;
// width:250px;
// margin:10px 0 30px 10px;
// padding:5px;
// overflow-y:auto;
// background:rgba(255, 255, 255, 0.7);
// z-index: 1;
// font-size:12px;
// border-radius: 10px;
// }
\ No newline at end of file
client/src/utils/baseUrl.js
View file @ d7800303
import clientConfig from './clientConfig'
const baseUrl = process.env.NODE_ENV === 'production'
? `http://localhost:3001/ ${clientConfig.serverRoot}`
? `http://localhost:3001/${clientConfig.serverRoot}`
: `http://localhost:3000`
export default baseUrl
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment