diff --git a/react-whenMeet/src/components/CalendarMonth.jsx b/react-whenMeet/src/components/CalendarMonth.jsx
index 6f02017453cc74020b459ebf55eee6ce0fa35339..9208333dd8e0a514c6c8cd7c8e3c588a13412020 100644
--- a/react-whenMeet/src/components/CalendarMonth.jsx
+++ b/react-whenMeet/src/components/CalendarMonth.jsx
@@ -3,7 +3,7 @@ import MakeDay from "./MakeDay";
 import MakeHeader from "./MakeHeader";
 import TableCell from "./TableCell";
 
-function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate }){//주차 데이터를 담을 공간
+function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate, startDate, endDate, setStartDate, setEndDate }){//주차 데이터를 담을 공간
     const calendarArr = [];
 
     const startDay = new Date(nowYear, nowMonth - 1, 1);
@@ -13,22 +13,21 @@ function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate }){//주차 데
     let nowDate = startDay.getDate();
     const lastDate = lastDay.getDate();
 
-    const [dragging, setDragging] = useState("nope");
+    const [dragging, setDragging] = useState();
     const [selectedDays, setSelectedDays] = useState([]); //선택된 날짜
     const [isDragging, setIsDragging] = useState(false); //드래그 여부
     const [dragStartDay, setDragStartDay] = useState(null); //드래그 시작 날짜
     const [dragEndDay, setDragEndDay] = useState();
+    const [finish, setFinish] = useState(false);
     
     // 여기 달력 날짜 수정해야함
     const fDay = new Date(nowYear, nowMonth - 1, 1 - startDay.getDay()) - (0);
     const eDay = new Date(nowYear, nowMonth - 1, lastDate + 6 - lastDay.getDay()) - (0);
 
-    let startDate="";
-    let endDate="";
-
     const handleDragStart = (newDate, idx, comp) => {
         setIsDragging(!isDragging);
         setDragStartDay(newDate);
+        setFinish(false);
         for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
             const elm = document.getElementById(day);
             elm.classList.remove("dragging")
@@ -38,6 +37,7 @@ function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate }){//주차 데
     const handleDragWhile = (newDate, idx, comp) => {
         if(!isDragging)return;
         setDragEndDay(newDate);
+        setFinish(false);
 
         let sd = dragStartDay - 0;
         let ed = newDate - 0;
@@ -51,6 +51,7 @@ function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate }){//주차 데
             elm.classList.remove("dragging")
         }
         const elm2 = document.getElementById(comp);
+        // console.log(comp);
         if(elm2.classList.contains("dragging")){
             for(let day = ed; day >= comp; day -= (60*60*24*1000)){
                 const elm = document.getElementById(day);
@@ -66,42 +67,124 @@ function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate }){//주차 데
 
     };
 
+    // let startDate="";
+    // let endDate="";
+
+
     const handleDragEnd = (newDate, idx) => {
         setIsDragging(false);
-        setDragging("nope");
+        // setDragging("nope");
         if(dragStartDay - 0 < dragEndDay - 0){
-            startDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate();
-            endDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate();
+            // startDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate();
+            // endDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate();
+            setStartDate(dragStartDay.getFullYear() + '-' + String(dragStartDay.getMonth()+1).padStart(2,"0") + '-' + String(dragStartDay.getDate()).padStart(2,"0"))
+            setEndDate(dragEndDay.getFullYear() + '-' + String(dragEndDay.getMonth()+1).padStart(2,"0") + '-' + String(dragEndDay.getDate()).padStart(2,"0"))
         }
         else{
-            endDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate();
-            startDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate();
+            // endDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate();
+            // startDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate();
+            setStartDate(dragEndDay.getFullYear() + '-' + String(dragEndDay.getMonth()+1).padStart(2,"0") + '-' + String(dragEndDay.getDate()).padStart(2,"0"))
+            setEndDate(dragStartDay.getFullYear() + '-' + String(dragStartDay.getMonth()+1).padStart(2,"0") + '-' + String(dragStartDay.getDate()).padStart(2,"0"))
         }
         // console.log(startDate);
         // console.log(endDate);
         setUsingDate({startDate:startDate, endDate:endDate})
+        setFinish(true);
     };
 
