From d092f2e1f29269712f029576fd58b2bb81c75e13 Mon Sep 17 00:00:00 2001
From: hojin <devbang5674@gmail.com>
Date: Tue, 14 May 2024 16:02:19 +0900
Subject: [PATCH] =?UTF-8?q?add=20:=20zustand=20=EC=84=A4=EC=B9=98=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=98=88=EC=A0=9C=ED=8C=8C=EC=9D=BC=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json          | 38 +++++++++++++++++++++++++++++++++++++-
 package.json               |  3 ++-
 src/store/example.store.ts | 22 ++++++++++++++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 src/store/example.store.ts

diff --git a/package-lock.json b/package-lock.json
index e31dea5..beb9a17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,8 @@
         "react-markdown": "^9.0.1",
         "react-query": "^3.39.3",
         "react-toastify": "^10.0.5",
-        "remark-gfm": "^4.0.0"
+        "remark-gfm": "^4.0.0",
+        "zustand": "^4.5.2"
       },
       "devDependencies": {
         "@tailwindcss/typography": "^0.5.13",
@@ -6087,6 +6088,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -6352,6 +6361,33 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zustand": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz",
+      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/package.json b/package.json
index 749e8e7..5168927 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "react-markdown": "^9.0.1",
     "react-query": "^3.39.3",
     "react-toastify": "^10.0.5",
-    "remark-gfm": "^4.0.0"
+    "remark-gfm": "^4.0.0",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.13",
diff --git a/src/store/example.store.ts b/src/store/example.store.ts
new file mode 100644
index 0000000..b12a3f9
--- /dev/null
+++ b/src/store/example.store.ts
@@ -0,0 +1,22 @@
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+
+//기본 사용법 타입 에러는 일단 무시
+
+let userStore = (set) => ({
+  user: null,
+  setUser: (payload) =>
+    set((state) => ({
+      user: payload.data
+    }))
+});
+
+// redux devtools처럼 chrome 확장자 앱 사용해서 사용가능
+userStore = devtools(userStore);
+
+// persist 새로고침시 데이터 유지
+userStore = persist(userStore, {
+  name: 'userStore'
+});
+
+export const userStore = create(userStore);