[팀][문제해결] 겸상 - Safari(iOS)에서 new Date 이슈, day.js로 해결!

밥상 화면에서 겸상 시간이 지나면 "숟갈 얹기" 버튼 등이 disabled 되어 클릭할 수 없도록 코딩하였다. 경상이 완료된 것으로 간주하고 밥상의 정보를 변경할 수 없게 하기 위한 것이었다. 이 기능은 크롬에서도 모바일에서도 모두 문제없이 잘 작동하였고 이러한 작동이 당연했다. 그런데...

[그림 1] 겸상 시간이 지나지 않았는데 disabled된 버튼

 

아이폰을 사용 중인 한 팀원으로부터 [그림 1]과 같이 겸상 시간이 지나지도 않았는데 버튼이 disabled 되어 있는 문제를 접하게 되었다. 그는 추가로 [그림 2]와 같은 스샷도 보내주었다.

 

[그림 2] new Date() 값이  NaN이라니...

 

문제의 원인은 Safari에서 new Date()가 오작동한다는 것이었고 이에 대해 잘 정리된 자료는 다음의 링크와 같다. 

https://2dowon.github.io/docs/javascript/ios-new-date/

Safari(iOS)에서 new Date 이슈

 

위 자료에서 제시한 해결 방법은 moment.js, day.js 모듈을 사용하는 것인데, moment.js는 더 이상의 지원이 없다고 한다. 따라서 day.js를 이용해 문제를 해결하였고 작성한 코드는 다음과 같다.

 

setButtonDisabled() {
    let nowTime = dayjs();
    let diningTime = dayjs(this.babsangDetailData.dining_datetime);
    let result = nowTime.diff(diningTime, 'ms');
    if (result < 0) {
        return false;
    } else {
        return true;
    }
},

 

위 코드를 작성할 때 참조한 day.js 사용 방법은 아래의 링크와 같다.

https://jsikim1.tistory.com/196

day.js 사용 방법 - JavaScript 날짜 라이브러리