From 89cde512505b3efecb8559d78fc93d347ae74273 Mon Sep 17 00:00:00 2001
From: jhkang0516 <jhkang0516@ajou.ac.kr>
Date: Sun, 3 Dec 2023 22:30:49 +0900
Subject: [PATCH] [EDIT]
---
react-whenMeet/src/App.js | 3 +-
.../src/components/CalendarWeek.jsx | 14 +-
.../src/components/ResultEndForm.jsx | 124 +++++++-----------
.../src/components/ResultMakeForm.js | 10 +-
4 files changed, 66 insertions(+), 85 deletions(-)
diff --git a/react-whenMeet/src/App.js b/react-whenMeet/src/App.js
index 19633f1..c8a2f39 100644
--- a/react-whenMeet/src/App.js
+++ b/react-whenMeet/src/App.js
@@ -23,7 +23,8 @@ function App() {
<Route path="/meetinginfo" element={<MeetingInfo />}></Route>
<Route path="/result/:meeting_id" element={<ResultMake />}></Route>
//결과확인페이지
- <Route path="/resultend" element={<ResultEnd />}></Route>// 투표 종료
+ <Route path="/resultend/:meeting_id" element={<ResultEnd />}></Route>//
+ 투표 종료
<Route path="/" element={<HomeMake />}>
{" "}
</Route>
diff --git a/react-whenMeet/src/components/CalendarWeek.jsx b/react-whenMeet/src/components/CalendarWeek.jsx
index ceaf6b7..dc0d1a6 100644
--- a/react-whenMeet/src/components/CalendarWeek.jsx
+++ b/react-whenMeet/src/components/CalendarWeek.jsx
@@ -7,6 +7,7 @@ const CalendarWeek = ({
participants,
startDate,
endDate,
+ currentParticipants,
maxParticipants,
hoveredInfo,
setHoveredInfo,
@@ -18,6 +19,11 @@ const CalendarWeek = ({
const [schedule, setSchedule] = useState({});
const parseTime = (time) => {
+ // 자정("00:00:00")을 확인하여 48을 반환
+ if (time === "00:00:00") {
+ return 48;
+ }
+
const [hours, minutes] = time.split(":").map(Number);
return hours * 2 + (minutes >= 30 ? 1 : 0); // 30분 단위로 계산
};
@@ -82,10 +88,14 @@ const CalendarWeek = ({
setSchedule(newSchedule);
}, [participants, startDate, endDate]);
- const calculateOpacity = (dateString, timeString) => {
+ const calculateOpacity = (dateString, timeString, currentParticipants) => {
const availableCount =
schedule[dateString]?.filter((s) => s.time === timeString).length || 0;
- return 100 - (availableCount / maxParticipants) * 100;
+
+ // currentParticipants가 0이거나 null일 경우를 대비해 기본값 1 설정
+ const participantsCount = currentParticipants || 1;
+
+ return 100 - (availableCount / participantsCount) * 100;
};
const handleMouseEnter = (dateString, timeString) => {
diff --git a/react-whenMeet/src/components/ResultEndForm.jsx b/react-whenMeet/src/components/ResultEndForm.jsx
index fb86702..dcf5b49 100644
--- a/react-whenMeet/src/components/ResultEndForm.jsx
+++ b/react-whenMeet/src/components/ResultEndForm.jsx
@@ -1,91 +1,51 @@
import CalendarWeek from "./CalendarWeek";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
import "../styles/ResultEnd.css";
import "../styles/CalendarWeek.css";
export default function ResultEndForm() {
- 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],
- },
- ],
- },
- {
- name: "test6",
- availableSchedules: [
- {
- availableDate: "2023-12-22",
- availableTimes: [38],
- },
- ],
- },
- ],
- };
-
- const [selectedDate, setSelectedDate] = useState("2023-12-22"); // 임의의 예시 값
+ const [meetingData, setMeetingData] = useState(null);
+ const [selectedDate, setSelectedDate] = useState("");
const possibleDates = ["23.07.01 ~~~", "23.07.02 ~~~", "23.07.03 ~~~"];
const [hoveredInfo, setHoveredInfo] = useState(null);
+ const { meeting_id } = useParams();
+ const purposeText = {
+ STUDY: "스터디",
+ MEETING: "회의",
+ PLAYING: "놀기",
+ FOOD: "식사",
+ ETC: "기타",
+ };
const handleDateChange = (event) => {
setSelectedDate(event.target.value);
};
+ useEffect(() => {
+ const fetchMeetingData = async () => {
+ try {
+ const response = await fetch(`/meetings/${meeting_id}/details`);
+ if (!response.ok) {
+ throw new Error("API 호출 오류");
+ }
+ const data = await response.json();
+ setMeetingData(data);
+
+ setSelectedDate(
+ data.participants[0].availableSchedules[0].availableDate
+ );
+ } catch (error) {
+ console.error("API 호출 중 에러 발생:", error);
+ }
+ };
+
+ if (meeting_id) {
+ fetchMeetingData();
+ }
+ }, [meeting_id]);
+
+ if (!meetingData) {
+ return <div>로딩 중...</div>;
+ }
return (
<div
@@ -110,9 +70,10 @@ export default function ResultEndForm() {
) : (
<span className="closedFalse">
<p>
- {meetingData.purpose}를 하는 다른 사람들은 주로 평일 낮 시간대에
- 많이 만나요
+ {meetingData.purpose && purposeText[meetingData.purpose]}를 하는
+ 다른 사람들은 주로 평일 낮 시간대에 많이 만나요
</p>
+
<form className="form-container">
{possibleDates.map((date, index) => (
<label key={index}>
@@ -144,9 +105,12 @@ export default function ResultEndForm() {
participants={meetingData.participants}
startDate={meetingData.startDate}
endDate={meetingData.endDate}
+ currentParticipants={meetingData.currentParticipants}
maxParticipants={meetingData.maxParticipants}
hoveredInfo={hoveredInfo}
setHoveredInfo={setHoveredInfo}
+ availableVotingStartTime={meetingData.availableVotingStartTime}
+ availableVotingEndTime={meetingData.availableVotingEndTime}
/>
</div>
<div className="possible">
diff --git a/react-whenMeet/src/components/ResultMakeForm.js b/react-whenMeet/src/components/ResultMakeForm.js
index 1a5ad2f..d0d8cc7 100644
--- a/react-whenMeet/src/components/ResultMakeForm.js
+++ b/react-whenMeet/src/components/ResultMakeForm.js
@@ -96,12 +96,17 @@ function ResultMakeForm() {
) : (
<div className="column-container">
<h1 className="title-box">{meetingData?.title}</h1>
+
<div>
- 현재 완료한 인원수 {currentParticipants} / {maxParticipants}
+ 현재 완료한 인원수 {currentParticipants}
+ {maxParticipants != null && ` / ${maxParticipants}`}
</div>
+
<div>종료까지 남은 시간 {timeLeft}</div>
<button onClick={handleEdit}>수정하기</button>
- <button onClick={() => navigate("/resultend")}>투표 종료하기</button>
+ <button onClick={() => navigate(`/resultend/${meeting_id}`)}>
+ 투표 종료하기
+ </button>
</div>
)}
{meetingData && (
@@ -111,6 +116,7 @@ function ResultMakeForm() {
participants={meetingData.participants}
startDate={meetingData.startDate}
endDate={meetingData.endDate}
+ currentParticipants={meetingData.currentParticipants}
maxParticipants={meetingData.maxParticipants}
hoveredInfo={hoveredInfo}
setHoveredInfo={setHoveredInfo}
--
GitLab