메뉴

src/entities/home/ui/favorite-wrapper.tsx

@@ -84,7 +84,7 @@ export const FavoriteWrapper = ({
   };
   const makeAddFavoriteItem = () => {
     let rs = [];
-    if(!editMode){
+    if(!editMode && usingType === 'menu'){
       rs.push(
         <SwiperSlide key={ `favorite-item-add-slide-key` }>
           <div 

src/entities/home/ui/hidden-page.tsx

@@ -1,14 +0,0 @@
-import { useSetFavoriteEdit, useSetMenuOn } from '@/widgets/sub-layout/use-sub-layout';
-
-export interface HiddenPageProps {
-
-}
-export const HiddenPage = ({
-  
-}: HiddenPageProps) => {
-  useSetMenuOn(true);
-  useSetFavoriteEdit(true);
-  return (
-    <></>
-  );
-};

src/entities/menu/model/types.ts

@@ -8,12 +8,4 @@ export interface MenuItem {
   path?: string;
   subMenu?: Array<MenuItem>
 };
-export interface MenuCategoryProps {
+
-  menuId?: string;
-  menuIcon?: string;
-  menuName?: string;
-  subMenu?: Array<MenuItem>;
-  setMenuOn?: (menuOn: boolean) => void;
-  editMode?: boolean;
-  setChangeMenuId: (menuId?: string) => void;
-};

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

@@ -1,11 +1,23 @@
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { MenuCategoryProps } from '../model/types';
 import { useStore } from '@/shared/model/store';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { UserFavorite } from '@/entities/user/model/types';
-import { useEffect, useState } from 'react';
+import { RefObject, useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
 import { PATHS } from '@/shared/constants/paths';
+import { MenuItem } from '../model/types';
+
+export interface MenuCategoryProps {
+  menuId?: string;
+  menuIcon?: string;
+  menuName?: string;
+  subMenu?: Array<MenuItem>;
+  setMenuOn?: (menuOn: boolean) => void;
+  editMode?: boolean;
+  setChangeMenuId: (menuId?: string) => void;
+  buttonRefs: RefObject<Array<HTMLDivElement>>;
+  itemIndex: number;
+};
 
 export const MenuCategory = ({
   menuId,
@@ -14,7 +26,9 @@ export const MenuCategory = ({
   subMenu,
   setMenuOn,
   editMode,
-  setChangeMenuId
+  setChangeMenuId,
+  buttonRefs,
+  itemIndex
 }: MenuCategoryProps) => {
   const { navigate } = useNavigate();
   const location = useLocation();
@@ -123,7 +137,10 @@ export const MenuCategory = ({
 
   return (
     <>
-      <div className={`menu-category`}>
+      <div 
+        className={`menu-category ${menuId}`} 
+        ref={ (element: HTMLDivElement) => { buttonRefs.current[itemIndex] = element } }
+      >
         <div className="category-header">
           <div className={ 'category-icon ' + menuIcon }></div>
           <span>{ menuName }</span>

src/pages/home/home-page.tsx

@@ -15,7 +15,6 @@ import {
 	useSetFooterMode,
   useSetFooterCurrentPage
 } from '@/widgets/sub-layout/use-sub-layout';
-import { HiddenPage } from '@/entities/home/ui/hidden-page';
 
 export let homeReloadKey = 1;
 export const setHomeReloadKey = () => {
@@ -40,8 +39,7 @@ export const HomePage = () => {
   const [bottomBannerOn, setBottomBannerOn] = useState<boolean>(false);
   const [authRegisterOn, setAuthRegisterOn] = useState<boolean>(false);
   const [loginSuccess, setLoginSuccess] = useState<boolean>(true);
-  const [homeEditMode, setHomeEditMode] = useState<boolean>(false);
+  
-
   const checkBottomBannerOpen = () => {
     if(!!bannerToday){
       bannerToday = bannerToday.toString();
@@ -92,8 +90,6 @@ export const HomePage = () => {
               <>
                 <FavoriteWrapper
                   usingType='home'
-                  editMode={ homeEditMode }
-                  setEditMode={ setHomeEditMode }
                   key={ homeReloadKey }
                 ></FavoriteWrapper>
                 <DayStatusBox></DayStatusBox>
@@ -112,9 +108,6 @@ export const HomePage = () => {
           authRegisterOn={ authRegisterOn }
         ></AuthRegister>
       }
-      { (!!homeEditMode) && 
-        <HiddenPage></HiddenPage>
-      }
     </>
   );
 };

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

@@ -123,6 +123,7 @@ main {
   top: calc(env(safe-area-inset-top));
   margin-top: 0;
   width: 100%;
+  overflow-y: auto;
 }
 .menu-category{
   position: relative;

src/shared/ui/menu/index.tsx

@@ -9,6 +9,7 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants, MenuItem
 import { useEffect, useRef, useState } from 'react';
 import { useLocation } from 'react-router';
 import { setHomeReloadKey } from '@/pages/home/home-page';
+import { P } from 'node_modules/framer-motion/dist/types.d-Cjd591yU';
 
 export interface MenuProps {
   menuOn: boolean;
@@ -20,6 +21,7 @@ export const Menu = ({
   setMenuOn,
   favoriteEdit
 }: MenuProps) => {
+  const userMids = useStore.getState().UserStore.userMids;
   const location = useLocation();
   const { navigate } = useNavigate();
   const userInfo = useStore((state) => state.UserStore.userInfo);
@@ -27,17 +29,26 @@ export const Menu = ({
   const [shortBtns, setShortBtns] = useState<Array<Record<string, any>>>([]);
   const [editMode, setEditMode] = useState<boolean>(false);
   const [changeMenuId, setChangeMenuId] = useState<string | undefined>();
+  const [shortBtnIdx, setShortBtnIdx] = useState<number>(0);
+  const [shortBoxOnScroll, setShortBoxOnScroll] = useState<boolean>(false);
+  const [menuListOnScroll, setMenuListOnScroll] = useState<boolean>(false);
 
   const buttonRefs = useRef<Array<HTMLDivElement>>([]);
   const scrollRef = useRef<HTMLDivElement>(null);
+  const shortBtnScrollRef = useRef<HTMLDivElement>(null);
 
   const onClickToNavigate = (path: string) => {
     onClickToMenuClose();
     navigate(path);
   };
   const onClickToMenuNavigate = (menuId: string, index: number) => {
-    //let rect = buttonRefs.current[index]?.getBoundingClientRect();
+    let tops = [0, 255, 410, 565, 720, 875, 1030, 1500];
-    //console.log(rect?.top)
+
+    scrollRef.current?.scrollTo({
+      top: tops[index],
+      left: 0,
+      behavior: 'smooth'
+    });
     /*
     buttonRefs.current[index]?.scrollIntoView({
       behavior: 'smooth'
@@ -69,6 +80,8 @@ export const Menu = ({
           setMenuOn={ setMenuOn }
           editMode={ editMode }
           setChangeMenuId= { setChangeMenuId }
+          buttonRefs={ buttonRefs }
+          itemIndex={ i }
         />
       );
     }
@@ -86,6 +99,97 @@ export const Menu = ({
     }
     setShortBtns(shortList);
   };
+
+  const shortBtnScroll = (e: any) => {
+    
+    let x = shortBtnScrollRef.current?.scrollLeft;
+    let top = 0;
+    if(x){
+      if(x < 85){
+        top = 0;
+        setShortBtnIdx(0);
+      }
+      else if(x < 170){
+        top = 255;
+        setShortBtnIdx(1);
+      }
+      else if(x < 275){
+        top = 410;
+        setShortBtnIdx(2);
+      }
+      else if(x < 360){
+        top = 565;
+        setShortBtnIdx(3);
+      }
+      else if(x < 450){
+        top = 720;
+        setShortBtnIdx(4);
+      }
+      else{
+        top = 875;
+        setShortBtnIdx(5);
+      }
+    }
+    if(shortBoxOnScroll){  
+      scrollRef.current?.scrollTo({
+        top: top,
+        left: 0,
+        behavior: 'smooth'
+      });
+    }
+  };
+  
+  const menuListScroll = () => {
+    if(menuListOnScroll){
+      let y = scrollRef.current?.scrollTop;
+      let left = 0;
+      if(y){
+        if(y < 255){
+          left = 0;
+        }
+        else if(y < 410){
+          left = 85;
+        }
+        else if(y < 565){
+          left = 170;
+        }
+        else if(y < 720){
+          left = 275;
+        }
+        else if(y < 875){
+          left = 360;
+        }
+        else if(y < 1030){
+          left = 450;
+        }
+        else{
+          left = 450;
+        }
+      }
+      shortBtnScrollRef.current?.scrollTo({
+        top: 0,
+        left: left,
+        behavior: 'smooth'
+      });
+    } 
+    /*
+    
+    */
+  };
+  const shortBoxTouchStart = () => {
+    setShortBoxOnScroll(true);
+    setMenuListOnScroll(false);
+  };
+  const shortBoxTouchEnd = () => {
+
+  };
+  const menuListTouchStart = () => {
+    setShortBoxOnScroll(false);
+    setMenuListOnScroll(true);
+  };
+  const menuListTouchEnd = () => {
+
+  };
   
   useEffect(() => {
     shortBtnsSetting();
@@ -110,7 +214,7 @@ export const Menu = ({
         <div className="full-menu-container">
           <div className="full-menu-header">
             <div className="full-menu-title">
-              { 'nictest00m' } 
+              { userMids[0] } 
               <span style={{marginLeft: '4px'}}>(madzoneviper)</span>
             </div>
             <div className="full-menu-actions">
@@ -150,12 +254,18 @@ export const Menu = ({
           </div>
             
           <div className="full-menu-keywords-wrap">
-            <div className="full-menu-keywords">
+            <div 
+              className="full-menu-keywords"
+              ref={ shortBtnScrollRef }
+              onScroll={ shortBtnScroll }
+              onTouchStart={ shortBoxTouchStart }
+              onTouchEnd={ shortBoxTouchEnd }
+            >
             {
               shortBtns.map((value, index) => (
                 <span 
                   key={ `short-btn-${value.menuName}` }
-                  className={ `keyword-tag` }
+                  className={ `keyword-tag ${(shortBtnIdx === index)? 'active': ''}` }
                   onClick={ () => onClickToMenuNavigate(value.menuId, value.index) }
                 >{ value.menuName }</span>    
               ))
@@ -166,6 +276,9 @@ export const Menu = ({
           <div 
             className="full-menu-list" 
             ref={ scrollRef }
+            onScroll={ menuListScroll }
+            onTouchStart={ menuListTouchStart }
+            onTouchEnd={ menuListTouchEnd }
           >
           { getMenuCategory() }
           </div>