관람료-상영관타입 연관 완성

client/src/apis/cinema.api.js

@@ -16,8 +16,8 @@ const getTicketFee = async () => {
     return data
 }
 
-const getTicketFeeOne = async (theaterType) => {
-    const { data } = await axios.get(`${baseUrl}/api/info/ticketfee/${theaterType}`)
+const getTicketFeeOne = async (theatertypeId) => {
+    const { data } = await axios.get(`${baseUrl}/api/info/ticketfee/${theatertypeId}`)
     return data
 }
 
@@ -26,8 +26,8 @@ const editTicketFee = async (ticketFeeInfo) => {
     return data
 }
 
-const removeTicketFee = async (theaterType) => {
-    const { data } = await axios.delete(`${baseUrl}/api/info/ticketfee?theaterType=${theaterType}`)
+const removeTicketFee = async (theatertypeId) => {
+    const { data } = await axios.delete(`${baseUrl}/api/info/ticketfee?theaterTypeId=${theatertypeId}`)
     return data
 }
 

client/src/components/Admin/TicketEditForm.js

@@ -4,7 +4,8 @@ import catchErrors from "../../utils/catchErrors.js";
 import styles from "./admin.module.scss";
 
 const INIT_TICKETFEE = {
-    theaterType: "",
+    theatertypeId: 0,
+    theaterTypeName: "",
     weekdays: "",
     weekend: "",
     morning: "",
@@ -43,10 +44,11 @@ const TicketEditForm = ({ editFee, formRef }) => {
 
     return (
         <form ref={formRef} onSubmit={handleSubmit}>
+            {console.log("fidsapd===",editFee)}
             <div className="d-flex row row-cols-2 mb-2 mb-md-3 gx-0 gy-2 gy-md-0">
                 <label htmlfor="theaterType" className="col-md-auto col-form-label text-center text-md-start">상영관 종류</label>
                 <div className="col-md-4 col-lg-3 mx-md-2">
-                    <input className={`form-control ${styles.shadowNone}`} type="text" id="theaterType" name="theaterType" value={ticketFee.theaterType} onChange={handleChange} />
+                    <input className={`form-control ${styles.shadowNone}`} type="text" id="theaterTypeName" name="theaterTypeName" value={ticketFee.theaterTypeName} onChange={handleChange} />
                 </div>
                 <label htmlfor="defaultPrice" className="col-md-auto col-form-label text-center text-md-start">기본 가격</label>
                 <div className="col-md-3 col-lg-2 mx-md-2">

client/src/components/Admin/TicketFeeTable.js

@@ -20,10 +20,10 @@ const TicketFeeTable = ({ setEditFee, formRef }) => {
         }
     }
 
-    async function editRow(theaterType) {
+    async function editRow(theatertypeId) {
         try {
             setError("")
-            const res = await cinemaApi.getTicketFeeOne(theaterType)
+            const res = await cinemaApi.getTicketFeeOne(theatertypeId)
             setEditFee({ ...res })
             formRef?.current.scrollIntoView({ behavior: "smooth", block: "center" })
         } catch (error) {
@@ -31,10 +31,10 @@ const TicketFeeTable = ({ setEditFee, formRef }) => {
         }
     }
 
-    async function deleteData(theaterType) {
+    async function deleteData(theatertypeId) {
         try {
             setError("")
-            await cinemaApi.removeTicketFee(theaterType)
+            await cinemaApi.removeTicketFee(theatertypeId)
             alert("해당 관람료 정보를 성공적으로 삭제했습니다.")
             getInfo()
         } catch (error) {
@@ -64,7 +64,7 @@ const TicketFeeTable = ({ setEditFee, formRef }) => {
                 {ticketFee.length !== 0 ? ticketFee.map(info =>
                     <>
                         <tr>
-                            <td rowSpan="6" className={`d-block d-md-table-cell ${styles.Row} ${styles.type}`}>{info.theaterType}</td>
+                            <td rowSpan="6" className={`d-block d-md-table-cell ${styles.Row} ${styles.type}`}>{info.theatertype.theaterTypeName}</td>
                             <td rowSpan="3" className={`d-block d-md-table-cell ${styles.Row} ${styles.moreData}`} data-label="- 청소년 / 성인 / 경로">주중(월~목)</td>
                             <td className="d-inline-block d-md-table-cell">조조 (06:00 ~ )</td>
                             <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.morning + info.youth + info.defaultPrice)}원</td>
@@ -72,8 +72,8 @@ const TicketFeeTable = ({ setEditFee, formRef }) => {
                             <td className="d-inline-block d-md-table-cell">{priceToString(info.weekdays + info.morning + info.senior + info.defaultPrice)}원</td>
                             <td rowSpan="6" className="d-none d-md-table-cell">
                                 <div className="d-flex flex-column">
-                                    <button type="button" className="btn btn-primary my-1" onClick={() => editRow(info.theaterType)}>수정</button>
-                                    <button type="button" className="btn btn-danger my-1" onClick={() => deleteData(info.theaterType)}>삭제</button>
+                                    <button type="button" className="btn btn-primary my-1" onClick={() => editRow(info.theatertypeId)}>수정</button>
+                                    <button type="button" className="btn btn-danger my-1" onClick={() => deleteData(info.theatertypeId)}>삭제</button>
                                 </div>
                             </td>
                         </tr>
@@ -109,8 +109,8 @@ const TicketFeeTable = ({ setEditFee, formRef }) => {
                             <td className="d-inline-block d-md-table-cell">{priceToString(info.weekend + info.night + info.senior + info.defaultPrice)}원</td>
                             <td className={`d-block d-md-none ${styles.borderTop}`}>
                                 <div className="d-flex justify-content-end">
-                                    <button type="button" className="btn btn-primary" onClick={() => editRow(info.theaterType)}>수정</button>
-                                    <button type="button" className="btn btn-danger ms-2" onClick={() => deleteData(info.theaterType)}>삭제</button>
+                                    <button type="button" className="btn btn-primary" onClick={() => editRow(info.theatertypeId)}>수정</button>
+                                    <button type="button" className="btn btn-danger ms-2" onClick={() => deleteData(info.theatertypeId)}>삭제</button>
                                 </div>
                             </td>
                         </tr>

server/controllers/ticketfee.controller.js

-import { TicketFee } from "../db/index.js";
+import { TheaterType, TicketFee } from "../db/index.js";
 
 const getAll = async (req, res) => {
     try {
-        const findAll = await TicketFee.findAll({ attributes: { exclude: ['createdAt', 'updatedAt'] } })
+        const findAll = await TicketFee.findAll({ attributes: { exclude: ['createdAt', 'updatedAt'] }, include: [ TheaterType ] })
         return res.json(findAll)
     } catch (error) {
         return res.status(500).send(error.message || "관람료 정보 가져오는 중 에러 발생")
@@ -11,8 +11,9 @@ const getAll = async (req, res) => {
 
 const getOne = async (req, res) => {
     try {
-        const { theaterType } = req.params
-        const find = await TicketFee.findOne({ where: { theaterType: theaterType }, attributes: { exclude: ['createdAt', 'updatedAt'] } })
+        const { theaterTypeId } = req.params
+        const find = await TicketFee.findOne({ where: { theatertypeId: theaterTypeId }, attributes: { exclude: ['createdAt', 'updatedAt'] }, include: [ TheaterType ] })
+        find.dataValues.theaterTypeName = find.dataValues.theatertype.dataValues.theaterTypeName
         if (!find) throw new Error("해당 정보를 찾지 못했습니다.");
         return res.json(find)
     } catch (error) {
@@ -22,26 +23,29 @@ const getOne = async (req, res) => {
 
 const edit = async (req, res) => {
     try {
-        const { theaterType } = req.body
+        const { theatertypeId, theaterTypeName, defaultPrice, weekdays, weekend, morning, day, night, youth, adult, senior } = req.body
         let response = null
-        const result = await TicketFee.findOrCreate({
-            where: { theaterType: theaterType },
-            defaults: { ...req.body }
+        const result = await TheaterType.findOrCreate({
+            where: { id: theatertypeId },
+            defaults: { theaterTypeName: theaterTypeName }
         })
-        if (!result[1]) {
-            const updateData = await TicketFee.update({ ...req.body }, { where: { theaterType: theaterType } })
-            response = updateData
-        } else response = result[0]
+        if (result[1]) {
+            response = await TicketFee.create({ theatertypeId: result[0].id, defaultPrice, weekdays, weekend, morning, day, night, youth, adult, senior })
+        } else {
+            await TheaterType.update({ theaterTypeName: theaterTypeName }, { where: { id: theatertypeId } })
+            response = await TicketFee.update({ defaultPrice, weekdays, weekend, morning, day, night, youth, adult, senior }, { where: { theatertypeId: result[0].id } })
+        }
         return res.json(response)
     } catch (error) {
-        return res.status(500).send(error.message || "관람료 정보 수정 중 에러 발생")
+        return res.status(500).send(error.message || "관람료 정보 추가 및 수정 중 에러 발생")
     }
 }
 
 const remove = async (req, res) => {
     try {
-        const { theaterType } = req.query
-        const delNum = await TicketFee.destroy({ where: { theaterType: theaterType } })
+        const { theaterTypeId } = req.query
+        const delNum = await TicketFee.destroy({ where: { theatertypeId: theaterTypeId } })
+        await TheaterType.destroy({ where: { id: theaterTypeId } })
         if (delNum) res.json(delNum)
         else throw new Error("해당 정보를 서버에서 삭제하는데 실패했습니다.");
     } catch (error) {

server/routes/cinema.route.js

@@ -10,7 +10,7 @@ router
     .put(cinemaCtrl.edit)
 
 router
-    .route("/ticketfee/:theaterType")
+    .route("/ticketfee/:theaterTypeId")
     .get(ticketfeeCtrl.getOne)
 
 router