캘린더 일정관리 - 시작시간 / 종료시간 유효성

캘린더 일정 등록/수정 시 시간 유효성 검사 구현하기

캘린더에 일정을 등록하거나 수정할 때 시작 시간이 종료시간보다 늦거나, 종료시간이 시작시간보다 빠른 것 과 같이 논리적으로 맞지 않는 시간 설정을 방지하기 위해 유효성 검사가 필요했다.

 

 

완성 모습

 

구현 과정

1. 시간 데이터를 분 단위로 변환하는 함수 만들기

시간과 분을 선택하면 "12:00" 형태로 상태에 저장되는 값들을 비교계산하기 쉽도록 분 단위로 변환하는 함수를 만들었다.

  // 시간을 분으로 변환
  const convertTimeToMinutes = (time: string) => {
    const [hours, minutes] = time.split(":").map(Number);
    return hours * 60 + minutes;
  };

 

 

2. 유효성 검사 로직 추가

선택된 시간을 부모컴포넌트에 전달해주는 확인 버튼 핸들러에 유효성 검사 로직을 추가해주었다.

 

☀︎ 시작 시간 선택 중(selectingType === "start") + 이미 종료 시간이 설정되어 있는 경우(eventEnd)

     → 시작 시간이 기존 종료 시간보다 늦지 않은지 검증

☀︎ 종료 시간 선택 중(selectingType === "end") + 이미 시작 시간이 설정되어 있는 경우(eventStart)

     → 선택된 종료 시간이 기존 시작 시간보다 이르지 않은지 검증

 

모든 유효성 검사를 통과하면 선택된 시간을 부모 컴포넌트에 전달해준다.

// 확인&유효성(시작시간 < 종료시간)
  const handleConfirm = () => {
    const selectedTime = `${selectedHour}:${selectedMinute}`;
    const selectedMinutes = convertTimeToMinutes(selectedTime);

   // 시작 시간 선택 시
    if (selectingType === "start" && eventEnd) {
      const endMinutes = convertTimeToMinutes(eventEnd);
      if (selectedMinutes >= endMinutes) {
        alert("시작 시간이 종료 시간보다 늦을 수 없습니다! 다시 확인해주세요!");
        return;
      }
    }

   // 종료 시간 선택 시
    if (selectingType === "end" && eventStart) {
      const startMinutes = convertTimeToMinutes(eventStart);
      if (selectedMinutes <= startMinutes) {
        alert("종료 시간이 시작 시간보다 빠를 수 없습니다! 다시 확인해주세요!");
        return;
      }
    }

    onTimeSelect(selectedTime);
    onClose();
  };

 

 

🧐 느낀점

신박한 다른 유효성 체크 방법들도 있겠지만 나는 시간을 비교할때 분으로 만들어서 계산을 하면 숫자 크기로만 비교를 하면 되니까 좀더 편할 것 같다는 생각이 들었다. 추가적으로 존재하는 일정의 시간은 선택하지 못하도록 유효성을 추가해줘야하는데.. 어떻게 구현을 해야할지 고민을 해봐야겠다.