refactor: scope providers by route and use XState selectors

src/stores/sync/user-auth-sync.tsx

@@ -9,13 +9,24 @@
  *   - guest / email / OAuth → 重新 hydrate user store
  */
 import { useEffect, useRef } from "react";
+import { shallowEqual } from "@xstate/react";
 
 import type { LoginStatus } from "@/data/dto/auth";
-import { useAuthState } from "@/stores/auth/auth-context";
+import {
+  selectAuthIsLoading,
+  useAuthSelector,
+} from "@/stores/auth/auth-context";
 import { useUserDispatch } from "@/stores/user/user-context";
 
 export function UserAuthSync() {
-  const { hasInitialized, isLoading, loginStatus } = useAuthState();
+  const { hasInitialized, isLoading, loginStatus } = useAuthSelector(
+    (state) => ({
+      hasInitialized: state.context.hasInitialized,
+      isLoading: selectAuthIsLoading(state),
+      loginStatus: state.context.loginStatus,
+    }),
+    shallowEqual,
+  );
   const userDispatch = useUserDispatch();
   const prevLoginStatusRef = useRef<LoginStatus | null>(null);