diff --git a/features/record/components/organisms/form.tsx b/features/record/components/organisms/form.tsx index 8729c71d..186fb34d 100644 --- a/features/record/components/organisms/form.tsx +++ b/features/record/components/organisms/form.tsx @@ -35,7 +35,7 @@ import { useRecordForm } from '../../hooks'; import { saveSwimTime } from '../../server-actions'; import { formSubInfoState } from '../../store/form-sub-info'; import { formSectionStyles } from '../../styles/form-section'; -import { isFuture } from '../../utils'; +import { compareTime, isFuture } from '../../utils'; import { DiarySection } from './diary-section'; import { DistancePageModal } from './distance-page-modal'; import { EquipmentSection } from './equipment-section'; @@ -184,6 +184,11 @@ export function Form({ prevSwimStartTime, prevSwimEndTime }: FormProps) { const onSubmit: SubmitHandler = async (data) => { if (isLoading || !startTime || !endTime) return; + //하루가 넘어갈 때 + if (!compareTime(startTime, endTime)) { + toast('시간을 해당 기록 날짜 내로 설정해주세요', { type: 'warning' }); + return; + } //기록 수정 모드일 때 // eslint-disable-next-line @typescript-eslint/no-unused-vars const { poolName, laneMeter, totalDistance, ...restData } = data; diff --git a/features/record/components/organisms/time-bottom-sheet.tsx b/features/record/components/organisms/time-bottom-sheet.tsx index eed786b3..c3b1dc2f 100644 --- a/features/record/components/organisms/time-bottom-sheet.tsx +++ b/features/record/components/organisms/time-bottom-sheet.tsx @@ -17,24 +17,26 @@ import { addMinutes, convertTo24HourFormat, convertToPickerValue, + subtractMinutes, } from '../../utils'; interface TimeBottomSheetProps { - startTime?: string; - endTime?: string; + startTime: string; + endTime: string; } export function TimeBottomSheet({ startTime, endTime }: TimeBottomSheetProps) { const { getValues, setValue } = useFormContext(); const [timeBottmSheetState, setTimeBottmSheetState] = useAtom(timeBottomSheetState); - const [pickerValue, setPickerValue] = useState<{ ampm: AmpmType; hour: HourType; minute: MinuteType; }>(defaultPickerValue); + usePreventBodyScroll({ isOpen: timeBottmSheetState.isOpen }); + useEffect(() => { if (Boolean(startTime) && timeBottmSheetState.variant === 'start') setPickerValue(convertToPickerValue(startTime)); @@ -43,15 +45,28 @@ export function TimeBottomSheet({ startTime, endTime }: TimeBottomSheetProps) { // eslint-disable-next-line react-hooks/exhaustive-deps }, [timeBottmSheetState.variant]); - usePreventBodyScroll({ isOpen: timeBottmSheetState.isOpen }); + const autoSetStartTime = () => { + // 시작 시간이 아직 설정 안됨 or 시작 시간이 종료 시간보다 이후일 경우 + if ( + !getValues('startTime') || + getValues('startTime') >= getValues('endTime') + ) + setValue('startTime', subtractMinutes(pickerValue, 50)); + }; + + const autoSetEndTime = () => { + // 끝 시간이 아직 설정 안됨 or 시작 시간이 종료 시간보다 이후일 경우 + if (!getValues('endTime') || getValues('startTime') >= getValues('endTime')) + setValue('endTime', addMinutes(pickerValue, 50)); + }; const handleDoneButtonClick = () => { if (timeBottmSheetState.variant === 'start') { setValue('startTime', convertTo24HourFormat(pickerValue)); - if (!getValues('endTime')) - setValue('endTime', addMinutes(pickerValue, 50)); + autoSetEndTime(); } else if (timeBottmSheetState.variant === 'end') { setValue('endTime', convertTo24HourFormat(pickerValue)); + autoSetStartTime(); } setTimeBottmSheetState((prev) => ({ ...prev, isOpen: false })); }; diff --git a/features/record/utils/time.ts b/features/record/utils/time.ts index ced3c74e..c8d1b6ff 100644 --- a/features/record/utils/time.ts +++ b/features/record/utils/time.ts @@ -67,6 +67,34 @@ export const addMinutes = ( return `${newHour}:${newMinute}`; }; +export const subtractMinutes = ( + pickerValue: { + ampm: AmpmType; + hour: HourType; + minute: MinuteType; + }, + minutesToSubtract: number, +) => { + let hour24 = parseInt(pickerValue.hour, 10); + if (pickerValue.ampm === '오후' && hour24 !== 12) { + hour24 += 12; + } + if (pickerValue.ampm === '오전' && hour24 === 12) { + hour24 = 0; + } + + const date = new Date(); + date.setHours(hour24); + date.setMinutes(parseInt(pickerValue.minute, 10)); + + date.setMinutes(date.getMinutes() - minutesToSubtract); + + const newHour = date.getHours().toString().padStart(2, '0'); + const newMinute = date.getMinutes().toString().padStart(2, '0'); + + return `${newHour}:${newMinute}`; +}; + export const compareTime = (time1: string, time2: string) => { const [hour1, minute1] = time1.split(':').map(Number); const [hour2, minute2] = time2.split(':').map(Number);