수정 버튼 클릭 시 form으로 이동

client/src/components/Admin/CinemaEdit.js

-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import TicketEditForm from "./TicketEditForm.js";
 import TicketFeeTable from "./TicketFeeTable.js";
 import cinemaApi from "../../apis/cinema.api.js";
@@ -17,6 +17,7 @@ const CinemaEdit = () => {
     const [cinemaInfo, setCinemaInfo] = useState(INIT_CINEMAINFO)
     const [ticketFee, setTicketFee] = useState({})
     const [error, setError] = useState("")
+    const formRef = useRef(null)
 
     useEffect(() => {
         getInfo()
@@ -71,8 +72,8 @@ const CinemaEdit = () => {
             </div>
             <p className="mb-0">영화관람료 설정</p>
             <p className="text-danger">*추가금액 정보를 입력바랍니다. 필요에 따라 기본가격 또한 변경 가능합니다.</p>
-            <TicketEditForm editFee={ticketFee} />
-            <TicketFeeTable setEditFee={setTicketFee} />
+            <TicketEditForm editFee={ticketFee} formRef={formRef} />
+            <TicketFeeTable setEditFee={setTicketFee} formRef={formRef} />
             <div className="mb-3">
                 <label for="moreFeeInfo" className="form-label">관람료 추가정보</label>
                 <textarea className={`form-control ${styles.shadowNone} ${styles.textarea}`} rows="7" id="moreFeeInfo" name="moreFeeInfo" value={cinemaInfo.moreFeeInfo} onChange={handleChange}></textarea>

client/src/components/Admin/TicketFeeTable.js

@@ -3,7 +3,7 @@ import cinemaApi from "../../apis/cinema.api.js";
 import catchErrors from "../../utils/catchErrors.js";
 import styles from "./admin.module.scss";
 
-const TicketFeeTable = ({ setEditFee }) => {
+const TicketFeeTable = ({ setEditFee, formRef }) => {
     const [ticketFee, setTicketFee] = useState([])
     const [error, setError] = useState("")
 
@@ -21,6 +21,7 @@ const TicketFeeTable = ({ setEditFee }) => {
             setError("")
             const res = await cinemaApi.getTicketFeeOne(theaterType)
             setEditFee({ ...res })
+            formRef?.current.scrollIntoView({ behavior: "smooth", block: "center" })
         } catch (error) {
             catchErrors(error, setError)
         }