fix(timer): interval-store

components/label/useTimerStore.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand"
+import { persist } from "zustand/middleware"
 
 interface TimerStore {
   timer: NodeJS.Timeout | null
@@ -37,34 +38,41 @@ interface IntervalStore {
   setAutoSaveGap: (autoSaveGap: number) => void
 }
 
-export const useIntervalStore = create<IntervalStore>((set, get) => ({
-  timer: null,
-  isAutoSave: false,
-  autoSaveGap: 5,
-  startTimer: (fn, delay) => {
-    const { timer } = get()
-    if (timer !== null) {
-      clearInterval(timer)
+export const useIntervalStore = create<IntervalStore>()(
+  persist<IntervalStore>(
+    (set, get) => ({
+      timer: null,
+      isAutoSave: false,
+      autoSaveGap: 5,
+      startTimer: (fn, delay) => {
+        const { timer } = get()
+        if (timer !== null) {
+          clearInterval(timer)
+        }
+        const t = setInterval(() => {
+          fn()
+        }, delay)
+        set((state) => ({ ...state, timer: t }))
+      },
+      clearTimer: () => {
+        const { timer } = get()
+        if (timer !== null) {
+          clearInterval(timer)
+          set((state) => ({ ...state, timer: null }))
+        }
+      },
+      setIsAutoSave: (flag: boolean) => {
+        set((state) => ({ ...state, isAutoSave: flag }))
+      },
+      setAutoSaveGap: (value: number) => {
+        set((state) => ({ ...state, autoSaveGap: value }))
+      },
+    }),
+    {
+      name: "interval-store",
     }
-    const t = setInterval(() => {
-      fn()
-    }, delay)
-    set((state) => ({ ...state, timer: t }))
-  },
-  clearTimer: () => {
-    const { timer } = get()
-    if (timer !== null) {
-      clearInterval(timer)
-      set((state) => ({ ...state, timer: null }))
-    }
-  },
-  setIsAutoSave: (flag: boolean) => {
-    set((state) => ({ ...state, isAutoSave: flag }))
-  },
-  setAutoSaveGap: (value: number) => {
-    set((state) => ({ ...state, autoSaveGap: value }))
-  },
-}))
+  )
+)
 
 export interface LabelTimeState {
   label: number