즐겨찾기 끝

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

@@ -4,7 +4,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { UserFavorite } from '@/entities/user/model/types';
-import { useFavoriteEditOnStore, useMenuOnStore, useStore } from '@/shared/model/store';
+import { useFavoriteEditOnStore, useMenuIds, useMenuOnStore, useStore } from '@/shared/model/store';
 import { useTranslation } from 'react-i18next';
 import { showAlert } from '@/widgets/show-alert';
 import { checkGrant } from '@/shared/lib/check-grant';
@@ -23,6 +23,7 @@ export const FavoriteWrapper = ({
   
   const { menuOn, setMenuOn } = useMenuOnStore();
   const { favoriteEditOn, setFavoriteEditOn } = useFavoriteEditOnStore();
+  const { menuIds, setMenuIds, deleteMenuId} = useMenuIds();
   
   const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
   
@@ -56,6 +57,17 @@ export const FavoriteWrapper = ({
     setFavoriteItems(userFavorite);
   };
 
+  const onClickToRemoveItem = (item?: UserFavorite) => {
+    let newFavorite: Array<UserFavorite> = favoriteItems.filter((value, index) => {
+      return value.menuId !== item?.menuId;
+    });
+    useStore.getState().UserStore.setUserFavorite(newFavorite);
+    setFavoriteItems(newFavorite);
+    if(item?.menuId){
+      deleteMenuId(item?.menuId);
+    }
+  };
+
   const makeFavoriteItems = () => {
     let rs = [];
     for(let i=0;i<favoriteItems.length;i++){
@@ -74,6 +86,17 @@ export const FavoriteWrapper = ({
                 src={ favoriteItems[i]?.iconFilePath || '' }
                 alt={ displayName }
               />
+              { favoriteEditOn &&
+                <span 
+                  className="btn_delect"
+                  onClick={ () => onClickToRemoveItem(favoriteItems[i]) }
+                >
+                  <img 
+                    src={ IMAGE_ROOT + '/ico_app_delete.svg' }
+                    alt="삭제"
+                  />
+                </span>
+              }
             </div>
             <span className="swiper-text">{ displayName }</span>
           </div>

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

@@ -1,5 +1,5 @@
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { useFavoriteEditOnStore, useMenuOnStore, useStore } from '@/shared/model/store';
+import { useFavoriteEditOnStore, useMenuIds, useMenuOnStore, useStore } from '@/shared/model/store';
 import { UserFavorite } from '@/entities/user/model/types';
 import { RefObject, useEffect, useState } from 'react';
 import { MenuItem } from '../model/types';
@@ -33,10 +33,11 @@ export const MenuCategory = ({
   const { t, i18n } = useTranslation();
   
   const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
-  const [menuIds, setMenuIds] = useState<Array<number | undefined>>([]);
+  // const [menuIds, setMenuIds] = useState<Array<number | undefined>>([]);
   
   const { menuOn, setMenuOn } = useMenuOnStore();
   const { favoriteEditOn, setFavoriteEditOn } = useFavoriteEditOnStore();
+  const { menuIds, setMenuIds, deleteMenuId} = useMenuIds();
 
   const onClickToNavigate = (menuId?: number, path?: string) => {
     if(menuId && checkGrant(menuId, 'R')){
@@ -97,27 +98,16 @@ export const MenuCategory = ({
   const callFavoiteItems = () => {
     let userFavorite = useStore.getState().UserStore.userFavorite;
     setFavoriteItems(userFavorite);
-    let newArr: Array<number | undefined> = userFavorite.map((value, _) => {
+    let newArr: Array<number | undefined> = userFavorite.map((value, index) => {
       return value.menuId;
     });
     setMenuIds(newArr); 
   };
 
-  useEffect(() => {
-    callFavoiteItems();
-  }, []);
-
   useEffect(() => {
     callFavoiteItems();
   }, [changeMenuId]);
 
-  useEffect(() => {
-    if(menuIds.length > 0) {
-      // callShortcutSave();
-    }
-
-  }, [menuIds]);
-
   const getMenuItems = () => {
     let rs = [];
     if(subMenu){