chore: time-picker 자동 설정 로직을 일부 상황에서 추가합니다.

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<RecordRequestProps> = 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;

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 }));
   };

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);