메뉴 즐겨찾기

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

@@ -16,37 +16,46 @@ const items: Array<UserFavorite> = [
 ];
 */
 export interface FavoriteWrapperProps {
-  usingType: 'home' | 'menu'
+  usingType: 'home' | 'menu',
+  editMode?: boolean,
+  setEditMode?: (editMode: boolean) => void;
+  changeMenuId?: string;
 };
 
 export const FavoriteWrapper = ({
-  usingType
+  usingType,
+  editMode,
+  setEditMode,
+  changeMenuId
 }: FavoriteWrapperProps) => {
   const { navigate } = useNavigate();
-
-  const [edit, setEdit] = useState<boolean>(false);
+  
   const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
   
-
   const itemAdd: UserFavorite = {
     img: IMAGE_ROOT + '/ico_menu_plus.svg',
     title: '편집하기'
   };
   
   const onClickToFavoriteEdit = () => {
-    setEdit(true);
+    if(usingType === 'menu' && setEditMode){
+      setEditMode(true);
+    }
   };
-
-  //useSetFavoriteEdit(true);
-  //useSetMenuOn(true);
-
+  
   const onClickToNavigate = (path?: string) => {
     if(!!path){
       navigate(path);
     }
   };
 
-  const getFavoriteItems = () => {
+  const getFavoriteList = () => {
+    console.log('1111')
+    let userFavorite = useStore.getState().UserStore.userFavorite;
+    setFavoriteItems(userFavorite);
+  };
+
+  const makeFavoriteItems = () => {
     let rs = [];
     for(let i=0;i<favoriteItems.length;i++){
       rs.push(
@@ -66,33 +75,45 @@ export const FavoriteWrapper = ({
         </SwiperSlide>
       );
     }
-    
-    rs.push(
-      <SwiperSlide key={ `favorite-item-add-slide-key` }>
-        <div 
-          className="swiper-item"
-          onClick={ onClickToFavoriteEdit }
-        >
-          <div className="swiper-icon coin-icon">
-            <img 
-              src={ itemAdd.img } 
-              alt={ itemAdd.title } 
-            />
+    return rs;
+  };
+  const makeAddFavoriteItem = () => {
+    let rs = [];
+    if(!editMode){
+      rs.push(
+        <SwiperSlide key={ `favorite-item-add-slide-key` }>
+          <div 
+            className="swiper-item"
+            onClick={ onClickToFavoriteEdit }
+          >
+            <div className="swiper-icon coin-icon">
+              <img 
+                src={ itemAdd.img } 
+                alt={ itemAdd.title } 
+              />
+            </div>
+            <span className="swiper-text">{ itemAdd.title }</span>
           </div>
-          <span className="swiper-text">{ itemAdd.title }</span>
-        </div>
-      </SwiperSlide>
-    );
+        </SwiperSlide>
+      );
+    }
     
     return rs;
   };
 
+  useEffect(() => {
+    getFavoriteList();
+  }, [changeMenuId]);
+
   return (
     <>
       <Swiper 
         spaceBetween={ 9 }
         slidesPerView={ 4 }
-      >{ getFavoriteItems() }</Swiper>
+      >
+      { (favoriteItems.length > 0) && makeFavoriteItems() }
+      { makeAddFavoriteItem() }
+      </Swiper>
     </>
   );
 };