[희락] 교회일정 페이지 마무리

---

밑에 이벤트 리스트들을 드롭다운해 보여주는게 있는데, 이때는 패치된 데이터를 필터링해 보내줘야함. 이때 엄청 긴 일정도 뜰 수있도록 수정!

InfoEvents.tsx

const fetchEvents = async (viewMonth: string) => {
    try {
      console.log("fetchEvents:", viewMonth);
      const today = new Date(viewMonth);
      const fromDate = addMonth(today, -1);
      const toDate = addMonth(today, 2);
      const events = await getEvents(
        getDateString(fromDate),
        getDateString(toDate),
        100
      );
      // 날짜 객체로 변환
      events.forEach((event: WithId<ChurchEvent>) => {
        event.start_date = new Date(event.start_date);
        event.end_date = new Date(event.end_date);
      });
      // console.log("converted date fetch events", events);

      const filteredEvents = events.filter((event: WithId<ChurchEvent>) => {
        const eventStartMonth = event.start_date.getMonth() + 1;
        const eventEndMonth = event.end_date.getFullYear() != 1970 ? event.end_date.getMonth() + 1 : null;
        const viewMonthNumber = parseInt(viewMonth.split("-")[1]);
        const isEventInMonth = eventEndMonth 
        ? (eventStartMonth <= viewMonthNumber && eventEndMonth >= viewMonthNumber) 
        : (eventStartMonth === viewMonthNumber);
      return isEventInMonth;

      });
      setFilteredEvents(filteredEvents);
      setEvents(events);
    } catch (error) {
      console.log("event fetch error", error);
    }
  };

event들을 fullcalendar에 보내줄때는 3달에 해당하는 데이터를, 밑에 드롭다운으로 그달의 이벤트들을 보여주기 위해 데이터를 보내줄 때에는 해당달에 걸쳐있는 이벤트들을 보내준다!

이때 이벤트의 end_date가 없을때(하루동안만 진행하는 이벤트)에는 자동으로 1970년도 01월 데이터가 들어가져서 년도가 1970년일때를 기준으로 필터링 해줬다!

ChurchEventView.tsx

<div className="my-3">
  일시:{" "}
  {`${getDateString(event.start_date)} ${
    event.end_date.getFullYear() !== 1970 ? "~" + getDateString(event.end_date) : ""
  }`}
</div>

추가로 이벤트 목록부분에서 end_date가 없을때에는 시작날짜만 보일 수 있도록 수정하였다!

---

그리고 교회일정을 수정하거나 추가할때에 end_date를 입력하지 않았을때에 유효성검사가 뜨는 오류가 있어서 수정해주었다!
(end_date는 선택적으로 들어감)
시작날짜 종료날짜 유효성검사도 종료날짜가 존재할때로 수정해주었다

event.ctrl.ts

// 필수 필드 확인
  if (!title || !content || !start_date) {
    console.log("제목내용 입력 오류");
    return res.status(500).json({
      message: "제목, 내용, 시작 날짜, 종료 날짜는 필수 입력 항목입니다.",
    });
  }

  // 시작 날짜가 종료 날짜보다 이전인지 확인
  if(end_date){
  if (new Date(start_date) >= new Date(end_date)) {
    console.log("날짜 오류");
    return res
      .status(500)
      .json({ message: "시작 날짜는 종료 날짜보다 이전이어야 합니다." });
  }}

---

결과