feat: 모바일 내비게이션에서 자식 메뉴가 있는 경우 버튼으로 변경

Author: y00eunji

apps/pyconkr/src/components/layout/Header/Mobile/MobileNavigation.tsx

@@ -87,9 +87,15 @@ export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onCl
           .filter((s) => !s.hide)
           .map((menu) => (
             <MenuItem isMainPath={isMainPath} key={menu.id}>
-              <MenuLink isMainPath={isMainPath} to={menu.route_code} onClick={handleClose}>
-                {menu.name}
-              </MenuLink>
+              {!R.isEmpty(menu.children) && Object.values(menu.children).some((child) => !child.hide) ? (
+                <MenuButton isMainPath={isMainPath} onClick={() => navigateToDepth2(menu)}>
+                  {menu.name}
+                </MenuButton>
+              ) : (
+                <MenuLink isMainPath={isMainPath} to={menu.route_code} onClick={handleClose}>
+                  {menu.name}
+                </MenuLink>
+              )}
               {!R.isEmpty(menu.children) && Object.values(menu.children).some((child) => !child.hide) && (
                 <MenuArrowButton isMainPath={isMainPath} onClick={() => navigateToDepth2(menu)}>
                   <ArrowForward fontSize="small" />
@@ -250,6 +256,17 @@ const MenuLink = styled(Link)<{ isMainPath?: boolean }>(({ theme, isMainPath = t
   fontWeight: 600,
 }));
 
+const MenuButton = styled(Button)<{ isMainPath?: boolean }>(({ theme, isMainPath = true }) => ({
+  color: isMainPath ? theme.palette.mobileNavigation.main.text : theme.palette.mobileNavigation.sub.text,
+  textTransform: "none",
+  fontSize: "20px",
+  fontWeight: 600,
+  padding: 0,
+  minWidth: "auto",
+  minHeight: "auto",
+  justifyContent: "flex-start",
+}));
+
 const MenuArrowButton = styled(IconButton)<{ isMainPath?: boolean }>(({ theme, isMainPath = true }) => ({
   color: isMainPath ? theme.palette.mobileNavigation.main.text : theme.palette.mobileNavigation.sub.text,
   padding: 8,