diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js index a88b6a43dd11467ae156a9100d36514176830ba3..547140c9cc7e90b47b664e009ee8fbabf9c36526 100644 --- a/react-whenMeet/src/components/MeetingInfoForm.js +++ b/react-whenMeet/src/components/MeetingInfoForm.js @@ -15,8 +15,8 @@ function MeetingInfoForm() { const [endVote, setEndVote] = useState(""); const [startTime, setStartTime] = useState(""); const [endTime, setEndTime] = useState(""); - const [startNum,setStartNum] = useState(); - const [endNum,setEndNum] = useState(); + const [startNum, setStartNum] = useState(); + const [endNum, setEndNum] = useState(); const navigate = useNavigate(); const location = useLocation(); const { title, password } = location.state; @@ -41,12 +41,12 @@ function MeetingInfoForm() { }; const handleStartTimeChange = (selectedHour, selectedMinute) => { - setStartNum(selectedHour*2 + selectedMinute/30) + setStartNum(selectedHour * 2 + selectedMinute / 30); setStartTime(`${selectedHour}:${selectedMinute}:00`); }; const handleEndTimeChange = (selectedHour, selectedMinute) => { - setEndNum(selectedHour*2 + selectedMinute/30) + setEndNum(selectedHour * 2 + selectedMinute / 30); setEndTime(`${selectedHour}:${selectedMinute}:00`); }; @@ -116,16 +116,16 @@ function MeetingInfoForm() { <div className="calendar-month"> <Calendar usingDate={usingDate} setUsingDate={setUsingDate} /> </div> - <div className="timeStartEnd"> - <h2>투표 가능 시간</h2> - <TimeInput onTimeChange={handleStartTimeChange} /> - ~ - <TimeInput onTimeChange={handleEndTimeChange} /> - </div> <div className="form-input"> + <div className="timeStartEnd"> + <h2 className="availableVote">투표 가능 시간</h2> + <TimeInput onTimeChange={handleStartTimeChange} /> + ~ + <TimeInput onTimeChange={handleEndTimeChange} /> + </div> <h2>추가 설정</h2> <div className="num-of-people"> - <h2> + <h2 className="numVoter"> 투표 인원수<span className="selection">(선택)</span> </h2> <Input @@ -148,7 +148,7 @@ function MeetingInfoForm() { /> </div> </div> - <Button type="submit" text="시작하기" disabled={!isFormValid}/> + <Button type="submit" text="시작하기" disabled={!isFormValid} /> </div> </form> ); diff --git a/react-whenMeet/src/styles/HomeMake.css b/react-whenMeet/src/styles/HomeMake.css index d2114b50981585d9c3bf3443e535d448a5ad8179..f6f5b1e8b8dd02a83c8d3585e8e3b70f07dba60f 100644 --- a/react-whenMeet/src/styles/HomeMake.css +++ b/react-whenMeet/src/styles/HomeMake.css @@ -1,5 +1,5 @@ body { - background-color:white; + background-color: white; margin: 0; padding: 0; } @@ -7,7 +7,7 @@ body { form { width: 50%; padding: 20px; - margin:auto; + margin: auto; text-align: center; } diff --git a/react-whenMeet/src/styles/MeetingInfo.css b/react-whenMeet/src/styles/MeetingInfo.css index fc2610f9b20e12f67e4b81ec5bdb776e2d6e9a81..2883bd9cef93cb0c10ba693771f2cba179c0a982 100644 --- a/react-whenMeet/src/styles/MeetingInfo.css +++ b/react-whenMeet/src/styles/MeetingInfo.css @@ -38,8 +38,19 @@ h2 { font-size: 16px; padding: 5px; } - +.availableVote { + width: 40%; + text-align: left; + white-space: nowrap; +} +.numVoter { + width: 50%; + text-align: left; + white-space: nowrap; +} .not-enter { + width: 50%; + text-align: left; white-space: nowrap; }