[EDIT] 주차달력 투표 선택지가 아닌 날짜 드래그 금지, 초기화면 구성 준비, 개인 투표 정보 반영

react-whenMeet/src/components/CalendarWeek2.jsx

@@ -3,7 +3,7 @@ import '../styles/Calendar.css'
 import MakeDay2 from "./MakeDay2";
 import TableCell from "./TableCell";
 
-function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTimes, isContain }){
+function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime}){
     const startDay = new Date(nowYear, nowMonth - 1, 1);
     const lastDay = new Date(nowYear, nowMonth, 0);
     const firstDay = startDay.getDay();
@@ -13,31 +13,35 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
     const [isDragging, setIsDragging] = useState(false); //드래그 여부
     
     // 여기 달력 날짜 수정해야함
-    const fDay = new Date(nowYear, nowMonth - 1, 1 - startDay.getDay()) - (0); 
+    const fDay = new Date(nowYear, nowMonth-1, (week-1)*7-firstDay+1) - (0); 
     const eDay = fDay + (60*60*24*1000)*6;
 
     const handleDragStart = () => {
         setIsDragging(!isDragging);
     };
 
+    const doCheck=[...availableTimes];
     const handleDragWhile = (newDate, idx, comp) => {
         if(!isDragging)return;
 
+        console.log(newDate-0+idx);
+
         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));
+            doCheck.filter(key=>key!==newDate-0+idx);
         }
         else {
             const elm = document.getElementById(newDate-0+idx);
             elm.classList.add("dragging")
-            setAvailableTimes([...availableTimes, newDate-0+idx]);
+            doCheck.push(newDate-0+idx);
         }
     };
 
     const handleDragEnd = () => {
         setIsDragging(false);
+        setAvailableTimes(doCheck)
         setDragging();
     };
 
@@ -56,7 +60,7 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
 
     weekArr.push(<td></td>);
     // 시작 끝 값을 수정해서 일정 변경
-    for(let i = 0; i < 10; i++){
+    for(let i = startTime; i < endTime; i++){
         const forSelect = [];
         const minute = i*30;
         const time = (String(Math.floor(minute/60)).padStart(2,"0"))+":"+(String(minute%60).padStart(2,"0"));
@@ -72,7 +76,13 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
                 
                 weekArr.push(<td className={cn}>{newDate.getDate()}</td>);
             }
-            
+            // console.log(newDate, startDate, endDate);
+            if(newDate < startDate || newDate > endDate){
+                forSelect.push(
+                    <TableCell k={newDate - 0 + i} cn={"noDate"} newDate={newDate} i={i}/>
+                );
+            }
+            else{
                 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}/>
@@ -84,6 +94,7 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
                     );
                 }
             }
+        }
 
         selectArr.push(
             <tr key={i}>{time} {forSelect}</tr>
@@ -98,15 +109,23 @@ function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTim
     );
 }
 
-function CalendarWeek2({ availableTimes, setAvailableTimes, isContain }){
-    const [currentDay, setCurrentDay] = useState(new Date());
+function CalendarWeek2({ availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime, today }){
+    const [currentDay, setCurrentDay] = useState(today);
     
     // 일요일 0 시작
     const nowDay = currentDay.getDay();
     const nowDate = currentDay.getDate();
     const [nowMonth, setNowMonth] = useState(currentDay.getMonth() + 1); // zero-base
     const [nowYear, setNowYear] = useState(currentDay.getFullYear());
-    const [nowWeek, setNowWeek] = useState(1);
+
+    const getWeek = (date) => {
+        const currentDate = date.getDate();
+        const firstDay = new Date(date.setDate(1)).getDay();
+      
+        return Math.ceil((currentDate + firstDay) / 7);
+    };
+      
+    const [nowWeek, setNowWeek] = useState(getWeek(today));
 
     const firstDay = (new Date(nowYear, nowMonth - 1, 1)).getDay();
     const lastDay = (new Date(nowYear, nowMonth, 0)).getDay();
@@ -166,7 +185,7 @@ function CalendarWeek2({ availableTimes, setAvailableTimes, isContain }){
             <h1>{nowYear}</h1>
             <table className="calendarTable">
                 <MakeDay2/>
-                <CaculateWeek week={nowWeek} nowYear={nowYear} nowMonth={nowMonth}availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
+                <CaculateWeek week={nowWeek} nowYear={nowYear} nowMonth={nowMonth} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
             </table>
         </div>
     );

react-whenMeet/src/components/TableCell.jsx

 import { useEffect } from "react";
 
 export default function TableCell({k, cn, handleClick, newDate, hds, hdw, hde, i, value  }){
+    if(cn==="noDate"){
+        return(
+            <td className={cn}
+            key={k}
+            id={k} >
+            {value} </td>
+        );
+    }
+    else{
         return(
             <td className={cn}
             key={k}
@@ -13,3 +22,4 @@ export default function TableCell({k, cn, handleClick, newDate, hds, hdw, hde, i
             {value} </td>
         );
     }
+}
\ No newline at end of file

react-whenMeet/src/routes/UserTimeInfo.js

@@ -11,6 +11,13 @@ function UserTimeInfo() {
     const [availableTimes, setAvailableTimes] = useState([]);
     const {id} = useParams();
 
+    const [startTime, setStartTime] = useState(0);
+    const [endTime, setEndTiem] = useState(48);
+    const [today, setToday] = useState(new Date());
+    const [startDate, setStartDate] = useState(new Date(2023,10,30));
+    const [endDate, setEndDate] = useState(new Date(2023,11,4));
+    
+    
     const handleState = () => {
         setState((state) => !state);
     }
@@ -29,21 +36,22 @@ function UserTimeInfo() {
         };
         fetchData();
     }, [id]);
+
     const handleAlert = () => {
         let sat = [...availableTimes].sort();
+        console.log(availableTimes);
 
         const aa = [];
         let t = [];
         let l = availableTimes[0];
 
         sat.forEach((em) => {
-            if(parseInt(l/10)!==parseInt(em/10)){
+            if(parseInt(l/100)!==parseInt(em/100)){
                 t=[];
             }
-            l = em;
             const newDate = new Date(parseInt(em));
-            const availableDate = newDate.getFullYear() + '-' + newDate.getMonth() + '-' + newDate.getDate();
-            t.push(em%10);
+            const availableDate = newDate.getFullYear() + '-' + (newDate.getMonth()+1) + '-' + newDate.getDate();
+            t.push(em%100);
             aa.push({availableDate: availableDate, availableTimes: t})
         });
 
@@ -82,14 +90,7 @@ function UserTimeInfo() {
                 text="불가능한 시간"
                 onClick={handleState}
             />
-            {/* {state ? <Calendar
-                onChange={handleCalendar}
-            /> :
-                <Calendar
-                    onChange={handleCalendar}
-                />
-            } */}
-            <CalendarWeek2 state={state} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
+            <CalendarWeek2 state={state} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} today={today} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
             <Button
                 type="submit"
                 text="시작하기"

react-whenMeet/src/styles/HomeMake.css

@@ -92,6 +92,10 @@ button:hover {
   background-color: red;
 }
 
+.calendarTable .noDate {
+  background-color: gray;
+}
+
 .title-box {
   text-align: center;
   border-width: 1px;