Merge branch 'kimpen'

client/src/components/Admin/CinemaEdit.js

@@ -3,7 +3,7 @@ import KakaoMap from "../KakaoMap";
 import styles from "./admin.module.scss";
 
 const CinemaEdit = () => {
-    const [cinemaInfo, setCinemaInfo] = useState({ cinema: "", transportation: "", parking: "", adress: "" })
+    const [cinemaInfo, setCinemaInfo] = useState({ cinema: "", transportation: "", parking: "", address: "" })
     const [search, setSearch] = useState("")
 
     function handleChange(e) {
@@ -24,14 +24,14 @@ const CinemaEdit = () => {
                 <label for="parking" className="form-label">자가용/주차안내</label>
                 <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>
+            <label for="address" 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>
+                <input type="text" className={`form-control ${styles.shadowNone}`} id="address" name="address" aria-label="map" aria-describedby="currentMap" onChange={handleChange} />
+                <button className="btn btn-dark" type="button" id="currentMap" onClick={() => setSearch(cinemaInfo.address)}><i className="bi bi-search"></i></button>
             </div>
             <div className="d-flex justify-content-center mb-5">
-                <KakaoMap adress={search} />
+                <KakaoMap address={search} />
             </div>
         </>
     )

client/src/components/Admin/MovieEdit.js

@@ -9,9 +9,11 @@ const MovieEdit = () => {
                 <Search type="admin" />
             </div>
             <MovieTable />
-            <div className="d-flex align-items-center">
+            <div className="d-md-flex">
                 <Pagination />
-                <button type="button" className="btn btn-dark" style={{ width: "5em" }}>등록</button>
+                <div className="d-flex justify-content-end col-md-3 ms-md-auto my-1">
+                    <button type="button" className="btn btn-dark" style={{ width: "5em" }}>등록</button>
+                </div>
             </div>
         </>
     )

client/src/components/KakaoMap.js

@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react";
 
 const { kakao } = window;
 
-const KakaoMap = ({ adress }) => {
+const KakaoMap = ({ address }) => {
     const kakaoMapDiv = useRef(null)
 
     useEffect(() => {
@@ -14,7 +14,7 @@ const KakaoMap = ({ adress }) => {
         const map = new kakao.maps.Map(container, options);
 
         const geocoder = new kakao.maps.services.Geocoder();
-        geocoder.addressSearch(`${adress}`, function (result, status) {
+        geocoder.addressSearch(`${address}`, 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({
@@ -22,11 +22,11 @@ const KakaoMap = ({ adress }) => {
                     position: coords
                 });
                 map.setCenter(coords);
-            } else if (adress != '') {
+            } else if (address != '') {
                 alert("찾을 수 없는 주소입니다. 다시 입력해주세요.")
             }
         });
-    }, [adress])
+    }, [address])
 
     return (
         <div ref={kakaoMapDiv} style={{ width: "500px", height: "400px" }}></div>

client/src/components/Pagination.js

 const Pagination = () => {
     return (
-        <nav aria-label="Page navigation example">
-            <ul className="pagination justify-content-center">
+        <nav className="col-md-3 ms-md-auto my-1" aria-label="Page navigation example">
+            <ul className="pagination justify-content-center mb-0">
                 <li className="page-item">
                     <a className="page-link" href="#" aria-label="Previous">
                         <span aria-hidden="true">&laquo;</span>