업데이트

src/entities/menu/model/types.ts

@@ -16,5 +16,6 @@ export interface MenuCategoryProps {
   setMenuOn?: (menuOn: boolean) => void;
   editMode?: boolean;
   setChangeMenuId: (menuId?: string) => void;
-  buttonRefs: RefObject<Array<HTMLLIElement | null>>;
+  buttonRef: any
+  btnRef?: any;
 };

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

@@ -13,7 +13,7 @@ export const MenuCategory = ({
   setMenuOn,
   editMode,
   setChangeMenuId,
-  buttonRefs
+  buttonRef,btnRef
 }: MenuCategoryProps) => {
   const { navigate } = useNavigate();
 
@@ -34,7 +34,7 @@ export const MenuCategory = ({
     menuId?: string
   ) => {
     let userFavorite = useStore.getState().UserStore.userFavorite;
-    let randomNum = Math.floor(Math.random() * 5) + 1;
+    let randomNum = Math.floor(Math.random() * 3) + 1;
     if(checked){
       userFavorite = [
         ...userFavorite,
@@ -78,7 +78,6 @@ 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">
@@ -107,7 +106,7 @@ export const MenuCategory = ({
             <li
               key={ `menu-item-key-${i}` }
               onClick={ () => onClickToNavigate(subMenu[i]?.path) }
-              ref={ (element) => { buttonRefs.current[i] = element }}
+              
             >{ subMenu[i]?.menuName }</li>
           ); 
         }
@@ -120,8 +119,13 @@ export const MenuCategory = ({
 
   return (
     <>
-      <div className="menu-category">
-        <div className="category-header">
+      <div 
+        className={`menu-category ${btnRef? 'ok': 'no'}`}
+        
+      >
+        <div className="category-header"
+          ref={ btnRef || null }
+        >
           <div className={ 'category-icon ' + menuIcon }></div>
           <span>{ menuName }</span>
         </div>

src/shared/ui/assets/css/style-fix.css

@@ -122,3 +122,6 @@ main {
   margin-top: 0;
   width: 100%;
 }
+.menu-category{
+  position: relative;
+}

src/shared/ui/menu/index.tsx

@@ -27,16 +27,36 @@ export const Menu = ({
   const [editMode, setEditMode] = useState<boolean>(false);
   const [changeMenuId, setChangeMenuId] = useState<string | undefined>();
 
-  const buttonRefs = useRef<Array<HTMLLIElement>>([]);
+  const buttonRefs = useRef<Array<HTMLDivElement>>([]);
+  const btnRef = useRef<HTMLDivElement>(null);
 
   const onClickToNavigate = (path: string) => {
     onClickToMenuClose();
     navigate(path);
   };
   const onClickToMenuNavigate = (menuId: string, index: number) => {
+    //let rect = buttonRefs.current[index]?.getBoundingClientRect();
+    //console.log(rect?.top)
+    /*
     buttonRefs.current[index]?.scrollIntoView({
       behavior: 'smooth'
     });
+    */
+   if(index === 1){
+    /*
+    btnRef.current?.scrollTo({
+         top: 300,
+         behavior: "smooth"
+    });
+    */
+    btnRef.current?.scrollIntoView({
+      block: 'start',
+      behavior: 'smooth'
+    });
+    
+   }
+    
+    
   };
   const onClickToMenuClose = () => {
     if(editMode){
@@ -50,6 +70,7 @@ export const Menu = ({
   const getMenuCategory = () => {
     let rs = [];
     for(let i=0;i<MenuItems.length;i++){
+      if(i===1){
         rs.push(
         <MenuCategory
           key={ `menu-category-${i}` }
@@ -60,9 +81,28 @@ export const Menu = ({
           setMenuOn={ setMenuOn }
           editMode={ editMode }
           setChangeMenuId= { setChangeMenuId }
-          buttonRefs={ buttonRefs }
+          buttonRef={ buttonRefs.current[i] }
+          btnRef={ btnRef }
         />
       );
+      }
+      else{
+        rs.push(
+        <MenuCategory
+          key={ `menu-category-${i}` }
+          menuId={ MenuItems[i]?.menuId }
+          menuIcon={ MenuItems[i]?.menuIcon }
+          menuName={ MenuItems[i]?.menuName }
+          subMenu={ MenuItems[i]?.subMenu }
+          setMenuOn={ setMenuOn }
+          editMode={ editMode }
+          setChangeMenuId= { setChangeMenuId }
+          buttonRef={ buttonRefs.current[i] }
+          
+        />
+      );
+      }
+      
     }
     return rs;
   };

src/widgets/navigation/header.tsx

@@ -76,7 +76,10 @@ export const HeaderNavigation = ({
                   <select className="heading-select">
                   { selectOptions && selectOptions.length > 0 && 
                     selectOptions.map((value, index) => (
-                      <option value={ value.value }>{ value.name }</option>
+                      <option 
+                        key={ value.value }
+                        value={ value.value }
+                      >{ value.name }</option>
                     ))
                   }
                   </select>