Schedule 서버 연동중

client/src/App.js

@@ -31,6 +31,7 @@ function App() {
           <Route path="/subject/edit/:subjectId" component={SubjectEditPage} />
           <Route path="/subject/edit" component={SubjectEditPage} />
           <Route path="/admin/edit/:scheduleId" component={ScheduleEditPage} />
+          <Route path="/admin/edit" component={ScheduleEditPage} />
           <Route path="/admin" component={AdminPage} />
           {/* <PrivateRoute path="/admin" component={AdminPage} role="admin" /> */}
 

client/src/apis/schedule.api.js

@@ -7,7 +7,7 @@ const getOne = async (id, userId = "ku") => {
 }
 
 const getbyMonth = async (date, userId = "ku") => {
-    const { data } = await axios.get(`${baseUrl}/api/schedule/${userId}?date=${date}`);
+    const { data } = await axios.get(`${baseUrl}/api/schedule/${userId}?dateMonth=${date}`);
     return data
 }
 

client/src/components/Calendar/AdminMonthly.js

@@ -2,6 +2,8 @@ import { useState, useEffect, useRef } from "react";
 import CalendarBtn from "../Buttons/CalendarBtn.js";
 import DatePickerModal from "../Modal/DatePickerModal.js";
 import ScheduleModal from "../Modal/ScheduleModal.js";
+import scheduleApi from "../../apis/schedule.api";
+import catchErrors from "../../utils/catchErrors.js";
 import moment from 'moment';
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
@@ -13,7 +15,9 @@ const AdminMonthly = () => {
     const [initialDate, setInitialDate] = useState(moment().format('YYYY-MM-DD'))
     const [changeDate, setChangeDate] = useState(moment().format('YYYY-MM-DD'))
     const [pickerShow, setPickerShow] = useState(false)
-    const [dateShow, setDateShow] = useState({date: moment().format('YYYY-MM-DD'), show: false})
+    const [dateShow, setDateShow] = useState({ date: moment().format('YYYY-MM-DD'), show: false })
+    const [scheduleList, setScheduleList] = useState([])
+    const [error, setError] = useState("")
     const calendarRef = useRef(null)
     const calenIconRef = useRef(null)
     let calendar = null
@@ -24,6 +28,13 @@ const AdminMonthly = () => {
         }
     })
 
