전체화면 모드 메뉴 상단으로 위치이동

frontend/src/components/TopMenuBar.tsx

@@ -4,7 +4,7 @@
  * 레이아웃:
  *  [로고] | [대시보드] [실시간차트] [전략편집기] … | [테마토글] [로그인]
  */
-import React, { memo } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import type { Theme } from '../types';
 import type { AuthSession } from '../utils/auth';
 import TradeAlertPopupMenubarSelect from './TradeAlertPopupMenubarSelect';
@@ -40,6 +40,8 @@ interface TopMenuBarProps {
   guestMode?: boolean;
   onLoginClick?: () => void;
   onLogout?: () => void;
+  /** 브라우저 전체화면 (모든 화면에서 사용) */
+  onFullscreen?: () => void;
   /** 메뉴별 접근 허용 (없으면 전체 표시) */
   menuPermissions?: Record<string, boolean>;
 }
@@ -106,6 +108,24 @@ const IcDismissPopups = () => (
   </svg>
 );
 
+const IcFullscreen = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="1,6 1,1 6,1"/>
+    <polyline points="10,1 15,1 15,6"/>
+    <polyline points="15,10 15,15 10,15"/>
+    <polyline points="6,15 1,15 1,10"/>
+  </svg>
+);
+
+const IcFullscreenExit = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="6,6 1,1"/>
+    <polyline points="10,6 15,1"/>
+    <polyline points="6,10 1,15"/>
+    <polyline points="10,10 15,15"/>
+  </svg>
+);
+
 const IcLogin = () => (
   <svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
     <path d="M9 2h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9"/>
@@ -193,8 +213,16 @@ export const TopMenuBar = memo(function TopMenuBar({
   guestMode = false,
   onLoginClick,
   onLogout,
+  onFullscreen,
   menuPermissions,
 }: TopMenuBarProps) {
+  const [isFullscreen, setIsFullscreen] = useState(() => !!document.fullscreenElement);
+  useEffect(() => {
+    const sync = () => setIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener('fullscreenchange', sync);
+    return () => document.removeEventListener('fullscreenchange', sync);
+  }, []);
+
   const tc = THEME_CONFIG[theme];
   const visibleItems = menuPermissions
     ? MENU_ITEMS.filter(({ page }) => canAccessMenu(menuPermissions, page))
@@ -297,6 +325,21 @@ export const TopMenuBar = memo(function TopMenuBar({
           </>
         )}
 
+        {onFullscreen && (
+          <>
+            <button
+              type="button"
+              className="tmb-fullscreen-btn"
+              onClick={onFullscreen}
+              title={isFullscreen ? '전체화면 종료 (Esc)' : '전체화면'}
+              aria-label={isFullscreen ? '전체화면 종료' : '전체화면'}
+            >
+              {isFullscreen ? <IcFullscreenExit /> : <IcFullscreen />}
+            </button>
+            <span className="tmb-divider" aria-hidden="true" />
+          </>
+        )}
+
         {/* 테마 토글 버튼 */}
         <button
           type="button"