TicketFee 하나만 불러오기

client/src/components/Admin/CinemaEdit.js

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import TicketEditForm from "./TicketEditForm.js";
 import TicketFeeTable from "./TicketFeeTable.js";
 import cinemaApi from "../../apis/cinema.api.js";
+import theaterApi from "../../apis/theater.api.js";
 import catchErrors from "../../utils/catchErrors.js";
 import styles from "./admin.module.scss";
 
@@ -15,12 +16,15 @@ const INIT_CINEMAINFO = {
 
 const CinemaEdit = () => {
     const [cinemaInfo, setCinemaInfo] = useState(INIT_CINEMAINFO)
+    const [theaterTypeList, setTheaterTypeList] = useState([])
+    const [selectTheater, setSelectTheater] = useState(0)
     const [ticketFee, setTicketFee] = useState({})
     const [error, setError] = useState("")
     const formRef = useRef(null)
 
     useEffect(() => {
         getInfo()
+        getTicketFeeInfo()
     }, [])
 
     function handleChange(e) {
@@ -49,6 +53,15 @@ const CinemaEdit = () => {
         }
     }
 
+    async function getTicketFeeInfo() {
+        try {
+            const res = await theaterApi.getTheaterType()
+            setTheaterTypeList(res)
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
     return (
         <>
             <h2 className="border-bottom border-2 text-center pb-2 me-2">현재 영화관 정보</h2>
@@ -73,7 +86,14 @@ const CinemaEdit = () => {
             <p className="mb-0">영화관람료 설정</p>
             <p className="text-danger">*추가금액 정보를 입력바랍니다. 필요에 따라 기본가격 또한 변경 가능합니다.</p>
             <TicketEditForm editFee={ticketFee} formRef={formRef} />
-            <TicketFeeTable setEditFee={setTicketFee} formRef={formRef} />
+            <label className="form-label">영화관람료 안내</label>
+            <nav aria-label="breadcrumb">
+                <ol className={"breadcrumb" + (theaterTypeList.length === 0 ? " d-flex justify-content-center" : "" )}>
+                    {theaterTypeList.length !== 0 ? theaterTypeList.map(theater => <li className={`breadcrumb-item ${styles.cursor}`} key={theater.id} onClick={() => setSelectTheater(theater.id)}>{theater.theaterTypeName}</li>) 
+                    : <li>등록된 관람료 관련 정보가 없습니다.</li>}
+                </ol>
+            </nav>
+            <TicketFeeTable selectTheater={selectTheater} setEditFee={setTicketFee} formRef={formRef} />
             <div className="mb-3">
                 <label htmlfor="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,18 +3,19 @@ import cinemaApi from "../../apis/cinema.api.js";
 import catchErrors from "../../utils/catchErrors.js";
 import styles from "./admin.module.scss";
 
-const TicketFeeTable = ({ setEditFee, formRef }) => {
+const TicketFeeTable = ({ selectTheater, setEditFee, formRef }) => {
     const [ticketFee, setTicketFee] = useState([])
     const [error, setError] = useState("")
 
     useEffect(() => {
-        getInfo()
-    }, [])
+        if (selectTheater !== 0) getOne(selectTheater)
+    }, [selectTheater])
 
-    async function getInfo() {
+    async function getOne(theatertypeId) {
         try {
-            const res = await cinemaApi.getTicketFee()
-            setTicketFee(res)
+            setError("")
+            const res = await cinemaApi.getTicketFeeOne(theatertypeId)
+            setTicketFee([res])
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -36,7 +37,7 @@ const TicketFeeTable = ({ setEditFee, formRef }) => {
             setError("")
             await cinemaApi.removeTicketFee(theatertypeId)
             alert("해당 관람료 정보를 성공적으로 삭제했습니다.")
-            getInfo()
+            window.location.reload()
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -47,8 +48,7 @@ const TicketFeeTable = ({ setEditFee, formRef }) => {
     }
 
     return (
-        <table className={`table caption-top text-center align-middle ${styles.tableForm}`}>
-            <caption className="text-dark">영화관람료 안내</caption>
+        <table className={`table text-center align-middle ${styles.tableForm}`}>
             <thead className={`table-dark align-middle ${styles.dNone}`}>
                 <tr>
                     <th className={styles.word}>상영관 종류</th>
@@ -116,7 +116,7 @@ const TicketFeeTable = ({ setEditFee, formRef }) => {
                         </tr>
                     </>)
                     : <tr>
-                        <td colSpan="7">등록된 관람료 관련 정보가 없습니다.</td>
+                        <td colSpan="7">상단의 상영관을 선택해주십시오.</td>
                     </tr>}
             </tbody>
         </table>

client/src/components/Admin/admin.module.scss

@@ -68,6 +68,10 @@
     }
 }
 
+.cursor {
+    cursor: pointer;
+}
+
 .textarea {
     resize: none;
 }