TIL 최종프로젝트(15) 프론트엔드 수정

2023.06.28 수 <- 새벽에 작성 중입니다 00시가 넘었네요

 

[기존코드]

  const eventListContainer = document.getElementById('event_list');
  response_json.forEach(element => {
(코드생략)
    const get_event_start_date = element.event_start_date;
    const get_event_end_date = element.event_end_date;
(코드생략)	

	const currentDate = new Date();
    const eventStart = new Date(get_event_start_date); 
    const eventEnd = new Date(get_event_end_date); 
    const oneDay = 24 * 60 * 60 * 1000;
    const diffDaysStart = Math.round(Math.abs((currentDate - eventStart) / oneDay));
    const diffDaysEnd = Math.round(Math.abs((currentDate - eventEnd) / oneDay));
    console.log(currentDate,eventStart ,diffDaysStart)
    const reservationTag = document.createElement('p');
    reservationTag.classList.add('reservation');
    if (currentDate >= eventStart && currentDate <= (eventEnd - 7 * oneDay)) {
      reservationTag.innerText = '행사중';
    } else if (diffDaysStart > 0 ) {
      reservationTag.innerText = '행사예정';
    } else if (diffDaysEnd <= 7 && diffDaysEnd > 0) {
      reservationTag.innerText = '마감임박';
    } else {
      reservationTag.innerText = '삑'; 
    }
(코드생략)
)};

 

[문제]

event_start_date: "2023-06-28"

event_end_date: "2023-07-20" 의 값을 가진 행사가 2023.06.27에 '삑' 값을 가집니다!

 

삑은 행사중, 행사예정, 마감임박 모든 조건을 통과하지 못할 경우 출력합니다.

문제가 되는 행사는 공연예정 값을 받아야 합니다.

 

[시도]

조건문 사용을 확인했습니다. 

diffDaysStart가 0보다 클 때를 조건으로 가집니다. diffDaysStart는 현재 날짜에 event_start_date를 빼고 하루 단위로 나눈 값을 가집니다.

즉, event_start_date: "2023-06-28"값을 가지는 행사는 2023.06.27 날짜에 1의 값을 가집니다.

 

그렇기에 diffDaysStart가 0보다 크기 때문에 행사예정을 출력해야 했습니다.

 

[해결]

console.log를 찍어보았습니다. diffDaysStart가 0이였습니다.

왜 이런 일이 일어난 것일까요?

확인 결과 시간 값 때문에 발생한 문제였습니다.

    currentDate.setHours(0, 0, 0, 0);

해당 코드를 추가하였더니 문제가 해결되었습니다.

  const eventListContainer = document.getElementById('event_list');
  response_json.forEach(element => {
(코드생략)
    const get_event_start_date = element.event_start_date;
    const get_event_end_date = element.event_end_date;
(코드생략)	

	const currentDate = new Date();
    currentDate.setHours(0, 0, 0, 0);
    const eventStart = new Date(get_event_start_date); 
    const eventEnd = new Date(get_event_end_date); 
    const oneDay = 24 * 60 * 60 * 1000;
    const diffDaysStart = Math.round(Math.abs((currentDate - eventStart) / oneDay));
    const diffDaysEnd = Math.round(Math.abs((currentDate - eventEnd) / oneDay));
    console.log(currentDate,eventStart ,diffDaysStart)
    const reservationTag = document.createElement('p');
    reservationTag.classList.add('reservation');
    if (currentDate >= eventStart && currentDate <= (eventEnd - 7 * oneDay)) {
      reservationTag.innerText = '행사중';
    } else if (diffDaysStart > 0 ) {
      reservationTag.innerText = '행사예정';
    } else if (diffDaysEnd <= 7 && diffDaysEnd > 0) {
      reservationTag.innerText = '마감임박';
    } else {
      reservationTag.innerText = '삑'; 
    }
(코드생략)
)};

+)

    currentDate.setHours(0, 0, 0, 0);

currentDate에만 시간 값을 변경해주니 이번에는 공연 당일이 되었을 때 ,삑을 출력하는 문제가 발생했습니다.

우리는 이미 해결방법을 알고 있습니다.

eventStart.setHours(0, 0, 0, 0);
eventEnd.setHours(0, 0, 0, 0);

코드를 추가해주겠습니다.

행사중이 잘 출력됩니다.

 

[느낀점]

문제 하나가 해결되지 않아 새벽까지 남아 있습니다.

뭐가 문제인지 모르겠습니다.

 

예상가는 부분은 몇 가지 있는데 다 아닌 거 같습니다. 로컬에서 잘 되는데 여전히 배포환경에서는 안되네요