⚡ Props Drilling 문제 해결 및 케밥 메뉴의 유일성 보장

src/widgets/feed-kebab/store/feed-kebab-store.ts

@@ -0,0 +1,39 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+interface FeedKebabStore {
+  openedFeedId: number;
+  isOpen: boolean;
+  openKebab: (_: number) => void;
+  closeKebab: () => void;
+}
+
+/**
+ * 피드의 kebab 메뉴를 관리하는 store
+ */
+export const useFeedKebabStore = create<FeedKebabStore>()(
+  devtools(
+    (set): FeedKebabStore => ({
+      openedFeedId: 0,
+      isOpen: false,
+      openKebab: (clickedId: number) =>
+        set({ openedFeedId: clickedId, isOpen: true }),
+      closeKebab: () => set({ openedFeedId: -1, isOpen: false }),
+    }),
+    { name: 'feed-kebab-store' },
+  ),
+);
+
+/**
+ * 피드의 kebab 메뉴를 열거나 닫습니다.
+ * @param feedId 피드 아이디
+ * @returns
+ */
+export const onClickFeedKebab = (feedId: number) => {
+  if (feedId === useFeedKebabStore.getState().openedFeedId) {
+    useFeedKebabStore.getState().closeKebab();
+    return;
+  }
+
+  useFeedKebabStore.getState().openKebab(feedId);
+};

src/widgets/feed-kebab/store/index.ts

@@ -0,0 +1 @@
+export * from './feed-kebab-store';

src/widgets/feed-kebab/ui/FeedKebabButton.tsx

@@ -1,18 +1,22 @@
-import { useToggle } from '@/shared/hooks';
 import { Icon } from '@/shared/ui';
 
+import { useFeedKebabStore, onClickFeedKebab } from '../store';
+
 import { KebabMenu } from './KebabMenu';
 
 export const FeedKebabButton: React.FC<{ feedId: number }> = ({ feedId }) => {
-  const [isVisibilityKebabMenu, toggleVisibility] = useToggle(false);
+  const { openedFeedId, isOpen, closeKebab } = useFeedKebabStore();
 
   return (
     <>
-      <button className='icon kebab-icon-btn' onClick={toggleVisibility}>
+      <button
+        className='icon kebab-icon-btn'
+        onClick={() => onClickFeedKebab(feedId)}
+      >
         <Icon name='kebab-menu' width='20' height='20' />
       </button>
-      {isVisibilityKebabMenu && (
-        <KebabMenu feedId={feedId} onClose={toggleVisibility} />
+      {openedFeedId === feedId && isOpen && (
+        <KebabMenu feedId={feedId} onClose={closeKebab} />
       )}
     </>
   );