From 3e94165b5a888321b21059b75219504aecfc7b0e Mon Sep 17 00:00:00 2001
From: "rnjsals0905@gmail.com" <rnjsals0905@ajou.ac.kr>
Date: Sun, 10 Dec 2023 00:10:36 +0900
Subject: [PATCH] =?UTF-8?q?[ADD]=20=EB=B6=88=EA=B0=80=EB=8A=A5=ED=95=9C=20?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=84=20=EC=83=89=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CalendarWeek2.jsx          | 67 ++++++++++++++-----
 react-whenMeet/src/styles/UserTimeInfo.css    |  5 ++
 2 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/react-whenMeet/src/components/CalendarWeek2.jsx b/react-whenMeet/src/components/CalendarWeek2.jsx
index f4b1e10..2d1655e 100644
--- a/react-whenMeet/src/components/CalendarWeek2.jsx
+++ b/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}
diff --git a/react-whenMeet/src/styles/UserTimeInfo.css b/react-whenMeet/src/styles/UserTimeInfo.css
index b91de28..35be4f1 100644
--- a/react-whenMeet/src/styles/UserTimeInfo.css
+++ b/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%;
-- 
GitLab