Merge remote-tracking branch 'origin/kimpen'

client/src/components/AdminScheduleItem.js

@@ -9,7 +9,7 @@ const AdminScheduleItem = ({}) => {
                 <div className="d-flex justify-content-between">
                     <h3>sadsad</h3>
                     <div className="fs-5">
-                        <Link to="/admin/edit"><i className="bi bi-pencil-square text-dark me-1" data-bs-dismiss="modal"></i></Link>
+                        <Link to="/admin/edit"><i className="bi bi-pencil-square text-dark me-2" data-bs-dismiss="modal"></i></Link>
                         <i className="bi bi-trash"></i>
                     </div>
                 </div>

client/src/components/Buttons/buttons.module.scss

@@ -2,12 +2,14 @@
     top: 10px;
     right: 10px;
 
+    &:hover {
+        & .icon {
+            color: #fff
+        }
+    }
+
     & .icon {
         color: crimson;
-
-        &:hover, :active {
-            color: #fff;
-        }
     }
 }
 

client/src/components/Calendar/AdminMonthly.js

+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 moment from 'moment';
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from "@fullcalendar/interaction";
+import bootstrapPlugin from '@fullcalendar/bootstrap';
+import '@fortawesome/fontawesome-free/css/all.css';
+
+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 calendarRef = useRef(null)
+    const calenIconRef = useRef(null)
+    let calendar = null
+
+    useEffect(() => {
+        if (calendarRef && calendarRef.current) {
+            calendar = calendarRef.current.getApi()
+        }
+    })
+
+    useEffect(() => {
+        if (calenIconRef && calenIconRef.current) {
+            calenIconRef.current.addEventListener('click', () => {
+                calendar.today()
+                let date = moment(calendar.getDate()).format('YYYY-MM-DD')
+                setChangeDate(date)
+            })
+        }
+        return () => {
+            if (calenIconRef && calenIconRef.current) {
+                calenIconRef.current.removeEventListener('click', () => {
+                    calendar.today()
+                    let date = moment(calendar.getDate()).format('YYYY-MM-DD')
+                    setChangeDate(date)
+                })
+            }
+        }
+    }, [calenIconRef.current])
+
+    useEffect(() => {
+        calendar.gotoDate(changeDate)
+    }, [changeDate])
+
+    return (
+        <>
+            <div ref={calenIconRef} className="position-absolute" style={{ top: "7px", left: "7px" }}>
+                <CalendarBtn date={moment(initialDate).format('DD')} />
+            </div>
+            <FullCalendar
+                ref={calendarRef}
+                plugins={[dayGridPlugin, interactionPlugin, bootstrapPlugin]}
+                initialView="dayGridMonth"
+                initialDate={initialDate}
+                headerToolbar={{
+                    start: 'prev',
+                    center: 'myCustomButton',
+                    end: 'next'
+                }}
+                dayHeaderContent={(date) => {
+                    const weekList = ["일", "월", "화", "수", "목", "금", "토"]
+                    return weekList[date.dow]
+                }}
+                validRange={{
+                    start: moment(initialDate).subtract(3, 'years').format('YYYY-MM[-01]'),
+                    end: moment(initialDate).add(3, 'years').add(1, 'months').format('YYYY-MM[-01]')
+                }}
+                customButtons={{
+                    myCustomButton: {
+                        text: moment(changeDate).format('YYYY.MM'),
+                        click: () => {
+                            setPickerShow(true)
+                            return <button className="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#datePicker" aria-controls="datePicker" />
+                        }
+                    },
+                    prev: {
+                        icon: "fa-chevron-left",
+                        click: () => {
+                            calendar.prev()
+                            let date = moment(calendar.getDate()).format('YYYY-MM-DD')
+                            setChangeDate(date)
+                        }
+                    },
+                    next: {
+                        icon: "fa-chevron-right",
+                        click: () => {
+                            calendar.next()
+                            let date = moment(calendar.getDate()).format('YYYY-MM-DD')
+                            setChangeDate(date)
+                        }
+                    }
+                }}
+                dateClick={({ dateStr }) => {
+                    console.log("dateStr==", dateStr)
+                    setDateShow({ ...dateShow, date: dateStr, show: true })
+                    return <button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scheduleModal"></button>
+                }}
+                timeZone="local"
+                themeSystem='bootstrap'
+                height='78vh'
+            />
+            <DatePickerModal initialDate={initialDate} changeDate={changeDate} setChangeDate={setChangeDate} pickerShow={pickerShow} setPickerShow={setPickerShow} />
+            <ScheduleModal dateShow={dateShow} setDateShow={setDateShow} />
+        </>
+    )
+}
+
+export default AdminMonthly
\ No newline at end of file

