(김준회) 메뉴 네비게이션: 요구사항 반영(박진석 프로)

2 files changed, 11 insertions, 3 deletions

diff --git a/components/layout/GroupedMenuRender.tsx b/components/layout/GroupedMenuRender.tsx
index b56135eb..4cc0ab88 100644
--- a/components/layout/GroupedMenuRender.tsx
+++ b/components/layout/GroupedMenuRender.tsx
@@ -15,9 +15,10 @@ interface GroupedMenuRendererProps {
   lng: string;
   activeMenus?: Record<string, boolean>;
   t: (key: string) => string; // 번역 함수 추가
+  onItemClick?: () => void;
 }
 
-const GroupedMenuRenderer = ({ items, lng, activeMenus = {}, t }: GroupedMenuRendererProps) => {
+const GroupedMenuRenderer = ({ items, lng, activeMenus = {}, t, onItemClick }: GroupedMenuRendererProps) => {
   // 활성 메뉴만 필터링 (activeMenus가 빈 객체면 모든 메뉴 표시)
   const filteredItems = Object.keys(activeMenus).length > 0 
     ? filterActiveAdditionalMenus(items, activeMenus)
@@ -65,7 +66,7 @@ const GroupedMenuRenderer = ({ items, lng, activeMenus = {}, t }: GroupedMenuRen
             )}
             <div className="grid grid-cols-2 gap-3">
               {groupedItems[groupName].map((item) => (
-                <MenuListItem key={item.titleKey} item={item} lng={lng} t={t} />
+                <MenuListItem key={item.titleKey} item={item} lng={lng} t={t} onClick={onItemClick} />
               ))}
             </div>
           </div>
@@ -75,11 +76,12 @@ const GroupedMenuRenderer = ({ items, lng, activeMenus = {}, t }: GroupedMenuRen
   );
 };
 
-const MenuListItem = ({ item, lng, t }: { item: MenuItem; lng: string; t: (key: string) => string }) => {
+const MenuListItem = ({ item, lng, t, onClick }: { item: MenuItem; lng: string; t: (key: string) => string; onClick?: () => void }) => {
   return (
     <NavigationMenuLink asChild>
       <Link
         href={`/${lng}${item.href}`}
+        onClick={onClick}
         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",
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index b70749c7..0c83e858 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -237,6 +237,7 @@ export function Header() {
                             <NavigationMenu 
                                 className="relative z-50" 
                                 value={openMenuKey}
+                                onValueChange={setOpenMenuKey}
                             >
                                 <div className="w-full overflow-x-auto pb-1">
                                     <NavigationMenuList className="flex-nowrap w-max">
@@ -251,6 +252,7 @@ export function Header() {
                                                     }}
                                                     onPointerEnter={(e) => e.preventDefault()}
                                                     onPointerMove={(e) => e.preventDefault()}
+                                                    onPointerLeave={(e) => e.preventDefault()}
                                                 >
                                                     {t(section.titleKey)}
                                                 </NavigationMenuTrigger>
@@ -268,6 +270,7 @@ export function Header() {
                                                             lng={lng}
                                                             activeMenus={activeMenus}
                                                             t={t}
+                                                            onItemClick={() => setOpenMenuKey("")}
                                                         />
                                                     </NavigationMenuContent>
                                                 ) : (
@@ -283,6 +286,7 @@ export function Header() {
                                                                     key={item.titleKey}
                                                                     title={t(item.titleKey)}
                                                                     href={`/${lng}${item.href}`}
+                                                                    onClick={() => setOpenMenuKey("")}
                                                                 >
                                                                     {item.descriptionKey && t(item.descriptionKey)}
                                                                 </ListItem>
@@ -302,6 +306,8 @@ export function Header() {
                                                             navigationMenuTriggerStyle(), 
                                                             "px-2 xl:px-3 text-sm whitespace-nowrap"
                                                         )}
+                                                        onPointerEnter={(e) => e.preventDefault()}
+                                                        onPointerLeave={(e) => e.preventDefault()}
                                                     >
                                                         {t(item.titleKey)}
                                                     </NavigationMenuLink>