[javascript] 모달팝업 만들기(오늘그만보기, 기간설정, cookie)

jquery cookie 플러그인 사용 시 첨부

<!-- jquery cookie cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js" integrity="sha512-3j3VU6WC5rPQB4Ld1jnLV7Kd5xr+cq9avvhwqzbH/taCRNURoeEpoPBK9pDyeukwSxwRPJ8fDgvYXd6SkaZ2TA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- jquery cookie 다운받아서 쓸경우-->
<script type="text/javascript" src="./jquery.cookie.min.js"></script>

script 시작!

// ===== 팝업 관리 (순번, 타이틀(선택), 연결링크, 이미지주소, 게시마지막날)
let popList = [
  {'num':1, 'title':'팝업1', 'href':'', 'src':'/images/popup/test1.png', 'endDate':'2023-08-17'},
  {'num':2, 'title':'팝업2', 'href':'', 'src':'/images/popup/test2.png', 'endDate':'2023-08-19'},
  {'num':3, 'title':'팝업3', 'href':'', 'src':'/images/popup/test3.png', 'endDate':'2023-08-20'}
];

$(function () {
	popList.forEach(function(el, index){ makePopList(el, index);}); // 팝업생성
  	getCookie(); // 쿠키체크
  	popDayChk(); // 기간체크
});


// 0. 팝업처럼 생긴 모달 만들기 
// html에 만들어도 되지만 id, data-num, 게시기간 관리를 위해서
function makePopList(el, index){
  $('.pop-wrap').append(`
	<article class="pop-main" id="popMain${el.num}">
		<div class="popbody" >
			<a href="${el.href}">
				<img src="${el.src}" width="100%" height="100%"> 
			</a>
		</div>
		<div class="popfooter between px-3 py-2 fs-14" data-num="${el.num}">
			<button class="text-white">
				<i class="fa-solid fa-check me-1" style="color: #ffffff;"></i>오늘그만보기
			</button>
			<button type="button" class="text-white" >닫기</button>
		</div>          
	</article>`
  );
}



// 1. 쿠키 있는지 확인
function getCookie(){
  let num = $('.pop-wrap').children('.pop-main').length; // 팝업개수
  
  for(let i = 1; i <= num; i++){
    let cookieChk = $.cookie(`popup${i}`); // 쿠키 name 가져오기
    
    // 팝업 id와 동일한 쿠키 name이 있을 경우 해당 팝업 삭제
    cookieChk ? $(`#popMain${i}`).remove() : $(`#popMain${i}`).show();
  }
}





// 2. 게시날짜 체크
function popDayChk(){        
  let toDay = new Date().toISOString().substring(0,10);
  for(let i = 0; i<popList.length; i++){
    if(toDay > popList[i].endDate) $(`#popMain${popList[i].num}`).remove();
  }
}




// 3. 팝업 닫기
function closePop(obj){
  let num = $(obj).parent().data('num'); // 팝업이 여러개일경우 data-num을 받아서 처리
  $(`#popMain${num}`).remove(); // remove()쓰면 가운데 팝업을 닫아도 자동정렬됨
}



// 4. 오늘그만보기(자정에 쿠키삭제)
function closePopOneDay(obj){
  let num = $(obj).parent().data('num'); // 팝업이 여러개일경우 data-num을 받아서 처리
  
  let date = new Date();
  date.setHours(24,0,0); // 자정으로 셋팅(쿠키에는 UTC 15시로 표기)
  $.cookie(`popup${num}`,"hide",{expires:date, path:"/"});

  closePop(obj); // 팝업닫기
}

// 4-1. 하루동안 보지않기(1일)
function closePopOneDay(obj){
  let num = $(obj).parent().data('num'); // 팝업이 여러개일경우 data-num을 받아서 처리
  
  // 시간계산 없이 expires:1 해주면됨
  $.cookie(`popup${num}`,"hide",{expires:1, path:"/"});
  
  closePop(obj); // 팝업닫기
}

---

1. cookie

• 쿠키보는 법 : 개발자도구 - application - Cookies 에서 확인가능
• 쿠키 삽입 (jquery와 javascript 비교)

// ---------- 전체 사이트에 대해 7일 뒤에 만료되는 쿠키 생성 ----------- //

// jquery
$.cookie('name', 'value', { expires: 7, path: '/' });

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

• 쿠키 보기 (jquery와 javascript 비교)

// --------- name값으로 value 확인 ---------- //

// jquery
$.cookie('name'); // => "value"
$.cookie('nothing'); // => 없는 name값일 경우 undefined 반환

// javascript
function getCookie(name) {
  var cookie = document.cookie; // 전체 쿠키가져옴

  if (document.cookie != "") {
    var cookie_array = cookie.split("; "); // ; 기준으로 나누기
    for ( var index in cookie_array) {
      var cookie_name = cookie_array[index].split("="); // = 기준으로 나누기

      if (cookie_name[0] == "name") { 
        return cookie_name[1];
      }
    }
  }
  return ;
}
getCookie('name'); // => "value"

---

2. expires 와 시간표기

• 쿠키를 삽입후 expires를 확인하면 원하는 시간과 다른 시간이 나오는것을 확인할 수 있음
• 쿠키의 expires 옵션은 반드시 GMT(Greenwich Mean Time)포맷으로 설정되어야 하는데
• GMT / UTC 포맷은 우리나라 표준시보다 9시간 느림
• 예) UTC상으로 15시이면 우리나라 표준시는 24시(15+9시간)
• toGMTString(), toUTCString() 메서드로 변경할 수 있음

let todayDate = new Date();
            
console.log(todayDate); // Thu Aug 17 2023 19:10:55 GMT+0900 (한국 표준시)
console.log(todayDate.toGMTString()); // Thu, 17 Aug 2023 10:10:55 GMT
console.log(todayDate.toUTCString()); // Thu, 17 Aug 2023 10:10:55 GMT

• 참고로 우리나라 표준시로 쉽게 바꾸고 싶다면 toString() 쓰면 됨

var date = new Date('Thu, 17 Aug 2023 10:10:55 GMT');
console.log(date.toString()); // Thu Aug 17 2023 19:10:55 GMT+0900 (한국 표준시)