1 files changed, 80 insertions, 0 deletions
diff --git a/components/layout/GroupedMenuRender.tsx b/components/layout/GroupedMenuRender.tsx
new file mode 100644
index 00000000..e2a5a225
--- /dev/null
+++ b/components/layout/GroupedMenuRender.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import Link from 'next/link';
+import { NavigationMenuLink } from "@/components/ui/navigation-menu";
+import { cn } from "@/lib/utils";
+import * as LucideIcons from "lucide-react";
+import { MenuItem } from '@/config/menuConfig';
+
+type GroupedMenuItems = {
+  [key: string]: MenuItem[];
+};
+
+interface GroupedMenuRendererProps {
+  items: MenuItem[];
+  lng: string;
+}
+
+const GroupedMenuRenderer = ({ items, lng }: GroupedMenuRendererProps) => {
+  // 그룹별로 아이템 분류
+  const groupItems = (items: MenuItem[]): GroupedMenuItems => {
+    return items.reduce((groups, item) => {
+      const group = item.group || 'default';
+      if (!groups[group]) {
+        groups[group] = [];
+      }
+      groups[group].push(item);
+      return groups;
+    }, {} as GroupedMenuItems);
+  };
+
+  const groupedItems = groupItems(items);
+  const groups = Object.keys(groupedItems);
+
+  return (
+    <div className="p-4 w-[600px]">
+      {groups.map((groupName, index) => (
+        <div key={groupName} className={cn("mb-4", index < groups.length - 1 && "pb-2 border-b border-border/30")}>
+          {groupName !== 'default' && (
+            <h3 className="text-sm font-semibold mb-2 text-primary">{groupName}</h3>
+          )}
+          <div className="grid grid-cols-2 gap-3">
+            {groupedItems[groupName].map((item) => (
+              <MenuListItem key={item.title} item={item} lng={lng} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const MenuListItem = ({ item, lng }: { item: MenuItem; lng: string }) => {
+
+  
+ 
+  
+  return (
+    <NavigationMenuLink asChild>
+      <Link
+        href={`/${lng}${item.href}`}
+        className={cn(
+          "flex items-start space-x-2 rounded-md p-3 leading-none no-underline outline-none transition-colors",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus:bg-accent focus:text-accent-foreground",
+          item.disabled && "pointer-events-none opacity-60"
+        )}
+      >
+        <div className="space-y-1">
+          <div className="text-sm font-medium leading-none">{item.title}</div>
+          {item.description && (
+            <p className="line-clamp-2 text-xs leading-snug text-muted-foreground">
+              {item.description}
+            </p>
+          )}
+        </div>
+      </Link>
+    </NavigationMenuLink>
+  );
+};
+
+export default GroupedMenuRenderer;
+\ No newline at end of file