현금영수증 리스트

src/shared/ui/menu/index.tsx

@@ -9,6 +9,8 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants, MenuItem
 import { useEffect, useRef, useState } from 'react';
 import { useLocation } from 'react-router';
 import { setHomeReloadKey } from '@/pages/home/home-page';
+import { useShortcutSaveMutation } from '@/entities/user/api/use-shortcut-save-mutation';
+import { ShortcutSaveParams, ShortcutSaveResponse } from '@/entities/user/model/types';
 
 // 상수 정의
 const SCROLL_ANIMATION_DURATION = 800;
@@ -17,7 +19,7 @@ const BUTTON_SCROLL_OFFSET = 30;
 
 // 타입 정의
 interface ShortButton {
-  menuId: string;
+  menuId: number;
   menuName: string;
   index: number;
 }
@@ -34,12 +36,15 @@ export const Menu = ({
   favoriteEdit
 }: MenuProps) => {
   const userMids = useStore.getState().UserStore.userMids;
+  const userInfo = useStore.getState().UserStore.userInfo;
   const location = useLocation();
   const { navigate } = useNavigate();
 
+  const { mutateAsync: shortcutSave } = useShortcutSaveMutation();
+
   const [shortBtns, setShortBtns] = useState<ShortButton[]>([]);
   const [editMode, setEditMode] = useState(false);
-  const [changeMenuId, setChangeMenuId] = useState<string | undefined>();
+  const [changeMenuId, setChangeMenuId] = useState<string>();
   const [shortBtnIdx, setShortBtnIdx] = useState(0);
 
   const buttonRefs = useRef<Array<HTMLDivElement>>([]);
@@ -48,6 +53,25 @@ export const Menu = ({
   const isButtonScrolling = useRef<boolean>(false);
   const scrollTimer = useRef<NodeJS.Timeout | null>(null);
   const lastScrollTop = useRef<number>(0);
+  // const [menuIds, setMenuIds] = useState<Array<number | undefined>>([]);
+
+  const callShortcutSave = () => {
+    if(userInfo.usrid){
+      let userFavorite = useStore.getState().UserStore.userFavorite;
+      let menuIds = userFavorite.map((value, index) => {
+        return value.menuId;
+      });
+      
+      let params: ShortcutSaveParams = {
+        usrid: userInfo.usrid,
+        isDefault: false,
+        menuIds: menuIds
+      };
+      shortcutSave(params).then((rs: ShortcutSaveResponse) => {
+        
+      });
+    }
+  };
 
   const onClickToNavigate = (path: string) => {
     onClickToMenuClose();
@@ -65,7 +89,7 @@ export const Menu = ({
     }
   };
 
-  const onClickToMenuNavigate = (menuId: string, index: number) => {
+  const onClickToMenuNavigate = (menuId: number, index: number) => {
     isButtonScrolling.current = true;
     setShortBtnIdx(index);
     scrollCategoryButtonToLeft(index);
@@ -102,6 +126,9 @@ export const Menu = ({
   const onClickToMenuClose = () => {
     if(editMode){
       setEditMode(false);
+      callShortcutSave();
+      
+      // 여기에 저장 로직?
     }
     else{
       setMenuOn(false);
@@ -114,20 +141,23 @@ export const Menu = ({
   const getMenuCategory = () => {
     let rs = [];
     for(let i=0;i<MenuItems.length;i++){
-      rs.push(
-        <MenuCategory
-          key={ `menu-category-${i}` }
-          menuId={ MenuItems[i]?.menuId }
-          menuIcon={ MenuItems[i]?.menuIcon }
-          menuName={ MenuItems[i]?.menuName }
-          subMenu={ MenuItems[i]?.subMenu }
-          setMenuOn={ setMenuOn }
-          editMode={ editMode }
-          setChangeMenuId= { setChangeMenuId }
-          buttonRefs={ buttonRefs }
-          itemIndex={ i }
-        />
-      );
+      if(MenuItems[i]){
+        rs.push(
+          <MenuCategory
+            key={ `menu-category-${i}` }
+            menuId={ MenuItems[i]?.menuId }
+            menuIcon={ MenuItems[i]?.menuIcon }
+            menuName={ MenuItems[i]?.menuName }
+            subMenu={ MenuItems[i]?.subMenu }
+            setMenuOn={ setMenuOn }
+            editMode={ editMode }
+            setChangeMenuId= { setChangeMenuId }
+            buttonRefs={ buttonRefs }
+            itemIndex={ i }
+          />
+        );
+      }
+      
     }
     return rs;
   };
@@ -255,7 +285,7 @@ export const Menu = ({
               >
                 <img 
                   src={ IMAGE_ROOT + '/ico_close.svg' } 
-                  alt="설정"
+                  alt="닫기"
                 />
               </button>
             </div>