use single state and local storage

src/view/hook/useLocalStorage.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T | (() => T)) {
+    const [value, setValue] = useState<T>(() => {
+        const storedValues = localStorage.getItem(key);
+        if (storedValues != null) return JSON.parse(storedValues);
+
+        if (typeof initialValue === 'function') {
+            return (initialValue as () => T)();
+        } else {
+            return initialValue;
+        }
+    });
+
+    useEffect(() => {
+        localStorage.setItem(key, JSON.stringify(value));
+    }, [key, value]);
+
+    return [value, setValue] as [typeof value, typeof setValue];
+}