Merge branch 'main' of https://git.ajou.ac.kr/websystem2023-2/whenmeet

react-whenMeet/src/components/CalendarWeek2.jsx

@@ -15,6 +15,7 @@ function CaculateWeek({
   endDate,
   startTime,
   endTime,
+  state,
 }) {
   const startDay = new Date(nowYear, nowMonth - 1, 1);
   const lastDay = new Date(nowYear, nowMonth, 0);
@@ -39,13 +40,20 @@ function CaculateWeek({
     if (!isDragging) return;
 
     const elm2 = document.getElementById(comp);
-    if (isContain(newDate - 0 + idx) || elm2.classList.contains("dragging")) {
+    if (
+      isContain(newDate - 0 + idx) ||
+      elm2.classList.contains("dragging") ||
+      elm2.classList.contains("notAvailable")
+    ) {
       const elm = document.getElementById(newDate - 0 + idx);
-      elm.classList.remove("dragging");
+      if (elm.classList.contains("dragging")) elm.classList.remove("dragging");
+      else if (elm.classList.contains("notAvailable"))
+        elm.classList.remove("notAvailable");
       doCheck = doCheck.filter((key) => key !== newDate - 0 + idx);
     } else {
       const elm = document.getElementById(newDate - 0 + idx);
-      elm.classList.add("dragging");
+      if (state) elm.classList.add("dragging");
+      else elm.classList.add("notAvailable");
       doCheck.push(newDate - 0 + idx);
     }
   };
@@ -58,13 +66,20 @@ function CaculateWeek({
 
   const handleClick = (newDate, idx, comp) => {
     const elm2 = document.getElementById(comp);
-    if (isContain(newDate - 0 + idx) || elm2.classList.contains("dragging")) {
+    if (
+      isContain(newDate - 0 + idx) ||
+      elm2.classList.contains("dragging") ||
+      elm2.classList.contains("notAvailable")
+    ) {
       const elm = document.getElementById(newDate - 0 + idx);
-      elm.classList.remove("dragging");
+      if (elm.classList.contains("dragging")) elm.classList.remove("dragging");
+      else if (elm.classList.contains("notAvailable"))
+        elm.classList.remove("notAvailable");
       doCheck = doCheck.filter((key) => key !== newDate - 0 + idx);
     } else {
       const elm = document.getElementById(newDate - 0 + idx);
-      elm.classList.add("dragging");
+      if (state) elm.classList.add("dragging");
+      else elm.classList.add("notAvailable");
       doCheck.push(newDate - 0 + idx);
     }
 
@@ -105,18 +120,33 @@ function CaculateWeek({
         );
       } 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}
-            />
-          );
+          if (state) {
+            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}
+                cn={"notAvailable"}
+                newDate={newDate}
+                handleClick={handleClick}
+                hds={handleDragStart}
+                hdw={handleDragWhile}
+                hde={handleDragEnd}
+                i={i}
+              />
+            );
+          }
         } else {
           forSelect.push(
             <TableCell
@@ -242,6 +272,7 @@ function CalendarWeek2({
         <table>
           <MakeDay2 />
           <CaculateWeek
+            state={state}
             week={nowWeek}
             nowYear={nowYear}
             nowMonth={nowMonth}

react-whenMeet/src/components/MeetingInfoForm.js

@@ -13,8 +13,10 @@ function MeetingInfoForm() {
   const [meetingPurpose, setMeetingPurpose] = useState("");
   const [number, setNumber] = useState();
   const [endVote, setEndVote] = useState("");
-  const [startTime, setStartTime] = useState();
-  const [endTime, setEndTime] = useState();
+  const [startTime, setStartTime] = useState("");
+  const [endTime, setEndTime] = useState("");
+  const [startNum,setStartNum] = useState();
+  const [endNum,setEndNum] = useState();
   const navigate = useNavigate();
   const location = useLocation();
   const { title, password } = location.state;
@@ -27,10 +29,9 @@ function MeetingInfoForm() {
 
   const handleNumber = (event) => {
     const inputValue = event.target.value;
-    if (inputValue >= 0) {
+    if (inputValue > 0) {
       setNumber(inputValue);
     } else {
-      alert("양수만을 입력하세요");
       setNumber("");
     }
   };
@@ -38,11 +39,14 @@ function MeetingInfoForm() {
   const handleVoteEnd = (event) => {
     setEndVote(event.target.value);
   };
+
   const handleStartTimeChange = (selectedHour, selectedMinute) => {
+    setStartNum(selectedHour*2 + selectedMinute/30)
     setStartTime(`${selectedHour}:${selectedMinute}:00`);
   };
 
   const handleEndTimeChange = (selectedHour, selectedMinute) => {
+    setEndNum(selectedHour*2 + selectedMinute/30)
     setEndTime(`${selectedHour}:${selectedMinute}:00`);
   };
 
@@ -50,7 +54,6 @@ function MeetingInfoForm() {
     event.preventDefault();
 
     if (meetingPurpose === "" || meetingPurpose === "선택") {
-      alert("목적을 선택하세요");
     } else {
       let transformedPurpose = meetingPurpose; // 기본값은 그대로 유지
 
@@ -88,6 +91,9 @@ function MeetingInfoForm() {
       console.log(meetingPurpose);
     }
   };
+
+  const isFormValid = meetingPurpose.trim() !== "" && startNum <= endNum;
+
   return (
     <form onSubmit={handleSubmit}>
       <div className="center-container2">
@@ -142,7 +148,7 @@ function MeetingInfoForm() {
             />
           </div>
         </div>
-        <Button type="submit" text="시작하기" />
+        <Button type="submit" text="시작하기" disabled={!isFormValid}/>
       </div>
     </form>
   );

react-whenMeet/src/styles/UserTimeInfo.css

@@ -68,6 +68,11 @@ h2.UTH2 {
   vertical-align: middle; /* 텍스트를 수직 가운데 정렬 */
   background-color: skyblue; /* 배경색 지정 */
 }
+.calendarTable td.notAvailable {
+  text-align: center; /* 텍스트를 가운데 정렬 */
+  vertical-align: middle; /* 텍스트를 수직 가운데 정렬 */
+  background-color: pink; /* 배경색 지정 */
+}
 
 .header button:first-child {
   margin-right: 10%;