✅ 대표적인 2가지 방식

1. localStorage + storage 이벤트 활용 (가장 많이 쓰임)

• localStorage는 탭 간에 공유되며, 다른 탭에서 변경되면 storage 이벤트가 발생합니다.
• 이를 이용해 한 탭에서 로그아웃하면, 다른 탭들이 이를 감지하고 로그아웃 동작을 수행할 수 있습니다.

// 로그아웃 함수
const logout = () => {
  localStorage.setItem("logout", Date.now().toString()); // 로그아웃 트리거
  // 실제 로그아웃 처리
};

// 다른 탭에서 로그아웃 감지
useEffect(() => {
  const onStorage = (event: StorageEvent) => {
    if (event.key === "logout") {
      // 여기서 로그아웃 처리
      router.push("/login");
    }
  };

  window.addEventListener("storage", onStorage);
  return () => window.removeEventListener("storage", onStorage);
}, []);

📌 주의: storage 이벤트는 다른 탭에서만 발생합니다. 자기 탭에서는 발생하지 않음.

2. BroadcastChannel API 사용 (보다 명시적인 탭 간 통신)

• 최신 브라우저에서 사용 가능.
• 하나의 채널을 통해 브라우저 내의 모든 탭에서 메시지를 주고받을 수 있음.

// 채널 생성
const channel = new BroadcastChannel("auth");

// 로그아웃 시
const logout = () => {
  channel.postMessage({ type: "logout" });
  // 실제 로그아웃 처리
};

// 로그아웃 메시지 수신
useEffect(() => {
  channel.onmessage = (event) => {
    if (event.data.type === "logout") {
      // 로그아웃 처리
      router.push("/login");
    }
  };

  return () => channel.close();
}, []);

보안적으로도 고려해야 할 점

• Access Token 저장 위치: 쿠키(httpOnly) 혹은 localStorage/sessionStorage 사용하는 방식에 따라 로그아웃 처리 방식이 달라질 수 있음.
• Next.js App Router 환경에서는 서버 액션 혹은 미들웨어를 통해 로그아웃 시 세션 제거도 함께 수행해야 보안적으로 안전합니다.

BroadcastChannel란?

BroadcastChannel은 브라우저 내 여러 탭(또는 iframe 등) 간에 메시지를 주고받을 수 있게 해주는 Web API입니다. 쉽게 말해서, 같은 도메인 안의 탭들끼리 "채팅"할 수 있게 해주는 통신 채널이라고 보면 돼요.

📦 어떤 상황에서 유용할까?

• A 탭에서 로그아웃 → B, C, D 탭도 자동 로그아웃
• 여러 탭 간 상태 동기화 (예: 장바구니, 알림 등)