[프로젝트 개선] - 웹사이트 제작 13.팝업창 (+ 오늘 하루 보지 않기)

JINI·2023년 5월 2일

[spring] 팀프로젝트 - 짐 보관 예약 웹사이트

목록 보기

23/35

✍️들어가기에 앞서

정한 기간 내에 팀프로젝트를 끝내야 했기에 아쉽게 추가하지 못한 기능들도 있었고 정리하면서 보니 보완할 점이 생각보다 많이 보였다.
새로운 프로젝트를 하는 것도 좋지만 있는 프로젝트에 새로운 기능을 추가해 보완해 프로젝트의 퀄리티를 높이는 것이 낫다고 생각해서 추가하고 싶었던 기능들을 구현해 보려고 한다.

웹사이트 방문 시 팝업창이 뜬다.
단순히 닫기 버튼을 클릭하면 새로고침이나 재방문시 계속해서 팝업창이 열리지만 하루동안 보지 않기를 클릭하면 사용자에게 쿠키가 생성되고 지정된 시간 동안 뜨지 않는다.

✂️ 메인페이지 방문 시 뜨는 팝업창 ( 쿠키 생성 전)

🧩팝업창

✔️ 웹사이트 방문 시 팝업창 띄우기
✔️ 닫기 버튼 클릭 시 팝업창 종료
✔️ 오늘 하루 보지 않기 클릭 시 쿠키 생성 후 지정 시간동안 팝업창 종료

📕 코드 작성

팝업창이 띄워지면 되는 단순한 작업이라 컨트롤러 부분은 필요하지 않다.

<div id="check">
	<input type="checkbox" value="checkbox" id='chkbox'>
    <label for="chkbox">&nbsp&nbsp오늘 하루동안 보지 않기</label>
</div>
<div id="close">
	<a href="javascript:closePop();">닫기</a>
</div>

닫기/오늘 하루 보지 않기 코드를 작성한 부분이다.
닫기는 버튼으로 동작하고 하루동안 보지 않기는 checkbox로 체크한 뒤 닫기 버튼을 클릭하면 해당 자바스크립트 javascript:closePop(); 코드가 실행된다.

📗Javascript 코드로 구현

📝 1. 쿠키 생성 📝

하루동안 보지 않기를 클릭 했을 때 정해진 시간동안 팝업창이 뜨는 것을 막으려면 쿠키를 설정해야한다.


function setCookie( name, value, exDay ) {
            var todayDate = new Date();
            todayDate.setDate( todayDate.getDate() + exDay ); 
            document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
        }

그날 방문한 날짜를 기준으로 쿠키 생성을 위해 날짜 함수를 가져온다.
오늘 날짜에 쿠키 만료일을 지정하고 쿠키도 설정해 주었고 경로는 최상위로 지정해 주어야 제대로 작동한다.

📝 2. 팝업창 닫기 📝

✔️닫기
✔️하루동안 보지 않기

function closePop() {
    //닫기
    if ( cookiedata.indexOf("popup=done") < 0 ){     
        document.all['layer_popup'].style.visibility = "visible";
    }
    else {
        document.all['layer_popup'].style.visibility = "hidden";
    }
     //하루동안 보지 않기
      if ( document.pop_form.chkbox.checked ){
           setCookie( "popup", "done" , 1 ); // 저장될 쿠키명 , 쿠키 value값 , 기간
            }
            document.all['layer_popup'].style.visibility = "hidden";
        }
    cookiedata = document.cookie;