[EDIT]

react-whenMeet/src/App.js

@@ -23,7 +23,8 @@ function App() {
         <Route path="/meetinginfo" element={<MeetingInfo />}></Route>
         <Route path="/result/:meeting_id" element={<ResultMake />}></Route>
         //결과확인페이지
-        <Route path="/resultend" element={<ResultEnd />}></Route>// 투표 종료
+        <Route path="/resultend/:meeting_id" element={<ResultEnd />}></Route>//
+        투표 종료
         <Route path="/" element={<HomeMake />}>
           {" "}
         </Route>

react-whenMeet/src/components/CalendarWeek.jsx

@@ -7,6 +7,7 @@ const CalendarWeek = ({
   participants,
   startDate,
   endDate,
+  currentParticipants,
   maxParticipants,
   hoveredInfo,
   setHoveredInfo,
@@ -18,6 +19,11 @@ const CalendarWeek = ({
   const [schedule, setSchedule] = useState({});
 
   const parseTime = (time) => {
+    // 자정("00:00:00")을 확인하여 48을 반환
+    if (time === "00:00:00") {
+      return 48;
+    }
+
     const [hours, minutes] = time.split(":").map(Number);
     return hours * 2 + (minutes >= 30 ? 1 : 0); // 30분 단위로 계산
   };
@@ -82,10 +88,14 @@ const CalendarWeek = ({
     setSchedule(newSchedule);
   }, [participants, startDate, endDate]);
 
-  const calculateOpacity = (dateString, timeString) => {
+  const calculateOpacity = (dateString, timeString, currentParticipants) => {
     const availableCount =
       schedule[dateString]?.filter((s) => s.time === timeString).length || 0;
-    return 100 - (availableCount / maxParticipants) * 100;
+
+    // currentParticipants가 0이거나 null일 경우를 대비해 기본값 1 설정
+    const participantsCount = currentParticipants || 1;
+
+    return 100 - (availableCount / participantsCount) * 100;
   };
 
   const handleMouseEnter = (dateString, timeString) => {

react-whenMeet/src/components/ResultEndForm.jsx

 import CalendarWeek from "./CalendarWeek";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
 import "../styles/ResultEnd.css";
 import "../styles/CalendarWeek.css";
 export default function ResultEndForm() {
-  const meetingData = {
-    id: "1ag123jkF1",
-    title: "제목",
-    purpose: "STUDY",
-    startDate: "2023-12-20",
-    endDate: "2024-1-07",
-    currentParticipants: 2,
-    maxParticipants: 4,
-    voteExpiresAt: "2023-12-25T03:24:00",
-    isClosed: false,
-    participants: [
-      {
-        name: "test1",
-        availableSchedules: [
-          {
-            availableDate: "2023-12-20",
-            availableTimes: [6, 7, 8, 9, 14, 15, 16, 17],
-          },
-          {
-            availableDate: "2023-12-21",
-            availableTimes: [16, 17],
-          },
-          {
-            availableDate: "2023-12-22",
-            availableTimes: [24, 25, 26, 27, 28, 40, 41, 42],
-          },
-        ],
-      },
-      {
-        name: "test2",
-        availableSchedules: [
-          {
-            availableDate: "2023-12-22",
-            availableTimes: [38, 40],
-          },
-        ],
-      },
-      {
-        name: "test3",
-        availableSchedules: [
-          {
-            availableDate: "2023-12-22",
-            availableTimes: [38, 40, 41, 42],
-          },
-        ],
-      },
-      {
-        name: "test4",
-        availableSchedules: [
-          {
-            availableDate: "2023-12-22",
-            availableTimes: [38],
-          },
-        ],
-      },
-      {
-        name: "test5",
-        availableSchedules: [
-          {
-            availableDate: "2023-12-22",
-            availableTimes: [38],
-          },
-        ],
-      },
-      {
-        name: "test6",
-        availableSchedules: [
-          {
-            availableDate: "2023-12-22",
-            availableTimes: [38],
-          },
-        ],
-      },
-    ],
-  };
-
-  const [selectedDate, setSelectedDate] = useState("2023-12-22"); // 임의의 예시 값
+  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 purposeText = {
+    STUDY: "스터디",
+    MEETING: "회의",
+    PLAYING: "놀기",
+    FOOD: "식사",
+    ETC: "기타",
+  };
 
   const handleDateChange = (event) => {
     setSelectedDate(event.target.value);
   };
+  useEffect(() => {
+    const fetchMeetingData = async () => {
+      try {
+        const response = await fetch(`/meetings/${meeting_id}/details`);
+        if (!response.ok) {
+          throw new Error("API 호출 오류");
+        }
+        const data = await response.json();
+        setMeetingData(data);
+
+        setSelectedDate(
+          data.participants[0].availableSchedules[0].availableDate
+        );
+      } catch (error) {
+        console.error("API 호출 중 에러 발생:", error);
+      }
+    };
+
+    if (meeting_id) {
+      fetchMeetingData();
+    }
+  }, [meeting_id]);
+
+  if (!meetingData) {
+    return <div>로딩 중...</div>;
+  }
 
   return (
     <div
@@ -110,9 +70,10 @@ export default function ResultEndForm() {
       ) : (
         <span className="closedFalse">
           <p>
-            {meetingData.purpose}를 하는 다른 사람들은 주로 평일 낮 시간대에
-            많이 만나요
+            {meetingData.purpose && purposeText[meetingData.purpose]}를 하는
+            다른 사람들은 주로 평일 낮 시간대에 많이 만나요
           </p>
+
           <form className="form-container">
             {possibleDates.map((date, index) => (
               <label key={index}>
@@ -144,9 +105,12 @@ export default function ResultEndForm() {
           participants={meetingData.participants}
           startDate={meetingData.startDate}
           endDate={meetingData.endDate}
+          currentParticipants={meetingData.currentParticipants}
           maxParticipants={meetingData.maxParticipants}
           hoveredInfo={hoveredInfo}
           setHoveredInfo={setHoveredInfo}
+          availableVotingStartTime={meetingData.availableVotingStartTime}
+          availableVotingEndTime={meetingData.availableVotingEndTime}
         />
       </div>
       <div className="possible">

react-whenMeet/src/components/ResultMakeForm.js

@@ -96,12 +96,17 @@ function ResultMakeForm() {
       ) : (
         <div className="column-container">
           <h1 className="title-box">{meetingData?.title}</h1>
+
           <div>
-            현재 완료한 인원수 {currentParticipants} / {maxParticipants}
+            현재 완료한 인원수 {currentParticipants}
+            {maxParticipants != null && ` / ${maxParticipants}`}
           </div>
+
           <div>종료까지 남은 시간 {timeLeft}</div>
           <button onClick={handleEdit}>수정하기</button>
-          <button onClick={() => navigate("/resultend")}>투표 종료하기</button>
+          <button onClick={() => navigate(`/resultend/${meeting_id}`)}>
+            투표 종료하기
+          </button>
         </div>
       )}
       {meetingData && (
@@ -111,6 +116,7 @@ function ResultMakeForm() {
               participants={meetingData.participants}
               startDate={meetingData.startDate}
               endDate={meetingData.endDate}
+              currentParticipants={meetingData.currentParticipants}
               maxParticipants={meetingData.maxParticipants}
               hoveredInfo={hoveredInfo}
               setHoveredInfo={setHoveredInfo}