[ADD] CalendarMonth의 날짜 정보를 MeetingInfoForm으로 전달

react-whenMeet/src/components/Calendar.js

@@ -4,10 +4,10 @@ import Input from "./Input";
 import CalendarMonth from "./CalendarMonth";
 // import CalendarWeek2 from './CalendarWeek2';
 
-function Calendar({ onChange }) {
+function Calendar({ onChange, usingDate, setUsingDate }) {
   return (
     <div>
-      <CalendarMonth />
+      <CalendarMonth usingDate={usingDate} setUsingDate={setUsingDate} />
     </div>
   );
 }

react-whenMeet/src/components/CalendarMonth.jsx

@@ -3,12 +3,12 @@ import MakeDay from "./MakeDay";
 import MakeHeader from "./MakeHeader";
 import TableCell from "./TableCell";
 
-function MakeCell(props){//주차 데이터를 담을 공간
+function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate }){//주차 데이터를 담을 공간
     const calendarArr = [];
 
-    const startDay = new Date(props.nowYear, props.nowMonth - 1, 1);
-    const lastDay = new Date(props.nowYear, props.nowMonth, 0);
-    const lastMonthDate = new Date(props.nowYear, props.nowMonth - 1, 0).getDate();
+    const startDay = new Date(nowYear, nowMonth - 1, 1);
+    const lastDay = new Date(nowYear, nowMonth, 0);
+    const lastMonthDate = new Date(nowYear, nowMonth - 1, 0).getDate();
 
     let nowDate = startDay.getDate();
     const lastDate = lastDay.getDate();
@@ -20,25 +20,23 @@ function MakeCell(props){//주차 데이터를 담을 공간
     const [dragEndDay, setDragEndDay] = useState();
     
     // 여기 달력 날짜 수정해야함
-    const fDay = new Date(props.nowYear, props.nowMonth - 1, 1 - startDay.getDay()) - (0);
-    const eDay = new Date(props.nowYear, props.nowMonth - 1, lastDate + 6 - lastDay.getDay()) - (0);
+    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);
-        // console.log(newDate.toDateString(), idx);
         setDragStartDay(newDate);
         for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
             const elm = document.getElementById(day);
             elm.classList.remove("dragging")
         }
-        console.log(comp);
     };
+
     const handleDragWhile = (newDate, idx, comp) => {
         if(!isDragging)return;
-        // setDragging("dragging");
-        // dragging = "dragging";
-        console.log(newDate.toDateString(), idx, dragging);
- 
         setDragEndDay(newDate);
 
         let sd = dragStartDay - 0;
@@ -56,41 +54,53 @@ function MakeCell(props){//주차 데이터를 담을 공간
         if(elm2.classList.contains("dragging")){
             for(let day = ed; day >= comp; day -= (60*60*24*1000)){
                 const elm = document.getElementById(day);
-                // if(elm.classList.contains("dragging"))elm.classList.remove("dragging");
-                // else elm.classList.add("dragging")
                 elm.classList.remove("dragging")
             }
         }
         else {
             for(let day = sd; day <= ed; day += (60*60*24*1000)){
                 const elm = document.getElementById(day);
-                // if(elm.classList.contains("dragging"))elm.classList.remove("dragging");
-                // else elm.classList.add("dragging")
                 elm.classList.add("dragging")
             }
         }
 
     };
+
     const handleDragEnd = (newDate, idx) => {
         setIsDragging(false);
         setDragging("nope");
-        // dragging ="";
-        // console.log(newDate.toDateString(), idx, dragging);
-
-        console.log(dragStartDay);
-        console.log(dragEndDay);
-        console.log(Math.abs(dragEndDay - dragStartDay)/(60*60*24*1000));
+        if(dragStartDay - 0 < dragEndDay - 0){
+            startDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate();
+            endDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate();
+        }
+        else{
+            endDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate();
+            startDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate();
+        }
+        // console.log(startDate);
+        // console.log(endDate);
+        setUsingDate([{startDate:startDate, endDate:endDate}])
     };
 
+    const handleClick = (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()}`)
+    }
+
 
     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 !== props.nowMonth) cn = "cellb";
+            if(newDate.getMonth() + 1 !== nowMonth) cn = "cellb";
             tmpArr.push(
-                <TableCell k={day} cn={[cn, dragging].join(" ")} newDate={newDate} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i} value={newDate.getDate()}/>
+                <TableCell k={day} cn={[cn, dragging].join(" ")} handleClick={handleClick} newDate={newDate} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i} value={newDate.getDate()}/>
             );
             day+=(60*60*24*1000)
         }
@@ -109,7 +119,7 @@ function MakeCell(props){//주차 데이터를 담을 공간
     );
 }
 
-function CalendarMonth(){
+function CalendarMonth({ usingDate, setUsingDate }){
     const [currentDay, setCurrentDay] = useState(new Date());
     
     // 일요일 0 시작
@@ -144,7 +154,7 @@ function CalendarMonth(){
             <h1>{nowYear}</h1>
             <table className="calendarTable">
                 <MakeDay/> 
-                <MakeCell nowYear={nowYear} nowMonth={nowMonth}></MakeCell>
+                <MakeCell nowYear={nowYear} nowMonth={nowMonth} usingDate={usingDate} setUsingDate={setUsingDate}></MakeCell>
             </table>
         </div>
     );

react-whenMeet/src/components/MeetingInfoForm.js

@@ -19,6 +19,8 @@ function MeetingInfoForm() {
     ];
     const navigate = useNavigate();
 
+    const [usingDate, setUsingDate] = useState([]);
+
     const handleOnChange = (event) => {
         setMeetingPurpose(event.target.value);
     }
@@ -45,6 +47,7 @@ function MeetingInfoForm() {
 
     const handleSubmit = (event) => {
         event.preventDefault();
+        console.log(usingDate);
         (meetingPurpose === "" || meetingPurpose === "선택") ? alert("목적을 선택하세요") : navigate("LinkPage");
     }
 
@@ -63,7 +66,7 @@ function MeetingInfoForm() {
                     </label>
                 </div>
 
-                <Calendar onChange={handleCalendar} />
+                <Calendar onChange={handleCalendar} usingDate={usingDate} setUsingDate={setUsingDate}/>
                 <div className="timeStartEnd">
                     시작:
                     <Input