diff --git a/src/store/example.store.ts b/src/store/example.store.ts index b12a3f9..d42537c 100644 --- a/src/store/example.store.ts +++ b/src/store/example.store.ts @@ -3,20 +3,68 @@ import { devtools, persist } from 'zustand/middleware'; //기본 사용법 타입 에러는 일단 무시 -let userStore = (set) => ({ - user: null, - setUser: (payload) => +let todoStore = (set) => ({ + todos: [], + addTodo: (payload) => set((state) => ({ - user: payload.data + todos: [ + ...state.todos, + { + text: payload.text, + isCompleted: payload.isCompleted + } + ] + })), + + deleteTodo: (payload) => + set((state) => ({ + todos: state.todo.filter((todo) => todo.id !== payload.id) + })), + + completeTodo: (payload) => + set((state) => ({ + todos: state.todos.map((todo) -> { + if(todo.id === payload.id){ + return { + ...todo, + isComplete : true + } + } + }) })) }); // redux devtools처럼 chrome 확장자 앱 사용해서 사용가능 -userStore = devtools(userStore); +todoStore = devtools(todoStore); // persist 새로고침시 데이터 유지 -userStore = persist(userStore, { +todoStore = persist(todoStore, { name: 'userStore' }); -export const userStore = create(userStore); +//store 완성 다른 작업 필요없이 갖다쓰면됨 +export const useTodoStore = create(todoStore); + +// 예시 +const {addTodo, deleteTodo ,completeTodo} = useTodoStore() + +const handleAddTodo = () => { + addTodo{ + text : 'Add Todo', + isCompleted : false, + id: 1 + } +} + +const handleDeleteTodo = () => { + deleteTodo{ + id : 1 + } +} + +const handleCompleteTodo = () => { + completeTodo{ + text : 'Add Todo', + isCompleted : false, + id: 1 + } diff --git a/tsconfig.json b/tsconfig.json index 90a994b..8464797 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,7 +20,8 @@ "@types/*": ["src/types/*"], "@utils/*": ["src/utils/*"], "@constant/*": ["src/constant/*"], - "@models/*": ["src/models/*"] + "@models/*": ["src/models/*"], + "@store/*": ["src/store/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.mjs"],