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

[EDIT] ResultEnd, App.js, ResultMakeForm 수정

parent f3b957a8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
react-whenMeet/src/App.js
+ 13
− 4
View file @ 8cb2becb
......@@ -12,12 +12,21 @@ function App() {
<Router>
<Routes>
<Route path="/meetinginfo/linkpage" element={<LinkPage />}></Route>
<Route path="/homeparticipate/:id/usertimeinfo" element={<UserTimeInfo />}></Route>
<Route path="/homeparticipate/:id" element={<HomeParticipate />}></Route>
<Route
path="/homeparticipate/:id/usertimeinfo"
element={<UserTimeInfo />}
></Route>
<Route
path="/homeparticipate/:id"
element={<HomeParticipate />}
></Route>
<Route path="/meetinginfo" element={<MeetingInfo />}></Route>
<Route path="/result" element={<ResultMake />}></Route>//결과확인페이지
<Route path="/result/:meeting_id" element={<ResultMake />}></Route>
//결과확인페이지
<Route path="/resultend" element={<ResultEnd />}></Route>// 투표 종료
<Route path="/" element={<HomeMake />}> </Route>
<Route path="/" element={<HomeMake />}>
{" "}
</Route>
페이지
</Routes>
</Router>
......
react-whenMeet/src/components/ResultEndForm.jsx
+ 49
− 43
View file @ 8cb2becb
......@@ -78,12 +78,8 @@ export default function ResultEndForm() {
},
],
};
const [title, setTitle] = useState(meetingData.title);
const [resultTime, setresultTIme] = useState("00:37:30");
const [completedPeopleNum, setcompletedPeopleNum] = useState(
meetingData.currentParticipants
);
const [selectedDate, setSelectedDate] = useState("");
const [selectedDate, setSelectedDate] = useState("2023-12-22"); // 임의의 예시 값
const possibleDates = ["23.07.01 ~~~", "23.07.02 ~~~", "23.07.03 ~~~"];
const [hoveredInfo, setHoveredInfo] = useState(null);
......@@ -100,13 +96,23 @@ export default function ResultEndForm() {
alignItems: "center",
}}
>
<span className="row1">
<h1 className="title-box">{title}</h1>
<p>투표가 종료되었습니다.</p>
<p style={{ color: "blue" }}>약속 시간은 {resultTime}입니다.</p>
<h1 className="title-box">{meetingData.title}</h1>
<p>투표가 종료되었습니다.</p>
{meetingData.isClosed ? (
<div>
<h2 style={{ flex: "none" }}>총 참여한 인원수</h2>
<h3>{completedPeopleNum}</h3>
<p style={{ color: "blue" }}>약속 시간은 {selectedDate}입니다.</p>
<div>
<h2 style={{ justifyContent: "center" }}>총 참여한 인원수</h2>
<h3>{meetingData.currentParticipants}</h3>
</div>
</div>
) : (
<span className="closedFalse">
<p>
{meetingData.purpose}를 하는 다른 사람들은 주로 평일 낮 시간대에
많이 만나요
</p>
<form className="form-container">
{possibleDates.map((date, index) => (
<label key={index}>
......@@ -130,39 +136,39 @@ export default function ResultEndForm() {
<button style={{ marginTop: "10px", padding: "10px 20px" }}>
랜덤으로 약속 시간 확정하기
</button>
</div>
<span className="flex-row" style={{ width: "100%" }}>
<CalendarWeek
participants={meetingData.participants}
startDate={meetingData.startDate}
endDate={meetingData.endDate}
maxParticipants={meetingData.maxParticipants}
hoveredInfo={hoveredInfo}
setHoveredInfo={setHoveredInfo}
/>
</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>
<div className="flex-row">
<CalendarWeek
participants={meetingData.participants}
startDate={meetingData.startDate}
endDate={meetingData.endDate}
maxParticipants={meetingData.maxParticipants}
hoveredInfo={hoveredInfo}
setHoveredInfo={setHoveredInfo}
/>
</div>
<div 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>
)}
</div>
</div>
);
}
react-whenMeet/src/components/ResultMakeForm.js
+ 210
− 76
View file @ 8cb2becb
// //결과 확인 페이지
// 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 } from "react-router-dom";
import { useNavigate, useParams } from "react-router-dom";
import axios from "axios";
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 [meetingData, setMeetingData] = useState(null);
const { meeting_id } = useParams();
const { currentParticipants, maxParticipants } = meetingData || {};
const navigate = useNavigate();
const [timeLeft, setTimeLeft] = useState("");
const [hoveredInfo, setHoveredInfo] = useState(null);
useEffect(() => {
// 서버에서 미팅 데이터를 가져오는 함수
const fetchMeetingData = async () => {
try {
const response = await axios.get(
`http://43.200.79.42:3000/meetings/${meeting_id}/details`
);
setMeetingData(response.data);
} catch (error) {
console.error("데이터 로딩 에러:", error);
}
};
fetchMeetingData();
}, [meeting_id]);
// 타이머를 시작하고 관리하는 로직
useEffect(() => {
const calculateTimeLeft = () => {
......@@ -125,7 +259,7 @@ function ResultMakeForm() {
return (
<>
<div className="column-container">
<h1 className="title-box">{title}</h1>
<h1 className="title-box">{meetingData.title}</h1>
<div>
현재 완료한 인원수 {currentParticipants} / {maxParticipants}
</div>
......
react-whenMeet/src/styles/ResultEnd.css
+ 8
− 2
View file @ 8cb2becb
......@@ -4,7 +4,7 @@
text-align: center;
}
.form-container {
width: 100%;
width: 50%;
margin-bottom: 20px;
padding: 0;
}
......@@ -17,7 +17,7 @@
.possible {
position: fixed;
right: 0; /* 화면의 오른쪽 끝에 고정 */
top: 50%; /* 화면의 상단으로부터 50%의 위치에 고정 */
top: 60%; /* 화면의 상단으로부터 50%의 위치에 고정 */
transform: translateY(
-50%
); /* 상단 50% 위치에서 자기 자신의 높이의 절반을 위로 이동 */
......@@ -30,3 +30,9 @@
display: flex;
justify-content: center;
}
.closedFalse {
display: flex;
flex-direction: column;
align-items: center;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr