Merge branch 'kimpen'

client/src/apis/timetable.api.js

@@ -11,8 +11,8 @@ const submit = async (sendData) => {
   return data
 }
 
-const remove = async () => {
-  const { data } = await axios.delete(`${baseUrl}/api/timetable/`)
+const remove = async (timeId) => {
+  const { data } = await axios.delete(`${baseUrl}/api/timetable/${timeId}`)
   return data
 }
 

client/src/components/Admin/TimeTable.js

 import { useState, useEffect } from "react";
 import moment from 'moment';
-import Calender from "../Calender/Calender.js";
+import HorizontalCalender from "../Calender/HorizontalCalender.js";
 import timetableApi from "../../apis/timetable.api.js";
 import catchErrors from "../../utils/catchErrors.js";
+import styles from "./admin.module.scss";
 
 const TimeTable = () => {
     const [selectDate, setSelectDate] = useState(moment().format('YYYY-MM-DD'))
@@ -23,10 +24,10 @@ const TimeTable = () => {
         }
     }
 
-    async function deleteTime() {
+    async function deleteTime(timeId) {
         try {
             setError("")
-            await timetableApi.remove()
+            await timetableApi.remove(timeId)
             alert('해당 상영시간표 정보를 성공적으로 삭제하였습니다.')
             getTimeTable(selectDate)
         } catch (error) {
@@ -35,24 +36,22 @@ const TimeTable = () => {
     }
 
     return (
-        <div className="col-12 col-lg-6">
-            {console.log("list==", timeList)}
-            <Calender selectDate={selectDate} setSelectDate={setSelectDate} />
+        <div className="col-12 col-lg-6 ms-lg-1 mb-5">
+            <HorizontalCalender selectDate={selectDate} setSelectDate={setSelectDate} />
             {timeList.length !== 0 ?
-                timeList.map(el => <>
-                    <h5>{el.theaterName} 관</h5>
-                    {/* {arr = el.timetable.map(time => <div className="card">
-                        <div className="card-body">{moment(time.start_time, 'hh:mm')} ~ {moment(time.end_time, 'hh:mm')}</div>
+                timeList.map(el => <div className="mt-4">
+                    <h5 className="mb-0">{el.theaterName} 관 / <p className="d-inline fs-6 mb-0">{el.theatertype.theaterTypeName}</p></h5>
+                    {el.timetable.map(time => <div className="d-inline-flex flex-column m-2">
+                        <div className="d-flex justify-content-end">
+                            <button type="button" className={`btn btn-dark btn-sm ${styles.customBtn}`} onClick={() => deleteTime(time.id)}>X</button>
                         </div>
-                    )
-                    } */}
-                    {/* {el.timetable.map(time => {
-                        if (el.id === time.id) return <div className="card">
-                        <div className="card-body">{moment(time.start_time, 'hh:mm')} ~ {moment(time.end_time, 'hh:mm')}</div>
+                        <div className="card">
+                            <div className="card-body py-1">{moment(time.start_time).format('HH:mm')} ~ {moment(time.end_time).format('HH:mm')}</div>
+                            <div className="card-footer text-center py-1">{time.title}</div>
                         </div>
-                    })} */}
-                </>)
-                : <></>}
+                    </div>)}
+                </div>)
+                : <p className="text-center mt-5 mb-0">서버에 저장되어 있는 상영시간표가 존재하지 않습니다.<br />아래의 양식을 작성해 새로운 상영시간표를 등록해주세요.</p>}
         </div>
     )
 }

client/src/components/Admin/TimeTableEditForm.js

@@ -75,7 +75,7 @@ const TimeTableEditForm = () => {
         const { list } = showTimes
         const isSelect = Object.values(selectInfo).every((el) => Boolean(el))
         if (isSelect) {
-            const isTime = list.find(el => el.theaterTypeId === selectInfo.theater && (getDate(el.start) <= getDate(selectInfo.start) && getDate(selectInfo.start) <= getDate(el.end)) || (getDate(el.start) > getDate(selectInfo.start) && getDate(el.start) <= getDate(selectInfo.end)))
+            const isTime = list.find(el => (el.theaterTypeId === selectInfo.theater) && ((getDate(el.start) <= getDate(selectInfo.start) && getDate(selectInfo.start) <= getDate(el.end)) || (getDate(el.start) > getDate(selectInfo.start) && getDate(el.start) <= getDate(selectInfo.end))))
             if (isTime) alert('이미 추가한 상영시간대입니다. 다른 시간대를 골라주시기 바랍니다.')
             else {
                 const theater = theaterList.find(theater => theater.theatertypeId === selectInfo.theater)
@@ -146,7 +146,8 @@ const TimeTableEditForm = () => {
     }
 
     return (
-        <form className="col-12 col-lg-6" onSubmit={handleSubmit}>
+        <form className="col-12 col-lg-6 me-lg-1" onSubmit={handleSubmit}>
+            <h5 className={`border-top border-dark border-2 pt-3 mb-3 ${styles.borderLg}`}>상영시간표 등록</h5>
             <select className={`form-select mb-3 ${styles.shadowNone} ${styles.selectInput}`} id="movieId" name="movieId" value={selectId} onChange={handleChange} aria-label="select movie" defaultValue="0">
                 {movieList.length !== 0 ?
                     movieList.map((movie, index) => {

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

@@ -44,6 +44,12 @@
     }
 }
 
+@media screen and (min-width: 992px) {
+    .borderLg {
+        border: 0 !important;
+    }
+}
+
 .selectInput {
     & option[disabled] {
         color: #000;

client/src/components/Calender/Calender.js → client/src/components/Calender/HorizontalCalender.js

@@ -18,13 +18,11 @@ const Calender = ({ selectDate, setSelectDate }) => {
             dateArr.push({ date: lastWeek.format('YYYY-MM-DD'), day: lastWeek.format('d') })
             lastWeek.add(1, 'days')
         }
-        console.log("arr=", dateArr)
-        console.log("same==", moment(oneDay).isSame('2021-08-07'))
-        const resultArr = dateArr.map(el => <div onClick={() => setSelectDate(el.date)}>
-            {moment(el.date).isSame(oneDay) || el.date.split('-')[2] === "01" ? <strong>{moment(el.date).format('YYYY.MM')}</strong> : ""}
-            <div>
-                <strong>{moment(el.date).format('DD')}</strong>
-                <em>{moment(el.date).isSame(oneDay) ? "오늘" : week[el.day]}</em>
+        const resultArr = dateArr.map(el => <div className="col-2 align-self-end text-center" onClick={() => setSelectDate(el.date)}>
+            {moment(el.date).isSame(oneDay) || el.date.split('-')[2] === "01" ? <strong className={styles.yearmonth}>{moment(el.date).format('YYYY.MM')}</strong> : ""}
+            <div className={"d-flex flex-column " + ((Number(el.day) === 0 || Number(el.day) === 6) ? ((Number(el.day) === 0) ? "text-danger" : "text-primary") : "")}>
+                <strong className={moment(el.date).isSame(oneDay) ? styles.selectDate : ""}>{moment(el.date).format('DD')}</strong>
+                <strong>{moment(el.date).isSame(oneDay) ? "오늘" : week[el.day]}</strong>
             </div>
         </div>)
         setDateList(resultArr)
@@ -33,10 +31,11 @@ const Calender = ({ selectDate, setSelectDate }) => {
     return (
         <>  
             {console.log("date==", selectDate)}
-            <div>
-                <i className="bi bi-chevron-left"></i>
-                {dateList.map(el => el)}
-                <i className="bi bi-chevron-right"></i>
+            <div className="d-flex position-relative border-bottom border-dark border-2 p-3">
+                <i className={`bi bi-calendar2 position-absolute top-0 ${styles.calender}`}></i>
+                <i className="col-1 bi bi-chevron-left align-self-center text-center"></i>
+                <div className={`d-flex col-10 ${styles.box}`}>{dateList.map(el => el)}</div>
+                <i className="col-1 bi bi-chevron-right align-self-center text-center"></i>
             </div>
         </>
     )

client/src/components/Calender/calender.module.scss

+.box {
+    overflow: hidden;
+
+    & .yearmonth {
+        position: relative;
+        top: 0;
+        width: 100%;
+        font-size: 10px;
+    }
+
+    & .selectDate {
+        background-color: #000;
+        color: #fff;
+        border-radius: 50%;
+    }
+}
+
+.calender {
+    right: 13px;
+    font-size: 1.5em;
+}
\ No newline at end of file

server/controllers/timetable.controller.js

-import { TimeTable, Theater } from "../db/index.js";
+import { TimeTable, Theater, TheaterType } from "../db/index.js";
 import moment from 'moment';
 import sequelize from 'sequelize'
 const { Op } = sequelize
@@ -8,21 +8,18 @@ const getAll = async (req, res) => {
         const { when } = req.query
         const selectDate = new Date(when)
         const theaterArr = []
-        // const timeTableArr = []
         const findAll = await TimeTable.findAll({ where: { date: selectDate }, attributes: { exclude: ['createdAt', 'updatedAt'] }, order: [["theater", "ASC"], ["start_time", "ASC"]] })
         findAll.forEach(element => {
             if (!theaterArr.includes(element.theater)) theaterArr.push(element.theater)
         })
-        const findTheater = await Theater.findAll({ where: { id: theaterArr }, attributes: { exclude: ['createdAt', 'updatedAt'] }, order: [['theaterName']] })
+        const findTheater = await Theater.findAll({ where: { id: theaterArr }, attributes: { exclude: ['createdAt', 'updatedAt'] }, include: [TheaterType], order: [['theaterName']] })
         findTheater.forEach(el => {
             const arr = findAll.filter(timetable => {
                 if (el.id === timetable.theater) return timetable.dataValues
             })
             el.dataValues.timetable = arr
-            // timeTableArr.push({ id: el.id, info: arr })
         })
         return res.json(findTheater)
-        // return res.json({findTheater, timeTableArr})
     } catch (error) {
         return res.status(500).send(error.message || "상영시간표 정보 가져오는 중 에러 발생")
     }
@@ -85,7 +82,7 @@ const getTime = (string, runtime = 0) => {
 const remove = async (req, res) => {
     try {
         const { timeId } = req.params
-        const delNum = await TimeTable.destroy({ where: {} })
+        const delNum = await TimeTable.destroy({ where: { id: timeId } })
         if (delNum) res.json(delNum)
         else throw new Error("해당 정보를 서버에서 삭제하는데 실패했습니다.")
     } catch (error) {