diff --git a/src/entities/menu/model/types.ts b/src/entities/menu/model/types.ts index e0e90b9..f727426 100644 --- a/src/entities/menu/model/types.ts +++ b/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; setMenuOn?: (menuOn: boolean) => void; editMode?: boolean; - setChangeMenuId?: (menuId?: string) => void; + setChangeMenuId: (menuId?: string) => void; + buttonRefs: RefObject>; }; diff --git a/src/entities/menu/ui/menu-category.tsx b/src/entities/menu/ui/menu-category.tsx index 70bd6d3..3e580ff 100644 --- a/src/entities/menu/ui/menu-category.tsx +++ b/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 = userFavorite.map((value, index) => { return value.menuId; @@ -80,6 +78,7 @@ export const MenuCategory = ({
  • onClickToNavigate(subMenu[i]?.path) } + ref={ (element) => { buttonRefs.current[i] = element }} > { subMenu[i]?.menuName }
    @@ -108,8 +107,9 @@ export const MenuCategory = ({
  • onClickToNavigate(subMenu[i]?.path) } + ref={ (element) => { buttonRefs.current[i] = element }} >{ subMenu[i]?.menuName }
  • - ); + ); } } diff --git a/src/shared/ui/assets/css/style-fix.css b/src/shared/ui/assets/css/style-fix.css index 81e83b1..1f2e230 100644 --- a/src/shared/ui/assets/css/style-fix.css +++ b/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%; } \ No newline at end of file diff --git a/src/shared/ui/menu/index.tsx b/src/shared/ui/menu/index.tsx index cb95673..9bd7f16 100644 --- a/src/shared/ui/menu/index.tsx +++ b/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(false); const [changeMenuId, setChangeMenuId] = useState(); + const buttonRefs = useRef>([]); + 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 { shortBtnsSetting(); + const handleScroll = (e: Event) => { + // console.log(e, window.scrollY); + }; + window.addEventListener('scroll', handleScroll); }, []); + return ( <> ( onClickToNavigate(value.path) } + className={ `keyword-tag` } + onClick={ () => onClickToMenuNavigate(value.menuId, value.index) } >{ value.menuName } )) } diff --git a/src/widgets/navigation/header.tsx b/src/widgets/navigation/header.tsx index 5cd0fdd..d832ebe 100644 --- a/src/widgets/navigation/header.tsx +++ b/src/widgets/navigation/header.tsx @@ -48,7 +48,7 @@ export const HeaderNavigation = ({ useEffect(() => { let mids = useStore.getState().UserStore.selectOptionsMids; setSelectOptions(mids); - }); + }, []); return ( <>