첫 커밋

src/entities/menu/model/types.ts

@@ -0,0 +1,10 @@
+export interface MenuCategoryItem {
+  title: string;
+  path: string;
+};
+export interface MenuCategoryProps {
+  category: string;
+  categoryIcon?: string;
+  items: Array<MenuCategoryItem>;
+  setMenuOn: (menuOn: boolean) => void;
+};

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

@@ -0,0 +1,50 @@
+import { PATHS } from '@/shared/constants/paths';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { MenuCategoryProps } from '../model/types';
+
+export const MenuCategory = ({
+  category,
+  categoryIcon,
+  items,
+  setMenuOn
+}: MenuCategoryProps) => {
+  const { navigate } = useNavigate();
+
+  const onClickToNavigate = (path?: string) => {
+    if(!!path){
+      setMenuOn(false);
+      navigate(path);
+    }
+  };
+
+  const getMenuItems = () => {
+    let rs = [];
+    for(let i=0;i<items.length;i++){
+      let title = items[i]?.title;
+      let path = items[i]?.path;
+      let key = 'menu-item-key-'+i;
+      rs.push(
+        <li
+          key={ key }
+          onClick={ () => onClickToNavigate(path) }
+        >{ title }</li>
+      );
+    }
+    return rs;
+  };
+
+  return (
+    <>
+      <div className="menu-category">
+        <div className="category-header">
+          <div className={ 'category-icon ' + categoryIcon }></div>
+          <span>{ category }</span>
+        </div>
+        <ul className="category-items">
+          { getMenuItems() }
+        </ul>
+      </div>
+    </>
+  );
+};