From a8169e86acaf621d4a29c12797e8dded5e88b475 Mon Sep 17 00:00:00 2001
From: mindongmindong <dcmin123@ajou.ac.kr>
Date: Fri, 1 Dec 2023 16:51:44 +0900
Subject: [PATCH] [ADD] Available meeting time
---
.../src/components/MeetingInfoForm.js | 38 +++++++---------
react-whenMeet/src/components/TimeInput.js | 43 +++++++++++++++++++
2 files changed, 58 insertions(+), 23 deletions(-)
create mode 100644 react-whenMeet/src/components/TimeInput.js
diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js
index d1e88ab..bf48ea3 100644
--- a/react-whenMeet/src/components/MeetingInfoForm.js
+++ b/react-whenMeet/src/components/MeetingInfoForm.js
@@ -2,6 +2,7 @@ import { useState } from "react";
import Input from "../components/Input";
import Button from "../components/Button";
import Calendar from "../components/Calendar";
+import TimeInput from "./TimeInput";
import { useNavigate, useLocation } from "react-router-dom";
import axios from "axios";
@@ -9,8 +10,8 @@ function MeetingInfoForm() {
const [meetingPurpose, setMeetingPurpose] = useState("");
const [number, setNumber] = useState();
const [endVote, setEndVote] = useState("");
- const [start, setStart] = useState();
- const [end, setEnd] = useState();
+ const [startTime, setStartTime] = useState();
+ const [endTime, setEndTime] = useState();
const navigate = useNavigate();
const location = useLocation();
const { title, password } = location.state;
@@ -28,14 +29,14 @@ function MeetingInfoForm() {
const handleVoteEnd = (event) => {
setEndVote(event.target.value);
}
+ const handleStartTimeChange = (selectedHour, selectedMinute) => {
+ setStartTime(`${selectedHour}:${selectedMinute}`);
+ };
- const handleStart = (event) => {
- setStart(event.target.value);
- }
+ const handleEndTimeChange = (selectedHour, selectedMinute) => {
+ setEndTime(`${selectedHour}:${selectedMinute}`);
+ };
- const handleEnd = (event) => {
- setEnd(event.target.value);
- }
const handleSubmit = async (event) => {
event.preventDefault();
@@ -64,6 +65,8 @@ function MeetingInfoForm() {
purpose: transformedPurpose,
startDate: usingDate.startDate,
endDate: usingDate.endDate,
+ availableVotingStartTime : startTime,
+ availableVotingEndTime : endTime,
maxParticipants: number,
voteExpiresAt: endVote
});
@@ -95,21 +98,10 @@ function MeetingInfoForm() {
<Calendar usingDate={usingDate} setUsingDate={setUsingDate} />
<div className="timeStartEnd">
- 시작:
- <Input
- type="time"
- value={start}
- onChange={handleStart}
- placeholder="시작"
- />
- 종료:
- <Input
- type="time"
- value={end}
- onChange={handleEnd}
- placeholder="종료"
- />
-
+ 투표 가능 시간
+ <TimeInput onTimeChange={handleStartTimeChange}/>
+ ~
+ <TimeInput onTimeChange={handleEndTimeChange}/>
</div>
<Input
type="number"
diff --git a/react-whenMeet/src/components/TimeInput.js b/react-whenMeet/src/components/TimeInput.js
new file mode 100644
index 0000000..de41263
--- /dev/null
+++ b/react-whenMeet/src/components/TimeInput.js
@@ -0,0 +1,43 @@
+import { useState } from "react";
+function TimeInput({onTimeChange}) {
+ const [hours, setHours] = useState("00");
+ const [minutes, setMinutes] = useState("00");
+
+ const handleHoursChange = (event) => {
+ setHours(event.target.value);
+ onTimeChange(event.target.value, minutes);
+ };
+
+ const handleMinutesChange = (event) => {
+ setMinutes(event.target.value);
+ onTimeChange(hours, event.target.value);
+ };
+
+
+ return (
+ <div>
+ <label>
+ 시:
+ <select value={hours} onChange={handleHoursChange}>
+ {Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, "0")).map((hour) => (
+ <option key={hour} value={hour}>
+ {hour}
+ </option>
+ ))}
+ </select>
+ </label>
+
+ <label>
+ 분:
+ <select value={minutes} onChange={handleMinutesChange}>
+ {Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, "0")).map((minute) => (
+ <option key={minute} value={minute}>
+ {minute}
+ </option>
+ ))}
+ </select>
+ </label>
+ </div>
+ );
+}
+export default TimeInput;
\ No newline at end of file
--
GitLab