즐겨찾기 끝

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){

src/shared/model/store.ts

@@ -14,12 +14,19 @@ export interface FavoriteEditOnStore {
   favoriteEditOn: boolean;
   setFavoriteEditOn: (favoriteEditOn: boolean) => void;
 };
+
+export interface MenuIdsStore {
+  menuIds: Array<number | undefined>;
+  setMenuIds: (menuIds: Array<number | undefined>) => void;
+  deleteMenuId: (menuId: number) => void;
+};
+
 export const useMenuOnStore = create<MenuOnStore>((set) => ({
   menuOn: false,
   setMenuOn: (menuOn: boolean) => {
     set((state: { menuOn: boolean}) => ({
       menuOn: (state.menuOn = menuOn)
-    }))
+    }));
   }
 }));
 export const useFavoriteEditOnStore = create<FavoriteEditOnStore>((set) => ({
@@ -27,7 +34,26 @@ export const useFavoriteEditOnStore = create<FavoriteEditOnStore>((set) => ({
   setFavoriteEditOn: (favoriteEditOn: boolean) => {
     set((state: { favoriteEditOn: boolean}) => ({
       favoriteEditOn: (state.favoriteEditOn = favoriteEditOn)
-    }))
+    }));
+  }
+}));
+export const useMenuIds = create<MenuIdsStore>((set) => ({
+  menuIds: [],
+  setMenuIds: (menuIds: Array<number | undefined>) => {
+    set((state: {menuIds: Array<number | undefined>}) => ({
+      menuIds: (state.menuIds = menuIds)
+    }));
+  },
+  deleteMenuId: (menuId: number) => {
+    set((state: {menuIds: Array<number | undefined>}) => ({
+      menuIds: (state.menuIds = state.menuIds.filter((
+        val?: number, 
+        idx?: number
+      ) => {
+        console.log(val, idx);
+        return val !== menuId;
+      }))
+    })); 
   }
 }));