[zustand] 상태 스토어를 로컬 스토리지에 저장하기

import { AuthStoreType } from "@/types/store/auth.type";
import { create } from "zustand";
import { persist, PersistStorage } from "zustand/middleware";

// Custom storage for zustand
const customStorage: PersistStorage<AuthStoreType> = {
  getItem: (name) => {
    const item = localStorage.getItem(name);
    return item ? JSON.parse(item) : null;
  },
  setItem: (name, value) => {
    localStorage.setItem(name, JSON.stringify(value));
  },
  removeItem: (name) => {
    localStorage.removeItem(name);
  },
};

export const useAuthStore = create<AuthStoreType>()(
  persist(
    (set) => ({
      isLogin: false,
      setIsLogin: (value) => set({ isLogin: value }),
      uid: '',
      setUid: (value) => set({ uid: value || '' }),
      email: '',
      setEmail: (value) => set({ email: value || '' }),
    }),
    {
      name: 'auth-storage',
      storage: customStorage, // Custom storage
    }
  )
);

스토어 코드

 

export type AuthStoreType = {
  isLogin: boolean;
  setIsLogin: (value: boolean) => void;
  uid: string;
  setUid: (value: string | undefined) => void;
  email: string;
  setEmail: (value: string | undefined) => void;
};

스토어 타입 코드