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/PasswordModal.jsx

 import React, { useState } from "react";
 import Modal from "react-modal";
+import "../styles/ModalStyle.css";
 
 Modal.setAppElement("#root");
 
@@ -10,31 +11,14 @@ function PasswordModal({ isOpen, onRequestClose, onSubmit }) {
     onSubmit(password);
     setPassword("");
   };
-  const customStyles = {
-    content: {
-      width: "400px", // 모달의 너비
-      height: "200px", // 모달의 높이
-      top: "50%",
-      left: "50%",
-      right: "auto",
-      bottom: "auto",
-      marginRight: "-50%",
-      transform: "translate(-50%, -50%)",
-      padding: "20px 20px 0 20px",
-    },
-  };
-  const buttonContainerStyle = {
-    display: "flex",
-    justifyContent: "center",
-    marginTop: "30px",
-  };
 
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={onRequestClose}
       contentLabel="비밀번호 입력"
-      style={customStyles}
+      overlayClassName={"modal-overlay"} // 오버레이 클래스 추가
+      className={"modal-content"} // 컨텐츠(모달 창) 클래스
     >
       <h2 style={{ justifyContent: "center" }}>관리자 비밀번호를 입력하세요</h2>
       <input
@@ -44,11 +28,11 @@ function PasswordModal({ isOpen, onRequestClose, onSubmit }) {
         placeholder="비밀번호"
         style={{ margin: "15px 0 0 0" }}
       />
-      <div style={buttonContainerStyle}>
-        <button onClick={handleSubmit} style={{ margin: "0 10px" }}>
+      <div>
+        <button onClick={handleSubmit} className="button-modal">
           확인
         </button>
-        <button onClick={onRequestClose} style={{ margin: "0 10px" }}>
+        <button onClick={onRequestClose} className="button-modal">
           취소
         </button>
       </div>

react-whenMeet/src/components/ResultMakeForm.js

@@ -101,14 +101,11 @@ function ResultMakeForm() {
         return { days: 0, hours: 0, minutes: 0, seconds: 0 };
       }
 
-      // 서버의 voteExpiresAt 값을 한국 시간대로 가정하여 파싱
       const voteExpiresKST = new Date(meetingData.voteExpiresAt);
 
-      // 현재 로컬 시간 (브라우저 시간대를 한국 시간대로 조정)
       const now = new Date();
       const nowKST = new Date(now.getTime() + 9 * 60 * 60 * 1000); // UTC 시간에 9시간을 더해 KST로 조정
 
-      // 남은 시간 계산
       const difference = voteExpiresKST - nowKST;
 
       if (difference > 0) {
@@ -212,7 +209,9 @@ function ResultMakeForm() {
             <div>현재 완료한 인원수 : {meetingData?.currentParticipants}</div>
           )}
 
-          <div>종료까지 남은 시간 : {timeLeft}</div>
+          {meetingData.voteExpiresAt && (
+            <div>종료까지 남은 시간 : {timeLeft}</div>
+          )}
           <button onClick={handleEdit}>수정하기</button>
           <button onClick={closeMeeting}>투표 종료하기</button>
         </div>

react-whenMeet/src/styles/ModalStyle.css

+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  position: relative;
+  width: 40%;
+  padding: 20px;
+  background: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+}
+
+.button-modal {
+  padding: 10px 15px; /* 버튼의 패딩 조정 */
+  border: none; /* 테두리 제거 */
+  color: white; /* 글자색 */
+  border-radius: 5px; /* 둥근 모서리 */
+  cursor: pointer; /* 마우스 오버 시 커서 변경 */
+}
+@media (max-width: 500px) {
+  .modal-content {
+    width: 70%;
+    height: auto;
+  }
+}

react-whenMeet/src/styles/ResultEnd.css

@@ -44,21 +44,20 @@
   align-items: center;
 }
 @media screen and (max-width: 768px) {
-  .flex-bottom-container {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-
-    bottom: 0;
-    left: 0;
-  }
-
   .mostTime,
   .possible {
     position: relative;
-    width: 40%;
-    margin: 200px 20px;
-    height: 40%;
+    width: 100%;
+    margin: 20px 0;
+    height: auto;
+    top: 200px;
+  }
+
+  .flex-bottom-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
   }
   .flex-row {
     flex-direction: column;

react-whenMeet/src/styles/ResultMake.css

@@ -14,8 +14,8 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
-  border-top: 2px solid #5fbdff; /* 기본 구분선 */
-  box-shadow: 0px 1px 5px rgba(95, 189, 255, 0.5); /* 구분선에 그림자 효과 추가 */
+  border-top: 2px solid #5fbdff;
+  box-shadow: 0px 1px 5px rgba(95, 189, 255, 0.5);
   padding-top: 20px;
   margin-top: 30px;
   width: 50%;
@@ -26,11 +26,11 @@
 .possible {
   border: 1px solid #ddd;
   padding: 20px;
-  margin: 10px; /* 각 요소 주변의 공간을 더욱 명확히 */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 세련된 그림자 효과 */
-  border-radius: 8px; /* 모서리를 둥글게 */
-  background-color: #ffffff; /* 배경색 설정 */
-  box-sizing: border-box; /* 패딩과 보더를 너비에 포함 */
+  margin: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  background-color: #ffffff;
+  box-sizing: border-box;
 }
 
 .mostTime {
@@ -59,15 +59,21 @@
     position: relative;
     top: 200px;
   }
+
+  .mostTime,
+  .possible {
+    position: relative;
+    width: 100%;
+    margin: 20px 0;
+    height: auto;
+  }
+
   .flex-bottom-container {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
     width: 100%;
-
-    bottom: 0;
-    left: 0;
   }
-
   .possible {
     position: static;
     width: 40%;

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%;