diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js index d1e88abecba6e243a19455eb3c6cdde1d1b56ffa..bf48ea3bda6763d27fa1a37206a40b2d78c7a7d0 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 0000000000000000000000000000000000000000..de4126333e27c68c97fe76632206657ecf056c7d --- /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