즐겨찾기 움직임 버그 픽스 내용 없을시 공간 버그 픽스

src/entities/menu/model/types.ts

@@ -1,3 +1,5 @@
+import { RefObject } from "react";
+
 export interface MenuItem {
   menuId?: string;
   parent?: string;
@@ -13,5 +15,6 @@ export interface MenuCategoryProps {
   subMenu?: Array<MenuItem>;
   setMenuOn?: (menuOn: boolean) => void;
   editMode?: boolean;
-  setChangeMenuId?: (menuId?: string) => void;
+  setChangeMenuId: (menuId?: string) => void;
+  buttonRefs: RefObject<Array<HTMLLIElement | null>>;
 };

src/entities/menu/ui/menu-category.tsx

@@ -12,7 +12,8 @@ export const MenuCategory = ({
   subMenu,
   setMenuOn,
   editMode,
-  setChangeMenuId
+  setChangeMenuId,
+  buttonRefs
 }: MenuCategoryProps) => {
   const { navigate } = useNavigate();
 
@@ -32,14 +33,14 @@ export const MenuCategory = ({
     path?: string,
     menuId?: string
   ) => {
-    console.log(checked, title, path, menuId)
     let userFavorite = useStore.getState().UserStore.userFavorite;
+    let randomNum = Math.floor(Math.random() * 5) + 1;
     if(checked){
       userFavorite = [
         ...userFavorite,
         {
           title: title,
-          img: IMAGE_ROOT + '/ico_menu_01.svg',
+          img: IMAGE_ROOT + '/ico_menu_0'+randomNum+'.svg',
           path: path,
           menuId: menuId
         }
@@ -51,15 +52,12 @@ export const MenuCategory = ({
       });
     }
     useStore.getState().UserStore.setUserFavorite(userFavorite);
+    setChangeMenuId(`${menuId}-${checked}`);
     callFavoiteItems();
-    if(setChangeMenuId){
-      setChangeMenuId(menuId);
-    }
   };
 
   const callFavoiteItems = () => {
     let userFavorite = useStore.getState().UserStore.userFavorite;
-    console.log(userFavorite)
     setFavoriteItems(userFavorite);
     let newArr: Array<string | undefined> = userFavorite.map((value, index) => {
       return value.menuId;
@@ -80,6 +78,7 @@ export const MenuCategory = ({
             <li
               key={ `menu-item-key-${menuId}-${i}` }
               onClick={ () => onClickToNavigate(subMenu[i]?.path) }
+              ref={ (element) => { buttonRefs.current[i] = element }}
             >
               <span>{ subMenu[i]?.menuName }</span>
               <div className="check_box_scrap">
@@ -108,8 +107,9 @@ export const MenuCategory = ({
             <li
               key={ `menu-item-key-${i}` }
               onClick={ () => onClickToNavigate(subMenu[i]?.path) }
+              ref={ (element) => { buttonRefs.current[i] = element }}
             >{ subMenu[i]?.menuName }</li>
-          );
+          ); 
         }
         
       }