[EDIT] ResultMakeForm 수정, Calendar 시작,종료 시간 설정 가능

react-whenMeet/src/components/CalendarWeek.jsx

@@ -10,11 +10,21 @@ const CalendarWeek = ({
   maxParticipants,
   hoveredInfo,
   setHoveredInfo,
+  availableVotingStartTime,
+  availableVotingEndTime,
 }) => {
   const [currentWeekIndex, setCurrentWeekIndex] = useState(0);
   const [weeks, setWeeks] = useState([]);
   const [schedule, setSchedule] = useState({});
 
+  const parseTime = (time) => {
+    const [hours, minutes] = time.split(":").map(Number);
+    return hours * 2 + (minutes >= 30 ? 1 : 0); // 30분 단위로 계산
+  };
+
+  const startTimeSlot = parseTime(availableVotingStartTime);
+  const endTimeSlot = parseTime(availableVotingEndTime);
+
   const handlePrevWeek = () => {
     setCurrentWeekIndex(Math.max(0, currentWeekIndex - 1));
   };
@@ -121,7 +131,8 @@ const CalendarWeek = ({
           </tr>
         </thead>
         <tbody>
-          {[...Array(48).keys()].map((timeSlot) => {
+          {[...Array(endTimeSlot - startTimeSlot + 1).keys()].map((i) => {
+            const timeSlot = startTimeSlot + i;
             const hour = Math.floor(timeSlot / 2);
             const minute = (timeSlot % 2) * 30;
             return (

react-whenMeet/src/components/ResultMakeForm.js

-// //결과 확인 페이지
-// import React, { useState, useEffect } from "react";
-// import CalendarWeek from "./CalendarWeek";
-// import { useNavigate } from "react-router-dom";
-
-// import "../styles/ResultMake.css";
-// function ResultMakeForm() {
-//   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],
-//           },
-//         ],
-//       },
-//     ],
-//   };
-
-//   const [title, setTitle] = useState(meetingData.title);
-//   const [currentParticipants, setcurrentParticipands] = useState(
-//     meetingData.currentParticipants
-//   );
-//   const [maxParticipants, setmaxParticipants] = useState(
-//     meetingData.maxParticipants
-//   );
-//   const [timeLeft, setTimeLeft] = useState("");
-//   const navigate = useNavigate();
-//   const [hoveredInfo, setHoveredInfo] = useState(null);
-//   // 타이머를 시작하고 관리하는 로직
-//   useEffect(() => {
-//     const calculateTimeLeft = () => {
-//       const now = new Date();
-//       const voteExpires = new Date(meetingData.voteExpiresAt);
-//       const difference = voteExpires - now;
-
-//       let timeLeft = {};
-
-//       if (difference > 0) {
-//         timeLeft = {
-//           days: Math.floor(difference / (1000 * 60 * 60 * 24)),
-//           hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
-//           minutes: Math.floor((difference / 1000 / 60) % 60),
-//           seconds: Math.floor((difference / 1000) % 60),
-//         };
-//       }
-
-//       return timeLeft;
-//     };
-
-//     const updateTimer = () => {
-//       const newTimeLeft = calculateTimeLeft();
-//       const formattedTime = `${
-//         newTimeLeft.days ? newTimeLeft.days + "일 " : ""
-//       }${newTimeLeft.hours ? newTimeLeft.hours + "시간 " : ""}${
-//         newTimeLeft.minutes ? newTimeLeft.minutes + "분 " : ""
-//       }${newTimeLeft.seconds ? newTimeLeft.seconds + "초" : ""}`;
-//       setTimeLeft(formattedTime);
-//     };
-
-//     updateTimer();
-//     const timerId = setInterval(updateTimer, 1000);
-
-//     return () => clearInterval(timerId);
-//   }, [meetingData.voteExpiresAt]);
-
-//   const handleEdit = () => {
-//     navigate("/meetinginfo/linkpage");
-//   };
-
-//   return (
-//     <>
-//       <div className="column-container">
-//         <h1 className="title-box">{title}</h1>
-//         <div>
-//           현재 완료한 인원수 {currentParticipants} / {maxParticipants}
-//         </div>
-//         <div>종료까지 남은 시간 {timeLeft}</div>
-//         <button onClick={handleEdit}>수정하기</button>
-//         <button
-//           onClick={() => {
-//             navigate("/resultend");
-//           }}
-//         >
-//           투표 종료하기
-//         </button>
-//       </div>
-//       <span className="flex-row">
-//         <div className="calander-container">
-//           <CalendarWeek
-//             participants={meetingData.participants}
-//             startDate={meetingData.startDate}
-//             endDate={meetingData.endDate}
-//             maxParticipants={meetingData.maxParticipants}
-//             hoveredInfo={hoveredInfo}
-//             setHoveredInfo={setHoveredInfo}
-//           />
-//         </div>
-
-//         <span className="mostTime">
-//           <div style={{ textAlign: "center" }}>
-//             가장 많은 사람들이 가능한 일정
-//           </div>
-//           <ol>//일정 5개 나열</ol>
-//         </span>
-//         <span className="possible">
-//           {!hoveredInfo && (
-//             <div>
-//               <strong>가능한 사람들이 표시됩니다.</strong>
-//               <p>마우스를 달력 위에 올려보세요!</p>
-//             </div>
-//           )}
-
-//           {hoveredInfo && (
-//             <div style={{ textAlign: "center" }}>
-//               <strong>
-//                 {hoveredInfo.date} {hoveredInfo.time}에 가능한 사람:
-//               </strong>
-//               <ul>
-//                 {hoveredInfo.participants.map((name) => (
-//                   <li key={name}>{name}</li>
-//                 ))}
-//               </ul>
-//             </div>
-//           )}
-//         </span>
-//       </span>
-//     </>
-//   );
-// }
-// export default ResultMakeForm;
-//결과 확인 페이지
 import React, { useState, useEffect } from "react";
 import CalendarWeek from "./CalendarWeek";
 import { useNavigate, useParams } from "react-router-dom";
@@ -198,17 +11,24 @@ function ResultMakeForm() {
   const navigate = useNavigate();
   const [timeLeft, setTimeLeft] = useState("");
   const [hoveredInfo, setHoveredInfo] = useState(null);
+  const [isLoading, setIsLoading] = useState(true); // 로딩 상태 관리
 
   useEffect(() => {
     // 서버에서 미팅 데이터를 가져오는 함수
     const fetchMeetingData = async () => {
+      setIsLoading(true);
       try {
         const response = await axios.get(
-          `http://43.200.79.42:3000/meetings/${meeting_id}/details`
+          `http://localhost:3000/meetings/${meeting_id}/details`,
+          {
+            withCredentials: true,
+          }
         );
         setMeetingData(response.data);
+        setIsLoading(false);
       } catch (error) {
         console.error("데이터 로딩 에러:", error);
+        setIsLoading(false);
       }
     };
 
@@ -218,26 +38,39 @@ function ResultMakeForm() {
   // 타이머를 시작하고 관리하는 로직
   useEffect(() => {
     const calculateTimeLeft = () => {
+      if (!meetingData || !meetingData.voteExpiresAt) {
+        // meetingData나 voteExpiresAt이 없는 경우 기본값을 반환
+        return {
+          days: 0,
+          hours: 0,
+          minutes: 0,
+          seconds: 0,
+        };
+      }
       const now = new Date();
       const voteExpires = new Date(meetingData.voteExpiresAt);
       const difference = voteExpires - now;
 
-      let timeLeft = {};
-
       if (difference > 0) {
-        timeLeft = {
+        return {
           days: Math.floor(difference / (1000 * 60 * 60 * 24)),
           hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
           minutes: Math.floor((difference / 1000 / 60) % 60),
           seconds: Math.floor((difference / 1000) % 60),
         };
+      } else {
+        // 시간이 이미 지난 경우 기본값을 반환
+        return {
+          days: 0,
+          hours: 0,
+          minutes: 0,
+          seconds: 0,
+        };
       }
-
-      return timeLeft;
     };
 
     const updateTimer = () => {
-      const newTimeLeft = calculateTimeLeft();
+      const newTimeLeft = calculateTimeLeft() || {}; // newTimeLeft가 undefined인 경우를 대비해 기본 객체 할당
       const formattedTime = `${
         newTimeLeft.days ? newTimeLeft.days + "일 " : ""
       }${newTimeLeft.hours ? newTimeLeft.hours + "시간 " : ""}${
@@ -250,7 +83,7 @@ function ResultMakeForm() {
     const timerId = setInterval(updateTimer, 1000);
 
     return () => clearInterval(timerId);
-  }, [meetingData.voteExpiresAt]);
+  }, [meetingData]);
 
   const handleEdit = () => {
     navigate("/meetinginfo/linkpage");
@@ -258,61 +91,63 @@ function ResultMakeForm() {
 
   return (
     <>
-      <div className="column-container">
-        <h1 className="title-box">{meetingData.title}</h1>
-        <div>
-          현재 완료한 인원수 {currentParticipants} / {maxParticipants}
-        </div>
-        <div>종료까지 남은 시간 {timeLeft}</div>
-        <button onClick={handleEdit}>수정하기</button>
-        <button
-          onClick={() => {
-            navigate("/resultend");
-          }}
-        >
-          투표 종료하기
-        </button>
-      </div>
-      <span className="flex-row">
-        <div className="calander-container">
-          <CalendarWeek
-            participants={meetingData.participants}
-            startDate={meetingData.startDate}
-            endDate={meetingData.endDate}
-            maxParticipants={meetingData.maxParticipants}
-            hoveredInfo={hoveredInfo}
-            setHoveredInfo={setHoveredInfo}
-          />
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <div className="column-container">
+          <h1 className="title-box">{meetingData?.title}</h1>
+          <div>
+            현재 완료한 인원수 {currentParticipants} / {maxParticipants}
+          </div>
+          <div>종료까지 남은 시간 {timeLeft}</div>
+          <button onClick={handleEdit}>수정하기</button>
+          <button onClick={() => navigate("/resultend")}>투표 종료하기</button>
         </div>
-
-        <span className="mostTime">
-          <div style={{ textAlign: "center" }}>
-            가장 많은 사람들이 가능한 일정
+      )}
+      {meetingData && (
+        <span className="flex-row">
+          <div className="calander-container">
+            <CalendarWeek
+              participants={meetingData.participants}
+              startDate={meetingData.startDate}
+              endDate={meetingData.endDate}
+              maxParticipants={meetingData.maxParticipants}
+              hoveredInfo={hoveredInfo}
+              setHoveredInfo={setHoveredInfo}
+              availableVotingStartTime={meetingData.availableVotingStartTime}
+              availableVotingEndTime={meetingData.availableVotingEndTime}
+            />
           </div>
-          <ol>//일정 5개 나열</ol>
-        </span>
-        <span className="possible">
-          {!hoveredInfo && (
-            <div>
-              <strong>가능한 사람들이 표시됩니다.</strong>
-              <p>마우스를 달력 위에 올려보세요!</p>
-            </div>
-          )}
 
-          {hoveredInfo && (
+          <span className="mostTime">
             <div style={{ textAlign: "center" }}>
-              <strong>
-                {hoveredInfo.date} {hoveredInfo.time}에 가능한 사람:
-              </strong>
-              <ul>
-                {hoveredInfo.participants.map((name) => (
-                  <li key={name}>{name}</li>
-                ))}
-              </ul>
+              가장 많은 사람들이 가능한 일정
             </div>
-          )}
+            <ol>//일정 5개 나열</ol>
+          </span>
+          <span className="possible">
+            {!hoveredInfo && (
+              <div>
+                <strong>가능한 사람들이 표시됩니다.</strong>
+                <p>마우스를 달력 위에 올려보세요!</p>
+              </div>
+            )}
+
+            {hoveredInfo && (
+              <div style={{ textAlign: "center" }}>
+                <strong>
+                  {hoveredInfo.date} {hoveredInfo.time}에 가능한 사람:
+                </strong>
+                <ul>
+                  {hoveredInfo.participants.map((name) => (
+                    <li key={name}>{name}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </span>
         </span>
-      </span>
+      )}
     </>
   );
 }