[ADD] 주차 달력 추가 (Todos: 개인투표 정보 반영, 날짜 받아와서 초기 화면 구성)

react-whenMeet/src/components/CalendarWeek2.jsx

 import React, { useState } from "react"
 import './Calendar.css'
 import MakeDay2 from "./MakeDay2";
+import TableCell from "./TableCell";
 
-function CaculateWeek(props){
-    const startDay = new Date(props.nowYear, props.nowMonth - 1, 1);
-    const lastDay = new Date(props.nowYear, props.nowMonth, 0);
+function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTimes, isContain }){
+    const startDay = new Date(nowYear, nowMonth - 1, 1);
+    const lastDay = new Date(nowYear, nowMonth, 0);
     const firstDay = startDay.getDay();
     const lastDate = lastDay.getDate();
 
+    const [dragging, setDragging] = useState();
+    const [isDragging, setIsDragging] = useState(false); //드래그 여부
+    
+    // 여기 달력 날짜 수정해야함
+    const fDay = new Date(nowYear, nowMonth - 1, 1 - startDay.getDay()) - (0); 
+    const eDay = fDay + (60*60*24*1000)*6;
+
+    const handleDragStart = () => {
+        setIsDragging(!isDragging);
+    };
+
+    const handleDragWhile = (newDate, idx, comp) => {
+        if(!isDragging)return;
+
+        const elm2 = document.getElementById(comp);
+        if(elm2.classList.contains("dragging")){
+            const elm = document.getElementById(newDate-0+idx);
+            elm.classList.remove("dragging")
+            setAvailableTimes(availableTimes.filter(key=>key!==newDate-0+idx));
+        }
+        else {
+            const elm = document.getElementById(newDate-0+idx);
+            elm.classList.add("dragging")
+            setAvailableTimes([...availableTimes, newDate-0+idx]);
+        }
+    };
+
+    const handleDragEnd = () => {
+        setIsDragging(false);
+        setDragging();
+    };
+
+    const handleClick = () => {
+        for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
+            for(let indx = 0; indx < 10; indx++){
+                const elm = document.getElementById(day + indx);
+                elm.classList.remove("dragging")
+            }
+        }
+        setAvailableTimes([])
+    }
+
     const weekArr = [];
     const selectArr = [];
 
@@ -19,8 +62,8 @@ function CaculateWeek(props){
         const time = (String(Math.floor(minute/60)).padStart(2,"0"))+":"+(String(minute%60).padStart(2,"0"));
 
         for(let j = 0; j < 7; j++){
-            const d = (props.week - 1) * 7 + j - firstDay+1;
-            const newDate = new Date(props.nowYear, props.nowMonth-1, d);
+            const d = (week - 1) * 7 + j - firstDay+1;
+            const newDate = new Date(nowYear, nowMonth-1, d);
 
             if(i===0){
                 let cn = "cella";
@@ -29,8 +72,17 @@ function CaculateWeek(props){
                 
                 weekArr.push(<td className={cn}>{newDate.getDate()}</td>);
             }
-
-            forSelect.push(<td className="ttt" onClick={()=>console.log(newDate.toDateString(),i)}></td>);
+            
+            if(isContain(newDate-0+i)){
+                forSelect.push(
+                    <TableCell k={newDate - 0 + i} cn={"dragging"} newDate={newDate} handleClick={handleClick} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i}/>
+                );
+            }
+            else{
+                forSelect.push(
+                    <TableCell k={newDate - 0 + i} newDate={newDate} handleClick={handleClick} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i}/>
+                );
+            }
         }
 
         selectArr.push(
@@ -46,7 +98,7 @@ function CaculateWeek(props){
     );
 }
 
