diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/committee/Schedules.jsx b/egovframe-template-simple-react-contribution/src/pages/admin/committee/Schedules.jsx index cf7bf35..5c6235d 100644 --- a/egovframe-template-simple-react-contribution/src/pages/admin/committee/Schedules.jsx +++ b/egovframe-template-simple-react-contribution/src/pages/admin/committee/Schedules.jsx @@ -1,13 +1,197 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; +import React, { useState, useEffect, useCallback } from 'react'; +import { Link, useLocation } from 'react-router-dom'; +import * as EgovNet from 'api/egovFetch'; import URL from 'constants/url'; +import CODE from 'constants/code'; import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin'; function Schedules(props) { + console.group("EgovAdminScheduleList"); + console.log("[Start] EgovAdminScheduleList ------------------------------"); + console.log("EgovAdminScheduleList [props] : ", props); + + const location = useLocation(); + console.log("EgovAdminScheduleList [location] : ", location); + + const DATE = new Date(); + const TODAY = new Date(DATE.getFullYear(), DATE.getMonth(), DATE.getDate()); + + const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || { schdulSe: '', year: TODAY.getFullYear(), month: TODAY.getMonth(), date: TODAY.getDate() }); + const [calendarTag, setCalendarTag] = useState([]); + + const [scheduleList, setScheduleList] = useState([]); + + const innerConsole = (...args) => { + console.log(...args); + } + + const getLastDateOfMonth = (year, month) => { + const LAST_DATE_SUPPLMENT = 1; + return new Date(year, month + LAST_DATE_SUPPLMENT, 0); + } + const getFirstDateOfMonth = (year, month) => { + return new Date(year, month, 1); + } + + const changeDate = (target, amount) => { + let changedDate; + + if (target === CODE.DATE_YEAR) { + changedDate = new Date(searchCondition.year + amount, searchCondition.month, searchCondition.date); + } + + if (target === CODE.DATE_MONTH) { + changedDate = new Date(searchCondition.year, searchCondition.month + amount, searchCondition.date); + } + setSearchCondition({ ...searchCondition, year: changedDate.getFullYear(), month: changedDate.getMonth(), date: changedDate.getDate() }); + } + + const retrieveList = useCallback((srchcnd) => { + console.groupCollapsed("EgovAdminScheduleList.retrieveList()"); + + const retrieveListURL = '/schedule/month'+EgovNet.getQueryString(srchcnd); + + const requestOptions = { + method: "GET", + headers: { + 'Content-type': 'application/json', + } + } + + EgovNet.requestFetch(retrieveListURL, + requestOptions, + (resp) => { + setScheduleList(resp.result.resultList); + }, + function (resp) { + console.log("err response : ", resp); + } + ); + console.groupEnd("EgovAdminScheduleList.retrieveList()"); + },[]); + + const drawCalendar = () => { + console.groupCollapsed("EgovAdminScheduleList.drawCalendar()"); + const PREV_MONTH_ADDITION = -1; + + let lastOfLastMonth = getLastDateOfMonth(searchCondition.year, searchCondition.month + PREV_MONTH_ADDITION); + let firstOfThisMonth = getFirstDateOfMonth(searchCondition.year, searchCondition.month); + let lastOfThisMonth = getLastDateOfMonth(searchCondition.year, searchCondition.month); + + console.log("lastOfLastMonth : ", lastOfLastMonth, lastOfLastMonth.getDay()); + console.log("firstOfThisMonth :", firstOfThisMonth, firstOfThisMonth.getDay()); + console.log("lastOfThisMonth :", lastOfThisMonth, lastOfThisMonth.getDay()); + console.log("scheduleList : ", scheduleList); + + let firstDayOfThisMonth = firstOfThisMonth.getDay(); + let lastDateOfThisMonth = lastOfThisMonth.getDate(); + console.log("firstDayOfThisMonth", firstDayOfThisMonth, "lastDateOfThisMonth", lastDateOfThisMonth) + + let monthArr = []; + let weekArr = []; + + // firstWeek Date Set START + let firstWeekDateCount = 0; + for (let day = 0; day < 7; day++) { + if (day < firstDayOfThisMonth) { // + weekArr.push(0); + firstWeekDateCount = 0; + } else { + weekArr.push(++firstWeekDateCount); + } + } + monthArr.push(weekArr); + console.log("FirstWeek monthArr : ", monthArr); + // firstWeek Date Set END + + // otherWeek Date Set START + let dayCount = 0; + weekArr = [];//초기화 + for (let day = firstWeekDateCount + 1; day <= lastDateOfThisMonth; day++) { + + if (dayCount % 7 !== 6) { + weekArr.push(day); + } else { + weekArr.push(day); + monthArr.push(weekArr); + weekArr = []; + dayCount = -1; + } + dayCount++; + } + // otherWeek Date Set END + + // lastWeek Date Set START + if (weekArr.length > 0) {//남은 부분 + for (let day = weekArr.length; day < 7; day++) { + weekArr.push(0); + } + monthArr.push(weekArr); + } + // lastWeek Date Set END + console.log("OtherWeek monthArr : ", monthArr); + + let mutsUseYearMonth = searchCondition.year.toString() + ((searchCondition.month + 1).toString().length === 1 ? "0" + (searchCondition.month + 1).toString() : (searchCondition.month + 1).toString()); + console.log("mutsUseYearMonth : ", mutsUseYearMonth); + + let mutCalendarTagList = []; + let keyIdx = 0; + + //draw Calendar + monthArr.forEach((week, weekIdx) => { + console.log(); + mutCalendarTagList.push( + { + week.map((day, dayIdx) => { + if (day !== 0) {//당월 일별 구현 + let sDate = day.toString().length === 1 ? "0" + day.toString() : day.toString(); + let iUseDate = Number(mutsUseYearMonth + sDate); + if (scheduleList.length > 0) {//일정 있는 경우 + return ( + + {day}
+ { + scheduleList.map((schedule, scheduleIdx) => { + let iBeginDate = Number(schedule.schdulBgnde.substring(0, 8)); + let iEndDate = Number(schedule.schdulEndde.substring(0, 8)); + innerConsole("scheduleList ", day, scheduleIdx, iBeginDate, iUseDate, iEndDate, iUseDate >= iBeginDate && iUseDate <= iEndDate); + innerConsole("schedule.schdulId ", schedule.schdulId); + if (iUseDate >= iBeginDate && iUseDate <= iEndDate) { + return ( + <> + {schedule.schdulNm} + +
+ + ); + } else return <> + }) + } + + ); + } else {//일정 없는 경우 + return ( + + {day}
+ ); + } + } else if (day === 0) {// 이전달/다음달 구현 + return (); + } else return <> + }) + }); + }) + console.log("mutCalendarTagList : ", mutCalendarTagList); + setCalendarTag(mutCalendarTagList); + console.groupEnd("EgovAdminScheduleList.drawCalendar()"); + } + const Location = React.memo(function Location() { return (
@@ -20,6 +204,19 @@ function Schedules(props) { ) }); + useEffect(() => { + retrieveList(searchCondition); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [searchCondition]); + + useEffect(() => { + drawCalendar(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [scheduleList]); + + console.log("------------------------------EgovAdminScheduleList [End]"); + console.groupEnd("EgovAdminScheduleList"); + return (
@@ -39,8 +236,73 @@ function Schedules(props) {

위원회 일정 관리

+ {/* */} +
+
    +
  • + +
    • +
  • + + {searchCondition.year} + +
    • +
  • + + {(searchCondition.month + 1)} + +
    • +
+
+ {/* */} - 여기에 구현해주세요. +
+ + + + + + + + + + + + + + {calendarTag} + +
일월화수목금토
+
{/* */}