[팀] 겸상 - Javascript의 날짜 계산 이용해 밥상 상태 정보 변경 기능 구현

[그림 1] 밥상 상태 표시 구현 화면

 

밥상의 상태 표시는 "모집 중", "모집 마감"이다. 현재 시각을 기준으로 "식사 일시"가 지나지 않았고, 선택된 숟갈이 모집 정원에 미달한다면 "모집 중"으로 상태를 표시해야 한다. 이때 "식사 일시"가 지났는지 여부를 알 수 있는 방법을 코드로 작성할 때 어떻게 해야 하나 고민했다.

적용한 방법은 문자열로 되어 있는 "식사 일시" 정보를 new Date()를 이용해 날짜 정보로 바꾼 후 getTime()을 이용해 시간(연산이 가능한 숫자)으로 변환하여 계산하는 것이다. 해당 코드는 아래와 같다. 참고로 적용된 정규식은 날짜 정보를 YYYY-MM-DD hh:mm:ss 형태의 문자열로 변경한다.

async doStatusInitial() {
    let nowTime = new Date(
        new Date()
            .toISOString()
            .replace('T', ' ')
            .replace(/\..*/, '')
            .toString(),
    ).getTime();
    let diningTime = new Date(
        this.babsangDetailData.dining_datetime,
    ).getTime();
    console.log(nowTime);
    console.log(diningTime);
    // if 조건문에서 앞의 조건은 확정된 인원이 정원을 채웠는지를 체크하는 것이고, 뒤의 조건은 식사 일시가 지났는지 체크하는 것이다.
    if (
        this.babsangDetailData.dining_count - this.selectedUsers.length - 1 >
            0 &&
        nowTime - diningTime < 0
    ) {
        await this.changeStatus(0);
        console.log('모집중');
    }
},

 

참고한 내용은 아래와 같다.

https://www.delftstack.com/ko/howto/javascript/convert-string-to-date-in-javascript/

JavaScript에서 문자열을 날짜로 변환