diff --git a/frontend/src/hooks/useCreateMeeting/useCreateMeeting.ts b/frontend/src/hooks/useCreateMeeting/useCreateMeeting.ts index b1a4d415e..128dc2dc0 100644 --- a/frontend/src/hooks/useCreateMeeting/useCreateMeeting.ts +++ b/frontend/src/hooks/useCreateMeeting/useCreateMeeting.ts @@ -29,32 +29,38 @@ const useCreateMeeting = () => { pattern: INPUT_FIELD_PATTERN.password, errorMessage: FIELD_DESCRIPTIONS.password, }); - const isHostInfoInValid = + const isHostInfoInvalid = checkInputInvalid(hostNickNameInput.value, hostNickNameInput.errorMessage) || checkInputInvalid(hostPasswordInput.value, hostPasswordInput.errorMessage); - const [selectedDates, setSelectedDates] = useState([]); - const areDatesUnselected = selectedDates.length < 1; - const hasDate = (date: string) => selectedDates.includes(date); + const [selectedDates, setSelectedDates] = useState>(new Set()); + + const hasDate = (date: string) => selectedDates.has(date); const handleDateClick = (date: string) => { - setSelectedDates((prevDates) => - hasDate(date) ? prevDates.filter((d) => d !== date) : [...prevDates, date], - ); + setSelectedDates((prevDates) => { + const newSelectedDates = new Set(prevDates); + newSelectedDates.has(date) ? newSelectedDates.delete(date) : newSelectedDates.add(date); + + return newSelectedDates; + }); }; + const areDatesUnselected = selectedDates.size < 1; const meetingTimeInput = useTimeRangeDropdown(); const isCreateMeetingFormInvalid = - isMeetingNameInvalid || (isHostInfoInValid && areDatesUnselected); + isMeetingNameInvalid || (isHostInfoInvalid && areDatesUnselected); const { mutation: postMeetingMutation } = usePostMeetingMutation(); const handleMeetingCreateButtonClick = () => { + const selectedDatesArray = Array.from(selectedDates); + postMeetingMutation.mutate({ meetingName: meetingNameInput.value, hostName: hostNickNameInput.value, hostPassword: hostPasswordInput.value, - availableMeetingDates: selectedDates, + availableMeetingDates: selectedDatesArray, meetingStartTime: meetingTimeInput.startTime.value, // 시간상 24시는 존재하지 않기 때문에 백엔드에서 오류가 발생. 따라서 오전 12:00으로 표현하지만, 서버에 00:00으로 전송(@낙타) meetingEndTime: @@ -69,7 +75,7 @@ const useCreateMeeting = () => { isMeetingNameInvalid, hostNickNameInput, hostPasswordInput, - isHostInfoInValid, + isHostInfoInvalid, hasDate, handleDateClick, meetingTimeInput,