-function CalendarWeek2(){
+function CalendarWeek2({ availableTimes, setAvailableTimes, isContain }){
     const [currentDay, setCurrentDay] = useState(new Date());
     
     // 일요일 0 시작
@@ -114,7 +166,7 @@ function CalendarWeek2(){
             <h1>{nowYear}</h1>
             <table className="calendarTable">
                 <MakeDay2/>
-                <CaculateWeek week={nowWeek} currentDay={currentDay} nowYear={nowYear} nowMonth={nowMonth} />
+                <CaculateWeek week={nowWeek} nowYear={nowYear} nowMonth={nowMonth}availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
             </table>
         </div>
     );

react-whenMeet/src/components/MakeHeader.jsx

@@ -5,17 +5,15 @@ export default function MakeHeader({ prevMonth, nextMonth, nowMonth }) {
         <div>
             <h2>
                 <span className="header">
-                    <Button
+                    <button
                         type="button"
-                        text="prev"
                         onClick={prevMonth}
-                    />
+                    >prev</button>
                     {nowMonth}월
-                    <Button
+                    <button
                         type="button"
-                        text="next"
                         onClick={nextMonth}
-                    />
+                    >next</button>
                 </span>
             </h2>
         </div>

react-whenMeet/src/components/TableCell.jsx

 import { useEffect } from "react";
 
-export default function TableCell({k, cn, newDate, hds, hdw, hde, i, value}){
-    // useEffect(() => { console.log(k)}, []);
+export default function TableCell({k, cn, handleClick, newDate, hds, hdw, hde, i, value  }){
     return(
         <td className={cn}
         key={k}
@@ -10,7 +9,7 @@ export default function TableCell({k, cn, newDate, hds, hdw, hde, i, value}){
         onDragStart={()=>hds(newDate, i, k)}
         onDragEnter={()=>hdw(newDate, i, k)}
         onDragEnd={()=>hde(newDate, i)}
-        onClick={()=>console.log(newDate.getMonth() + 1)}>
+        onClick={()=>handleClick(newDate)}>
         {value} </td>
     );
 }
\ No newline at end of file

react-whenMeet/src/routes/UserTimeInfo.js

 import { useState } from "react";
 import Button from "../components/Button";
-import Calendar from "../components/Calendar"
+import CalendarWeek2 from "../components/CalendarWeek2"
 import "../styles/HomeMake.css"
 
 function UserTimeInfo() {
     const [state, setState] = useState(true);
+    const [availableSchedules, setAvailableSchedules] = useState([]);
+    const [availableTimes, setAvailableTimes] = useState([]);
 
     const handleState = () => {
         setState((state) => !state);
@@ -12,6 +14,49 @@ function UserTimeInfo() {
     const handleCalendar = (value) => {
         console.log('Selected Date:', value);
     };
+    const handleAlert = () => {
+        let sat = [...availableTimes].sort();
+
+        const aa = [];
+        let t = [];
+        let l = availableTimes[0];
+
+        sat.forEach((em) => {
+            if(parseInt(l/10)!==parseInt(em/10)){
+                t=[];
+            }
+            l = em;
+            const newDate = new Date(parseInt(em));
+            const availableDate = newDate.getFullYear() + '-' + newDate.getMonth() + '-' + newDate.getDate();
+            t.push(em%10);
+            aa.push({availableDate: availableDate, availableTimes: t})
+        });
+
+        const groupedData = aa.reduce((acc, item) => {
+            if (!acc[item.availableDate]) {
+              acc[item.availableDate] = { availableDate: item.availableDate, availableTimes: new Set(item.availableTimes) };
+            } else {
+              item.availableTimes.forEach(time => acc[item.availableDate].availableTimes.add(time));
+            }
+            return acc;
+        }, {});
+          
+        const compressedData = Object.values(groupedData).map(item => {
+        return { availableDate: item.availableDate, availableTimes: [...item.availableTimes] };
+        });
+        
+        setAvailableSchedules(compressedData);
+        console.log(availableSchedules);
+        
+        console.log(state);
+    }
+
+    const isContain = (value) => {
+        return availableTimes.includes(value);
+    }
+
+
+
     return (
         <div className="center-container">
             <Button
@@ -24,13 +69,19 @@ function UserTimeInfo() {
                 text="불가능한 시간"
                 onClick={handleState}
             />
-            {state ? <Calendar
+            {/* {state ? <Calendar
                 onChange={handleCalendar}
             /> :
                 <Calendar
                     onChange={handleCalendar}
                 />
-            }
+            } */}
+            <CalendarWeek2 state={state} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
+            <Button
+                type="submit"
+                text="시작하기"
+                onClick={handleAlert}
+            />
         </div>
     );
 }