const layerShow = ref(true);
const cookieValue = useCookie('layerShow');

function doTodayClose() {
  cookieValue.value = "1";
  layerShow.value = false;
}

(() => {
  if(cookieValue.value) layerShow.value = false;
})()

useCookie('name')

• useCookie의 매개변수('name')에 원하는 이름을 넣어준다.
• 해당 이름의 쿠키 값이 변수(cookieValue)로 들어간다.
• cookieValue에 값을 할당하여 쿠키값을 할당할 수 있다.

doTodayClose()

• '오늘 하루 보지 않기'를 눌렀을 때 작동하는 함수
• 쿠키에 값을 넣어주고 레이어를 닫는다.

setup 즉시실행 함수

• setup에서 cookieValue를 확인하고 값이 있다면 layer를 닫아준다.
• onMounted에서 해줘도 된다.

JS로 만료 기한까지 주기

// 쿠키 관련 함수
var handleCookie = {
    // 쿠키 쓰기 (이름, 값, 만료일)
    setCookie: function (name, val, exp) {
      var date = new Date();

      // 만료 시간 구하기(만료일을 ms단위로 변경)
      date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);
      console.log(name + "=" + val + ";expires=" + date.toUTCString() + ";path=/");

      // 실제로 쿠키 작성하기
      document.cookie = name + "=" + val + ";expires=" + date.toUTCString() + ";";
    },
    // 쿠키 읽어오기(쿠키 이름을 기준으로 정규식 이용해서 가져오기)
    getCookie: function (name) {
      var value = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
      return value ? value[2] : null;
    }
};

• getCookie의 마지막 return인 value[2]는 쿠키의 값이다.
• 값이 없으면 null을 반환
• 정규식 써주는 거 왜케 복잡하게 만들었지?
• 이걸 nuxt에 적용 못한 이유는 document를 자꾸 못 읽어서다!!!!!

참고 사이트

• https://songsong.dev/entry/%EC%98%A4%EB%8A%98-%ED%95%98%EB%A3%A8-%EB%B3%B4%EC%A7%80-%EC%95%8A%EA%B8%B0-%ED%8C%9D%EC%97%85-%EB%A7%8C%EB%93%A4%EA%B8%B0