diff --git a/src/widgets/feed-kebab/store/feed-kebab-store.ts b/src/widgets/feed-kebab/store/feed-kebab-store.ts new file mode 100644 index 0000000..912d257 --- /dev/null +++ b/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()( + 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); +}; diff --git a/src/widgets/feed-kebab/store/index.ts b/src/widgets/feed-kebab/store/index.ts new file mode 100644 index 0000000..469ff61 --- /dev/null +++ b/src/widgets/feed-kebab/store/index.ts @@ -0,0 +1 @@ +export * from './feed-kebab-store'; diff --git a/src/widgets/feed-kebab/ui/FeedKebabButton.tsx b/src/widgets/feed-kebab/ui/FeedKebabButton.tsx index cd679ac..ef87d99 100644 --- a/src/widgets/feed-kebab/ui/FeedKebabButton.tsx +++ b/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 ( <> - - {isVisibilityKebabMenu && ( - + {openedFeedId === feedId && isOpen && ( + )} );