Skip to content

GitLab

Commit 70a7254f authored by Kim, Subin's avatar Kim, Subin
Browse files

kakaoMap 추가

parent 47ca3f32
Show whitespace changes
Inline Side-by-side
client/public/index.html
View file @ 70a7254f
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey= a04f2d1d1722f5fbadd556e742465d9f&libraries=services"></script>
<title>Butter Studio</title> <title>Butter Studio</title>
</head> </head>
<body> <body>
......
client/src/components/Admin/CinemaEdit.js
View file @ 70a7254f
import { useState } from "react";
import KakaoMap from "../KakaoMap";
import styles from "./admin.module.scss";
const CinemaEdit = () => { const CinemaEdit = () => {
const [cinemaInfo, setCinemaInfo] = useState({ cinema: "", transportation: "", parking: "", adress: "" })
const [search, setSearch] = useState("")
function handleChange(e) { function handleChange(e) {
const { name, value } = e.target const { name, value } = e.target
console.log("name=",name,"value=",value) setCinemaInfo({ ...cinemaInfo, [name]: value })
} }
return ( return (
<> <>
<h2 className="border-bottom border-2 text-center pb-2 me-2">현재 영화관 정보</h2> <h2 className="border-bottom border-2 text-center pb-2 me-2">현재 영화관 정보</h2>
<input type="text" className="form-control" id="cinema" name="cinema" onChange={handleChange} /> <input type="text" className={`form-control mb-2 ${styles.shadowNone}`} id="cinema" name="cinema" onChange={handleChange} />
<p>총 상영관 수: 8개관 | 총 좌석 수: 1,282석</p> <p>총 상영관 수: 8개관 | 총 좌석 수: 1,282석</p>
<div className="mb-3"> <div className="mb-3">
<label for="transportation" className="form-label">대중교통 안내</label> <label for="transportation" className="form-label">대중교통 안내</label>
<textarea className="form-control" id="transportation" name="transportation" onChange={handleChange}></textarea> <textarea className={`form-control ${styles.shadowNone} ${styles.textarea}`} rows="7" id="transportation" name="transportation" onChange={handleChange}></textarea>
</div> </div>
<div className="mb-3"> <div className="mb-3">
<label for="parking" className="form-label">자가용/주차안내</label> <label for="parking" className="form-label">자가용/주차안내</label>
<textarea className="form-control" id="parking" name="parking" onChange={handleChange}></textarea> <textarea className={`form-control ${styles.shadowNone} ${styles.textarea}`} rows="7" id="parking" name="parking" onChange={handleChange}></textarea>
</div>
<label for="adress" 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>
<input type="text" className={`form-control ${styles.shadowNone}`} id="adress" name="adress" aria-label="map" aria-describedby="currentMap" onChange={handleChange} />
<button className="btn btn-dark" type="button" id="currentMap" onClick={() => setSearch(cinemaInfo.adress)}><i className="bi bi-search"></i></button>
</div>
<div className="d-flex justify-content-center mb-5">
<KakaoMap adress={search} />
</div> </div>
<label>지도보기</label>
</> </>
) )
} }
......
client/src/components/Admin/admin.module.scss
View file @ 70a7254f
...@@ -15,3 +15,15 @@ ...@@ -15,3 +15,15 @@
} }
} }
} }
.shadowNone {
&:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color: #000;
}
}
.textarea {
resize: none;
}
\ No newline at end of file
client/src/components/KakaoMap.js 0 → 100644
View file @ 70a7254f
import { useEffect, useRef } from "react";
const { kakao } = window;
const KakaoMap = ({ adress }) => {
const kakaoMapDiv = useRef(null)
useEffect(() => {
const container = kakaoMapDiv.current
const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
const map = new kakao.maps.Map(container, options);
const geocoder = new kakao.maps.services.Geocoder();
geocoder.addressSearch(`${adress}`, function (result, status) {
if (status === kakao.maps.services.Status.OK) {
const coords = new kakao.maps.LatLng(result[0].y, result[0].x);
const marker = new kakao.maps.Marker({
map: map,
position: coords
});
map.setCenter(coords);
} else if (adress != '') {
alert("찾을 수 없는 주소입니다. 다시 입력해주세요.")
}
});
}, [adress])
return (
<div ref={kakaoMapDiv} style={{ width: "500px", height: "400px" }}></div>
)
}
export default KakaoMap
\ 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