[Feature/BAR-38] zustand 기본 세팅 (#10)

* feat: zustand 추가

* feat: modalStore 작성

* feat: useStoreWithEqualityFn를 사용하는 형태로 변경

package.json

@@ -22,7 +22,8 @@
     "clsx": "^2.0.0",
     "next": "14.0.3",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.4",

src/components/Modal/stores/modalStore.ts

@@ -0,0 +1,32 @@
+import { createStore } from 'zustand';
+import { useStoreWithEqualityFn as useStore } from 'zustand/traditional';
+
+const initialModalData = {
+  title: '',
+  firstButtonText: '',
+};
+
+interface ModalData {
+  title: string;
+  description?: string;
+  firstButtonText: string;
+  secondButtonText?: string;
+}
+
+interface State {
+  modalData: ModalData;
+}
+
+interface Action {
+  openModal: (modalData: ModalData) => void;
+}
+
+export const modalStore = createStore<State & Action>((set) => ({
+  modalData: initialModalData,
+  openModal: (modalData) => set({ modalData }),
+}));
+
+export const useModalStore = <T>(
+  selector: (state: State & Action) => T,
+  equals?: (a: T, b: T) => boolean,
+) => useStore(modalStore, selector, equals);