diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js index 34cfe383dbd9cccd8c707941f25c1f6d8a257228..7c6f0cfd4c1b61c1003cb5de1e42bf266d4a7000 100644 --- a/react-whenMeet/src/components/MeetingInfoForm.js +++ b/react-whenMeet/src/components/MeetingInfoForm.js @@ -94,7 +94,11 @@ function MeetingInfoForm() { <h1>약속 일정 만들기</h1> <div className="purpose"> <h2 className="not-enter">약속 목적 </h2> - <select className="purpose-selector" value={meetingPurpose} onChange={handleOnChange}> + <select + className="purpose-selector" + value={meetingPurpose} + onChange={handleOnChange} + > <option value="선택">선택</option> <option value="스터디">스터디</option> <option value="회의">회의</option> @@ -106,10 +110,18 @@ 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"> <h2>추가 설정</h2> <div className="num-of-people"> - <h2>투표 인원수</h2> + <h2> + 투표 인원수<span className="selection">(선택)</span> + </h2> <Input classname="voteNumber" type="number" @@ -118,19 +130,16 @@ function MeetingInfoForm() { placeholder="인원수" /> </div> - <div className="timeStartEnd"> - <h2>투표 가능 시간</h2> - <TimeInput onTimeChange={handleStartTimeChange} /> - ~ - <TimeInput onTimeChange={handleEndTimeChange} /> - </div> <div className="end-time"> - <h2 className="not-enter">투표 종료 시간</h2> + <h2 className="not-enter"> + 투표 종료 시간<span className="selection">(선택)</span> + </h2> <Input - classname= "vote-end" + classname="vote-end" type="datetime-local" value={endVote} - onChange={handleVoteEnd} /> + onChange={handleVoteEnd} + /> </div> </div> <Button type="submit" text="시작하기" /> diff --git a/react-whenMeet/src/styles/MeetingInfo.css b/react-whenMeet/src/styles/MeetingInfo.css index 59ff1c19da24a70abcf2f6b562228c3df4cdd531..fc2610f9b20e12f67e4b81ec5bdb776e2d6e9a81 100644 --- a/react-whenMeet/src/styles/MeetingInfo.css +++ b/react-whenMeet/src/styles/MeetingInfo.css @@ -9,6 +9,10 @@ body { padding: 0px; } +span.selection { + color: gray; +} + .center-container2 { display: flex; flex-direction: column; /* 세로 방향으로 정렬 */