diff options
| author | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-04-08 03:08:19 +0000 |
|---|---|---|
| committer | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-04-08 03:08:19 +0000 |
| commit | 9ceed79cf32c896f8a998399bf1b296506b2cd4a (patch) | |
| tree | f84750fa6cac954d5e31221fc47a54c655fc06a9 /components/layout/GroupedMenuRender.tsx | |
| parent | 230ce796836c25df26c130dbcd616ef97d12b2ec (diff) | |
로그인 및 미들웨어 처리. 구조 변경
Diffstat (limited to 'components/layout/GroupedMenuRender.tsx')
| -rw-r--r-- | components/layout/GroupedMenuRender.tsx | 80 |
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 |
