추세검색 설정 추가

frontend/src/components/SettingsPage.tsx

@@ -27,6 +27,8 @@ import {
   normalizeTradeAlertPopupPosition,
 } from '../utils/tradeAlertPopupLayout';
 import TradeAlertPopupPreview from './TradeAlertPopupPreview';
+import TrendSearchSettingsPanel from './trendSearch/TrendSearchSettingsPanel';
+import type { TrendSearchAppSettings } from '../utils/trendSearchAppSettings';
 import {
   CHART_LEGEND_SETTING_ITEMS,
   type ChartLegendVisibility,
@@ -114,6 +116,8 @@ interface SettingsPageProps {
   onPaperAutoTradeEnabled?: (v: boolean) => void;
   paperAutoTradeBudgetPct?: number;
   onPaperAutoTradeBudgetPct?: (v: number) => void;
+  virtualTargetMaxCount?: number;
+  onVirtualTargetMaxCount?: (v: number) => void;
   onPaperAccountReset?: () => void;
   tradingMode?: string;
   onTradingMode?: (v: string) => void;
@@ -132,6 +136,8 @@ interface SettingsPageProps {
   displayTimezone?: string;
   onDisplayTimezoneChange?: (tz: string) => void;
   menuPermissions?: Record<string, boolean>;
+  trendSearchSettings?: TrendSearchAppSettings;
+  onTrendSearchSettingsChange?: (s: TrendSearchAppSettings) => void;
 }
 
 // ── 카테고리 정의 ────────────────────────────────────────────────────────────
@@ -199,6 +205,13 @@ const IcPaper = () => (
     <circle cx="16" cy="6" r="2" fill="currentColor" stroke="none"/>
   </svg>
 );
+const IcTrendSearch = () => (
+  <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="4,17 9,11 13,14 18,6"/>
+    <line x1="4" y1="19" x2="18" y2="19"/>
+    <circle cx="18" cy="6" r="2" fill="currentColor" stroke="none"/>
+  </svg>
+);
 const IcBacktest = () => (
   <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
     <polyline points="2,17 6,11 9,14 13,7 16,10 20,4"/>
@@ -223,7 +236,8 @@ const ALL_CATEGORIES: Category[] = [
   { id: 'indicators', label: '보조지표 설정', icon: <IcIndicators />, desc: '지표 추가 Main 탭 보조지표 기본 파라미터·색상·기준선' },
   { id: 'backtest', label: '백테스팅',   icon: <IcBacktest />, desc: '백테스팅 실행 옵션, 자본·비용·리스크 관리 설정' },
   { id: 'strategy', label: '전략 설정',  icon: <IcStrategy />, desc: '투자 전략 기본 파라미터 및 조건 설정' },
-  { id: 'paper',    label: '가상투자',   icon: <IcPaper />,    desc: '가상 자본, 수수료, 자동매매 ON/OFF 등 가상투자 설정' },
+  { id: 'paper',    label: '가상매매',   icon: <IcPaper />,    desc: '가상 자본, 수수료, 투자대상 한도, 자동매매 ON/OFF 등 가상매매 설정' },
+  { id: 'trend-search', label: '추세검색', icon: <IcTrendSearch />, desc: '상승추세 배점, 합격 점수, 결과 수, 자동갱신·투자대상 자동추가' },
   { id: 'alert',    label: '알림 설정',  icon: <IcAlert />,    desc: '가격 알림, 신호 알림, 알림 방식 설정' },
   { id: 'network',  label: '네트워크',   icon: <IcNetwork />,  desc: 'API 서버 주소, WebSocket, 연결 상태' },
   { id: 'admin',    label: '관리자 설정', icon: <IcAdmin />,    desc: '사용자·역할·메뉴 접근 권한 관리 (관리자 비밀번호 필요)' },
@@ -292,6 +306,8 @@ interface PaperPanelProps {
   onPaperAutoTradeEnabled?: (v: boolean) => void;
   paperAutoTradeBudgetPct?: number;
   onPaperAutoTradeBudgetPct?: (v: number) => void;
+  virtualTargetMaxCount?: number;
+  onVirtualTargetMaxCount?: (v: number) => void;
   onPaperAccountReset?: () => void;
   tradingMode?: string;
   onTradingMode?: (v: string) => void;
@@ -319,6 +335,8 @@ const PaperPanel: React.FC<PaperPanelProps> = ({
   onPaperAutoTradeEnabled,
   paperAutoTradeBudgetPct = 95,
   onPaperAutoTradeBudgetPct,
+  virtualTargetMaxCount = 20,
+  onVirtualTargetMaxCount,
   onPaperAccountReset,
   tradingMode = 'PAPER',
   onTradingMode,
@@ -344,13 +362,27 @@ const PaperPanel: React.FC<PaperPanelProps> = ({
         </select>
       </SettingRow>
     </SettingSection>
-    <SettingSection title="가상투자 사용">
-      <SettingRow label="가상투자 활성화" desc="켜면 가상투자·실시간 차트 매매 패널·전략 Match 자동매매가 가상 계좌로 체결됩니다.">
+    <SettingSection title="가상매매">
+      <SettingRow label="가상매매 활성화" desc="켜면 가상매매·실시간 차트 매매 패널·전략 Match 자동매매가 가상 계좌로 체결됩니다.">
         <label className="stg-toggle">
           <input type="checkbox" checked={paperTradingEnabled} onChange={e => onPaperTradingEnabled?.(e.target.checked)} />
           <span className="stg-toggle-slider" />
         </label>
       </SettingRow>
+      <SettingRow
+        label="투자대상 목록 최대 개수"
+        desc="가상매매 화면·추세검색에서 등록할 수 있는 투자대상 종목 수 상한입니다."
+      >
+        <input
+          type="number"
+          className="stg-input stg-input--num"
+          value={virtualTargetMaxCount}
+          min={1}
+          max={100}
+          step={1}
+          onChange={e => onVirtualTargetMaxCount?.(Number(e.target.value))}
+        />
+      </SettingRow>
     </SettingSection>
     <SettingSection title="자동매매">
       <SettingRow
@@ -1398,6 +1430,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
   onPaperAutoTradeEnabled,
   paperAutoTradeBudgetPct = 95,
   onPaperAutoTradeBudgetPct,
+  virtualTargetMaxCount = 20,
+  onVirtualTargetMaxCount,
   onPaperAccountReset,
   tradingMode = 'PAPER',
   onTradingMode,
@@ -1416,6 +1450,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
   displayTimezone = 'Asia/Seoul',
   onDisplayTimezoneChange,
   menuPermissions,
+  trendSearchSettings,
+  onTrendSearchSettingsChange,
 }) => {
   const categories = filterCategories(menuPermissions);
   const [active, setActive] = useState<CategoryId>('general');
@@ -1510,6 +1546,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
           onPaperAutoTradeEnabled={onPaperAutoTradeEnabled}
           paperAutoTradeBudgetPct={paperAutoTradeBudgetPct}
           onPaperAutoTradeBudgetPct={onPaperAutoTradeBudgetPct}
+          virtualTargetMaxCount={virtualTargetMaxCount}
+          onVirtualTargetMaxCount={onVirtualTargetMaxCount}
           onPaperAccountReset={onPaperAccountReset}
           tradingMode={tradingMode}
           onTradingMode={onTradingMode}
@@ -1522,6 +1560,16 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
           onLiveAutoTradeBudgetPct={onLiveAutoTradeBudgetPct}
         />
       );
+      case 'trend-search': return (
+        trendSearchSettings && onTrendSearchSettingsChange ? (
+          <TrendSearchSettingsPanel
+            settings={trendSearchSettings}
+            onChange={onTrendSearchSettingsChange}
+          />
+        ) : (
+          <p className="stg-ind-unavailable">추세검색 설정을 불러올 수 없습니다.</p>
+        )
+      );
       case 'strategy': return (
         <StrategyPanel
           liveMarket={liveMarket}