fix(space): 정리된 intent hud와 리뷰 반영

src/entities/plan/model/usePlanTier.ts

@@ -1,14 +1,43 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useSyncExternalStore } from 'react';
 import type { PlanTier } from './types';
 
 const PLAN_TIER_STORAGE_KEY = 'viberoom:plan-tier:v1';
+const planTierSubscribers = new Set<() => void>();
 
 const normalizePlanTier = (value: unknown): PlanTier => {
   return value === 'pro' ? 'pro' : 'normal';
 };
 
+const notifyPlanTierSubscribers = () => {
+  for (const subscriber of planTierSubscribers) {
+    subscriber();
+  }
+};
+
+const subscribeToPlanTier = (onStoreChange: () => void) => {
+  if (typeof window === 'undefined') {
+    return () => {};
+  }
+
+  const handleStorage = (event: StorageEvent) => {
+    if (event.key !== PLAN_TIER_STORAGE_KEY) {
+      return;
+    }
+
+    onStoreChange();
+  };
+
+  planTierSubscribers.add(onStoreChange);
+  window.addEventListener('storage', handleStorage);
+
+  return () => {
+    planTierSubscribers.delete(onStoreChange);
+    window.removeEventListener('storage', handleStorage);
+  };
+};
+
 export const readStoredPlanTier = (): PlanTier => {
   if (typeof window === 'undefined') {
     return 'normal';
@@ -22,41 +51,26 @@ export const readStoredPlanTier = (): PlanTier => {
 };
 
 export const usePlanTier = () => {
-  const [plan, setPlanState] = useState<PlanTier>('normal');
-  const [hasHydratedPlan, setHasHydratedPlan] = useState(false);
-
-  useEffect(() => {
-    setPlanState(readStoredPlanTier());
-    setHasHydratedPlan(true);
-
-    const handleStorage = (event: StorageEvent) => {
-      if (event.key !== PLAN_TIER_STORAGE_KEY) {
-        return;
-      }
-
-      setPlanState(normalizePlanTier(event.newValue));
-    };
-
-    window.addEventListener('storage', handleStorage);
-
-    return () => {
-      window.removeEventListener('storage', handleStorage);
-    };
-  }, []);
+  const plan = useSyncExternalStore<PlanTier>(
+    subscribeToPlanTier,
+    readStoredPlanTier,
+    () => 'normal',
+  );
 
   const setPlan = useCallback((nextPlan: PlanTier) => {
-    setPlanState(nextPlan);
-
     if (typeof window === 'undefined') {
       return;
     }
 
-    window.localStorage.setItem(PLAN_TIER_STORAGE_KEY, nextPlan);
+    try {
+      window.localStorage.setItem(PLAN_TIER_STORAGE_KEY, nextPlan);
+    } finally {
+      notifyPlanTierSubscribers();
+    }
   }, []);
 
   return {
     plan,
-    hasHydratedPlan,
     isPro: plan === 'pro',
     setPlan,
   };