Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
W
WhenMeet
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container Registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
websystem2023-2
WhenMeet
Commits
95fa03d3
Commit
95fa03d3
authored
1 year ago
by
준현 강
Browse files
Options
Downloads
Patches
Plain Diff
[EDIT] ResultMakeForm 수정, Calendar 시작,종료 시간 설정 가능
parent
2e26c172
No related branches found
No related tags found
No related merge requests found
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
react-whenMeet/src/components/CalendarWeek.jsx
+12
-1
12 additions, 1 deletion
react-whenMeet/src/components/CalendarWeek.jsx
react-whenMeet/src/components/ResultMakeForm.js
+79
-244
79 additions, 244 deletions
react-whenMeet/src/components/ResultMakeForm.js
with
91 additions
and
245 deletions
react-whenMeet/src/components/CalendarWeek.jsx
+
12
−
1
View file @
95fa03d3
...
...
@@ -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
(
...
...
This diff is collapsed.
Click to expand it.
react-whenMeet/src/components/ResultMakeForm.js
+
79
−
244
View file @
95fa03d3
// //결과 확인 페이지
// 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
>
)}
<
/
>
);
}
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment