diff --git a/src/pages/main.js b/src/pages/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..0874de6f880a5e0a91ed37f27067349c23a6504d
--- /dev/null
+++ b/src/pages/main.js
@@ -0,0 +1,374 @@
+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 } from '@progress/kendo-react-dateinputs';
+
+import main_styles from './main.module.css'
+import ScheduleModal from './scheduleModal'
+import ScheduleItem from './deleteModal';  
+import ScheduleInquiry from './inquiryModal';
+// import '@progress/kendo-react-intl/dist/es/all';
+// import '@progress/kendo-react-scheduler/dist/es/views/week/WeekView' // 한글 지역화 파일s
+// import { IntlProvider, load, LocalizationProvider, IntlService } from '@progress/kendo-react-intl';
+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;
+  //       setScheduleData(fetchedData);
+      // .catch(error => {
+        //   console.error(error);
+        // });
+
+
+    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 문자열로 변환
+        
+      
+        // JSON 문자열을 상태에 설정
+        setScheduleData(processedDataArray);
+      // 초기 데이터를 스케줄 데이터에 설정
+        //setScheduleData(initialData);
+         //     })
+  
+  }, []);
+
+  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);
+  });
+  /*
+    useEffect(() => {
+      // 페이지가 로드될 때 실행되는 코드
+      const initialScheduleElement = document.querySelector(".k-event");
+  
+      const handleInitialScheduleClick = (event) => {
+        setSelectedSchedule(event.target);
+        setIsDeModalOpen(true);
+      };
+  
+      if (initialScheduleElement) {
+        initialScheduleElement.addEventListener('click', handleInitialScheduleClick);
+      }
+  
+      // 컴포넌트가 언마운트될 때 이벤트 리스너를 정리합니다.
+      return () => {
+        if (initialScheduleElement) {
+          initialScheduleElement.removeEventListener('click', handleInitialScheduleClick);
+        }
+      }
+    }, [setSelectedSchedule, setIsDeModalOpen]); // 의존성 배열에 명시
+  
+    // ... (기타 코드)
+
+  // 빈 배열을 전달하여 한 번만 실행되도록 합니다.
+  */
+    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>
+            <ScheduleModal
+              isOpen={isModalOpen}
+              onClose={closeModal}
+              onSave={handleSaveEvent}
+            />
+            
+            
+              <ScheduleItem
+                isOpen={isDeModalOpen}
+                onClose={closeDeModal}
+                onDelete={handleDeleteEvent}
+                schedule={selectedSchedule}
+              />
+              <ScheduleInquiry
+                isOpen={isInModalOpen}
+                onClose={closeInModal}
+                onInquiry={handleInquiryEvent}
+              />
+            
+          </div>
+        </div>
+      </div>
+    );
+  };              
+
+export default MySchedulerApp;