-    const handleClick = (newDate) => {
+    const handleClick = (newDate, idx, comp) => {
+        if(startDate && !finish){
+            // endDate = newDate.getFullYear() + '-' + (newDate.getMonth()+1) + '-' + newDate.getDate();
+            setEndDate(newDate.getFullYear() + '-' + String(newDate.getMonth()+1).padStart(2,"0") + '-' + String(newDate.getDate()).padStart(2,"0"));
+            // console.log("e", endDate);
+
+            let sd = new Date(startDate+'T00:00:00') - 0;
+            let ed = new Date(newDate) - 0;
+            // let sd = new Date(startDate) - 0;
+            // let ed = new Date(newDate) - 0;
+            // console.log(new Date(sd), new Date(ed), comp);
+            if(sd > ed){
+                let tmp = sd;
+                sd = ed;
+                ed = tmp;
+            }
+            console.log(new Date(sd).getFullYear() + '-' + String(new Date(sd).getMonth()+1).padStart(2,"0") + '-' + String(new Date(sd).getDate()).padStart(2,"0"))
+            console.log(new Date(ed).getFullYear() + '-' + String(new Date(ed).getMonth()+1).padStart(2,"0") + '-' + String(new Date(ed).getDate()).padStart(2,"0"))
+
+            setStartDate(new Date(sd).getFullYear() + '-' + String(new Date(sd).getMonth()+1).padStart(2,"0") + '-' + String(new Date(sd).getDate()).padStart(2,"0"))
+            setEndDate(new Date(ed).getFullYear() + '-' + String(new Date(ed).getMonth()+1).padStart(2,"0") + '-' + String(new Date(ed).getDate()).padStart(2,"0"))
+
+            if(sd < fDay)sd = fDay;
+            if(ed > eDay)ed = eDay;
+
+            for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
+                const elm = document.getElementById(day);
+                elm.classList.remove("dragging")
+            }
+            const elm2 = document.getElementById(comp);
+            if(elm2.classList.contains("dragging")){
+                for(let day = ed; day >= comp; day -= (60*60*24*1000)){
+                    const elm = document.getElementById(day);
+                    elm.classList.remove("dragging")
+                }
+            }
+            else {
+                for(let day = sd; day <= ed; day += (60*60*24*1000)){
+                    const elm = document.getElementById(day);
+                    // console.log(elm, day);
+                    elm.classList.add("dragging")
+                }
+            }
+            setUsingDate({
+                startDate: new Date(sd).getFullYear() + '-' + String(new Date(sd).getMonth()+1).padStart(2,"0") + '-' + String(new Date(sd).getDate()).padStart(2,"0"), 
+                endDate: new Date(ed).getFullYear() + '-' + String(new Date(ed).getMonth()+1).padStart(2,"0") + '-' + String(new Date(ed).getDate()).padStart(2,"0")
+            })
+            setFinish(true);
+        }
+        else{
+            console.log(fDay, eDay, new Date(fDay), new Date(eDay))
+            for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
+                const elm = document.getElementById(day);
+                elm.classList.remove("dragging")
+            }
+            // startDate = newDate.getFullYear() + '-' + (newDate.getMonth()+1) + '-' + newDate.getDate();
+            setStartDate(newDate.getFullYear() + '-' + String(newDate.getMonth()+1).padStart(2,"0") + '-' + String(newDate.getDate()).padStart(2,"0"));
+            const elm = document.getElementById(newDate - 0);
+            elm.classList.add("dragging")
+            // console.log("s", startDate);
+            setFinish(false);
+        }
+    }
+
+    const removeDrag = (newDate) => {
         for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
             const elm = document.getElementById(day);
             elm.classList.remove("dragging")
         }
-        const elm = document.getElementById(newDate - 0);
-        elm.classList.add("dragging")
-        console.log(`${newDate.getFullYear()}-${newDate.getMonth()+1}-${newDate.getDate()}`)
+        // const elm = document.getElementById(newDate - 0);
+        // elm.classList.add("dragging")
+        // console.log(`${newDate.getFullYear()}-${newDate.getMonth()+1}-${newDate.getDate()}`)
     }
 
-
     for(let day = fDay; day <= eDay; day += (60*60*24*1000)){
         const tmpArr = [];
         for(let i = 0; i < 7; i++){
             let cn = "cella";
             const newDate = new Date(day);
             if(newDate.getMonth() + 1 !== nowMonth) cn = "cellb";
-            tmpArr.push(
-                <TableCell k={day} cn={[cn, dragging].join(" ")} handleClick={handleClick} newDate={newDate} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i} value={newDate.getDate()}/>
-            );
+            // console.log(startDate, endDate);
+            // console.log(new Date(day), new Date(startDate+'T00:00:00'), new Date(endDate+'T00:00:00'))
+            if(day >= new Date(startDate+'T00:00:00')-0 && day <= new Date(endDate+'T00:00:00')-0){
+                cn+=" dragging";
+                tmpArr.push(
+                    <TableCell k={day} cn={cn} handleClick={handleClick} newDate={newDate} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i} value={newDate.getDate()}/>
+                );
+            }
+            else{
+                tmpArr.push(
+                    <TableCell k={day} cn={cn} handleClick={handleClick} newDate={newDate} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i} value={newDate.getDate()}/>
+                );
+            }
             day+=(60*60*24*1000)
         }
         calendarArr.push(
@@ -128,6 +211,9 @@ function CalendarMonth({ usingDate, setUsingDate }){
     const [nowMonth, setNowMonth] = useState(currentDay.getMonth() + 1); // zero-base
     const [nowYear, setNowYear] = useState(currentDay.getFullYear());
 
+    const [startDate, setStartDate] = useState();
+    const [endDate, setEndDate] = useState();
+
     const prevMonth = () => {
         let newMonth = nowMonth - 1;
         if(newMonth < 1){
@@ -154,7 +240,7 @@ function CalendarMonth({ usingDate, setUsingDate }){
             <h1>{nowYear}</h1>
             <table className="calendarTable">
                 <MakeDay/> 
-                <MakeCell nowYear={nowYear} nowMonth={nowMonth} usingDate={usingDate} setUsingDate={setUsingDate}></MakeCell>
+                <MakeCell nowYear={nowYear} nowMonth={nowMonth} usingDate={usingDate} setUsingDate={setUsingDate} startDate={startDate} endDate={endDate} setStartDate={setStartDate} setEndDate={setEndDate}></MakeCell>
             </table>
         </div>
     );
diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js
index f2acf797ff1a159dcd41d52b836cde0b9a75208f..58446ddd5055ecfb836bddfbc24458cdb0984f3a 100644
--- a/react-whenMeet/src/components/MeetingInfoForm.js
+++ b/react-whenMeet/src/components/MeetingInfoForm.js
@@ -67,6 +67,7 @@ function MeetingInfoForm() {
             try {
                 console.log(startTime);
                 console.log(endTime);
+                console.log(usingDate);
                 const response = await axios.post("http://localhost:3000/meetings", {
                     title: title,
                     adminPassword: password,