메뉴 즐겨찾기

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

@@ -2,6 +2,8 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { MenuCategoryProps } from '../model/types';
 import { useStore } from '@/shared/model/store';
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { UserFavorite } from '@/entities/user/model/types';
+import { useEffect, useState } from 'react';
 
 export const MenuCategory = ({
   menuId,
@@ -9,12 +11,16 @@ export const MenuCategory = ({
   menuName,
   subMenu,
   setMenuOn,
-  favoriteEdit
+  editMode,
+  setChangeMenuId
 }: MenuCategoryProps) => {
   const { navigate } = useNavigate();
 
+  const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
+  const [menuIds, setMenuIds] = useState<Array<string | undefined>>([]);
+
   const onClickToNavigate = (path?: string) => {
-    if(!!path && !!setMenuOn && !favoriteEdit){
+    if(!!path && !!setMenuOn && !editMode){
       setMenuOn(false);
       navigate(path);
     }
@@ -23,20 +29,53 @@ export const MenuCategory = ({
   const favoriteSetting = (
     checked: boolean,
     title?: string,
-    path?: string
+    path?: string,
+    menuId?: string
   ) => {
-    useStore.getState().UserStore.setUserFavorite([{
-      title: title,
-      img: IMAGE_ROOT + '/ico_menu_01.svg',
-      path: path,
-    }]);
+    console.log(checked, title, path, menuId)
+    let userFavorite = useStore.getState().UserStore.userFavorite;
+    if(checked){
+      userFavorite = [
+        ...userFavorite,
+        {
+          title: title,
+          img: IMAGE_ROOT + '/ico_menu_01.svg',
+          path: path,
+          menuId: menuId
+        }
+      ];
+    }
+    else{
+      userFavorite = userFavorite.filter((value, index) => {
+        return value.menuId !== menuId
+      });
+    }
+    useStore.getState().UserStore.setUserFavorite(userFavorite);
+    callFavoiteItems();
+    if(setChangeMenuId){
+      setChangeMenuId(menuId);
+    }
   };
 
+  const callFavoiteItems = () => {
+    let userFavorite = useStore.getState().UserStore.userFavorite;
+    console.log(userFavorite)
+    setFavoriteItems(userFavorite);
+    let newArr: Array<string | undefined> = userFavorite.map((value, index) => {
+      return value.menuId;
+    });
+    setMenuIds(newArr); 
+  };
+
+  useEffect(() => {
+    callFavoiteItems();
+  }, []);
+
   const getMenuItems = () => {
     let rs = [];
     if(subMenu){
       for(let i=0;i<subMenu.length;i++){
-        if(!!favoriteEdit){
+        if(!!editMode){
           rs.push(
             <li
               key={ `menu-item-key-${menuId}-${i}` }
@@ -45,14 +84,20 @@ export const MenuCategory = ({
               <span>{ subMenu[i]?.menuName }</span>
               <div className="check_box_scrap">
                 <input 
-                  id={ `menu-item-checkbox-${menuId}-${i}` }
+                  id={ `menu-item-checkbox-${subMenu[i]?.menuId}-${i}` }
                   className="checkbox"
-                  type="checkbox" 
-                  onChange={ (e) => favoriteSetting(e.target.checked, subMenu[i]?.menuName, subMenu[i]?.path) }
+                  type="checkbox"
+                  checked={ menuIds.includes(subMenu[i]?.menuId)? true: false }
+                  onChange={ (e) => favoriteSetting(
+                    e.target.checked, 
+                    subMenu[i]?.menuName, 
+                    subMenu[i]?.path,
+                    subMenu[i]?.menuId
+                  )}
                 />
                 <label 
                   className="gtr"
-                  htmlFor={ `menu-item-checkbox-${menuId}-${i}` }
+                  htmlFor={ `menu-item-checkbox-${subMenu[i]?.menuId}-${i}` }
                 ></label>
               </div>
             </li>