Schedule client 및 server 완성

client/src/components/AdminScheduleItem.js

@@ -9,13 +9,13 @@ const AdminScheduleItem = ({ schedule, handleClick }) => {
             <div className="col-11">
                 <div className="d-flex">
                     <h3 className="col-10 rows-cols-2">{schedule.title}</h3>
-                    <div className="d-flex col-2 fs-5">
+                    <div className={`d-flex col-2 fs-5 ${styles.cursor}`}>
                         <Link to={`/admin/edit/${schedule.id}`}><i className="bi bi-pencil-square text-dark me-2" data-bs-dismiss="modal"></i></Link>
                         <i className="bi bi-trash" onClick={() => handleClick(schedule.id)}></i>
                     </div>
                 </div>
                 <p className="text-start text-secondary mb-2">
-                    {(schedule.start === schedule.end) ? schedule.start : schedule.start + "~" + schedule.end}
+                    {(schedule.start === schedule.end) ? schedule.start : schedule.start + " ~ " + schedule.end}
                 </p>
                 <div className={`text-start ${styles.textBox}`}>{schedule.memo}</div>
             </div>

client/src/components/Calendar/AdminMonthly.js

@@ -28,12 +28,12 @@ const AdminMonthly = () => {
         }
     })
 
-    // useEffect(() => {
-    //     getAll()
-    //     return () => {
-    //         getAll()
-    //     }
-    // }, [])
+    useEffect(() => {
+        getAll()
+        return () => {
+            getAll()
+        }
+    }, [dateShow.show])
 
     useEffect(() => {
         if (calenIconRef && calenIconRef.current) {
@@ -60,6 +60,7 @@ const AdminMonthly = () => {
     }, [changeDate])
 
     useEffect(() => {
+        calendar.removeAllEvents()
         calendar.addEventSource(scheduleList)
     }, [scheduleList])
 
@@ -75,7 +76,6 @@ const AdminMonthly = () => {
 
     return (
         <>
-            {console.log("list==", scheduleList)}
             <div ref={calenIconRef} className="position-absolute" style={{ top: "7px", left: "7px" }}>
                 <CalendarBtn date={moment(initialDate).format('DD')} />
             </div>
@@ -128,7 +128,6 @@ const AdminMonthly = () => {
                 }}
                 timeZone="local"
                 events={scheduleList, { color: 'crimson' }}
-                eventLimit="3"
                 themeSystem='bootstrap'
                 height='78vh'
             />

client/src/components/Calendar/Monthly.js

@@ -14,7 +14,6 @@ import '@fortawesome/fontawesome-free/css/all.css';
 
 const Monthly = () => {
     const { user } = useAuth()
-    console.log("msds==",user)
     const [initialDate, setInitialDate] = useState(moment().format('YYYY-MM-DD'))
     const [changeDate, setChangeDate] = useState(moment().format('YYYY-MM-DD'))
     const [show, setShow] = useState(false)
@@ -56,15 +55,15 @@ const Monthly = () => {
     }, [changeDate])
 
     useEffect(() => {
+        calendar.removeAllEvents()
         calendar.addEventSource(scheduleList)
     }, [scheduleList])
 
     async function getAll() {
         try {
             setError("")
-            console.log("home user",user)
-            const resList = await scheduleApi.getbyMonth(changeDate, user.id)
-            setScheduleList(resList)
+            const { KU, individual } = await scheduleApi.getbyMonth(changeDate, user.id)
+            setScheduleList([...KU, ...individual])
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -72,7 +71,6 @@ const Monthly = () => {
 
     return (
         <>
-        {console.log("user scheduleList==",scheduleList)}
             <div ref={calenIconRef} className="position-absolute" style={{ top: "9px", right: "8px" }}>
                 <CalendarBtn date={moment(initialDate).format('DD')} />
             </div>

client/src/components/Form/ScheduleForm.js

@@ -49,7 +49,9 @@ const ScheduleForm = () => {
     async function getOne(id) {
         try {
             setError("")
-            const resSchedule = await scheduleApi.getOne(id, user.id)
+            let resSchedule = null
+            if (user.role === "admin") resSchedule = await scheduleApi.getOne(id)
+            else resSchedule = await scheduleApi.getOne(id, user.id)
             setSchedule({ ...schedule, ...resSchedule })
         } catch (error) {
             catchErrors(error, setError)
@@ -72,11 +74,13 @@ const ScheduleForm = () => {
         try {
             setError("")
             if (scheduleId) {
-                await scheduleApi.edit(scheduleId, schedule, user.id)
+                if (user.role === "admin") await scheduleApi.edit(scheduleId, schedule)
+                else await scheduleApi.edit(scheduleId, schedule, user.id)
                 alert('해당 일정이 성공적으로 수정되었습니다.')
             }
             else {
-                await scheduleApi.submit(schedule, user.id)
+                if (user.role === "admin") await scheduleApi.submit(schedule)
+                else await scheduleApi.submit(schedule, user.id)
                 alert('해당 일정이 성공적으로 등록되었습니다.')
             }
             setSuccess(true)
@@ -101,7 +105,7 @@ const ScheduleForm = () => {
                     <input className={`form-control shadow-none ${styles.dateInput}`} type="date" name="startDate" value={schedule.startDate} aria-label="startDate" onChange={handleChange} />
                 </div>
                 <div className={"col-5 " + ((user.role === "admin" || schedule.allDay === "on") ? "d-none" : "d-block")}>
-                    <input className={`form-control shadow-none ${styles.dateInput}`} type="time" name="startTime" aria-label="startTime" onChange={handleChange} />
+                    <input className={`form-control shadow-none ${styles.dateInput}`} type="time" name="startTime" value={schedule.startTime} aria-label="startTime" onChange={handleChange} />
                 </div>
             </div>
             <div className={"d-flex " + (user.role === "admin" ? "mb-5" : "mb-3")}>
@@ -116,11 +120,11 @@ const ScheduleForm = () => {
             <div className={"d-flex justify-content-end form-check mb-4 " + (user.role === "admin" ? "d-none" : "d-block")}>
                 <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" id="allDay" name="allDay" onChange={handleChange} checked={schedule.allDay === "on" ? true : false} />
                 <label className="form-check-label ms-2" htmlFor="allDay">하루 종일</label>
-            </div>52
+            </div>
             <div className={"d-flex justify-content-between align-items-center mb-4 " + (user.role === "admin" ? "d-none" : "d-block")}>
                 <i className="col bi bi-geo-alt fs-3"></i>
                 <div className="col-10">
-                    <input className={`form-control shadow-none rounded-0 px-1 ${styles.textInput}`} type="text" name="location" placeholder="장소" aria-label="location" onChange={handleChange} />
+                    <input className={`form-control shadow-none rounded-0 px-1 ${styles.textInput}`} type="text" name="location" value={schedule.location} placeholder="장소" aria-label="location" onChange={handleChange} />
                 </div>
             </div>
             <div className="d-flex justify-content-between mb-5">

client/src/components/Schedule/KUSchedule.js

@@ -8,7 +8,7 @@ const KUSchedule = ({ schedule }) => {
             </div>
             <div className="card-body text-center pb-2">
                 {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="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

@@ -11,16 +11,6 @@ const ScheduleCarousel = () => {
 
     useEffect(() => {
         getSchedule(date)
-        return () => {
-            getSchedule(date)
-        }
-    }, [])
-
-    useEffect(() => {
-        getSchedule(date)
-        return () => {
-            getSchedule(date)
-        }
     }, [date])
 
     async function getSchedule(date) {
@@ -38,7 +28,7 @@ const ScheduleCarousel = () => {
             <div className="carousel-inner">
                 {scheduleList.length !== 0 ?
                     scheduleList.map((schedule, idx) =>
-                        <div className={"carousel-item" + (idx === 0 ? " active" : "")}>
+                        <div key={idx} className={"carousel-item" + (idx === 0 ? " active" : "")}>
                             <KU key={idx} schedule={schedule} />
                         </div>) : null}
             </div>

client/src/components/Schedule/ScheduleItem.js

 import { Link } from "react-router-dom";
 import styles from "./schedule.module.scss";
 
-const ScheduleItem = ({ schedule, handleClick }) => {
-
+const ScheduleItem = ({ index, curDate, schedule, handleClick }) => {
     return (
         <div className="accordion-item border-bottom-0">
-            <button className={`d-flex flex-column align-items-start accordion-button collapsed bg-white shadow-none px-0 ${styles.activeBtn}`} type="button" data-bs-toggle="collapse" data-bs-target={schedule.id} aria-expanded="false" aria-controls={schedule.id}>
-                <h5 className={`accordion-header ${styles.title}`} id={"heading" + schedule.id}>{schedule.title}</h5>
-                <p className={`text-secondary mb-0 ${styles.time}`}>sadsadsdsadsadsaf</p>
-                <p className={`mb-0 ${styles.period}`}>2021.01.151 ~ 2021.09.35</p>
+            <button className={`d-flex flex-column align-items-start accordion-button collapsed bg-white shadow-none px-0 ${styles.activeBtn}`} type="button" data-bs-toggle="collapse" data-bs-target={"#collapse" + index} aria-expanded="false" aria-controls={"collapse" + index}>
+                <h5 className={`accordion-header ${styles.title}`} id={"heading" + index}>{schedule.title}</h5>
+                <p className={`text-secondary mb-0 ${styles.time}`}>
+                    {(schedule.allDay) ? "하루 종일" : (curDate === schedule.startDate ? schedule.startTime + " ~" : (curDate === schedule.endDate ? "~ " + schedule.endTime : "하루 종일"))}
+                </p>
+                <p className={`mb-0 ${styles.period}`}>
+                    {schedule.allDay ? schedule.startDate + " ~ " + schedule.endDate : schedule.startDate + " " + schedule.startTime + " ~ " + schedule.endDate + " " + schedule.endTime}
+                </p>
             </button>
-            <div id={schedule.id} className="accordion-collapse collapse" aria-labelledby={"heading" + schedule.id} data-bs-parent="#scheduleList">
+            <div id={"collapse" + index} className="accordion-collapse collapse" aria-labelledby={"heading" + index} data-bs-parent="#scheduleList">
                 <div className={`accordion-body px-0 pt-2 pb-0 mb-3 ${styles.textBox}`}>
                     {schedule.location ? <div className="d-flex align-items-start">
                         <i className="col bi bi-geo-alt fs-5"></i>
@@ -19,7 +22,7 @@ const ScheduleItem = ({ schedule, handleClick }) => {
                     {schedule.memo}
                     <div className="d-flex justify-content-end mt-3">
                         <Link className="btn btn-light btn-sm border-dark" to={`/schedule/edit/${schedule.id}`}>수정</Link>
-                        <button type="button" className="btn btn-crimson btn-sm ms-2" onClick={handleClick}>삭제</button>
+                        <button type="button" className="btn btn-crimson btn-sm ms-2" onClick={() => handleClick(schedule.id)}>삭제</button>
                     </div>
                 </div>
             </div>

client/src/components/Schedule/ScheduleList.js

@@ -4,6 +4,7 @@ import Item from "./ScheduleItem";
 import scheduleApi from "../../apis/schedule.api";
 import { useAuth } from "../../utils/context";
 import catchErrors from "../../utils/catchErrors";
+import moment from 'moment';
 import styles from "./schedule.module.scss";
 
 const ScheduleList = () => {
@@ -14,16 +15,6 @@ const ScheduleList = () => {
 
     useEffect(() => {
         getAll(date)
-        return () => {
-            getAll(date)
-        }
-    }, [])
-
-    useEffect(() => {
-        getAll(date)
-        return () => {
-            getAll(date)
-        }
     }, [date])
 
     async function getAll(date) {
@@ -51,8 +42,8 @@ const ScheduleList = () => {
         <div className={styles.list}>
             <div className="accordion accordion-flush" id="scheduleList">
                 {scheduleList.length !== 0 ?
-                scheduleList.map((schedule, idx) => <Item key={idx} schedule={schedule} handleClick={delSchedule} />)
-                : <div className="text-center text-secondary">오늘 등록된 일정이 없습니다.</div>}
+                scheduleList.map((schedule, idx) => <Item key={idx} index={idx} curDate={moment(date).format("YY.MM.DD")} schedule={schedule} handleClick={delSchedule} />)
+                : <div className="text-center text-secondary mt-2">오늘 등록된 일정이 없습니다.</div>}
             </div>
         </div>
     )

client/src/components/Schedule/schedule.module.scss

@@ -71,4 +71,8 @@
 
 .flowText {
     font-family: "Plex-Bold";
+}
+
+.cursor {
+    cursor: pointer;
 }
\ No newline at end of file

client/src/utils/context.js

@@ -23,11 +23,11 @@ const AuthProvider = ({ children }) => {
       console.log("context getUser")
       const resUser = await authApi.getUser();
       setUser({ ...user, ...resUser })
-      if (pathname === "/admin" && user.role !== "admin") {
+      if (resUser.role === "admin") history.push("/admin")
+      else if (pathname === "/admin" && resUser.role !== "admin") {
         await logout()
         return <ErrorPage />
-      } else if (user.role === "admin") history.push("/admin")
-      else history.push("/home")
+      } else history.push("/home")
     } catch (error) {
       catchErrorAuth(error, setError);
     }
@@ -43,6 +43,7 @@ const AuthProvider = ({ children }) => {
       const user = await authApi.login(data);
       localStorage.setItem("login", true)
       setUser(user)
+      if (user.role === "admin") history.push("/admin")
       return true;
     } catch (error) {
       catchErrors(error, setError);

server/config/db.config.js

@@ -4,6 +4,7 @@ const config = {
     password: process.env.PG_PASSWORD || 'kuku0725',
     database: process.env.PG_DATABASE || 'todayKUDB',
     dialect: 'postgres',
+    timezone: '+09:00',
     pool: {
         max: 10,
         min: 0,

server/controllers/schedule.controller.js

@@ -24,12 +24,12 @@ const findbyId = async (req, res, next) => {
                 findSchedule = await Schedule.findOne({ where: { [Op.and]: [{ id: id }, { userId: userId }] } })
                 if (!findSchedule) throw new Error("해당 일정을 찾지 못했습니다.")
                 else {
-                    const { id, title, start, end, location, memo } = findSchedule
+                    const { id, title, start, end, allDay, location, memo } = findSchedule
                     startDate = dateToString(start, "full")
                     endDate = dateToString(end, "full")
                     const startTime = dateToString(start, "time")
                     const endTime = dateToString(end, "time")
-                    req.schedule = { id, title, startDate, endDate, startTime, endTime, location, memo }
+                    req.schedule = { id, title, startDate, endDate, startTime, endTime, allDay: allDay ? "on" : "off", location, memo }
                 }
             }
             next()
@@ -43,11 +43,20 @@ const findbyDate = async (req, res, next) => {
     try {
         if (req.date || req.month) {
             let date = ""
+            let startDate = null
+            let endDate = null
             let findList = null
+            let findKUList = null
+            let findIndividualList = null
             if (req.date) {
+                // 날짜 기준
                 date = new Date(req.date)
+                startDate = new Date(req.date)
+                startDate.setHours(24, 0, 0, 0)
+                endDate = new Date(req.date)
+                endDate.setHours(0, 0, 0, 0)
                 if (req.userId === "ku") {
-                    findList = await KU.findAll({
+                    findKUList = await KU.findAll({
                         where: {
                             [Op.and]: [
                                 {
@@ -62,32 +71,43 @@ const findbyDate = async (req, res, next) => {
                             ]
                         }, order: [['updatedAt', 'DESC']]
                     })
-                    findList.forEach(schedule => {
-                        schedule.dataValues.start = dateToString(schedule.start, "twoYear")
-                        schedule.dataValues.end = dateToString(schedule.end, "twoYear")
+                    findKUList.forEach(schedule => {
+                        schedule.dataValues.start = dateToString(schedule.dataValues.start, "twoYear")
+                        schedule.dataValues.end = dateToString(schedule.dataValues.end, "twoYear")
                     })
+                    findList = findKUList
                 } else {
-                    findList = await Schedule.findAll({
+                    findIndividualList = await Schedule.findAll({
                         where: {
                             [Op.and]: [
                                 {
                                     start: {
-                                        [Op.lte]: date
+                                        [Op.lte]: startDate
                                     }
                                 }, {
                                     end: {
-                                        [Op.gte]: date
+                                        [Op.gte]: endDate
                                     }
                                 }
                             ]
                         }, order: [['updatedAt', 'DESC']]
                     })
+                    findIndividualList.forEach(schedule => {
+                        schedule.dataValues.startDate = dateToString(schedule.dataValues.start, "twoYear")
+                        schedule.dataValues.endDate = dateToString(schedule.dataValues.end, "twoYear")
+                        if (!schedule.dataValues.allDay) {
+                            schedule.dataValues.startTime = dateToString(schedule.dataValues.start, "time")
+                            schedule.dataValues.endTime = dateToString(schedule.dataValues.end, "time")
+                        }
+                    })
+                    findList = findIndividualList
                 }
             } else {
+                // 달 기준
                 date = new Date(req.month)
                 const year = dateToString(date, "year")
                 const month = dateToString(date, "month")
-                const findKUList = await KU.findAll({
+                findKUList = await KU.findAll({
                     where: {
                         [Op.or]: [
                             {
@@ -105,22 +125,17 @@ const findbyDate = async (req, res, next) => {
                     }, attributes: ['id', 'title', 'start', 'end']
                     , order: [['start']]
                 })
+                findKUList.forEach(schedule => {
+                    schedule.dataValues.end.setDate(schedule.dataValues.end.getDate() + 1)
+                    schedule.dataValues.end = dateToString(schedule.dataValues.end, "full")
+                    schedule.dataValues.start = dateToString(schedule.dataValues.start, "full")
+                    schedule.dataValues.allDay = true
+                    schedule.dataValues.className = 'text'
+                })
                 if (req.userId === "ku") {
-                    // console.log("list==",findList)
-                    findKUList.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'
-                    })
                     findList = findKUList
                 } else {
-                    const findIndividualList = await Schedule.findAll({
+                    findIndividualList = await Schedule.findAll({
                         where: {
                             [Op.or]: [
                                 {
@@ -139,6 +154,13 @@ const findbyDate = async (req, res, next) => {
                         , order: [['start']]
                     })
                     console.log("개인 일정 찾기", findIndividualList)
+                    findIndividualList.forEach(schedule => {
+                        schedule.dataValues.end.setDate(schedule.dataValues.end.getDate() + 1)
+                        schedule.dataValues.end = dateToString(schedule.dataValues.end, "full")
+                        schedule.dataValues.start = dateToString(schedule.dataValues.start, "full")
+                        schedule.dataValues.allDay = true
+                        schedule.dataValues.className = 'text'
+                    })
                     findList = { KU: findKUList, individual: findIndividualList }
                 }
             }
@@ -155,6 +177,7 @@ const create = async (req, res) => {
         let newSchedule = null
         let start = null
         let end = null
+        let allDay_v = false
         const userId = req.userId
         if (userId === "ku") {
             const { title, startDate, endDate, memo } = req.body
@@ -166,11 +189,12 @@ const create = async (req, res) => {
             if (allDay === "on") {
                 start = new Date(startDate)
                 end = new Date(endDate)
+                allDay_v = true
             } else {
                 start = new Date(startDate + " " + startTime)
                 end = new Date(endDate + " " + endTime)
             }
-            newSchedule = await Schedule.create({ title: title, start: start, end: end, location: location, memo: memo, userId: userId })
+            newSchedule = await Schedule.create({ title: title, start: start, end: end, allDay: allDay_v, location: location, memo: memo, userId: userId })
         }
         return res.json(newSchedule)
     } catch (error) {
@@ -183,6 +207,7 @@ const edit = async (req, res) => {
         let updated = null
         let start = null
         let end = null
+        let allDay_v = false
         const userId = req.userId
         const { scheduleId } = req.query
         if (userId === "ku") {
@@ -195,11 +220,12 @@ const edit = async (req, res) => {
             if (allDay === "on") {
                 start = new Date(startDate)
                 end = new Date(endDate)
+                allDay_v = true
             } else {
                 start = new Date(startDate + " " + startTime)
                 end = new Date(endDate + " " + endTime)
             }
-            updated = await Schedule.update({ title: title, start: start, end: end, location: location, memo: memo },
+            updated = await Schedule.update({ title: title, start: start, end: end, allDay: allDay_v, location: location, memo: memo },
                 { where: { [Op.and]: [{ id: scheduleId }, { userId: userId }] } })
         }
         if (!updated) throw new Error("해당 일정의 일부 정보를 수정하는데 실패하였습니다.")
@@ -214,6 +240,7 @@ const remove = async (req, res) => {
         let deleted = null
         const userId = req.userId
         const { scheduleId } = req.query
+        console.log("scheduleId==",scheduleId)
         if (userId === "ku") deleted = await KU.destroy({ where: { id: scheduleId } })
         else deleted = await Schedule.destroy({ where: { [Op.and]: [{ id: scheduleId }, { userId: userId }] } })
         if (!deleted) throw new Error("해당 일정을 삭제하는데 실패하였습니다.")
@@ -267,9 +294,7 @@ function dateToString(dateObj, method) {
         case "full":
             return [year, (month > 9 ? "" : "0") + month, (date > 9 ? "" : "0") + date].join("-")
         case "twoYear":
-            return [year_disit, (month > 9 ? "" : "0") + month, (date > 9 ? "" : "0") + date].join("-")
-        // case "dateTime":
-        //     return [year, (month > 9 ? "" : "0") + month, (date > 9 ? "" : "0") + date, ].join("-")
+            return [year_disit, (month > 9 ? "" : "0") + month, (date > 9 ? "" : "0") + date].join(".")
         case "time":
             return [(hour > 9 ? "" : "0") + hour, (minute > 9 ? "" : "0") + minute].join(":")
         case "year":

server/db/index.js

@@ -14,6 +14,7 @@ const sequelize = new Sequelize(
     {
         host: dbConfig.host,
         dialect: dbConfig.dialect,
+        timezone: dbConfig.timezone,
         pool: {
             max: dbConfig.pool?.max,
             min: dbConfig.pool?.min,