메뉴 설정

src/entities/menu/model/types.ts

@@ -1,12 +1,16 @@
-export interface MenuCategoryItem {
-  title: string;
-  path: string;
+export interface MenuItem {
+  menuId?: string;
+  parent?: string;
+  menuName: string;
+  menuIcon?: string;
+  path?: string;
+  subMenu?: Array<MenuItem>
 };
 export interface MenuCategoryProps {
-  key: string;
-  category: string;
-  categoryIcon?: string;
-  items: Array<MenuCategoryItem>;
-  setMenuOn: (menuOn: boolean) => void;
+  menuId?: string;
+  menuIcon?: string;
+  menuName?: string;
+  subMenu?: Array<MenuItem>;
+  setMenuOn?: (menuOn: boolean) => void;
   favoriteEdit?: boolean;
 };

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

@@ -4,16 +4,17 @@ import { useStore } from '@/shared/model/store';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 
 export const MenuCategory = ({
-  category,
-  categoryIcon,
-  items,
+  menuId,
+  menuIcon,
+  menuName,
+  subMenu,
   setMenuOn,
   favoriteEdit
 }: MenuCategoryProps) => {
   const { navigate } = useNavigate();
 
   const onClickToNavigate = (path?: string) => {
-    if(!!path && !favoriteEdit){
+    if(!!path && !!setMenuOn && !favoriteEdit){
       setMenuOn(false);
       navigate(path);
     }
@@ -33,39 +34,42 @@ export const MenuCategory = ({
 
   const getMenuItems = () => {
     let rs = [];
-    for(let i=0;i<items.length;i++){
-      if(!!favoriteEdit){
-        rs.push(
-          <li
-            key={ `menu-item-key-${category}-${i}` }
-            onClick={ () => onClickToNavigate(items[i]?.path) }
-          >
-            <span>{ items[i]?.title }</span>
-            <div className="check_box_scrap">
-              <input 
-                id={ `menu-item-checkbox-${category}-${i}` }
-                className="checkbox"
-                type="checkbox" 
-                onChange={ (e) => favoriteSetting(e.target.checked, items[i]?.title, items[i]?.path) }
-              />
-              <label 
-                className="gtr"
-                htmlFor={ `menu-item-checkbox-${category}-${i}` }
-              ></label>
-            </div>
-          </li>
-        );
+    if(subMenu){
+      for(let i=0;i<subMenu.length;i++){
+        if(!!favoriteEdit){
+          rs.push(
+            <li
+              key={ `menu-item-key-${menuId}-${i}` }
+              onClick={ () => onClickToNavigate(subMenu[i]?.path) }
+            >
+              <span>{ subMenu[i]?.menuName }</span>
+              <div className="check_box_scrap">
+                <input 
+                  id={ `menu-item-checkbox-${menuId}-${i}` }
+                  className="checkbox"
+                  type="checkbox" 
+                  onChange={ (e) => favoriteSetting(e.target.checked, subMenu[i]?.menuName, subMenu[i]?.path) }
+                />
+                <label 
+                  className="gtr"
+                  htmlFor={ `menu-item-checkbox-${menuId}-${i}` }
+                ></label>
+              </div>
+            </li>
+          );
+        }
+        else{
+          rs.push(
+            <li
+              key={ `menu-item-key-${i}` }
+              onClick={ () => onClickToNavigate(subMenu[i]?.path) }
+            >{ subMenu[i]?.menuName }</li>
+          );
+        }
+        
       }
-      else{
-        rs.push(
-          <li
-            key={ `menu-item-key-${i}` }
-            onClick={ () => onClickToNavigate(items[i]?.path) }
-          >{ items[i]?.title }</li>
-        );
-      }
-      
     }
+    
     return rs;
   };
 
@@ -73,8 +77,8 @@ export const MenuCategory = ({
     <>
       <div className="menu-category">
         <div className="category-header">
-          <div className={ 'category-icon ' + categoryIcon }></div>
-          <span>{ category }</span>
+          <div className={ 'category-icon ' + menuIcon }></div>
+          <span>{ menuName }</span>
         </div>
         <ul className="category-items">
           { getMenuItems() }