kakaoMap 추가

70a7254f · Kim, Subin · 47ca3f32 · 70a7254f · 70a7254f · 70a7254f
Commit 70a7254f authored Jul 07, 2021 by Kim, Subin
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -24,6 +24,7 @@
      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`.
    -->
+    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=	a04f2d1d1722f5fbadd556e742465d9f&libraries=services"></script>
    <title>Butter Studio</title>
  </head>
  <body>

--- a/client/src/components/Admin/CinemaEdit.js
+++ b/client/src/components/Admin/CinemaEdit.js
+import { useState } from "react";
+import KakaoMap from "../KakaoMap";
+import styles from "./admin.module.scss";
+
 const CinemaEdit = () => {
+    const [cinemaInfo, setCinemaInfo] = useState({ cinema: "", transportation: "", parking: "", adress: "" })
+    const [search, setSearch] = useState("")
+
    function handleChange(e) {
        const { name, value } = e.target
-        console.log("name=",name,"value=",value)
+        setCinemaInfo({ ...cinemaInfo, [name]: value })
    }

    return (
        <>
            <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>
            <div className="mb-3">
                <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 className="mb-3">
                <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>
-            <label>지도보기</label>
        </>
    )
 }

--- a/client/src/components/Admin/admin.module.scss
+++ b/client/src/components/Admin/admin.module.scss
@@ -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
--- a/client/src/components/KakaoMap.js
+++ b/client/src/components/KakaoMap.js
+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