🧭 Navigation API 완벽 가이드: history.pushState의 종말과 차세대 SPA 라우팅

// 이 코드는 URL을 바꾸지만, 브라우저는 침묵합니다.
history.pushState({ page: 2 }, '', '/page-2');
// window.addEventListener('popstate', ...)는 반응하지 않습니다!

// 브라우저 뒤로가기, 링크 클릭, 폼 전송, 프로그래밍 방식 이동 모두 이 한 곳으로 집결합니다.
navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept) return;
  
  event.intercept({
    async handler() {
      const response = await fetch(event.destination.url);
      const html = await response.text();
      document.getElementById('app').innerHTML = extractContent(html);
    }
  });
});

navigation.addEventListener('navigate', (event) => {
  // 1. 다운로드 속성이나 크로스 오리진인 경우 가로챌 수 없음
  if (!event.canIntercept) return;

  const url = new URL(event.destination.url);

  // 2. 가로채기 선언
  event.intercept({
    async handler() {
      try {
        // 로딩 스피너 표시
        showGlobalSpinner();
        
        // 라우트 데이터 페칭
        const data = await fetchPageData(url.pathname, { signal: event.signal });
        
        // DOM 갱신
        renderPage(data);
      } finally {
        hideGlobalSpinner();
      }
    },
    // 스크롤 복원 시점 제어 ('after-transition' 또는 'manual')
    scroll: 'after-transition',
    // 네비게이션 완료 후 포커스를 초기화할지 여부
    focusReset: 'after-transition'
  });
});

navigation.addEventListener('navigate', (event) => {
  const dest = event.destination;
  
  console.log('이동 목표 URL:', dest.url);
  console.log('목적지 상태 객체:', dest.getState());
  console.log('기존 히스토리 항목인가?:', dest.key, dest.id, dest.index);

  switch (event.navigationType) {
    case 'push':
      // 일반 링크 클릭 또는 navigation.navigate()
      console.log('새로운 페이지 푸시');
      break;
    case 'replace':
      // 리다이렉트 또는 navigation.navigate(..., { history: 'replace' })
      console.log('현재 엔트리 교체');
      break;
    case 'reload':
      // 브라우저 새로고침 버튼 또는 navigation.reload()
      console.log('페이지 새로고침');
      break;
    case 'traverse':
      // 브라우저 뒤로가기 / 앞으로가기
      console.log('히스토리 탐색 (방문 기록 간 이동)');
      break;
  }
});

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept) return;

  event.intercept({
    async handler() {
      // 사용자가 이 비동기 작업 도중 다른 곳을 클릭하면 event.signal이 즉시 abort됩니다.
      const response = await fetch(`/api/data${new URL(event.destination.url).pathname}`, {
        signal: event.signal
      });
      
      const json = await response.json();
      
      // signal이 취소되었다면 DOM 조작을 스킵할 수 있음
      if (event.signal.aborted) return;
      
      renderView(json);
    }
  });
});

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept) return;

  event.intercept({
    async handler() {
      // 1. 필요한 데이터를 먼저 페칭
      const response = await fetch(event.destination.url);
      const newHtml = await response.text();
      const parser = new DOMParser();
      const newDoc = parser.parseFromString(newHtml, 'text/html');
      const newContent = newDoc.querySelector('#main-content').innerHTML;

      // 2. View Transitions API 지원 여부 확인
      if (!document.startViewTransition) {
        document.querySelector('#main-content').innerHTML = newContent;
        return;
      }

      // 3. 브라우저 트랜지션 실행
      const transition = document.startViewTransition(() => {
        document.querySelector('#main-content').innerHTML = newContent;
      });

      // 트랜지션 완료 대기
      await transition.finished;
    }
  });
});

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept) return;

  event.intercept({
    // 브라우저의 기본 자동 스크롤을 지연시키고 수동 제어 모드로 전환
    scroll: 'manual',
    async handler() {
      // 1. 가상화 목록이나 무한 스크롤 데이터 복원
      await restoreFeedList();
      
      // 2. DOM이 완전히 채워진 바로 그 순간 브라우저에게 스크롤 복원을 요청!
      event.scroll();
    }
  });
});

// 현재 열려 있는 탭의 히스토리 목록 확인
const entries = navigation.entries();
entries.forEach((entry, i) => {
  console.log(`[${i}] ${entry.url} (Key: ${entry.key}, ID: ${entry.id})`);
});

// 현재 활성화된 엔트리
const current = navigation.currentEntry;
console.log('현재 URL:', current.url);
console.log('보관된 상태:', current.getState());

// 현재 엔트리의 상태만 교체 (페이지 이동 없음)
navigation.updateCurrentEntry({
  state: {
    ...navigation.currentEntry.getState(),
    filter: 'electronics',
    scrollPos: window.scrollY
  }
});

// 상태 변경 감지 이벤트
navigation.currentEntry.addEventListener('dispose', () => {
  console.log('이 히스토리 엔트리가 세션에서 제거되었습니다.');
});

// mini-router.js
class MiniRouter {
  constructor(routes, rootElement) {
    this.routes = routes;
    this.root = rootElement;
    this.init();
  }

  init() {
    if (!('navigation' in window)) {
      console.warn('Navigation API를 지원하지 않는 브라우저입니다.');
      return;
    }

    navigation.addEventListener('navigate', (event) => {
      // 이동을 가로챌 수 없거나 다운로드 요청인 경우 통과
      if (!event.canIntercept || event.downloadRequest || event.formData) {
        return;
      }

      const url = new URL(event.destination.url);
      const routeHandler = this.routes[url.pathname] || this.routes['*'];

      if (!routeHandler) return;

      event.intercept({
        handler: async () => {
          try {
            // 비동기 렌더링 함수 실행 (signal 전달)
            const html = await routeHandler({ signal: event.signal });
            
            if (event.signal.aborted) return;
            
            this.root.innerHTML = html;
          } catch (err) {
            if (err.name !== 'AbortError') {
              console.error('라우팅 렌더링 실패:', err);
              this.root.innerHTML = `<div class="error">오류 발생: ${err.message}</div>`;
            }
          }
        }
      });
    });
  }

  navigate(path, options = {}) {
    return navigation.navigate(path, options).finished;
  }

  back() {
    return navigation.back().finished;
  }
}

// 사용 예시
const router = new MiniRouter({
  '/': async () => '<h1>홈페이지</h1><a href="/about">소개로 이동</a>',
  '/about': async () => '<h1>소개 페이지</h1><a href="/">홈으로 이동</a>',
  '*': async () => '<h1>404 Not Found</h1>'
}, document.getElementById('app'));

if ('navigation' in window) {
  setupModernNavigation();
} else {
  setupLegacyHistoryFallback();
}

navigation.addEventListener('navigate', (e) => {
  if (e.formData) {
    // 파일 업로드 등 네이티브 폼 제출은 intercept하지 않는 것이 안전함
    return;
  }
  // ...
});