-
-
-
-
- {menuItems
- .filter((item) =>
- [APP_ROUTES.social, APP_ROUTES.library].includes(item.href)
- )
- .map((item) => (
-
+
closeDrawer()}
+ aria-hidden="true"
+ />
+
+
+
+ 메뉴 사이드 드로어
+
+
+
+
+
+
+
+
+
+
);
};
export default SideDrawer;
diff --git a/src/hooks/useClickOutside.ts b/src/hooks/useClickOutside.ts
index e6ebdc8e..ffb25af2 100644
--- a/src/hooks/useClickOutside.ts
+++ b/src/hooks/useClickOutside.ts
@@ -1,7 +1,7 @@
import { useEffect, useRef } from 'react';
-const useClickOutside = (handler: () => void) => {
- const ref = useRef
(null);
+const useClickOutside = (handler: () => void) => {
+ const ref = useRef(null);
useEffect(() => {
const listener = (event: MouseEvent | TouchEvent) => {
diff --git a/src/hooks/useEscapeKey.ts b/src/hooks/useEscapeKey.ts
new file mode 100644
index 00000000..30896285
--- /dev/null
+++ b/src/hooks/useEscapeKey.ts
@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+
+interface UseEscapeKeyParams {
+ callback: () => void;
+ active: boolean;
+}
+
+const useEscapeKey = ({ callback, active }: UseEscapeKeyParams) => {
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Escape' && active) {
+ callback();
+ }
+ };
+ document.addEventListener('keydown', handleKeyDown);
+ return () => document.removeEventListener('keydown', handleKeyDown);
+ }, [callback, active]);
+};
+
+export default useEscapeKey;
diff --git a/src/lib/store/useSideDrawerStore.ts b/src/lib/store/useSideDrawerStore.ts
new file mode 100644
index 00000000..f053c66d
--- /dev/null
+++ b/src/lib/store/useSideDrawerStore.ts
@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface SideDrawerStore {
+ isDrawerOpen: boolean;
+ openDrawer: () => void;
+ closeDrawer: () => void;
+}
+
+export const useSideDrawerStore = create((set) => ({
+ isDrawerOpen: false,
+ openDrawer: () => set({ isDrawerOpen: true }),
+ closeDrawer: () => set({ isDrawerOpen: false }),
+}));