홈 즐겨찾기 변경

src/shared/ui/menu/index.tsx

@@ -4,11 +4,10 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { MenuCategory } from '@/entities/menu/ui/menu-category';
 import { FavoriteWrapper } from '@/entities/home/ui/favorite-wrapper';
-import { useStore } from '@/shared/model/store';
+import { useFavoriteEditOnStore, useMenuOnStore, useStore } from '@/shared/model/store';
 import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants, MenuItems } from '@/entities/common/model/constant';
 import { useEffect, useRef, useState } from 'react';
 import { useLocation } from 'react-router';
-import { setHomeReloadKey } from '@/pages/home/home-page';
 import { useShortcutSaveMutation } from '@/entities/user/api/use-shortcut-save-mutation';
 import { ShortcutSaveParams, ShortcutSaveResponse } from '@/entities/user/model/types';
 import { useTranslation } from 'react-i18next';
@@ -28,17 +27,10 @@ interface ShortButton {
   index: number;
 }
 
-export interface MenuProps {
-  menuOn: boolean;
-  setMenuOn: (menuOn: boolean) => void;
-  favoriteEdit?: boolean;
-}
+export const Menu = () => {
+  const { menuOn, setMenuOn } = useMenuOnStore();
+  const { favoriteEditOn, setFavoriteEditOn } = useFavoriteEditOnStore();
 
-export const Menu = ({
-  menuOn,
-  setMenuOn,
-  favoriteEdit
-}: MenuProps) => {
   const { i18n } = useTranslation();
   const userMids = useStore.getState().UserStore.userMids;
   const userMid = useStore.getState().UserStore.mid;
@@ -49,7 +41,6 @@ export const Menu = ({
   const { mutateAsync: shortcutSave } = useShortcutSaveMutation();
 
   const [shortBtns, setShortBtns] = useState<ShortButton[]>([]);
-  const [editMode, setEditMode] = useState(false);
   const [changeMenuId, setChangeMenuId] = useState<string>();
   const [shortBtnIdx, setShortBtnIdx] = useState(0);
 
@@ -135,17 +126,12 @@ export const Menu = ({
     }, SCROLL_ANIMATION_DURATION);
   };
   const onClickToMenuClose = () => {
-    if(editMode){
-      setEditMode(false);
+    if(favoriteEditOn){
+      setFavoriteEditOn(false);
       callShortcutSave();
-      
-      // 여기에 저장 로직?
     }
     else{
       setMenuOn(false);
-      if(location.pathname === PATHS.home){
-        setHomeReloadKey();
-      }
     }
   };
   
@@ -160,8 +146,6 @@ export const Menu = ({
             iconFilePath={ MenuItems[i]?.iconFilePath }
             menuName={ MenuItems[i]?.menuName }
             subMenu={ MenuItems[i]?.subMenu }
-            setMenuOn={ setMenuOn }
-            editMode={ editMode }
             changeMenuId={ changeMenuId }
             setChangeMenuId= { setChangeMenuId }
             buttonRefs={ buttonRefs }
@@ -254,12 +238,7 @@ export const Menu = ({
     shortBtnsSetting();
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [i18n.language]);
-
-  useEffect(() => {
-    if(favoriteEdit){
-      setEditMode(favoriteEdit)
-    }
-  },[favoriteEdit]);
+ 
 
   // 메뉴가 열릴 때 초기화
   useEffect(() => {
@@ -292,7 +271,7 @@ export const Menu = ({
           <div className="full-menu-header">
             <div className="full-menu-title">{ userMid }</div>
             <div className="full-menu-actions">
-              { !editMode && 
+              { !favoriteEditOn && 
                 <button 
                   className="full-menu-settings"
                   onClick={ () => onClickToNavigate(PATHS.setting) }
@@ -314,10 +293,7 @@ export const Menu = ({
           {
             <FavoriteWrapper
               usingType='menu'
-              editMode={ editMode }
-              setEditMode={ setEditMode }
               changeMenuId={ changeMenuId }
-              setMenuOn={ setMenuOn }
             ></FavoriteWrapper>
           }
           </div>