[EDIT]

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}

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>

react-whenMeet/src/styles/CalendarWeek.css

@@ -13,7 +13,7 @@
   margin-left: 20px;
 }
 .wrap {
-  width: 600px;
+  width: 80%;
 }
 table {
   width: 100%;

react-whenMeet/src/styles/ResultEnd.css

 .title-box {
-  width: 30%;
   text-align: center;
+  width: 50%;
 }
 .form-container {
   width: 50%;

react-whenMeet/src/styles/ResultMake.css

@@ -12,6 +12,7 @@
 .flex-row {
   display: flex;
   flex-direction: row;
+  justify-content: center;
 }
 
 .mostTime {