메뉴

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();
-    //console.log(rect?.top)
+    let tops = [0, 255, 410, 565, 720, 875, 1030, 1500];
+
+    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>