D-day 구현하기

아직 구현하지 못한 프로젝트의 나머지 기능들을 구현해보고자 한다.

1. D-day 구현하기

만들려고 하는 것이 구글에 돌아다니는 d-day 만들기와는 구조적으로 조금 달라 상당히 해멨지만, 직관적으로 어렴풋이 복잡하진 않을 것 같다는 느낌이 들었다.

그렇게 코드를 이해하는 데 상당한 시간을 들이길, 지금 상황에서 불필요한 코드들을 전부 쳐내고 심플하게 접근하는 방법으로 원하는 기능을 구현해낼 수 있었다.

let today = new Date()
let dDay = new Date(date)
let remain = today - dDay
let diffDay = Math.floor(remain / (1000 * 60 * 60 * 24))

2. D-day가 0이 되면(영화가 개봉하면) 목록에서 없애기

if (diffDay === 0) {
    $('.pre-movies').hide()
}

조건식을 어떻게 써야하나 GET 함수를 벗어나 따로 함수도 만들어보고 하며 위치를 고민한 결과, 그냥  $('#preBox').append(temp_html) 뒤에 붙이면 됐다.

3. 개봉 일자 정해지지 않은 영화에 D-day 표기 없애기

if (schedule === '개봉예정') {
    $('.D-day').hide()
}

2번의 방법을 그대로 사용해봤다.

그런데 영화들에 표기되어 있던 d-day가 전부 사라지는 문제가 발생했다.

 

if (schedule === '개봉예정') {
    $('#D-day').hide()
}

그래서 d-day의 class를 id로 바꿔서 시도해보았다.

그러자 개봉예정 영화 중 가장 처음에 위치한 영화의 d-day만 사라지는 문제가 발생했다.

 

규칙성을 찾기 위해 여러 시도를 해봤지만 도저히 규칙성을 찾을 수 없었기에, 나는 다른 방법을 찾아야 할 수밖에 없었다.

그렇게 생각해낸 방법은 아예 temp_html을 붙일 때 조건을 넣어버리는 것.

let temp_html = ``
if (schedule === '개봉예정') {
    temp_html = `<div class="pre-movies">
                ${link}"><img src="${img}" style="width: 250px"></a>
                <h4 class="text">${title} </h4>
                <h5 style="margin-top: 5px; margin-bottom: 5px;">${booking}</h5>
                <h5 style="color: gray; margin-top: 5px">${date} ${schedule}</h5>
            </div>`
} else {
    temp_html = `<div class="pre-movies">
                ${link}"><img src="${img}" style="width: 250px"></a>
                <h4 class="text">${title} </h4>
                <h5 style="margin-top: 5px; margin-bottom: 5px;">${booking}</h5>
                <h5 style="color: gray; margin-top: 5px">${date} ${schedule} <span id="D-day" style="color: red">D${diffDay}</span></h5>
            </div>`
}

그러자 신기하게도 기능이 제대로 구현이 되었다.

 

도대체 먼저 방법이 안 됐었던 이유는 뭘까...?

4. 2번 수정하기

3번에서 사용한 방법이 좀 더 안정성이 높다는 판단 하에 2번의 조건식을 삭제하고 else if로 추가했다.

if (schedule === '개봉예정') {
    temp_html = `<div class="pre-movies">
                ${link}"><img src="${img}" style="width: 250px"></a>
                <h4 class="text">${title} </h4>
                <h5 style="margin-top: 5px; margin-bottom: 5px;">${booking}</h5>
                <h5 style="color: gray; margin-top: 5px">${date} ${schedule}</h5>
            </div>`
} else if (diffDay === 0) {
    $('.pre-movies').hide()
} else {
    temp_html = `<div class="pre-movies">
                ${link}"><img src="${img}" style="width: 250px"></a>
                <h4 class="text">${title} </h4>
                <h5 style="margin-top: 5px; margin-bottom: 5px;">${booking}</h5>
                <h5 style="color: gray; margin-top: 5px">${date} ${schedule} <span style="color: red">D${diffDay}</span></h5>
            </div>`
}

 

 

이로써 내가 맡은 페이지가 모든 기능을 갖추게 되었다.

이제 마무리로 모바일 화면처리를 해 볼 생각이다.