theaterEdit 기능 완성

client/src/apis/theater.api.js

@@ -6,8 +6,8 @@ const getAll = async () => {
     return data
 }
 
-const getOne = async () => {
-    const { data } = await axios.get(`${baseUrl}/api/theater`)
+const getOne = async (theaterId) => {
+    const { data } = await axios.get(`${baseUrl}/api/theater/${theaterId}`)
     return data
 }
 
@@ -17,12 +17,12 @@ const getTheaterType = async () => {
 }
 
 const sendData = async (theater) => {
-    const { data } = await axios.put(`${baseUrl}/api/theater/type`, theater)
+    const { data } = await axios.put(`${baseUrl}/api/theater`, theater)
     return data
 }
 
-const remove = async () => {
-    const { data } = await axios.delete(`${baseUrl}/api/theater`)
+const remove = async (theaterId) => {
+    const { data } = await axios.delete(`${baseUrl}/api/theater/${theaterId}`)
     return data
 }
 

client/src/components/Admin/TheaterEditForm.js

@@ -4,8 +4,9 @@ import catchErrors from "../../utils/catchErrors.js";
 import styles from "./admin.module.scss";
 
 const INIT_THEATER = {
+    id: 0,
     theaterName: "",
-    theaterType: 0,
+    theatertypeId: 0,
     rows: 1,
     columns: 1
 }
@@ -51,22 +52,23 @@ const TheaterEditForm = ({ edit, formRef }) => {
     }
 
     return (
-        <form ref={formRef} onSubmit={handleSubmit}>
-            <div className="d-flex justify-content-lg-between row row-cols-2 row-cols-lg-4 gx-0 gy-2 gy-lg-0 mb-2 mb-lg-3">
+        <form ref={formRef} className="mb-5" onSubmit={handleSubmit}>
+            <div className="d-flex justify-content-lg-between row row-cols-2 row-cols-lg-5 gx-0 gy-2 gy-lg-0 mb-2 mb-lg-3">
                 <label htmlfor="theaterName" className="col-3 col-lg-auto col-form-label">상영관 이름</label>
-                <div className="col-9 col-lg-4">
+                <div className="col-8 col-lg-4">
                     <input className={`form-control ${styles.shadowNone}`} id="theaterName" name="theaterName" type="text" value={theater.theaterName} onChange={handleChange} />
                 </div>
+                <lebel htmlfor="theaterName" className="col-auto col-form-label mx-2 mx-lg-0">관</lebel>
                 <label htmlfor="theaterType" className="col-3 col-lg-auto col-form-label text-lg-center">상영관 종류</label>
                 <div className="col-9 col-lg-5">
-                    <select className={`form-select ${styles.shadowNone} ${styles.selectInput}`} id="theaterType" name="theaterType" onChange={handleChange} aria-label="select theaterType" defaultValue={theater.theaterType}>
+                    <select className={`form-select ${styles.shadowNone} ${styles.selectInput}`} id="theatertypeId" name="theatertypeId" value={theater.theatertypeId} onChange={handleChange} aria-label="select theaterType" defaultValue="0">
                         {types.length !== 0 ?
                             types.map((type, index) => {
                                 if (index === 0) return <>
                                     <option value="0" disabled>상영관 종류를 선택해주십시오.</option>
-                                    <option value={type.id}>{type.theaterType}</option>
+                                    <option value={type.id}>{type.theaterTypeName}</option>
                                 </>
-                                else return <option value={type.id}>{type.theaterType}</option>
+                                else return <option value={type.id}>{type.theaterTypeName}</option>
                             })
                             : <option value="0" disabled>서버에 등록된 상영관 종류가 없습니다.</option>}
                     </select>

client/src/components/Admin/TheaterTable.js

@@ -21,10 +21,10 @@ const TheaterTable = ({ setEdit, formRef }) => {
         }
     }
 
-    async function editTheater() {
+    async function editTheater(theaterId) {
         try {
             setError("")
-            const res = await theaterApi.getOne()
+            const res = await theaterApi.getOne(theaterId)
             setEdit({ ...res })
             formRef?.current.scrollIntoView({ behavior: "smooth", block: "center" })
         } catch (error) {
@@ -32,10 +32,10 @@ const TheaterTable = ({ setEdit, formRef }) => {
         }
     }
 
-    async function deleteTheater() {
+    async function deleteTheater(theaterId) {
         try {
             setError("")
-            await theaterApi.remove()
+            await theaterApi.remove(theaterId)
             alert("해당 상영관 정보를 성공적으로 삭제했습니다.")
             getTheaterList()
         } catch (error) {
@@ -45,6 +45,7 @@ const TheaterTable = ({ setEdit, formRef }) => {
 
     return (
         <table className={`table text-center align-middle ${styles.tableForm}`}>
+            {console.log("asd==",theaterList)}
             <thead className={`table-dark align-middle ${styles.dNone}`}>
                 <tr>
                     <th>상영관 이름</th>
@@ -56,13 +57,13 @@ const TheaterTable = ({ setEdit, formRef }) => {
             <tbody>
                 {theaterList.length !== 0 ? theaterList.map(info =>
                     <tr>
-                        <td>ads</td>
-                        <td>ads</td>
-                        <td>ads</td>
+                        <td>{info.theaterName}관</td>
+                        <td>{info.theatertype.theaterTypeName}</td>
+                        <td>{info.rows}행 {info.columns}열<br />총 {info.rows*info.columns}석</td>
                         <td>
                             <div className="d-flex flex-column">
-                                <button type="button" className="btn btn-primary my-1" onClick={() => editTheater()}>수정</button>
-                                <button type="button" className="btn btn-danger my-1" onClick={() => deleteTheater()}>삭제</button>
+                                <button type="button" className="btn btn-primary my-1" onClick={() => editTheater(info.id)}>수정</button>
+                                <button type="button" className="btn btn-danger my-1" onClick={() => deleteTheater(info.id)}>삭제</button>
                             </div>
                         </td>
                     </tr>)

server/controllers/theater.controller.js

-import { Theater, TicketFee } from "../db/index.js";
+import { Theater, TheaterType } from "../db/index.js";
 
 const getAll = async (req, res) => {
     try {
-        const findList = await Theater.findAll({ include: [{ model: TicketFee, attributes: ["theaterType"] }] })
-        console.log("Ads==", findList)
+        const findList = await Theater.findAll({ attributes: { exclude: ['createdAt', 'updatedAt'] }, include: [ TheaterType ], order: [['theaterName']] })
         return res.json(findList)
     } catch (error) {
         return res.status(500).send(error.message || "상영관 정보 가져오는 중 에러 발생")
     }
 }
 
+const getOne = async (req, res) => {
+    try {
+        const { theaterId } = req.params
+        const find = await Theater.findOne({ where: { id: theaterId } , attributes: { exclude: ['createdAt', 'updatedAt'] } })
+        if (!find) throw new Error("해당 정보를 찾지 못했습니다.");
+        return res.json(find)
+    } catch (error) {
+        return res.status(500).send(error.message || "상영관 정보 가져오는 중 에러 발생")
+    }
+}
+
 const getTypes = async (req, res) => {
     try {
-        const findTypes = await TicketFee.findAll({ attributes: ['id', 'theaterType'] })
+        const findTypes = await TheaterType.findAll({ attributes: { exclude: ['createdAt', 'updatedAt'] } })
         return res.json(findTypes)
     } catch (error) {
         return res.status(500).send(error.message || "상영관 정보 가져오는 중 에러 발생")
@@ -21,10 +31,10 @@ const getTypes = async (req, res) => {
 
 const submit = async (req, res) => {
     try {
-        const { id } = req.body
+        const { id, theatertypeId, theaterName, rows, columns } = req.body
         let response = null
-        if (id) response = await Theater.update({ ...req.body }, { where: { id: id } })
-        else response = await Theater.create({ ...req.body })
+        if (id) response = await Theater.update({ theatertypeId, theaterName, rows, columns }, { where: { id: id } })
+        else response = await Theater.create({ theatertypeId, theaterName, rows, columns })
         return res.json(response)
     } catch (error) {
         return res.status(500).send(error.message || "상영관 정보 저장 중 에러 발생")
@@ -33,7 +43,10 @@ const submit = async (req, res) => {
 
 const remove = async (req, res) => {
     try {
-
+        const { theaterId } = req.params
+        const delNum = await Theater.destroy({ where: { id: theaterId } })
+        if (delNum) res.json(delNum)
+        else throw new Error("해당 정보를 서버에서 삭제하는데 실패했습니다.");
     } catch (error) {
         return res.status(500).send(error.message || "상영관 정보 삭제 중 에러 발생")
     }
@@ -41,6 +54,7 @@ const remove = async (req, res) => {
 
 export default {
     getAll,
+    getOne,
     getTypes,
     submit,
     remove

server/index.js

@@ -10,7 +10,7 @@ dotenv.config({
 });
 
 sequelize
-    .sync({ force: true })
+    .sync({ force: false })
     .then(async () => {
         await Promise.all(
             Object.keys(ROLE_NAME).map((name) => {

server/routes/theater.route.js

@@ -7,10 +7,14 @@ router
     .route("/")
     .get(theaterCtrl.getAll)
     .put(theaterCtrl.submit)
-    .delete(theaterCtrl.remove)
 
 router
     .route("/type")
     .get(theaterCtrl.getTypes)
 
+router
+    .route("/:theaterId")
+    .get(theaterCtrl.getOne)
+    .delete(theaterCtrl.remove)
+
 export default router;
\ No newline at end of file