Skip to content
Snippets Groups Projects
Commit 95fa03d3 authored by 준현 강's avatar 준현 강
Browse files

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

parent 2e26c172
No related branches found
No related tags found
No related merge requests found
......@@ -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 (
......
// //결과 확인 페이지
// 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>
)}
</>
);
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment