refactor(favorites): replace localStorage with centralized favorite store

components/favorite-button.tsx

@@ -1,10 +1,10 @@
 "use client"
 
 import { Heart } from "lucide-react"
-import { useEffect, useMemo, useState } from "react"
 import { Button } from "@/components/ui/button"
 import { useRequireAuth } from "@/lib/use-require-auth"
 import { useAuthStore } from "@/store/auth"
+import { useFavoriteStore } from "@/store/favorites"
 
 interface FavoriteButtonProps {
   initialFavorited: boolean
@@ -13,26 +13,13 @@ interface FavoriteButtonProps {
 }
 
 export function FavoriteButton({ initialFavorited, targetType, targetId }: FavoriteButtonProps) {
-  const [favorited, setFavorited] = useState(initialFavorited)
   const { requireAuth } = useRequireAuth()
   const userId = useAuthStore((s) => s.user?.id)
-  const storageKey = useMemo(
+  const favoritedInStore = useFavoriteStore((state) =>
-    () => `favorite:${userId ?? "guest"}:${targetType}:${targetId}`,
+    userId ? state.isFavorited(userId, targetType, targetId) : false,
-    [userId, targetType, targetId],
   )
-
+  const toggleFavorite = useFavoriteStore((state) => state.toggleFavorite)
-  useEffect(() => {
+  const favorited = userId ? favoritedInStore : initialFavorited
-    const stored = window.localStorage.getItem(storageKey)
-    if (stored === "1") {
-      setFavorited(true)
-      return
-    }
-    if (stored === "0") {
-      setFavorited(false)
-      return
-    }
-    setFavorited(initialFavorited)
-  }, [storageKey, initialFavorited])
 
   return (
     <Button
@@ -40,13 +27,10 @@ export function FavoriteButton({ initialFavorited, targetType, targetId }: Favor
       size="sm"
       className="gap-1.5"
       onClick={() =>
-        requireAuth(() =>
+        requireAuth(() => {
-          setFavorited((prev) => {
+          if (!userId) return
-            const next = !prev
+          toggleFavorite(userId, targetType, targetId)
-            window.localStorage.setItem(storageKey, next ? "1" : "0")
+        })
-            return next
-          }),
-        )
       }
     >
       <Heart className={`h-4 w-4 ${favorited ? "fill-current" : ""}`} />

lib/api/favorites.ts

@@ -1,18 +1,20 @@
-import { mockFavorites } from "@/lib/mock"
+import { useFavoriteStore } from "@/store/favorites"
 
 export function listFavorites() {
-  return mockFavorites
+  return useFavoriteStore.getState().favorites
 }
 
 export function listFavoritesByUser(userId: string) {
-  return mockFavorites.filter((favorite) => favorite.userId === userId)
+  return useFavoriteStore.getState().favorites.filter((favorite) => favorite.userId === userId)
 }
 
 export function isFavorited(userId: string, targetType: "player" | "shop", targetId: string) {
-  return mockFavorites.some(
+  return useFavoriteStore
-    (favorite) =>
+    .getState()
-      favorite.userId === userId &&
+    .favorites.some(
-      favorite.targetType === targetType &&
+      (favorite) =>
-      favorite.targetId === targetId,
+        favorite.userId === userId &&
-  )
+        favorite.targetType === targetType &&
+        favorite.targetId === targetId,
+    )
 }

store/favorites.ts

@@ -0,0 +1,52 @@
+import { create } from "zustand"
+import { generateId } from "@/lib/id"
+import { mockFavorites } from "@/lib/mock"
+import type { Favorite } from "@/lib/types"
+
+interface FavoriteState {
+  favorites: Favorite[]
+  listFavoritesByUser: (userId: string) => Favorite[]
+  isFavorited: (userId: string, targetType: "player" | "shop", targetId: string) => boolean
+  toggleFavorite: (userId: string, targetType: "player" | "shop", targetId: string) => boolean
+}
+
+export const useFavoriteStore = create<FavoriteState>((set, get) => ({
+  favorites: mockFavorites,
+  listFavoritesByUser: (userId) => get().favorites.filter((favorite) => favorite.userId === userId),
+  isFavorited: (userId, targetType, targetId) =>
+    get().favorites.some(
+      (favorite) =>
+        favorite.userId === userId &&
+        favorite.targetType === targetType &&
+        favorite.targetId === targetId,
+    ),
+  toggleFavorite: (userId, targetType, targetId) => {
+    const state = get()
+    const existing = state.favorites.find(
+      (favorite) =>
+        favorite.userId === userId &&
+        favorite.targetType === targetType &&
+        favorite.targetId === targetId,
+    )
+
+    if (existing) {
+      set((prev) => ({
+        favorites: prev.favorites.filter((favorite) => favorite.id !== existing.id),
+      }))
+      return false
+    }
+
+    const next: Favorite = {
+      id: generateId("fav"),
+      userId,
+      targetType,
+      targetId,
+      createdAt: new Date().toISOString(),
+    }
+
+    set((prev) => ({
+      favorites: [next, ...prev.favorites],
+    }))
+    return true
+  },
+}))