diff --git a/package.json b/package.json
index 241ae4a..2ad7d7e 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
     "@types/react": "^18.2.0",
     "next": "13.4.2",
     "react": "^18.2.0",
-    "react-toastify": "^9.1.3"
+    "react-toastify": "^9.1.3",
+    "zustand": "^4.4.6"
   },
   "keywords": [],
   "author": "",
diff --git a/packages/common/src/hooks/index.ts b/packages/common/src/hooks/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/packages/common/src/hooks/useWindowResizeEffect.ts b/packages/common/src/hooks/useWindowResizeEffect.ts
new file mode 100644
index 0000000..cec91d1
--- /dev/null
+++ b/packages/common/src/hooks/useWindowResizeEffect.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+import { useWidthState } from 'stores';
+
+const useWindowResizeEffect = () => {
+  const { setWidth } = useWidthState();
+
+  const handleResize = () => {
+    setWidth(window.innerWidth);
+  };
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+};
+
+export default useWindowResizeEffect;
diff --git a/packages/common/src/stores/index.ts b/packages/common/src/stores/index.ts
new file mode 100644
index 0000000..c414d37
--- /dev/null
+++ b/packages/common/src/stores/index.ts
@@ -0,0 +1 @@
+export { default as useWidthState } from './useWidthStore';
diff --git a/packages/common/src/stores/useWidthStore.ts b/packages/common/src/stores/useWidthStore.ts
new file mode 100644
index 0000000..fa10f68
--- /dev/null
+++ b/packages/common/src/stores/useWidthStore.ts
@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface WidthState {
+  width: number;
+  setWidth: (value: number) => void;
+}
+
+const useWidthState = create<WidthState>((set) => ({
+  width: 1920,
+  setWidth: (value) => set({ width: value }),
+}));
+
+export default useWidthState;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 26e33dd..76129d3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       react-toastify:
         specifier: ^9.1.3
         version: 9.1.3(react-dom@18.2.0)(react@18.2.0)
+      zustand:
+        specifier: ^4.4.6
+        version: 4.4.6(@types/react@18.2.0)(react@18.2.0)
     devDependencies:
       '@types/gtag.js':
         specifier: ^0.0.17
@@ -10865,3 +10868,23 @@ packages:
 
   /zod@3.21.4:
     resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
+
+  /zustand@4.4.6(@types/react@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Rb16eW55gqL4W2XZpJh0fnrATxYEG3Apl2gfHTyDSE965x/zxslTikpNch0JgNjJA9zK6gEFW8Fl6d1rTZaqgg==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@types/react': 18.2.0
+      react: 18.2.0
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false