diff --git a/react-whenMeet/src/components/CalendarWeek2.jsx b/react-whenMeet/src/components/CalendarWeek2.jsx
index f4b1e101d705122ad5eeb8aea8bfc01f5d27371f..2d1655e11157315d55d715dd417bad61c6be7e21 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/components/PasswordModal.jsx b/react-whenMeet/src/components/PasswordModal.jsx
index 2642b372da00b6702cb45ecf4da423d10a92b308..7f35f2a51efbb51c87e0377bf8dc8ff42632b84b 100644
--- a/react-whenMeet/src/components/PasswordModal.jsx
+++ b/react-whenMeet/src/components/PasswordModal.jsx
@@ -1,5 +1,6 @@
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>
diff --git a/react-whenMeet/src/components/ResultMakeForm.js b/react-whenMeet/src/components/ResultMakeForm.js
index d0fdb575946efd63c16796793c9a3660cfae897f..1e7009cec2d2d286d406a832956975494048e1a1 100644
--- a/react-whenMeet/src/components/ResultMakeForm.js
+++ b/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>
diff --git a/react-whenMeet/src/styles/ModalStyle.css b/react-whenMeet/src/styles/ModalStyle.css
new file mode 100644
index 0000000000000000000000000000000000000000..784be12e0aa1dbce00fe45a1d06041581bc61c8f
--- /dev/null
+++ b/react-whenMeet/src/styles/ModalStyle.css
@@ -0,0 +1,34 @@
+.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;
+ }
+}
diff --git a/react-whenMeet/src/styles/ResultEnd.css b/react-whenMeet/src/styles/ResultEnd.css
index b2e2c2e10511b90321913ce0540cdaec1f3cfcf5..c0b8fc695aa0be48e73042524c9f26b08776c13c 100644
--- a/react-whenMeet/src/styles/ResultEnd.css
+++ b/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;
diff --git a/react-whenMeet/src/styles/ResultMake.css b/react-whenMeet/src/styles/ResultMake.css
index fcc270ae6f6cfb0a3202ab723040a79850fd7e6c..7e1f556d46cc4af0c2096e53633f61448b9974ba 100644
--- a/react-whenMeet/src/styles/ResultMake.css
+++ b/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%;
diff --git a/react-whenMeet/src/styles/UserTimeInfo.css b/react-whenMeet/src/styles/UserTimeInfo.css
index b91de284a7159bbf68f52b145ddf894ac644a8c3..35be4f1bac05dd456ece0d855e07c57b92836ca5 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%;