실시간 차트 알림표시 위치 아이콘 버튼

frontend/src/components/Toolbar.tsx

@@ -42,6 +42,7 @@ import {
   type ChartLiveQuote,
 } from '../utils/chartLiveQuote';
 import LayoutPicker from './LayoutPicker';
+import TradeAlertPopupMenubarSelect from './TradeAlertPopupMenubarSelect';
 import { DEFAULT_SYNC, type LayoutDef, type SyncOptions } from '../utils/layoutTypes';
 import { loadStrategies } from '../utils/backendApi';
 
@@ -91,8 +92,6 @@ export interface ToolbarProps {
   /** 매매 시그널 알림 (미확인 개수) */
   tradeNotifyUnread?: number;
   onOpenTradeNotifications?: () => void;
-  /** 모바일 앱 다운로드 */
-  onOpenAppDownload?: () => void;
   /** 자석모드 현재 상태 */
   magnetMode?: 'off' | 'weak' | 'strong';
   /** 자석모드 토글 (off↔strong) */
@@ -146,6 +145,13 @@ export interface ToolbarProps {
   /** 9·20일 신고가·신저가 차트 표시 (실시간 차트 상단 툴바) */
   priceExtremeLabelsVisible?: boolean;
   onTogglePriceExtremeLabels?: () => void;
+  /** 매매 알림 팝업 표시 위치·방식 */
+  tradeAlertPopupPosition?: string;
+  tradeAlertPopupLayout?: string;
+  tradeAlertPopupGridCols?: number;
+  onTradeAlertPopupPosition?: (v: import('../utils/tradeAlertPopupLayout').TradeAlertPopupPosition) => void;
+  onTradeAlertPopupLayout?: (v: import('../utils/tradeAlertPopupLayout').TradeAlertPopupLayout) => void;
+  onTradeAlertPopupGridCols?: (v: number) => void;
 }
 
 // ─── SVG 아이콘 ────────────────────────────────────────────────────────────
@@ -229,14 +235,6 @@ const IcBell = () => (
     <circle cx="7.5" cy="13" r="0.8" fill="currentColor" stroke="none"/>
   </svg>
 );
-/** 모바일 앱 다운로드 */
-const IcAppDownload = () => (
-  <svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
-    <rect x="4" y="1.5" width="7" height="12" rx="1.5"/>
-    <line x1="7.5" y1="9" x2="7.5" y2="12"/>
-    <polyline points="5.5,10.5 7.5,12.5 9.5,10.5"/>
-  </svg>
-);
 /** 매매 시그널 알림 (번개 아이콘으로 가격 알림 벨과 구분) */
 const IcTradeSignal = () => (
   <svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
@@ -814,7 +812,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
   onFitContent, onScrollToNow, onAddIndicator, onAddIndicators, onIndicatorOrderChange, onRemoveByType,
   onAutoFib, onClearFib, onScreenshot,
   onToggleStats, onToggleWatch, onToggleAlert,
-  tradeNotifyUnread = 0, onOpenTradeNotifications, onOpenAppDownload,
+  tradeNotifyUnread = 0, onOpenTradeNotifications,
   magnetMode = 'off', onToggleMagnet,
   onUndo, onRedo, canUndo, canRedo, onClearDrawings,
   onToggleGrid,
@@ -837,6 +835,12 @@ const Toolbar: React.FC<ToolbarProps> = ({
   chartQuoteError = null,
   priceExtremeLabelsVisible = false,
   onTogglePriceExtremeLabels,
+  tradeAlertPopupPosition,
+  tradeAlertPopupLayout,
+  tradeAlertPopupGridCols,
+  onTradeAlertPopupPosition,
+  onTradeAlertPopupLayout,
+  onTradeAlertPopupGridCols,
 }) => {
   const [showMarket, setShowMarket] = React.useState(false);
   const [showTfMenu, setShowTfMenu] = React.useState(false);
@@ -1371,18 +1375,19 @@ const Toolbar: React.FC<ToolbarProps> = ({
             </svg>
           </button>
         )}
-        {onOpenAppDownload && (
-          <button
-            className="tv-icon-btn"
-            onClick={onOpenAppDownload}
-            title="GoldenChart 모바일 앱 다운로드"
-            aria-label="앱 다운로드"
-          >
-            <IcAppDownload />
-          </button>
-        )}
         {onOpenTradeNotifications && (
-          <span className="tv-trade-notify-wrap">
+          <>
+            {(onTradeAlertPopupPosition || onTradeAlertPopupLayout) && (
+              <TradeAlertPopupMenubarSelect
+                position={tradeAlertPopupPosition}
+                layout={tradeAlertPopupLayout}
+                gridCols={tradeAlertPopupGridCols}
+                onPositionChange={onTradeAlertPopupPosition}
+                onLayoutChange={onTradeAlertPopupLayout}
+                onGridColsChange={onTradeAlertPopupGridCols}
+              />
+            )}
+            <span className="tv-trade-notify-wrap">
             <button
               className="tv-icon-btn"
               onClick={onOpenTradeNotifications}
@@ -1396,6 +1401,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
               </span>
             )}
           </span>
+          </>
         )}
         <button className="tv-icon-btn" onClick={onToggleAlert} title="가격 알림">
           <IcBell />