client/src/components/Calendar/CustomView.js

+import KUSchedule from "../Schedule/KUSchedule.js";
+import ScheduleList from "../Schedule/ScheduleList.js";
+import { createPlugin } from '@fullcalendar/react';
+
+const CustomView = () => {
+    return (
+        <div className='fc-custom-view border-top border-dark pt-2'>
+            <KUSchedule />
+            <ScheduleList />
+        </div>
+    )
+}
+
+export default createPlugin({
+    views: {
+        custom: CustomView
+    }
+})
\ No newline at end of file

client/src/components/Calendar/DateView.js

+import { useEffect, useRef } from "react";
+import { useHistory, useParams } from "react-router-dom";
+import moment from 'moment';
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import bootstrapPlugin from '@fullcalendar/bootstrap';
+import '@fortawesome/fontawesome-free/css/all.css';
+import customViewPlugin from "./CustomView.js";
+
+const DateView = ({ }) => {
+    const calendarRef = useRef(null)
+    const { date } = useParams()
+    const history = useHistory()
+    let calendar = null
+
+    useEffect(() => {
+        if (calendarRef && calendarRef.current) {
+            calendar = calendarRef.current.getApi()
+        }
+    })
+
+    return (
+        <FullCalendar
+            ref={calendarRef}
+            plugins={[bootstrapPlugin, customViewPlugin]}
+            initialView="custom"
+            headerToolbar={{
+                start: 'prev',
+                center: 'myCustomButton',
+                end: 'next'
+            }}
+            customButtons={{
+                myCustomButton: {
+                    text: moment(date).format("MM.DD"),
+                    click: () => history.push("/home")
+                },
+                prev: {
+                    icon: "fa-chevron-left",
+                    click: () => {
+                        calendar.prev()
+                        let date = moment(calendar.getDate()).format('YYYY-MM-DD')
+                        history.push(`/schedule/${date}`)
+                    }
+                },
+                next: {
+                    icon: "fa-chevron-right",
+                    click: () => {
+                        calendar.next()
+                        let date = moment(calendar.getDate()).format('YYYY-MM-DD')
+                        history.push(`/schedule/${date}`)
+                    }
+                }
+            }}
+            timeZone="local"
+            themeSystem='bootstrap'
+        />
+    )
+}
+
+export default DateView
\ No newline at end of file

client/src/components/Calendar/Monthly.js

