From b0b51aaebd1750aef64c6c807ed9123cff34b760 Mon Sep 17 00:00:00 2001
From: gaeon <rkdjs1104@ajou.ac.kr>
Date: Sun, 10 Dec 2023 23:18:19 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20calendar=20=EC=A4=91=EB=B3=B5=EC=B2=98?=
=?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/calendar/calendar.js | 31 +++++---
src/components/calendar/duplicatedModal.js | 31 ++++++++
.../calendar/duplicatedModal.module.css | 70 +++++++++++++++++++
3 files changed, 123 insertions(+), 9 deletions(-)
create mode 100644 src/components/calendar/duplicatedModal.js
create mode 100644 src/components/calendar/duplicatedModal.module.css
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
index 2025dfd..1c3afa7 100644
--- a/src/components/calendar/calendar.js
+++ b/src/components/calendar/calendar.js
@@ -10,7 +10,7 @@ import ScheduleAddModal from './addModal'
import ScheduleDeleteModal from './deleteModal';
import ScheduleInquiryModal from './inquiryModal';
import ScheduleListModal from './inquiryListModal';
-//import Header from '../Header'
+import DuplicatedModal from "./duplicatedModal";
const defaultDate=new Date();
const MySchedulerApp = ({ setCount }) => {
@@ -57,6 +57,8 @@ const MySchedulerApp = ({ setCount }) => {
const[scheduleListModalOpen, setScheduleListModalOpen]=useState(false);
//const [isContent, setIsContent]=useState(' 상세 내용이 없습니다. ');
const [date, setDate]=useState(defaultDate);
+ const [duplicatedDates, setduplicatedDates]=useState([]);
+ const [duplicatedModal, setduplicatedModal]=useState(false);
const openInModal=()=>{
//일정 조회 모달 열기
@@ -88,7 +90,12 @@ const MySchedulerApp = ({ setCount }) => {
setIsDeModalOpen(false);
};
-
+ const openDuplicatedModal=()=>{
+ setduplicatedModal(true);
+ }
+ const closeDuplicatedModal=()=>{
+ setduplicatedModal(false);
+ }
const openScheduleListModal = () => {
setScheduleListModalOpen(true);
@@ -112,28 +119,29 @@ const MySchedulerApp = ({ setCount }) => {
},
body: jsonData,
})
- .then(response => {
+ .then(async response => {
if(response.status===200){
- alert('중복된 일정이 존재합니다.');
+ const responseData = await response.json();
+ console.log('Server response:', responseData);
+ setduplicatedDates(responseData);
+ openDuplicatedModal();
+ }
+ else if(response.status===400){
+ alert('유효하지 않은 날짜입니다.');
}
setCount( prevNum => (prevNum+1))
})
.then(data => {
console.log(data);
-
})
.catch(error=>{
console.log(error);
})
-
.finally(()=>{
-
const data={
InquiryDate: selectedDate
}
-
-
handleInquiryEvent(data, 0);
});
}
@@ -415,6 +423,11 @@ const CustomEditItem = (props) => {
onClose={closeScheduleListModal}
scheduleData={weeklySchedules}
/>
+ <DuplicatedModal
+ isOpen={duplicatedModal}
+ onClose={closeDuplicatedModal}
+ duplicatedDates={duplicatedDates}
+ />
</div>
diff --git a/src/components/calendar/duplicatedModal.js b/src/components/calendar/duplicatedModal.js
new file mode 100644
index 0000000..d8727a9
--- /dev/null
+++ b/src/components/calendar/duplicatedModal.js
@@ -0,0 +1,31 @@
+// ScheduleItem.js
+
+import React from 'react';
+import duplicatedStyles from './duplicatedModal.module.css';
+const DuplicatedModal = ({ isOpen, onClose, duplicatedDates}) => {
+
+ return (
+
+ <div className={`${duplicatedStyles.Dumodal} ${isOpen ? duplicatedStyles.open : ''}`}>
+ <div className={duplicatedStyles.Dumodal_content}>
+ <div className={duplicatedStyles.closeBtn} onClick={onClose}>X</div>
+ <label>중복된 날짜</label>
+
+ {duplicatedDates.map((item) => (
+ <div key={item.id} className={duplicatedStyles.block}>
+ <div className={duplicatedStyles.date}>
+ {item.date} {item.startTime} ~ {item.endTime}
+ </div>
+ <div className={duplicatedStyles.content}>
+ {item.title} {item. content}
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+
+}
+
+
+export default DuplicatedModal;
diff --git a/src/components/calendar/duplicatedModal.module.css b/src/components/calendar/duplicatedModal.module.css
new file mode 100644
index 0000000..25048c1
--- /dev/null
+++ b/src/components/calendar/duplicatedModal.module.css
@@ -0,0 +1,70 @@
+/* deleteModal.css */
+
+.Dumodal{
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5); /* 반투명한 배경 */
+ justify-content: center;
+ align-items: center;
+
+ z-index: 1000 !important;
+}
+
+.Dumodal.open{
+ display: flex;
+ z-index: 1000 !important;
+}
+
+.Dumodal_content{
+ background-color: white;
+ padding: 20px;
+ border-radius: 5px;
+ position: relative;
+ width: 300px;
+ padding: 20px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ overflow-y: auto;
+ height:400px;
+}
+.closeBtn{
+ cursor: pointer;
+ margin-left:90%;
+ font-size: 20px;
+}
+.Dumodal_content label{
+ font-size:22px;
+ margin-bottom:20px;
+}
+.content{
+ margin-left:30%;
+ font-size: 18px;
+}
+.block{
+ margin-bottom: 25px;
+}
+.date{
+ font-weight: bold;
+ margin-bottom: 5px;
+}
+.Dumodal_content::-webkit-scrollbar{
+ width: 5px;
+}
+
+.Dumodal_content::-webkit-scrollbar-thumb {
+ background-color: #2f3542;
+ border-radius: 10px;
+}
+
+.Dumodal_content::-webkit-scrollbar-track{
+ background-color: grey;
+ border-radius: 10px;
+ box-shadow: inset 0px 0px 5px white;
+}
\ No newline at end of file
--
GitLab