+    // useEffect(() => {
+    //     getAll()
+    //     return () => {
+    //         getAll()
+    //     }
+    // }, [])
+
     useEffect(() => {
         if (calenIconRef && calenIconRef.current) {
             calenIconRef.current.addEventListener('click', () => {
@@ -45,10 +56,26 @@ const AdminMonthly = () => {
 
     useEffect(() => {
         calendar.gotoDate(changeDate)
+        getAll()
     }, [changeDate])
 
+    useEffect(() => {
+        calendar.addEventSource(scheduleList)
+    }, [scheduleList])
+
+    async function getAll() {
+        try {
+            setError("")
+            const resList = await scheduleApi.getbyMonth(changeDate)
+            setScheduleList(resList)
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
     return (
         <>
+            {console.log("list==", scheduleList)}
             <div ref={calenIconRef} className="position-absolute" style={{ top: "7px", left: "7px" }}>
                 <CalendarBtn date={moment(initialDate).format('DD')} />
             </div>
@@ -100,6 +127,8 @@ const AdminMonthly = () => {
                     return <button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scheduleModal"></button>
                 }}
                 timeZone="local"
+                events={scheduleList, { color: 'crimson' }}
+                eventLimit="3"
                 themeSystem='bootstrap'
                 height='78vh'
             />

client/src/components/Calendar/CustomView.js

-import KUSchedule from "../Schedule/KUSchedule.js";
+import ScheduleCarousel from "../Schedule/ScheduleCarousel.js";
 import ScheduleList from "../Schedule/ScheduleList.js";
 import { createPlugin } from '@fullcalendar/react';
 
 const CustomDateView = () => {
     return (
         <div className='fc-custom-view border-top border-dark pt-2'>
-            <KUSchedule />
+            <ScheduleCarousel />
             <ScheduleList />
         </div>
     )

client/src/components/Form/ScheduleForm.js

@@ -84,7 +84,9 @@ const ScheduleForm = () => {
     }
 
     if (success) {
-        return <Redirect to="/home" />
+        // if () return <Redirect to="/admin" />
+        // else return <Redirect to="/home" />
+        return <Redirect to="/admin" />
     }
 
     return (

client/src/components/Schedule/KUSchedule.js

 import styles from "./schedule.module.scss";
 
-const KUSchedule = ({ title="복수전공 신청" }) => {
+const KUSchedule = ({ schedule }) => {
     return (
         <div className="card w-75 rounded-0 border-dark mx-auto">
             <div className={`card-header rounded-0 p-1 ${styles.header}`}>
                 <img className={styles.ku_tiger} src={process.env.PUBLIC_URL + '/ku-tiger(bgX).png'} alt="어흥이" />
             </div>
             <div className="card-body text-center pb-2">
-                {title.length > 12 ? <marquee className={`card-title fs-5 ${styles.flowText}`} scrollamount="6">{title}</marquee> : <h5 className="card-title">{title}</h5>}
-                <p className="card-text text-secondary mb-1">21.09.27 ~ 21.09.29</p>
-                <p className="text-start mb-0">복수전공신청</p>
+                {schedule.title.length > 12 ? <marquee className={`card-title fs-5 ${styles.flowText}`} loop="infinite">{schedule.title}</marquee> : <h5 className="card-title">{schedule.title}</h5>}
+                <p className="card-text text-secondary mb-1">{(schedule.start === schedule.end) ? schedule.start : schedule.start + "~" + schedule.end}</p>
+                <p className="text-start mb-0">{schedule.memo}</p>
             </div>
         </div>
     )

client/src/components/Schedule/ScheduleCarousel.js

+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import KU from "./KUSchedule.js";
+import scheduleApi from "../../apis/schedule.api";
+import catchErrors from "../../utils/catchErrors.js";
+
+const ScheduleCarousel = () => {
+    const [scheduleList, setScheduleList] = useState([])
+    const [error, setError] = useState("")
+    const { date } = useParams()
+
+    useEffect(() => {
+        getSchedule(date)
+        return () => {
+            getSchedule(date)
+        }
+    }, [])
+
+    useEffect(() => {
+        getSchedule(date)
+        return () => {
+            getSchedule(date)
+        }
+    }, [date])
+
+    async function getSchedule(date) {
+        try {
+            setError("")
+            const resList = await scheduleApi.getbyDate(date)
+            setScheduleList(resList)
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
+    return (
+        <div id="scheduleListCarousel" className="carousel slide" data-bs-ride="carousel">
+            <div className="carousel-inner">
+                {scheduleList.length !== 0 ?
+                    scheduleList.map((schedule, idx) =>
+                        <div className={"carousel-item" + (idx === 0 ? " active" : "")}>
+                            <KU key={idx} schedule={schedule} />
+                        </div>) : null}
+            </div>
+        </div>
+    )
+}
+
+export default ScheduleCarousel
\ No newline at end of file

client/src/scss/custom.scss

@@ -148,4 +148,13 @@ button {
     & .fc-dayGridDay-view {
         display: none;
     }
+
+    & .text {
+        font-family: "Plex-Text";
+
+        & .fc-event-title {
+            display: block;
+            text-overflow: ellipsis;
+        }
+    }
 }
\ No newline at end of file

server/controllers/ku.controller.js

-import { KU } from "../db/index.js";
-import sequelize from 'sequelize';
-
-const { Op } = sequelize
-
-const findbyId = async (req, res, next) => {
-    try {
-        const id = req.scheduleId
-        if (id) {
-            const findSchedule = await KU.findOne({ where: { id: id } })
-            if (!findSchedule) throw new Error("해당 일정을 찾지 못했습니다.")
-            else {
-                const { title, start, end, memo } = findSchedule
-                const startDate = dateToString(start, "full")
-                const endDate = dateToString(end, "full")
-                req.schedule = { title, startDate: startDate, endDate: endDate, memo }
-            }
-            next()
-        } else next()
-    } catch (error) {
-        return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
-    }
-}
-
-const findbyDate = async (req, res, next) => {
-    try {
-        if (req.date) {
-            const date = new Date(req.date)
-            const findList = await KU.findAll({
-                where: {
-                    [Op.and]: [
-                        {
-                            start: {
-                                [Op.lte]: date
-                            }
-                        }, {
-                            end: {
-                                [Op.gte]: date
-                            }
-                        }
-                    ]
-                },
-                order: [['updatedAt', 'DESC']]
-            })
-            findList.forEach(schedule => {
-                schedule.dataValues.start = dateToString(schedule.start, "twoYear")
-                schedule.dataValues.end = dateToString(schedule.end, "twoYear")
-            })
-            req.scheduleList = findList
-            next()
-        } else next()
-    } catch (error) {
-        return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
-    }
-}
-
-const create = async (req, res) => {
-    try {
-        const { title, startDate, endDate, memo } = req.body
-        const start = new Date(startDate)
-        const end = new Date(endDate)
-        const newSchedule = await KU.create({ title: title, start: start, end: end, memo: memo })
-        return res.json(newSchedule)
-    } catch (error) {
-        return res.status(500).send(error.message || "일정 등록 중 에러 발생")
-    }
-}
-
-const edit = async (req, res) => {
-    try {
-        const { scheduleId } = req.query
-        const { title, startDate, endDate, memo } = req.body
-        const updated = await KU.update({ title: title, start: startDate, end: endDate, memo: memo }, { where: { id: scheduleId } })
-        if (!updated) throw new Error("해당 일정의 일부 정보를 수정하는데 실패하였습니다.")
-        else return res.send(200)
-    } catch (error) {
-        return res.status(500).send(error.message || "일정 수정 중 에러 발생")
-    }
-}
-
-const remove = async (req, res) => {
-    try {
-        const { scheduleId } = req.query
-        const deleted = await KU.destroy({ where: { id: scheduleId } })
-        if (!deleted) throw new Error("해당 일정을 삭제하는데 실패하였습니다.")
-        else return res.send(200)
-    } catch (error) {
-        return res.status(500).send(error.message || "일정 삭제 중 에러 발생")
-    }
-}
-
-const querySeparation = async (req, res, next) => {
-    try {
-        const { scheduleId, date } = req.query
-        req.scheduleId = scheduleId
-        req.date = date
-        next()
-    } catch (error) {
-        return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
-    }
-}
-
-const send = async (req, res) => {
-    try {
-        const result = req.schedule || req.scheduleList
-        return res.json(result)
-    } catch (error) {
-        return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
-    }
-}
-
-function dateToString(dateObj, method) {
-    const year = dateObj.getFullYear()
-    const year_disit = String(year).substring(2, 4)
-    const month = dateObj.getMonth() + 1
-    const date = dateObj.getDate()
-
-    if (method === "full") return [year, (month > 9 ? "" : "0") + month, (date > 9 ? "" : "0") + date].join("-")
-    else if (method === "twoYear") return [year_disit, (month > 9 ? "" : "0") + month, (date > 9 ? "" : "0") + date].join("-")
-}
-
-export default {
-    findbyId,
-    findbyDate,
-    create,
-    edit,
-    remove,
-    querySeparation,
-    send
-}
\ No newline at end of file

server/controllers/schedule.controller.js

-import { Schedule } from "../db/index.js";
+import { KU, Schedule } from "../db/index.js";
+import sequelize from 'sequelize';
 
-const create = async (req, res) => {
+const { Op } = sequelize
+
+const findbyId = async (req, res, next) => {
+    try {
+        const id = req.scheduleId
+        if (id) {
+            const findSchedule = await KU.findOne({ where: { id: id } })
+            if (!findSchedule) throw new Error("해당 일정을 찾지 못했습니다.")
+            else {
+                const { title, start, end, memo } = findSchedule
+                const startDate = dateToString(start, "full")
+                const endDate = dateToString(end, "full")
+                req.schedule = { title, startDate: startDate, endDate: endDate, memo }
+            }
+            next()
+        } else next()
+    } catch (error) {
+        return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
+    }
+}
+
+const findbyDate = async (req, res, next) => {
     try {
+        if (req.date || req.month) {
+            let date = ""
+            let findList = []
+            if (req.date) {
+                date = new Date(req.date)
+                findList = await KU.findAll({
+                    where: {
+                        [Op.and]: [
+                            {
+                                start: {
+                                    [Op.lte]: date
+                                }
+                            }, {
+                                end: {
+                                    [Op.gte]: date
+                                }
+                            }
+                        ]
+                    }, order: [['updatedAt', 'DESC']]
+                })
+                findList.forEach(schedule => {
+                    schedule.dataValues.start = dateToString(schedule.start, "twoYear")
+                    schedule.dataValues.end = dateToString(schedule.end, "twoYear")
+                })
+            } else {
+                date = new Date(req.month)
+                const year = dateToString(date, "year")
+                const month = dateToString(date, "month")
+                findList = await KU.findAll({
+                    where: {
+                        [Op.or]: [
+                            {
+                                [Op.and]: [
+                                    sequelize.where(sequelize.fn('date_part', 'year', sequelize.col('start')), year),
+                                    sequelize.where(sequelize.fn('date_part', 'month', sequelize.col('start')), month)
+                                ]
+                            }, {
+                                [Op.and]: [
+                                    sequelize.where(sequelize.fn('date_part', 'year', sequelize.col('end')), year),
+                                    sequelize.where(sequelize.fn('date_part', 'month', sequelize.col('end')), month)
+                                ]
+                            }
+                        ]
+                    }, attributes: ['id', 'title', 'start', 'end']
+                    , order: [['start']]
+                })
+                // console.log("list==",findList)
+                findList.forEach(schedule => {
+                    // const find = findList.find(el => {
+                    //     if (el.dataValues.start <= schedule.dataValues.start) {
+                    //         if (el.dataValues.end >= schedule.dataValues.start) return el
+                    //     } else if (el.dataValues.start <= schedule.dataValues.end) return el
+                    // })
+                    // console.log("find==",find.dataValues)
+                    if (dateToString(schedule.start, "full") !== dateToString(schedule.end, "full")) schedule.dataValues.end = schedule.dataValues.end.setDate(schedule.dataValues.end.getDate() + 1)
+                    schedule.dataValues.allDay = true
+                    schedule.dataValues.className = 'text'
+                })
+            }
+            req.scheduleList = findList
+            next()
+        } else next()
+    } catch (error) {
+        return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
+    }
+}
 
+const create = async (req, res) => {
+    try {
+        let newSchedule = null
+        const userId = req.userId
+        if (userId === "ku") {
+            const { title, startDate, endDate, memo } = req.body
+            const start = new Date(startDate)
+            const end = new Date(endDate)
+            newSchedule = await KU.create({ title: title, start: start, end: end, memo: memo })
+        } else {
+            const { title, startDate, endDate, startTime, endTime, allDay, location, memo } = req.body
+            newSchedule = await Schedule.create({ title: title, location: location, memo: memo })
+        }
+        return res.json(newSchedule)
     } catch (error) {
         return res.status(500).send(error.message || "일정 등록 중 에러 발생")
     }
@@ -10,7 +112,18 @@ const create = async (req, res) => {
 
 const edit = async (req, res) => {
     try {
-
+        let updated = null
+        const userId = req.userId
+        const { scheduleId } = req.query
+        if (userId === "ku") {
+            const { title, startDate, endDate, memo } = req.body
+            updated = await KU.update({ title: title, start: startDate, end: endDate, memo: memo }, { where: { id: scheduleId } })
+        } else {
+            const { title, startDate, endDate, startTime, endTime, allDay, location, memo } = req.body
+            updated = await Schedule.update({ title: title, memo: memo }, { where: { id: scheduleId } })
+        }
+        if (!updated) throw new Error("해당 일정의 일부 정보를 수정하는데 실패하였습니다.")
+        else return res.send(200)
     } catch (error) {
         return res.status(500).send(error.message || "일정 수정 중 에러 발생")
     }
@@ -18,14 +131,69 @@ const edit = async (req, res) => {
 
 const remove = async (req, res) => {
     try {
-
+        let deleted = null
+        const userId = req.userId
+        const { scheduleId } = req.query
+        if (userId === "ku") deleted = await KU.destroy({ where: { id: scheduleId } })
+        else deleted = await Schedule.destroy({ where: { id: scheduleId } })
+        if (!deleted) throw new Error("해당 일정을 삭제하는데 실패하였습니다.")
+        else return res.send(200)
     } catch (error) {
         return res.status(500).send(error.message || "일정 삭제 중 에러 발생")
     }
 }
 
+const getParams = async (req, res, next) => {
+    try {
+        const { userId } = req.params
+        console.log("getParams", userId)
+        req.userId = userId
+        next()
+    } catch (error) {
+        return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
+    }
+}
+
+const querySeparation = async (req, res, next) => {
+    try {
+        const { scheduleId, date, dateMonth } = req.query
+        req.scheduleId = scheduleId
+        req.date = date
+        req.month = dateMonth
+        next()
+    } catch (error) {
+        return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
+    }
+}
+
+const send = async (req, res) => {
+    try {
+        const result = req.schedule || req.scheduleList
+        return res.json(result)
+    } catch (error) {
+        return res.status(500).send(error.message || "일정 가져오는 중 에러 발생")
+    }
+}
+
+function dateToString(dateObj, method) {
+    const year = dateObj.getFullYear()
+    const year_disit = String(year).substring(2, 4)
+    const month = dateObj.getMonth() + 1
+    const date = dateObj.getDate()
+
+    if (method === "full") return [year, (month > 9 ? "" : "0") + month, (date > 9 ? "" : "0") + date].join("-")
+    else if (method === "twoYear") return [year_disit, (month > 9 ? "" : "0") + month, (date > 9 ? "" : "0") + date].join("-")
+    else if (method === "year") return year
+    else return month
+}
+
 export default {
+    findbyId,
+    findbyDate,
     create,
     edit,
-    remove
+    remove,
+    getParams,
+    querySeparation,
+    send
 }
\ No newline at end of file

server/routes/schedule.route.js

 import express from 'express';
-import kuCtrl from "../controllers/ku.controller.js";
 import scheduleCtrl from "../controllers/schedule.controller.js";
 
 const router = express.Router();
 
-router
-    .route("/ku")
-    .get(kuCtrl.querySeparation, kuCtrl.findbyId, kuCtrl.findbyDate, kuCtrl.send)
-    .post(kuCtrl.create)
-    .put(kuCtrl.edit)
-    .delete(kuCtrl.remove)
-
 router
     .route("/:userId")
+    .get(scheduleCtrl.querySeparation, scheduleCtrl.findbyId, scheduleCtrl.findbyDate, scheduleCtrl.send)
     .post(scheduleCtrl.create)
     .put(scheduleCtrl.edit)
     .delete(scheduleCtrl.remove)
 
+router.param("userId", scheduleCtrl.getParams)
+
 export default router;
\ No newline at end of file