@@ -13,8 +13,8 @@ const Monthly = () => {
     const [initialDate, setInitialDate] = useState(moment().format('YYYY-MM-DD'))
     const [changeDate, setChangeDate] = useState(moment().format('YYYY-MM-DD'))
     const [show, setShow] = useState(false)
-    const calenIconRef = useRef(null)
     const calendarRef = useRef(null)
+    const calenIconRef = useRef(null)
     let calendar = null
     const history = useHistory();
 
@@ -99,7 +99,7 @@ const Monthly = () => {
                 timeZone="local"
                 themeSystem='bootstrap'
                 // eventLimit="true"
-                height='75vh'
+                height='78vh'
             />
             <DatePickerModal initialDate={initialDate} changeDate={changeDate} setChangeDate={setChangeDate} show={show} setShow={setShow} />
         </>

client/src/components/Modal/ScheduleModal.js

 import Item from "../AdminScheduleItem.js";
+import moment from 'moment';
 import styles from "./modal.module.scss";
 
-const ScheduleModal = () => {
+const ScheduleModal = ({ dateShow, setDateShow }) => {
     return (
-        <div className="modal" id="scheduleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="scheduleModalLabel" aria-hidden="true">
-            <div className="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable">
-                <div className="modal-content">
-                    <div className={`modal-header ${styles.header}`}>
-                        <h5 className="modal-title mx-auto" id="scheduleModalLabel">Modal title</h5>
-                        <button type="button" className={`btn-close btn-close-white ms-0 ${styles.closeBtn}`} data-bs-dismiss="modal" aria-label="Close"></button>
-                    </div>
-                    <div className={`modal-body text-dark ${styles.body}`}>
-                        <Item />
-                        <p className="mb-0">선택한 날짜에 일정이 없습니다.</p>
+        <>
+            {dateShow.show ? <div className="modal-backdrop fade show"></div> : null}
+            <div className={"modal " + (dateShow.show ? "d-block" : "d-none")} id="scheduleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="scheduleModalLabel" aria-hidden="true">
+                <div className="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable">
+                    <div className="modal-content">
+                        <div className={`modal-header ${styles.header}`}>
+                            <h5 className="modal-title text-white mx-auto" id="scheduleModalLabel">{moment(dateShow.date).format("MM.DD")}</h5>
+                            <button type="button" className={`btn-close btn-close-white ms-0 ${styles.closeBtn}`} data-bs-dismiss="modal" aria-label="Close" onClick={() => setDateShow({ ...dateShow, show: false })}></button>
+                        </div>
+                        <div className={`modal-body text-dark ${styles.body}`}>
+                            <Item />
+                            <p className="text-center mb-0">선택한 날짜에 일정이 없습니다.</p>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </>
     )
 }
 

client/src/components/Schedule/KUSchedule.js

@@ -3,7 +3,7 @@ import styles from "./schedule.module.scss";
 const KUSchedule = ({ title="복수전공 신청" }) => {
     return (
         <div className="card w-75 rounded-0 border-dark mx-auto">
-            <div className={`card-header rounded-0 px-1 ${styles.header}`}>
+            <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">

client/src/components/Schedule/ScheduleList.js

@@ -4,7 +4,7 @@ import styles from "./schedule.module.scss";
 const ScheduleList = () => {
     return (
         <div className={styles.list}>
-            <div className={`accordion accordion-flush`} id="scheduleList">
+            <div className="accordion accordion-flush" id="scheduleList">
                 <Item />
                 <Item />
                 <Item />

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

 .list {
-    height: 60vh;
+    height: 46vh;
     overflow-y: auto;
-    padding-bottom: 4vh;
 }
 
 .activeBtn {
@@ -65,8 +64,8 @@
 .header {
     background-color: crimson;
     & .ku_tiger {
-        width: 46px;
-        height: 35px;
+        width: 42px;
+        height: 30px;
     }
 }
 

client/src/pages/Admin/AdminPage.js

-import CalendarBtn from "../../components/Buttons/CalendarBtn.js";
+import Monthly from "../../components/Calendar/AdminMonthly.js";
+import Footer from "../../components/Footer.js";
 import styles from "./admin.module.scss";
 
 const AdminPage = () => {
     return (
         <>
             <p className={`position-absolute user-select-none ${styles.status}`}>관리자님, 환영합니다. | <span className={styles.cursor}>로그아웃</span></p>
-            <div className="position-absolute" style={{ top: "7px", left: "7px" }}>
-                <CalendarBtn date="2021-09-28" />
+            <div className={styles.body}>
+                <Monthly />
             </div>
+            <Footer pathname="admin/edit" />
         </>
     )
 }

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

@@ -9,4 +9,8 @@
             color: crimson;
         }
     }
+}
+
+.body {
+    padding-top: 4em;
 }
\ No newline at end of file

client/src/pages/SchedulePage.js

 import Menu from "../components/Menu/Menu.js";
 import HomeBtn from "../components/Buttons/HomeBtn.js";
-import ScheduleModal from "../components/Modal/ScheduleModal.js";
-import KUSchedule from "../components/Schedule/KUSchedule.js";
-import ScheduleList from "../components//Schedule/ScheduleList.js";
+import DateView from "../components/Calendar/DateView.js";
 import Footer from "../components/Footer.js";
 
 const SchedulePage = () => {
@@ -10,11 +8,7 @@ const SchedulePage = () => {
         <>
             <Menu />
             <HomeBtn />
-            <button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scheduleModal">
-                <ScheduleModal />
-            </button>
-            <KUSchedule />
-            <ScheduleList />
+            <DateView />
             <Footer pathname="schedule/edit" />
         </>
     )

client/src/scss/custom.scss

@@ -71,7 +71,7 @@ button {
 }
 
 .fc {
-    margin-top: 1em;
+    padding-top: 1em;
     
     & a {
         text-decoration: none;
@@ -135,4 +135,8 @@ button {
     & td.fc-day-sun:not(.fc-day-other) {
         color: #FF0000;
     }
+
+    & .fc-dayGridDay-view {
+        display: none;
+    }
 }
\ No newline at end of file