feat: Zustand 전역 상태 관리 스토어 추가
- auth-store.ts: 사용자 인증 상태 관리 (localStorage 지속성) - ui-store.ts: UI 상태 관리 (테마, 사이드바, 모달, 토스트)
This commit is contained in:
79
stores/auth-store.ts
Normal file
79
stores/auth-store.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
import { create } from "zustand";
|
||||
import { persist } from "zustand/middleware";
|
||||
|
||||
/**
|
||||
* [사용자 정보 타입]
|
||||
*/
|
||||
export interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
name?: string;
|
||||
avatar?: string;
|
||||
createdAt?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* [인증 상태 인터페이스]
|
||||
*/
|
||||
interface AuthState {
|
||||
// ========== 상태 ==========
|
||||
user: User | null;
|
||||
isAuthenticated: boolean;
|
||||
|
||||
// ========== 액션 ==========
|
||||
setUser: (user: User | null) => void;
|
||||
updateUser: (updates: Partial<User>) => void;
|
||||
logout: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* [인증 스토어]
|
||||
*
|
||||
* 전역 사용자 인증 상태를 관리합니다.
|
||||
* - localStorage에 자동 저장 (persist 미들웨어)
|
||||
* - 페이지 새로고침 시에도 상태 유지
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* import { useAuthStore } from '@/stores/auth-store';
|
||||
*
|
||||
* function Profile() {
|
||||
* const { user, isAuthenticated, setUser } = useAuthStore();
|
||||
*
|
||||
* if (!isAuthenticated) return <Login />;
|
||||
* return <div>Welcome, {user?.email}</div>;
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
export const useAuthStore = create<AuthState>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
// ========== 초기 상태 ==========
|
||||
user: null,
|
||||
isAuthenticated: false,
|
||||
|
||||
// ========== 사용자 설정 ==========
|
||||
setUser: (user) =>
|
||||
set({
|
||||
user,
|
||||
isAuthenticated: !!user,
|
||||
}),
|
||||
|
||||
// ========== 사용자 정보 업데이트 ==========
|
||||
updateUser: (updates) =>
|
||||
set((state) => ({
|
||||
user: state.user ? { ...state.user, ...updates } : null,
|
||||
})),
|
||||
|
||||
// ========== 로그아웃 ==========
|
||||
logout: () =>
|
||||
set({
|
||||
user: null,
|
||||
isAuthenticated: false,
|
||||
}),
|
||||
}),
|
||||
{
|
||||
name: "auth-storage", // localStorage 키 이름
|
||||
},
|
||||
),
|
||||
);
|
||||
Reference in New Issue
Block a user