지정된 날짜 이후로 팝업을 해제하는 기능 구현

익일 00시부터 팝업을 해제해달라는 요청을 받았다.

 

JavaScript 단에서 setTimeout()을 통해 처리하면 되겠다는 생각이 들었다. 하지만 setTimeout()을 사용하면 설정한 시간이 지난 후에 팝업이 닫히기는 하지만 새로고침을 할 시에는 다시 팝업이 띄워진다는 문제가 있었다.

 

그도 그럴 것이 현재 팝업창이 동적으로 구현된 것이 아니라 jsp단에 div 태그로 구성이 되어 있었기 때문이다. 따라서 해당 팝업창을 지정된 날짜부터 안 보이게 하려면 해당 날짜에 주석을 하는 것과 같은 기능을 구현해야 했다.

 

나는 계속 앞단에서의 작업이니까 JavaScript로 구현하면 되겠다는 생각에 사로잡혀서 그쪽으로만 방법을 강구하고 있었다.

 

그러다가 옆 자리 슨배임께서 비슷한 작업을 이전에 한 적이 있다면서 코칭을 좀 해주셨다.

 

방법은 JSP 단에서 Java 코드로 구현을 하는 것이었다.

 

Date 함수를 통해 현재 날짜를 구하고, SimpleDateFormat을 통해 형식을 "YYYY-MM-DD"로 설정한다. 그리고나서 팝업을 해제할 날짜를 new Date("YYYY-MM-DD로 지정")로 설정한 후에 팝업창을 구현한 div 태그 쪽에 if문을 통해 분기 처리를 해주면 된다.

 

if문 안의 조건절은 before() 메소드를 통해 오늘 날짜와 지정한 날짜를 비교하는 코드를 짜면 된다.

 

이렇게 간단하게 해당 기능을 구현했다. 간단한 기능을 어렵게 생각한 나 자신에게 실망이 컸지만 앞으로는 코드를 더 많이 짜보면서 하나하나 익혀나가야겠다는 다짐을 하게 되었다.

---

소스 코드

<%
	Date nowDate = new Date(); // 현재 날짜
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); // 날짜 형식을 yyyy-MM-dd로 설정
    Date endDate = sdf.parse("2024-05-04"); // 팝업 해제한 날짜 지정
%>


// 현재 날짜가 지정한 날짜 이전일 때만 팝업을 노출
<% if(nowDate.before(endDate)) { %> 
    <div class="popup_layer">
    	// 팝업 내용
    </div>
<% } %>