diff --git a/react-whenMeet/src/components/CalendarWeek.jsx b/react-whenMeet/src/components/CalendarWeek.jsx
index 6ee4afdc4afa5ba5d4e0b2fbced1d00e3c5332f7..ceaf6b7563cd31f62bd7e18951529dca2ade848b 100644
--- a/react-whenMeet/src/components/CalendarWeek.jsx
+++ b/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 (
diff --git a/react-whenMeet/src/components/ResultMakeForm.js b/react-whenMeet/src/components/ResultMakeForm.js
index d29e191ad72d6b4a29505d4e3431e477e4ce038d..1a5ad2f905cb6c9a9a2e8b9665b9e1d56c6e1653 100644
--- a/react-whenMeet/src/components/ResultMakeForm.js
+++ b/react-whenMeet/src/components/ResultMakeForm.js
@@ -1,190 +1,3 @@
-// //寃곌낵 �뺤씤 �섏씠吏�
-// 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>
+ )}
</>
);
}