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

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>
-          );
+          ); 
         }
         
       }

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>    
               ))
             }

src/widgets/navigation/header.tsx

@@ -48,7 +48,7 @@ export const HeaderNavigation = ({
   useEffect(() => {
     let mids = useStore.getState().UserStore.selectOptionsMids;
     setSelectOptions(mids);
-  });
+  }, []);
   
   return (
     <>