런타임 계약과 학습자 흐름 보강

apps/web/src/lib/auth.tsx

@@ -7,7 +7,7 @@ import {
   useState,
   type ReactNode,
 } from "react";
-import { api, apiUrl, authApi, type MeResponse } from "./api";
+import { AUTH_EXPIRED_EVENT, api, apiUrl, authApi, type MeResponse } from "./api";
 
 export type Role = "learner" | "teacher" | "admin";
 export type AccountStatus = "pending" | "approved" | "suspended";
@@ -113,6 +113,17 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<AuthUser | null>(null);
   const [loading, setLoading] = useState(true);
 
+  useEffect(() => {
+    const handleAuthExpired = () => {
+      setUser(null);
+      setLoading(false);
+    };
+    window.addEventListener(AUTH_EXPIRED_EVENT, handleAuthExpired);
+    return () => {
+      window.removeEventListener(AUTH_EXPIRED_EVENT, handleAuthExpired);
+    };
+  }, []);
+
   useEffect(() => {
     let alive = true;
     (async () => {