캘린더 일정관리 - 일정 시간 중복 체크 유효성 ①

일정 시간 중복 체크 로직 구현하기

기존 등록된 일정과 추가/수정할 시간이 겹치지 않도록 하는 로직을 구현하고자 하였다.

 

완성모습

 

구현과정

 

① 기존 일정의 시간 데이터 가공하기

    이전에 시작/종료시간 유효성 적용을 했을때 만든 시간 → 분 변환 함수를 활용하였다.

    props로 받은  "12:00:00" 형식의 시간 데이터를 사용하기 쉽게 초 부분을 자르고 분으로 변환하였다.

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

  // 존재하는 일정의 시간범위 가공
  const existTimeRanges = calendarData?.map((event) => ({
    start: convertTimeToMinutes(event.start_time.slice(0, -3)),
    end: convertTimeToMinutes(event.end_time.slice(0, -3)),
  }));

 

 

② 시간 중복 체크 로직 만들기

// 선택된 시간이 이미 존재하는지 확인하는 함수
  const checkTimeExist = (selectedMinutes: number) => {
    for (const timeRange of existTimeRanges!) {
      if (selectingType === "start") {
      // 시작 시간 선택 시, 기존 일정의 시작 시간과 동일한경우 || 시작과 종료 시간 사이인 경우
        if (
          selectedMinutes === timeRange.start ||
          (selectedMinutes > timeRange.start && selectedMinutes < timeRange.end)
        ) {
          return true;
        }
      } else {
      // 종료 시간 선택 시, 기존 일정의 시작과 종료 시간 사이인 경우
        if (
          selectedMinutes > timeRange.start &&
          selectedMinutes < timeRange.end
        ) {
          return true;
        }
      }
    }
    return false;
  };

 

 

③ 적용 버튼에 중복 체크 조건 추가

 if (checkTimeExist(selectedMinutes)) {
      alert("등록된 일정 중 겹치는 시간이 있습니다! 확인해주세요!");
      return;
    }

 

 

🚨 발생했던 문제 1

일정 등록 / 일정 수정 기능을 동일한 컴포넌트로 구현을 했는데, 수정 모드일때 테스트를 하면 오류가 조회되었다.

existTimeRanges는 반복 가능하지 않다는 에러 메세지를 보면 가공한 데이터에 문제가 있는 듯 하였고 이 값을 콘솔에 출력해보았다.

- 등록 모드에서 값을 확인했을 때

 

- 수정 모드에서 값을 확인했을 때

 

 

❓ 원인

일정 등록과 수정을 동일한 컴포넌트로 구현하다보니 편집모드의 부모 컴포넌트에서는 calendarData 를 props로 내려주지 않고 있어서 수정모드에서는 데이터 가공자체를 할 수 없는 상태였다.

 

 

✅ 해결

수정모드의 부모컴포넌트에서도 calendarData를 props 전달 해주니 더이상 오류가 발생하지 않았다.

 

 

🚨 발생한 문제 2

앞의 오류를 해결하고 중복 시간이 잘 체크가 되는지 테스트를 해보다가, 수정모드에서 현재 수정중인 데이터는 비교할 데이터에서 제외해야 한다는.. 걸 발견했다..

로직을 다시 좀 뜯어 고쳐야 되네 .. ? 하아.. 모니터 앞에 12시간 넘게 앉아있었더니 머리가 안돌아간다..

내일 수정해야지..