diff --git a/src/pages/calendar.js b/src/pages/calendar.js new file mode 100644 index 0000000000000000000000000000000000000000..354bfea0d5921f1f00dfaaaffb9ae59c9701ed27 --- /dev/null +++ b/src/pages/calendar.js @@ -0,0 +1,349 @@ +import React, {useEffect, useState} from 'react'; +import '@progress/kendo-react-intl'; +import '@progress/kendo-react-scheduler'; +import { Scheduler, WeekView, DayView, MonthView, WorkWeekView} from '@progress/kendo-react-scheduler'; + +import calendar_styles from './calendar.module.css' +import ScheduleAddModal from './addModal' +import ScheduleDeleteModal from './deleteModal'; +import ScheduleInquiryModal from './inquiryModal'; +import Header from './Header' +import Schedule from './mainAside'; + +const MySchedulerApp = () => { + useEffect(() => { + // 페이지가 로드되면 실행될 코드 + const headingCell1 = document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(1)'); + const headingCell2 = document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(2)'); + const headingCell3 = document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(3)'); + const headingCell4 = document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(4)'); + const headingCell5 = document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(5)'); + const headingCell6= document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(6)'); + const headingCell7= document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(7)'); + if (headingCell1) { + headingCell1.textContent = "일"; + } + if (headingCell2) { + headingCell2.textContent = "월"; + } + if (headingCell3) { + headingCell3.textContent = "화"; + } + if (headingCell4) { + headingCell4.textContent = "수"; + } + if (headingCell5) { + headingCell5.textContent = "목"; + } + if (headingCell6) { + headingCell6.textContent = "금"; + } + if (headingCell7) { + headingCell7.textContent = "토"; + } + }, []); + const [scheduleData, setScheduleData] = useState([]); + const [isModalOpen, setIsModalOpen] = useState(false); + const [isInModalOpen, setIsInModalOpen] = useState(false); + const [isDeModalOpen, setIsDeModalOpen]=useState(false); + const [selectedSchedule, setSelectedSchedule] = useState(null); + const [weeklySchedules, setWeeklySchedules] = useState([]); + const[selectedDate, setSelectedDate]=useState("2023-10-15"); + const [updateCounter, setUpdateCounter] = useState(0); + + + const openInModal=()=>{ + //일정 조회 모달 열기 + setIsInModalOpen(true); + + } + const openModal = () => { + // 일정 추가 모달 열기 + setIsModalOpen(true); + + }; + const openDeModal=()=>{ + //일정 삭제 모달 열기 + setIsDeModalOpen(true); + console.log('isDeModalOpen:', isDeModalOpen); + } + const closeModal = () => { + // 일정 추가 모달 닫기 + setIsModalOpen(false); + + }; + const closeInModal = () => { + // 일정 조회 모달 닫기 + setIsInModalOpen(false); + + }; + + const closeDeModal = () => { + // 일정 삭제 모달 닫기 + setIsDeModalOpen(false); + console.log('isDeModalOpen:', isDeModalOpen); + }; + const handleSaveEvent = (formData) => { + // 일정 저장 및 모달 닫기 + const jsonData=JSON.stringify(formData); + console.log('Sending data to the server:', jsonData); + + // 백엔드로 데이터 전송 (Fetch API 사용) + fetch('api/schedules', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: jsonData, + }) + .then(response => response.json()) + .then(data => { + // 성공 시 처리 + console.log(data); + + }) + .catch(error => { + // 실패 시 처리 + console.error(error); + }); + + // 모달 닫기 + setScheduleData((prevData) => [...prevData, formData]) + closeModal(); + setUpdateCounter((prevCounter) => prevCounter + 1); + + }; + const handleInquiryEvent=async(date)=>{ + try { + setSelectedDate(date.InquiryDate); + console.log(date.InquiryDate); + //const formattedDate = date.InquiryDate.toISOString().split('T')[0]; + const response = await fetch(`/api/schedules/dates?date=${date.InquiryDate}`); + const data = await response.json(); + const processedDataArray = []; + for (const backendData of data) { + // 백엔드에서 받아온 데이터의 날짜 정보를 사용하여 Date 객체 생성 + const startDate = new Date(backendData.date); + + // "14:00" 형식의 문자열을 받아 현재 날짜에 추가 + const startTimeParts = backendData.startTime.split(':'); + const endTimeParts = backendData.endTime.split(':'); + const startTime = new Date(startDate); + const endTime=new Date(startDate); + const clr=backendData.color; + startTime.setHours(parseInt(startTimeParts[0], 10)); + startTime.setMinutes(parseInt(startTimeParts[1], 10)); + endTime.setHours(parseInt(endTimeParts[0], 10)); + endTime.setMinutes(parseInt(endTimeParts[1], 10)); + + processedDataArray.push({ + id: backendData.id, + date: backendData.date, + start:startTime, + end: endTime, + title: backendData.title, + color:clr, + description: backendData.Description + }); + } + setScheduleData(processedDataArray); + console.log('와다다',processedDataArray); + console.log(selectedDate); + setUpdateCounter((prevCounter) => prevCounter + 1); + } catch (error) { + console.error('Error fetching weekly schedules:', error); + } + + + }; + + + + + useEffect(() => { + // 페이지가 로드되면 백엔드에서 일정 데이터를 가져와서 설정 + + + const backendEndpoint = '/api/schedules'; + + fetch(backendEndpoint) + .then(response => response.json()) + .then(data => { + // 성공 시 처리 + + const backendDataArray = data.schedules; + console.log(data.schedules); + + // const backendDataArray = + // [{ + // "id":23423, + // "date":"2023-11-19", + // "startTime":"10:00", + // "endTime":"11:30", + // "title":"뇨끼 먹기", + // "color":"#8393BE", + // "Description":"맛있게 먹기" + // },{ + // "id":1923, + // "date":"2023-11-23", + // "startTime":"17:00", + // "endTime":"19:00", + // "title":"까르보나라 만들기", + // "color":"#8393BE" + // },{ + // "id":777, + // "date":"2023-11-24", + // "startTime":"09:00", + // "endTime":"12:00", + // "title":"강의 듣기", + // "color":"#8393BE" + // }]; + // 만약 backendDataArray가 undefined인지 확인 + + + // 받아온 여러 개의 데이터를 가공하여 사용할 형식으로 변환 + const processedDataArray = []; + for (const backendData of backendDataArray) { + // 백엔드에서 받아온 데이터의 날짜 정보를 사용하여 Date 객체 생성 + const startDate = new Date(backendData.date); + + // "14:00" 형식의 문자열을 받아 현재 날짜에 추가 + const startTimeParts = backendData.startTime.split(':'); + const endTimeParts = backendData.endTime.split(':'); + const startTime = new Date(startDate); + const endTime=new Date(startDate); + const clr=backendData.color; + startTime.setHours(parseInt(startTimeParts[0], 10)); + startTime.setMinutes(parseInt(startTimeParts[1], 10)); + endTime.setHours(parseInt(endTimeParts[0], 10)); + endTime.setMinutes(parseInt(endTimeParts[1], 10)); + + processedDataArray.push({ + id: backendData.id, + date: backendData.date, + start:startTime, + end: endTime, + title: backendData.title, + color:clr, + description: backendData.Description + }); + } + // 변환된 데이터 배열을 JSON 문자열로 변환 + console.log('dd',processedDataArray); + setScheduleData(processedDataArray) + console.log('kk', scheduleData); + + }) + + .catch(error => { + console.error(error); + }); + + }, [updateCounter]); + + const handleDeleteEvent=(id, deleteOption)=>{ + let deleteUrl = `api/schedules/${id}`; + const deleteData= { + afterDay: deleteOption==='afterDay', + total: deleteOption==='total', + } + fetch(deleteUrl,{ + method: 'DELETE', + headers:{ + 'Content-Type':'application/json', + }, + body: JSON.stringify(deleteData) + + }) + .then(response => response.json()) + .then(data => { + // 성공 시 처리 + console.log(data); + setUpdateCounter((prevCounter) => prevCounter + 1); + }) + .catch(error => { + // 실패 시 처리 + console.error(error); + }); + }; + const kEventElements = document.querySelectorAll(".k-event"); + + + const handleScheduleClick = (event) => { + console.log('Item clicked:', event.target); + setSelectedSchedule(event); + setIsDeModalOpen(true); + //console.log('클릭시 isDeModalOpen:', isDeModalOpen); + }; + useEffect(() => { + console.log('클릭시 isDeModalOpen:', isDeModalOpen); + }, [isDeModalOpen]); + // 각 요소에 새로운 클릭 이벤트 리스너 등록 + kEventElements.forEach((element) => { + element.addEventListener('click', handleScheduleClick); + }); + return ( + <div> + + <div className={calendar_styles.main_header}> + <Header /> + </div> + <div className={calendar_styles.scheduler_container}> + + <div className={calendar_styles.scheduler_content}> + <div className={calendar_styles.button_handler}> + <button className={calendar_styles.add_event_button} onClick={openModal}> + 일정추가 + </button> + <button className={calendar_styles.inquiry_event_button} onClick={openInModal}> + 일정조회 + </button> + </div> + <div> + <Scheduler data={scheduleData}> + + <WeekView + startDate={selectedDate} + // eventRender={(event) => ( + // <div + // style={{ + // backgroundColor: event.dataItem.color || '#8393BE', + // // 다른 스타일링 속성을 원하는 경우 여기에 추가하세요. + // }} + // > + // {event.dataItem.title} + // </div> + // )} + + /> + <DayView startDate={selectedDate}/> + <MonthView /> + + </Scheduler> + </div> + <ScheduleAddModal + isOpen={isModalOpen} + onClose={closeModal} + onSave={handleSaveEvent} + /> + + + <ScheduleDeleteModal + isOpen={isDeModalOpen} + onClose={closeDeModal} + onDelete={handleDeleteEvent} + schedule={selectedSchedule} + /> + <ScheduleInquiryModal + isOpen={isInModalOpen} + onClose={closeInModal} + onInquiry={handleInquiryEvent} + /> + + </div> + </div> + </div> + ); + }; + +export default MySchedulerApp; diff --git a/src/pages/calendar.module.css b/src/pages/calendar.module.css new file mode 100644 index 0000000000000000000000000000000000000000..af3d44ee6f8d78cb64779f5b31d0302804230e98 --- /dev/null +++ b/src/pages/calendar.module.css @@ -0,0 +1,66 @@ +.scheduler_container { + display: flex; + position: relative; + margin-top: 150px; + overflow-y: auto; +} + + + +.scheduler_content { + flex: 1; + overflow-y: auto; + + +} +.main_header{ + left:0; + width:100%; + z-index: 100; + top: 0; + position: fixed; +} +/* 전체 스케줄러에 스타일을 추가하는 예시 */ +.k-scheduler { + + padding: 80px; /* 스케줄러 전체에 안쪽 여백 추가 */ +} + +.k-scheduler-nonwork, .k-scheduler .k-nonwork-hour { + background-color: white; +} +/* .k-event #1dc6b143-9816-43ab-9575-20d58a786cd4{ + color: black; + background-color: #D8EBD1; +} */ +.button_handler{ + position: absolute; + top:1.3%; + right:33%; + z-index: 10; + +} +.button_handler button{ + display: inline-block; + padding: 5px 10px; + font-size: 14px; + text-align: center; + text-decoration: none; + cursor: pointer; + border: 1px solid #ccc; + border-radius: 5px; + background-color: #f0f0f0; + color: #333; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 그림자 추가 */ + transition: background-color 0.3s, color 0.3s, transform 0.3s; +} +body{ + background-color: white; + background: none; + +} +.button_handler button:hover { + background-color: #F97E7E; + color: white; + transform: translate(2px, 2px); /* 마우스 오버 시 약간 이동하는 효과 */ +} diff --git a/src/pages/deleteModal.js b/src/pages/deleteModal.js index e5f56a6ef44b552ed82ad48d0ceaf83511298403..d2cadeec3ca77b7ca0f2572300876b4bdf36e5b5 100644 --- a/src/pages/deleteModal.js +++ b/src/pages/deleteModal.js @@ -6,7 +6,7 @@ const ScheduleDeleteModal = ({ isOpen, onClose, onDelete, schedule }) => { console.log('모달창:',isOpen); if (schedule) { const scheduleContent = schedule.target.id; - console.log('scheduleContent:', scheduleContent); + } if (isOpen===true){ return ( diff --git a/src/pages/main.js b/src/pages/main.js index 8c47f294b3aa72d7b80f481062a4c11e60aa969b..ab38ceeeb084f13c5d46f29781807f3959f79170 100644 --- a/src/pages/main.js +++ b/src/pages/main.js @@ -1,340 +1,16 @@ -import React, {useEffect, useState} from 'react'; -import '@progress/kendo-react-intl'; -import '@progress/kendo-react-scheduler'; -import { Scheduler, WeekView, DayView, MonthView, WorkWeekView} from '@progress/kendo-react-scheduler'; - -import main_styles from './main.module.css' -import ScheduleAddModal from './addModal' -import ScheduleDeleteModal from './deleteModal'; -import ScheduleInquiryModal from './inquiryModal'; -import Header from './Header' - - -const MySchedulerApp = () => { - useEffect(() => { - // 페이지가 로드되면 실행될 코드 - const headingCell1 = document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(1)'); - const headingCell2 = document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(2)'); - const headingCell3 = document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(3)'); - const headingCell4 = document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(4)'); - const headingCell5 = document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(5)'); - const headingCell6= document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(6)'); - const headingCell7= document.querySelector('.k-scheduler-cell .k-heading-cell:nth-child(7)'); - if (headingCell1) { - headingCell1.textContent = "일"; - } - if (headingCell2) { - headingCell2.textContent = "월"; - } - if (headingCell3) { - headingCell3.textContent = "화"; - } - if (headingCell4) { - headingCell4.textContent = "수"; - } - if (headingCell5) { - headingCell5.textContent = "목"; - } - if (headingCell6) { - headingCell6.textContent = "금"; - } - if (headingCell7) { - headingCell7.textContent = "토"; - } - }, []); - const [scheduleData, setScheduleData] = useState([]); - const [isModalOpen, setIsModalOpen] = useState(false); - const [isInModalOpen, setIsInModalOpen] = useState(false); - const [isDeModalOpen, setIsDeModalOpen]=useState(false); - const [selectedSchedule, setSelectedSchedule] = useState(null); - const [weeklySchedules, setWeeklySchedules] = useState([]); - const[selectedDate, setSelectedDate]=useState(new Date()); - - - const openInModal=()=>{ - //일정 조회 모달 열기 - setIsInModalOpen(true); - - } - const openModal = () => { - // 일정 추가 모달 열기 - setIsModalOpen(true); - - }; - const openDeModal=()=>{ - //일정 삭제 모달 열기 - setIsDeModalOpen(true); - console.log('isDeModalOpen:', isDeModalOpen); - } - const closeModal = () => { - // 일정 추가 모달 닫기 - setIsModalOpen(false); - - }; - const closeInModal = () => { - // 일정 조회 모달 닫기 - setIsInModalOpen(false); - - }; - - const closeDeModal = () => { - // 일정 삭제 모달 닫기 - setIsDeModalOpen(false); - console.log('isDeModalOpen:', isDeModalOpen); - }; - const handleSaveEvent = (formData) => { - // 일정 저장 및 모달 닫기 - const jsonData=JSON.stringify(formData); - console.log('Sending data to the server:', jsonData); - - // 백엔드로 데이터 전송 (Fetch API 사용) - fetch('/scheduler', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: jsonData, - }) - .then(response => response.json()) - .then(data => { - // 성공 시 처리 - console.log(data); - }) - .catch(error => { - // 실패 시 처리 - console.error(error); - }); - - // 모달 닫기 - setScheduleData((prevData) => [...prevData, formData]) - closeModal(); - }; - const handleInquiryEvent=async(date)=>{ - try { - setSelectedDate(date.InquiryDate); - const formattedDate = date.InquiryDate.toISOString().split('T')[0]; - const response = await fetch(`/api/schedules/dates?date=${formattedDate}`); - const data = await response.json(); - const processedDataArray = []; - for (const backendData of data) { - // 백엔드에서 받아온 데이터의 날짜 정보를 사용하여 Date 객체 생성 - const startDate = new Date(backendData.date); - - // "14:00" 형식의 문자열을 받아 현재 날짜에 추가 - const startTimeParts = backendData.startTime.split(':'); - const endTimeParts = backendData.endTime.split(':'); - const startTime = new Date(startDate); - const endTime=new Date(startDate); - const clr=backendData.color; - startTime.setHours(parseInt(startTimeParts[0], 10)); - startTime.setMinutes(parseInt(startTimeParts[1], 10)); - endTime.setHours(parseInt(endTimeParts[0], 10)); - endTime.setMinutes(parseInt(endTimeParts[1], 10)); - - processedDataArray.push({ - id: backendData.id, - date: backendData.date, - start:startTime, - end: endTime, - title: backendData.title, - color:clr, - description: backendData.Description - }); - } - setScheduleData(processedDataArray); - - } catch (error) { - console.error('Error fetching weekly schedules:', error); - } - - - }; - - - - - useEffect(() => { - // 페이지가 로드되면 백엔드에서 일정 데이터를 가져와서 설정 - - - const backendEndpoint = '/api/schedules'; - - fetch(backendEndpoint) - .then(response => response.json()) - .then(data => { - // 성공 시 처리 - console.log(data); - const backendDataArray = data.schedules; - - - // const backendDataArray = - // [{ - // "id":23423, - // "date":"2023-11-19", - // "startTime":"10:00", - // "endTime":"11:30", - // "title":"뇨끼 먹기", - // "color":"#8393BE", - // "Description":"맛있게 먹기" - // },{ - // "id":1923, - // "date":"2023-11-23", - // "startTime":"17:00", - // "endTime":"19:00", - // "title":"까르보나라 만들기", - // "color":"#8393BE" - // },{ - // "id":777, - // "date":"2023-11-24", - // "startTime":"09:00", - // "endTime":"12:00", - // "title":"강의 듣기", - // "color":"#8393BE" - // }]; - // 만약 backendDataArray가 undefined인지 확인 - - - // 받아온 여러 개의 데이터를 가공하여 사용할 형식으로 변환 - const processedDataArray = []; - for (const backendData of backendDataArray) { - // 백엔드에서 받아온 데이터의 날짜 정보를 사용하여 Date 객체 생성 - const startDate = new Date(backendData.date); - - // "14:00" 형식의 문자열을 받아 현재 날짜에 추가 - const startTimeParts = backendData.startTime.split(':'); - const endTimeParts = backendData.endTime.split(':'); - const startTime = new Date(startDate); - const endTime=new Date(startDate); - const clr=backendData.color; - startTime.setHours(parseInt(startTimeParts[0], 10)); - startTime.setMinutes(parseInt(startTimeParts[1], 10)); - endTime.setHours(parseInt(endTimeParts[0], 10)); - endTime.setMinutes(parseInt(endTimeParts[1], 10)); - - processedDataArray.push({ - id: backendData.id, - date: backendData.date, - start:startTime, - end: endTime, - title: backendData.title, - color:clr, - description: backendData.Description - }); - } - // 변환된 데이터 배열을 JSON 문자열로 변환 - setScheduleData(processedDataArray) - }) - - .catch(error => { - console.error(error); - }); - - }, []); - - const handleDeleteEvent=(id, deleteOption)=>{ - let deleteUrl = `/scheduler/${id}`; - const deleteData= { - afterDay: deleteOption==='afterDay', - total: deleteOption==='total', - } - fetch(deleteUrl,{ - method: 'DELETE', - headers:{ - 'Content-Type':'application/json', - }, - body: JSON.stringify(deleteData) - - }) - .then(response => response.json()) - .then(data => { - // 성공 시 처리 - console.log(data); - - }) - .catch(error => { - // 실패 시 처리 - console.error(error); - }); - }; - const kEventElements = document.querySelectorAll(".k-event"); - - - const handleScheduleClick = (event) => { - console.log('Item clicked:', event.target); - setSelectedSchedule(event); - setIsDeModalOpen(true); - //console.log('클릭시 isDeModalOpen:', isDeModalOpen); - }; - useEffect(() => { - console.log('클릭시 isDeModalOpen:', isDeModalOpen); - }, [isDeModalOpen]); - // 각 요소에 새로운 클릭 이벤트 리스너 등록 - kEventElements.forEach((element) => { - element.addEventListener('click', handleScheduleClick); - }); - return ( - <div> - <div className={main_styles.main_header}> - <Header /> - </div> - <div className={main_styles.scheduler_container}> - <div className={main_styles.side_container}> - <h1>side부분</h1> - </div> - <div className={main_styles.scheduler_content}> - <div className={main_styles.button_handler}> - <button className={main_styles.add_event_button} onClick={openModal}> - 일정추가 - </button> - <button className={main_styles.inquiry_event_button} onClick={openInModal}> - 일정조회 - </button> - </div> - <div> - <Scheduler data={scheduleData}> - - <WeekView - startDate={selectedDate} - eventRender={(event) => ( - <div - style={{ - backgroundColor: event.dataItem.color || '#8393BE', - // 다른 스타일링 속성을 원하는 경우 여기에 추가하세요. - }} - > - {event.dataItem.title} - </div> - )} - - /> - <DayView startDate={selectedDate}/> - <MonthView /> - - </Scheduler> - </div> - <ScheduleAddModal - isOpen={isModalOpen} - onClose={closeModal} - onSave={handleSaveEvent} - /> - - - <ScheduleDeleteModal - isOpen={isDeModalOpen} - onClose={closeDeModal} - onDelete={handleDeleteEvent} - schedule={selectedSchedule} - /> - <ScheduleInquiryModal - isOpen={isInModalOpen} - onClose={closeInModal} - onInquiry={handleInquiryEvent} - /> - - </div> - </div> - </div> - ); - }; - -export default MySchedulerApp; +import MySchedulerApp from './calendar'; +import Schedule from './mainAside'; +import main_styles from './mainAside.module.css'; +const Main=()=>{ + return( + <div className={main_styles.main}> + <div className={main_styles.section}> + <MySchedulerApp></MySchedulerApp> + </div> + <div className={main_styles.aside}> + <Schedule></Schedule> + </div> + </div> + ) +} +export default Main; \ No newline at end of file diff --git a/src/pages/mainAside.js b/src/pages/mainAside.js index 258495b4d0703ad4fbf1b62c81892296f9fc8aae..347108940957844d89fa0d924681bda56cee2eb1 100644 --- a/src/pages/mainAside.js +++ b/src/pages/mainAside.js @@ -3,7 +3,7 @@ import styles from './mainAside.module.css'; function NextSchedule(props) { const { nextSchedules } = props.data; - console.log(nextSchedules); + if (!nextSchedules || !Array.isArray(nextSchedules)) { return <p className={styles.noContent}>다음 일정이 없습니다.</p>; @@ -26,7 +26,7 @@ function NextSchedule(props) { function Notice(props){ const { subscribeNotices } = props.data; - console.log(subscribeNotices); + if (!subscribeNotices || !Array.isArray(subscribeNotices)) { return <p className={styles.noContent}>최근 공지가 없습니다.</p>;