Web API

// Web Storage API - 브라우저에 데이터 저장
// localStorage: 영구 저장 (브라우저 종료해도 유지)
// sessionStorage: 세션 동안만 유지

// 1. 기본 사용법
localStorage.setItem('username', 'kaitrust');
const username = localStorage.getItem('username'); // 'kaitrust'
localStorage.removeItem('username');
localStorage.clear(); // 전체 삭제

// 2. 객체 저장 (JSON 변환 필수)
const userSettings = {
  theme: 'dark',
  language: 'ko',
  notifications: true
};

// 저장
localStorage.setItem('settings', JSON.stringify(userSettings));

// 불러오기
const savedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(savedSettings.theme); // 'dark'

// 3. 실무 패턴: 유틸리티 함수
const storage = {
  set(key, value, expiresInDays = null) {
    const item = {
      value,
      timestamp: Date.now(),
      expires: expiresInDays
        ? Date.now() + (expiresInDays * 24 * 60 * 60 * 1000)
        : null
    };
    localStorage.setItem(key, JSON.stringify(item));
  },

  get(key) {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) return null;

    const item = JSON.parse(itemStr);

    // 만료 확인
    if (item.expires && Date.now() > item.expires) {
      localStorage.removeItem(key);
      return null;
    }

    return item.value;
  }
};

// 사용 예: 7일 후 만료되는 토큰 저장
storage.set('authToken', 'abc123', 7);
const token = storage.get('authToken');

// Intersection Observer API - 요소 가시성 감지
// 무한 스크롤, 레이지 로딩, 애니메이션 트리거에 활용

// 1. 무한 스크롤 구현
const infiniteScrollObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 마지막 요소가 보이면 다음 데이터 로드
        loadMoreData();
      }
    });
  },
  {
    root: null, // viewport 기준
    rootMargin: '100px', // 100px 전에 미리 로드
    threshold: 0 // 조금이라도 보이면 트리거
  }
);

// 마지막 아이템 관찰
const sentinel = document.querySelector('#load-more-trigger');
infiniteScrollObserver.observe(sentinel);

// 2. 이미지 레이지 로딩
const lazyImageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // data-src -> src
      img.classList.add('loaded');
      lazyImageObserver.unobserve(img); // 로드 후 관찰 중지
    }
  });
});

// 모든 lazy 이미지에 적용
document.querySelectorAll('img[data-src]').forEach(img => {
  lazyImageObserver.observe(img);
});

// 3. 스크롤 애니메이션 (요소가 보일 때 페이드인)
const fadeInObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  },
  { threshold: 0.1 } // 10% 보이면 트리거
);

document.querySelectorAll('.fade-in-element').forEach(el => {
  fadeInObserver.observe(el);
});