Skip to content
Snippets Groups Projects
Commit 345bf126 authored by Gaeon Kim's avatar Gaeon Kim
Browse files

feat: modify and update

parent 6a99cd32
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/pages/calendar.js 0 → 100644
+ 349
− 0
View file @ 345bf126
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;
src/pages/calendar.module.css 0 → 100644
+ 66
− 0
View file @ 345bf126
.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); /* 마우스 오버 시 약간 이동하는 효과 */
}
src/pages/deleteModal.js
+ 1
− 1
View file @ 345bf126
......@@ -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 (
......
src/pages/main.js
+ 16
− 340
View file @ 345bf126
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);
});
import MySchedulerApp from './calendar';
import Schedule from './mainAside';
import main_styles from './mainAside.module.css';
const Main=()=>{
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 className={main_styles.main}>
<div className={main_styles.section}>
<MySchedulerApp></MySchedulerApp>
</div>
<div>
<Scheduler data={scheduleData}>
<WeekView
startDate={selectedDate}
eventRender={(event) => (
<div
style={{
backgroundColor: event.dataItem.color || '#8393BE',
// 다른 스타일링 속성을 원하는 경우 여기에 추가하세요.
}}
>
{event.dataItem.title}
<div className={main_styles.aside}>
<Schedule></Schedule>
</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;
)
}
export default Main;
\ No newline at end of file
src/pages/mainAside.js
+ 2
− 2
View file @ 345bf126
......@@ -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>;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr