From 8cb2becbaf83db8ff7092a7190b990becf577bde Mon Sep 17 00:00:00 2001
From: jhkang0516 <jhkang0516@ajou.ac.kr>
Date: Tue, 28 Nov 2023 03:01:55 +0900
Subject: [PATCH] =?UTF-8?q?[EDIT]=20ResultEnd,=20App.js,=20ResultMakeForm?=
=?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
react-whenMeet/src/App.js | 17 +-
.../src/components/ResultEndForm.jsx | 92 +++---
.../src/components/ResultMakeForm.js | 286 +++++++++++++-----
react-whenMeet/src/styles/ResultEnd.css | 10 +-
4 files changed, 280 insertions(+), 125 deletions(-)
diff --git a/react-whenMeet/src/App.js b/react-whenMeet/src/App.js
index 15b0c4d..19633f1 100644
--- a/react-whenMeet/src/App.js
+++ b/react-whenMeet/src/App.js
@@ -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>
diff --git a/react-whenMeet/src/components/ResultEndForm.jsx b/react-whenMeet/src/components/ResultEndForm.jsx
index 1985f40..fb86702 100644
--- a/react-whenMeet/src/components/ResultEndForm.jsx
+++ b/react-whenMeet/src/components/ResultEndForm.jsx
@@ -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>
);
}
diff --git a/react-whenMeet/src/components/ResultMakeForm.js b/react-whenMeet/src/components/ResultMakeForm.js
index 5d64103..d29e191 100644
--- a/react-whenMeet/src/components/ResultMakeForm.js
+++ b/react-whenMeet/src/components/ResultMakeForm.js
@@ -1,86 +1,220 @@
+// //결과 확인 페이지
+// 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>
diff --git a/react-whenMeet/src/styles/ResultEnd.css b/react-whenMeet/src/styles/ResultEnd.css
index 913b4b6..b1d979b 100644
--- a/react-whenMeet/src/styles/ResultEnd.css
+++ b/react-whenMeet/src/styles/ResultEnd.css
@@ -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;
+}
--
GitLab