diff --git a/react-whenMeet/src/components/ResultEndForm.jsx b/react-whenMeet/src/components/ResultEndForm.jsx
index dcf5b49b8075572e3edc04d6e079d8217b1a0d4b..fd3264531e2631b1191e3db935b8ed961e4b0133 100644
--- a/react-whenMeet/src/components/ResultEndForm.jsx
+++ b/react-whenMeet/src/components/ResultEndForm.jsx
@@ -3,12 +3,16 @@ import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import "../styles/ResultEnd.css";
import "../styles/CalendarWeek.css";
+import axios from "axios";
+import PasswordModal from "./PasswordModal.jsx";
+
export default function ResultEndForm() {
const [meetingData, setMeetingData] = useState(null);
const [selectedDate, setSelectedDate] = useState("");
const possibleDates = ["23.07.01 ~~~", "23.07.02 ~~~", "23.07.03 ~~~"];
const [hoveredInfo, setHoveredInfo] = useState(null);
const { meeting_id } = useParams();
+ const [isModalOpen, setIsModalOpen] = useState(false);
const purposeText = {
STUDY: "스터디",
MEETING: "회의",
@@ -46,6 +50,30 @@ export default function ResultEndForm() {
if (!meetingData) {
return <div>로딩 중...</div>;
}
+ const closeMeeting = () => {
+ setIsModalOpen(true);
+ };
+
+ const handleModalClose = () => {
+ setIsModalOpen(false);
+ };
+ const handlePasswordSubmit = async (password) => {
+ setIsModalOpen(false);
+ try {
+ await axios.patch(
+ `http://localhost:3000/meetings/${meeting_id}/confirm-time`,
+ {
+ adminPassword: password,
+ }
+ );
+ } catch (error) {
+ if (error.response && error.response.status === 401) {
+ alert("비밀번호가 틀렸습니다.");
+ } else {
+ console.error("오류 발생:", error);
+ }
+ }
+ };
return (
<div
@@ -56,50 +84,57 @@ export default function ResultEndForm() {
alignItems: "center",
}}
>
- <h1 className="title-box">{meetingData.title}</h1>
- <p>투표가 종료되었습니다.</p>
+ <span className="column-container">
+ <h1 className="title-box">{meetingData.title}</h1>
+ <p>투표가 종료되었습니다.</p>
- {meetingData.isClosed ? (
- <div>
- <p style={{ color: "blue" }}>약속 시간은 {selectedDate}입니다.</p>
+ {meetingData.isClosed ? (
<div>
- <h2 style={{ justifyContent: "center" }}>총 참여한 인원수</h2>
- <h3>{meetingData.currentParticipants}</h3>
+ <p style={{ color: "blue" }}>약속 시간은 {selectedDate}입니다.</p>
+ <div>
+ <h2 style={{ justifyContent: "center" }}>총 참여한 인원수</h2>
+ <h3>{meetingData.currentParticipants}</h3>
+ </div>
</div>
- </div>
- ) : (
- <span className="closedFalse">
- <p>
- {meetingData.purpose && purposeText[meetingData.purpose]}를 하는
- 다른 사람들은 주로 평일 낮 시간대에 많이 만나요
- </p>
+ ) : (
+ <span className="closedFalse">
+ <p>
+ {meetingData.purpose && purposeText[meetingData.purpose]}를 하는
+ 다른 사람들은 주로 평일 낮 시간대에 많이 만나요
+ </p>
- <form className="form-container">
- {possibleDates.map((date, index) => (
- <label key={index}>
- <input
- type="radio"
- name="date"
- value={date}
- checked={selectedDate === date}
- onChange={handleDateChange}
- />
- {date}
- </label>
- ))}
- </form>
- <button
- style={{ marginTop: "20px", padding: "10px 20px" }}
- onClick={() => console.log(selectedDate)}
- >
- 이 시간으로 정했어요
- </button>
- <button style={{ marginTop: "10px", padding: "10px 20px" }}>
- 랜덤으로 약속 시간 확정하기
- </button>
- </span>
- )}
+ <form className="form-container">
+ {possibleDates.map((date, index) => (
+ <label key={index}>
+ <input
+ type="radio"
+ name="date"
+ value={date}
+ checked={selectedDate === date}
+ onChange={handleDateChange}
+ />
+ {date}
+ </label>
+ ))}
+ </form>
+ <button
+ style={{ marginTop: "20px", padding: "10px 20px" }}
+ onClick={closeMeeting}
+ >
+ 이 시간으로 정했어요
+ </button>
+ <button style={{ marginTop: "10px", padding: "10px 20px" }}>
+ 랜덤으로 약속 시간 확정하기
+ </button>
+ </span>
+ )}
+ </span>
+ <PasswordModal
+ isOpen={isModalOpen}
+ onRequestClose={handleModalClose}
+ onSubmit={handlePasswordSubmit}
+ />
<div className="flex-row">
<CalendarWeek
participants={meetingData.participants}
diff --git a/react-whenMeet/src/components/ResultMakeForm.js b/react-whenMeet/src/components/ResultMakeForm.js
index 812e65342b4169fe783bbecfe7bb38c5e611ab67..0dfcd95552a8cd4a05266e602f7f316318fcdd71 100644
--- a/react-whenMeet/src/components/ResultMakeForm.js
+++ b/react-whenMeet/src/components/ResultMakeForm.js
@@ -132,10 +132,16 @@ function ResultMakeForm() {
) : (
<div className="column-container">
<h1 className="title-box">{meetingData?.title}</h1>
- <div>
- 현재 완료한 인원수 {meetingData?.currentParticipants} /{" "}
- {meetingData?.maxParticipants}
- </div>
+ {meetingData.maxParticipants && (
+ <div>
+ 현재 완료한 인원수 {meetingData?.currentParticipants} /{" "}
+ {meetingData?.maxParticipants}
+ </div>
+ )}
+ {!meetingData && (
+ <div>현재 완료한 인원수 {meetingData?.currentParticipants}</div>
+ )}
+
<div>종료까지 남은 시간 {timeLeft}</div>
<button onClick={handleEdit}>수정하기</button>
<button onClick={closeMeeting}>투표 종료하기</button>
diff --git a/react-whenMeet/src/styles/CalendarWeek.css b/react-whenMeet/src/styles/CalendarWeek.css
index 5b4758c4c9e70bf5d73de20a026fad68deb5c839..7acfc43cd24b9e8331f45201371b6f5baafe8179 100644
--- a/react-whenMeet/src/styles/CalendarWeek.css
+++ b/react-whenMeet/src/styles/CalendarWeek.css
@@ -13,7 +13,7 @@
margin-left: 20px;
}
.wrap {
- width: 600px;
+ width: 80%;
}
table {
width: 100%;
diff --git a/react-whenMeet/src/styles/ResultEnd.css b/react-whenMeet/src/styles/ResultEnd.css
index 8843a04a112bf5bc63572a23fac8f091bbf70054..6e9e98c4943355964c773fb6b8e7e501a6a0652e 100644
--- a/react-whenMeet/src/styles/ResultEnd.css
+++ b/react-whenMeet/src/styles/ResultEnd.css
@@ -1,6 +1,6 @@
.title-box {
- width: 30%;
text-align: center;
+ width: 50%;
}
.form-container {
width: 50%;
diff --git a/react-whenMeet/src/styles/ResultMake.css b/react-whenMeet/src/styles/ResultMake.css
index 84aca2f51337d39a3769f29e4782bb7b7b898520..d15db6663e678830a1dc794918854ab80ad54842 100644
--- a/react-whenMeet/src/styles/ResultMake.css
+++ b/react-whenMeet/src/styles/ResultMake.css
@@ -12,6 +12,7 @@
.flex-row {
display: flex;
flex-direction: row;
+ justify-content: center;
}
.mostTime {