메뉴

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

@@ -1,11 +1,23 @@
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { MenuCategoryProps } from '../model/types';
 import { useStore } from '@/shared/model/store';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { UserFavorite } from '@/entities/user/model/types';
-import { useEffect, useState } from 'react';
+import { RefObject, useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
 import { PATHS } from '@/shared/constants/paths';
+import { MenuItem } from '../model/types';
+
+export interface MenuCategoryProps {
+  menuId?: string;
+  menuIcon?: string;
+  menuName?: string;
+  subMenu?: Array<MenuItem>;
+  setMenuOn?: (menuOn: boolean) => void;
+  editMode?: boolean;
+  setChangeMenuId: (menuId?: string) => void;
+  buttonRefs: RefObject<Array<HTMLDivElement>>;
+  itemIndex: number;
+};
 
 export const MenuCategory = ({
   menuId,
@@ -14,7 +26,9 @@ export const MenuCategory = ({
   subMenu,
   setMenuOn,
   editMode,
-  setChangeMenuId
+  setChangeMenuId,
+  buttonRefs,
+  itemIndex
 }: MenuCategoryProps) => {
   const { navigate } = useNavigate();
   const location = useLocation();
@@ -123,7 +137,10 @@ export const MenuCategory = ({
 
   return (
     <>
-      <div className={`menu-category`}>
+      <div 
+        className={`menu-category ${menuId}`} 
+        ref={ (element: HTMLDivElement) => { buttonRefs.current[itemIndex] = element } }
+      >
         <div className="category-header">
           <div className={ 'category-icon ' + menuIcon }></div>
           <span>{ menuName }</span>