업데이트

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

@@ -121,4 +121,7 @@ main {
   top: 234px;
   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,7 +70,8 @@ export const Menu = ({
   const getMenuCategory = () => {
     let rs = [];
     for(let i=0;i<MenuItems.length;i++){
-      rs.push(
+      if(i===1){
+        rs.push(
         <MenuCategory
           key={ `menu-category-${i}` }
           menuId={ MenuItems[i]?.menuId }
@@ -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;
   };