🍪 Cookie Store API 완벽 가이드: document.cookie의 종말과 비동기·서비스워커 쿠키 제어

// 기존 document.cookie 사용의 전형적인 모습
// 1. 쿠키 읽기: 단순 문자열로 반환되어 직접 정규식이나 split()으로 파싱해야 함
const getCookie = (name) => {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
};

// 2. 쿠키 쓰기: 속성 할당 연산자(=)처럼 보이지만 실제로는 커스텀 파싱 세터 동작
document.cookie = "user_theme=dark; path=/; max-age=31536000; SameSite=Lax;";

// Cookie Store API를 활용한 깔끔한 비동기 쿠키 조회
try {
  const sessionCookie = await cookieStore.get('session_id');
  if (sessionCookie) {
    console.log('세션 값:', sessionCookie.value);
    console.log('만료 시간:', new Date(sessionCookie.expires));
  }
} catch (err) {
  console.error('쿠키 읽기 실패:', err);
}

// 특정 이름으로 쿠키 검색
const userToken = await cookieStore.get('auth_token');

console.log(userToken);
/* 출력 결과 (Cookie Object):
{
  name: "auth_token",
  value: "eyJhbGciOiJIUzI1NiIsIn...",
  domain: "example.com",
  path: "/",
  expires: 1762512000000,
  secure: true,
  sameSite: "lax"
}
*/

// 1. 모든 쿠키 가져오기
const allCookies = await cookieStore.getAll();
console.log(`현재 저장된 총 쿠키 개수: ${allCookies.length}`);

// 2. 특정 조건(name, url)으로 쿠키 검색
const prefixCookies = await cookieStore.getAll({
  name: 'theme_',
  url: 'https://example.com/dashboard'
});

// 기본 옵션으로 쿠키 설정 (기본 path='/', sameSite='lax' 적용)
await cookieStore.set('sidebar_collapsed', 'true');

// 상세 세팅을 포함한 쿠키 생성
await cookieStore.set({
  name: 'access_token',
  value: 'abc123xyz456',
  expires: Date.now() + 24 * 60 * 60 * 1000, // 24시간 뒤 만료 (ms 단위)
  domain: 'example.com',
  path: '/api',
  secure: true,
  sameSite: 'strict',
  partitioned: false // CHIPS (Cookies Having Independent Partitioned State)
});

// 단순 이름으로 삭제
await cookieStore.delete('sidebar_collapsed');

// 특정 domain 및 path 스코프의 쿠키 정확히 삭제
await cookieStore.delete({
  name: 'access_token',
  domain: 'example.com',
  path: '/api'
});

// 창/탭 내부에서 쿠키 변화 구독
cookieStore.addEventListener('change', (event) => {
  console.log('--- 쿠키 변경 감지됨 ---');
  
  // 새로 추가되거나 변경된 쿠키 목록
  for (const cookie of event.changed) {
    console.log(`[변경/추가] ${cookie.name} = ${cookie.value}`);
    if (cookie.name === 'user_theme') {
      applyTheme(cookie.value);
    }
  }

  // 삭제된 쿠키 목록
  for (const cookie of event.deleted) {
    console.log(`[삭제됨] ${cookie.name}`);
    if (cookie.name === 'auth_token') {
      redirectToLogin();
    }
  }
});

// sw.js - 서비스 워커 내부 코드
self.addEventListener('activate', (event) => {
  event.waitUntil(
    // 특정 쿠키 목록의 변경 사항에 대한 구독 등록
    self.registration.cookies.subscribe([
      { name: 'session_token', url: '/api' }
    ])
  );
});

// 쿠키 변경 백그라운드 이벤트 처리
self.addEventListener('cookiechange', (event) => {
  const sessionChange = event.changed.find(c => c.name === 'session_token');
  const sessionDeleted = event.deleted.find(c => c.name === 'session_token');

  if (sessionDeleted) {
    console.log('[SW] 세션 쿠키 삭제됨: 오프라인 캐시 및 동기화 상태 초기화');
    clearUserDataCache();
  } else if (sessionChange) {
    console.log('[SW] 세션 쿠키 변경됨: 새로운 헤더 갱신 준비');
  }
});

await cookieStore.set({
  name: '__Host-session',
  value: 'secure_value_xyz',
  // 1. Secure: 보안 연결(HTTPS)에서만 전송
  secure: true,
  // 2. SameSite: 'strict' | 'lax' | 'none'
  sameSite: 'strict',
  // 3. Partitioned: CHIPS 표준 지원 (서드파티 파티셔닝 쿠키)
  partitioned: true,
  // 4. Path: 쿠키 유효 경로 지정
  path: '/'
});

if ('cookieStore' in window) {
  // Cookie Store API 사용
  await cookieStore.set('key', 'value');
} else {
  // 폴리필 또는 document.cookie 대체
  document.cookie = "key=value; path=/";
}

// safeCookieStore.js
export const safeCookieStore = {
  async get(name) {
    if ('cookieStore' in window) {
      const cookie = await window.cookieStore.get(name);
      return cookie ? cookie.value : null;
    }
    // Fallback: document.cookie 파싱
    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? decodeURIComponent(match[2]) : null;
  },

  async set(name, value, options = {}) {
    if ('cookieStore' in window) {
      await window.cookieStore.set({
        name,
        value,
        path: options.path || '/',
        expires: options.maxAgeDays ? Date.now() + options.maxAgeDays * 86400000 : undefined,
        sameSite: options.sameSite || 'lax',
        secure: options.secure !== false
      });
    } else {
      // Fallback: document.cookie
      let cookieStr = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; path=${options.path || '/'}`;
      if (options.maxAgeDays) {
        cookieStr += `; max-age=${options.maxAgeDays * 86400}`;
      }
      if (options.sameSite) {
        cookieStr += `; SameSite=${options.sameSite}`;
      }
      if (options.secure !== false) {
        cookieStr += `; Secure`;
      }
      document.cookie = cookieStr;
    }
  },

  async delete(name, path = '/') {
    if ('cookieStore' in window) {
      await window.cookieStore.delete({ name, path });
    } else {
      document.cookie = `${encodeURIComponent(name)}=; path=${path}; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
    }
  }
};