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

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

@@ -88,9 +88,37 @@ main {
 .billing-label{
   width: 85px;
 }
+
+
+.full-menu-header{
+  position: fixed;
+  z-index: 20;
+  background-color: #ffffff;
+  width: 100%;
+}
+.full-menu-top-nav{
+  position: fixed;
+  top: 50px;
+  z-index: 20;
+  width: 100%;
+  background-color: #ffffff;
+  height: 116px;
+}
 .full-menu-keywords-wrap{
+  position: fixed;
+  top: 166px;
+  z-index: 20;
+  width: 100%;
+  background-color: #ffffff;
   padding: 1rem 1.625rem;
 }
 .full-menu-keywords{
   padding: 0;
+}
+
+.full-menu-list{
+  position: absolute;
+  top: 234px;
+  margin-top: 0;
+  width: 100%;
 }

src/shared/ui/menu/index.tsx

@@ -6,7 +6,7 @@ import { MenuCategory } from '@/entities/menu/ui/menu-category';
 import { FavoriteWrapper } from '@/entities/home/ui/favorite-wrapper';
 import { useStore } from '@/shared/model/store';
 import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants, MenuItems } from '@/entities/common/model/constant';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useLocation } from 'react-router';
 
 export interface MenuProps {
@@ -27,10 +27,17 @@ export const Menu = ({
   const [editMode, setEditMode] = useState<boolean>(false);
   const [changeMenuId, setChangeMenuId] = useState<string | undefined>();
 
+  const buttonRefs = useRef<Array<HTMLLIElement>>([]);
+
   const onClickToNavigate = (path: string) => {
     onClickToMenuClose();
     navigate(path);
   };
+  const onClickToMenuNavigate = (menuId: string, index: number) => {
+    buttonRefs.current[index]?.scrollIntoView({
+      behavior: 'smooth'
+    });
+  };
   const onClickToMenuClose = () => {
     if(editMode){
       setEditMode(false);
@@ -53,6 +60,7 @@ export const Menu = ({
           setMenuOn={ setMenuOn }
           editMode={ editMode }
           setChangeMenuId= { setChangeMenuId }
+          buttonRefs={ buttonRefs }
         />
       );
     }
@@ -62,21 +70,24 @@ export const Menu = ({
   const shortBtnsSetting = () => {
     let shortList = [];
     for(let i=0;i<MenuItems.length;i++) {
-      if(MenuItems[i]?.subMenu[0]){
-        shortList.push({
-          menuId: MenuItems[i]?.subMenu[0]?.menuId,
-          menuName: MenuItems[i]?.menuName,
-          path: MenuItems[i]?.subMenu[0]?.path,
-        });
-      }      
+      shortList.push({
+        menuId: MenuItems[i]?.menuId,
+        menuName: MenuItems[i]?.menuName,
+        index: i
+      });
     }
     setShortBtns(shortList);
   };
   
   useEffect(() => {
     shortBtnsSetting();
+    const handleScroll = (e: Event) => {
+      // console.log(e, window.scrollY);
+    };
+    window.addEventListener('scroll', handleScroll);
   }, []);
 
+  
   return (
     <>
       <motion.div 
@@ -135,8 +146,8 @@ export const Menu = ({
               shortBtns.map((value, index) => (
                 <span 
                   key={ `short-btn-${value.menuName}` }
-                  className={ `keyword-tag ${(location.pathname === value.path)? 'active': ''}` }
-                  onClick={ () => onClickToNavigate(value.path) }
+                  className={ `keyword-tag` }
+                  onClick={ () => onClickToMenuNavigate(value.menuId, value.index) }
                 >{ value.menuName }</span>    
               ))
             }