안드로이드 앱 다운로드 기능 적용

frontend/src/components/TopMenuBar.tsx

@@ -2,15 +2,16 @@
  * 최상단 글로벌 메뉴바
  *
  * 레이아웃:
- *  [로고] | [대시보드] [실시간차트] [전략편집기] … | [테마토글] [로그인]
+ *  [로고] | [그룹메뉴 ▾] … | [테마토글] [로그인]
  */
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import type { Theme } from '../types';
 import type { AuthSession } from '../utils/auth';
 import type { TradeAlertPopupLayout, TradeAlertPopupPosition } from '../utils/tradeAlertPopupLayout';
 import { canAccessMenu } from '../utils/permissions';
 import { isDesktop } from '../utils/platform';
 import DesktopUpdateModal from './DesktopUpdateModal';
+import TopMenuBarNavGroups from './TopMenuBarNavGroups';
 
 export type MenuPage = 'dashboard' | 'chart' | 'paper' | 'virtual' | 'trend-search' | 'verification-board' | 'strategy' | 'strategy-editor' | 'strategy-evaluation' | 'backtest' | 'analysis-report' | 'notifications' | 'settings' | 'widget-dashboard';
 
@@ -244,6 +245,34 @@ const MENU_ITEMS: { page: MenuPage; label: string; icon: React.ReactNode }[] = [
   { page: 'verification-board', label: '검증게시판', icon: <IcVerificationBoard /> },
 ];
 
+/** 기능별 그룹 — 클릭 시 하단 드롭다운 */
+const MENU_GROUPS = [
+  {
+    id: 'home',
+    label: '홈·분석',
+    icon: <IcDashboard />,
+    pages: ['dashboard', 'widget-dashboard', 'analysis-report'] as MenuPage[],
+  },
+  {
+    id: 'trading',
+    label: '차트·매매',
+    icon: <IcChart />,
+    pages: ['chart', 'paper', 'virtual', 'trend-search'] as MenuPage[],
+  },
+  {
+    id: 'strategy',
+    label: '전략',
+    icon: <IcStrategyEditor />,
+    pages: ['strategy-editor', 'strategy-evaluation', 'backtest'] as MenuPage[],
+  },
+  {
+    id: 'system',
+    label: '알림·설정',
+    icon: <IcSettings />,
+    pages: ['notifications', 'verification-board', 'settings'] as MenuPage[],
+  },
+];
+
 export const TopMenuBar = memo(function TopMenuBar({
   activePage, theme, onPage, onTheme,
   tradeNotifyUnread = 0,
@@ -293,28 +322,14 @@ export const TopMenuBar = memo(function TopMenuBar({
 
       <div className="tmb-divider" />
 
-      {/* 내비게이션 메뉴 */}
-      <nav className="tmb-nav">
-        {visibleItems.map(({ page, label, icon }, index) => (
-          <React.Fragment key={page}>
-            {index > 0 && <span className="tmb-divider tmb-divider--nav" aria-hidden="true" />}
-            <button
-              type="button"
-              className={`tmb-nav-btn ${activePage === page ? 'tmb-nav-btn--active' : ''}`}
-              onClick={() => onPage(page)}
-              onMouseEnter={page === 'chart' ? () => { void import('../chart/ChartWorkspaceRoot'); } : undefined}
-            >
-              <span className="tmb-nav-icon">{icon}</span>
-              <span className="tmb-nav-label">{label}</span>
-              {page === 'notifications' && tradeNotifyUnread > 0 && (
-                <span className="tmb-notify-badge tmb-notify-badge--nav">
-                  {tradeNotifyUnread > 99 ? '99+' : tradeNotifyUnread}
-                </span>
-              )}
-            </button>
-          </React.Fragment>
-        ))}
-      </nav>
+      {/* 기능별 그룹 메뉴 */}
+      <TopMenuBarNavGroups
+        activePage={activePage}
+        items={visibleItems}
+        groups={MENU_GROUPS}
+        onPage={onPage}
+        tradeNotifyUnread={tradeNotifyUnread}
+      />
 
       <span className="tmb-divider" aria-hidden="true" />