[EDIT] 월 달력 수정

react-whenMeet/src/components/CalendarMonth.jsx

@@ -30,7 +30,6 @@ function MakeCell({
   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;
@@ -38,7 +37,7 @@ function MakeCell({
   const handleDragStart = (newDate, idx, comp) => {
     setIsDragging(!isDragging);
     setDragStartDay(newDate);
-    setFinish(false);
+    setFinish(true);
     for (let day = fDay; day <= eDay; day += 60 * 60 * 24 * 1000) {
       const elm = document.getElementById(day);
       elm.classList.remove("dragging");
@@ -48,7 +47,7 @@ function MakeCell({
   const handleDragWhile = (newDate, idx, comp) => {
     if (!isDragging) return;
     setDragEndDay(newDate);
-    setFinish(false);
+    setFinish(true);
 
     let sd = dragStartDay - 0;
     let ed = newDate - 0;
@@ -62,7 +61,6 @@ function MakeCell({
       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);
@@ -76,15 +74,10 @@ function MakeCell({
     }
   };
 
-  // let startDate="";
-  // let endDate="";
-
   const handleDragEnd = (newDate, idx) => {
     setIsDragging(false);
     // setDragging("nope");
     if (dragStartDay - 0 < dragEndDay - 0) {
-      // startDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate();
-      // endDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate();
       setStartDate(
         dragStartDay.getFullYear() +
           "-" +
@@ -114,8 +107,6 @@ function MakeCell({
           String(dragEndDay.getDate()).padStart(2, "0"),
       });
     } else {
-      // endDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate();
-      // startDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate();
       setStartDate(
         dragEndDay.getFullYear() +
           "-" +
@@ -145,14 +136,11 @@ function MakeCell({
           String(dragStartDay.getDate()).padStart(2, "0"),
       });
     }
-    // console.log(startDate);
-    // console.log(endDate);
     setFinish(true);
   };
 
   const handleClick = (newDate, idx, comp) => {
     if (startDate && !finish) {
-      // endDate = newDate.getFullYear() + '-' + (newDate.getMonth()+1) + '-' + newDate.getDate();
       setEndDate(
         newDate.getFullYear() +
           "-" +
@@ -160,32 +148,14 @@ function MakeCell({
           "-" +
           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() +
@@ -218,7 +188,6 @@ function MakeCell({
       } 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");
         }
       }
@@ -238,12 +207,11 @@ function MakeCell({
       });
       setFinish(true);
     } else {
-      console.log(fDay, eDay, new Date(fDay), new Date(eDay));
+      setFinish(false);
       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() +
           "-" +
@@ -253,8 +221,6 @@ function MakeCell({
       );
       const elm = document.getElementById(newDate - 0);
       elm.classList.add("dragging");
-      // console.log("s", startDate);
-      setFinish(false);
     }
   };
 
@@ -263,9 +229,6 @@ function MakeCell({
       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()}`)
   };
 
   for (let day = fDay; day <= eDay; day += 60 * 60 * 24 * 1000) {
@@ -274,9 +237,8 @@ function MakeCell({
       let cn = "cella";
       const newDate = new Date(day);
       if (newDate.getMonth() + 1 !== nowMonth) cn = "cellb";
-      // console.log(startDate, endDate);
-      // console.log(new Date(day), new Date(startDate+'T00:00:00'), new Date(endDate+'T00:00:00'))
       if (
+        finish &&
         day >= new Date(startDate + "T00:00:00") - 0 &&
         day <= new Date(endDate + "T00:00:00") - 0
       ) {
@@ -294,6 +256,21 @@ function MakeCell({
             value={newDate.getDate()}
           />
         );
+      } else if (day === new Date(startDate + "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
@@ -352,7 +329,6 @@ function CalendarMonth({ usingDate, setUsingDate }) {
 
   return (
     <div className="calendar">
-      {/* <h1>달력</h1> */}
       <div className="cc">
         <MakeHeader
           nowMonth={nowMonth}
@@ -361,19 +337,21 @@ function CalendarMonth({ usingDate, setUsingDate }) {
           nowYear={nowYear}
         ></MakeHeader>
       </div>
-      <table className="calendarTable">
-        <MakeDay />
-        <MakeCell
-          nowYear={nowYear}
-          nowMonth={nowMonth}
-          usingDate={usingDate}
-          setUsingDate={setUsingDate}
-          startDate={startDate}
-          endDate={endDate}
-          setStartDate={setStartDate}
-          setEndDate={setEndDate}
-        ></MakeCell>
-      </table>
+      <div className="calendarTable">
+        <table>
+          <MakeDay />
+          <MakeCell
+            nowYear={nowYear}
+            nowMonth={nowMonth}
+            usingDate={usingDate}
+            setUsingDate={setUsingDate}
+            startDate={startDate}
+            endDate={endDate}
+            setStartDate={setStartDate}
+            setEndDate={setEndDate}
+          ></MakeCell>
+        </table>
+      </div>
     </div>
   );
 }