feat: calendar 중복처리

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>
           

src/components/calendar/duplicatedModal.js

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

src/components/calendar/duplicatedModal.module.css

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