Admin calendar 추가

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/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/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/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