feat(insta): 카드 탭 트렌딩 키워드 중복 제거 + 10개씩 페이지네이션

KeywordsPanel이 전체 목록을 세로로 길게 표시하던 것을, 동일 keyword
중복 제거(최고 score 유지)·score 내림차순 후 페이지당 10개만 렌더하고
이전(←)/다음(→) 페이저로 탐색하도록 변경. 카테고리 변경 시 첫 페이지 리셋.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/api.js

@@ -681,3 +681,45 @@ export const refreshScreenerSnap  = ()           => apiPost('/api/stock/screener
 export const listScreenerRuns     = (limit = 30) => apiGet (`/api/stock/screener/runs?limit=${limit}`);
 export const getScreenerRun       = (id)         => apiGet (`/api/stock/screener/runs/${id}`);
 
+// --- Lotto Weight Evolver ---
+
+export async function fetchEvolverStatus() {
+    const r = await fetch('/api/lotto/evolver/status');
+    if (!r.ok) throw new Error(`evolver/status ${r.status}`);
+    return r.json();
+}
+
+export async function fetchEvolverHistory(weeks = 12) {
+    const r = await fetch(`/api/lotto/evolver/history?weeks=${weeks}`);
+    if (!r.ok) throw new Error(`evolver/history ${r.status}`);
+    return r.json();
+}
+
+export async function fetchLottoTasks({ days = 7, taskType = null } = {}) {
+    const params = new URLSearchParams({ days: String(days), limit: '100' });
+    if (taskType) params.set('task_type', taskType);
+    const r = await fetch(`/api/agent-office/agents/lotto/tasks?${params}`);
+    if (!r.ok) throw new Error(`agent-office tasks ${r.status}`);
+    return r.json();
+}
+
+export async function fetchLottoLogs({ days = 7 } = {}) {
+    const r = await fetch(`/api/agent-office/agents/lotto/logs?limit=200`);
+    if (!r.ok) throw new Error(`agent-office logs ${r.status}`);
+    const data = await r.json();
+    if (!days) return data;
+    const cutoff = new Date(Date.now() - days * 24 * 3600 * 1000).toISOString();
+    return { items: (data.items || data.logs || []).filter(l => (l.created_at || '') >= cutoff) };
+}
+
+export async function triggerEvolverGenerate() {
+    const r = await fetch('/api/lotto/evolver/generate-now', { method: 'POST' });
+    if (!r.ok) throw new Error(`generate-now ${r.status}`);
+    return r.json();
+}
+
+export async function triggerEvolverEvaluate() {
+    const r = await fetch('/api/lotto/evolver/evaluate-now', { method: 'POST' });
+    if (!r.ok) throw new Error(`evaluate-now ${r.status}`);
+    return r.json();
+}

src/pages/agent-office/AgentOffice.css

@@ -97,7 +97,6 @@
 .ao-card-dot.working          { background: #22c55e; }
 .ao-card-dot.error            { background: #ef4444; }
 .ao-card-dot.waiting_approval { background: #f59e0b; }
-.ao-card-dot.break            { background: #94a3b8; }
 .ao-card-dot.pulse {
   animation: ao-pulse 1.6s ease-in-out infinite;
 }
@@ -194,7 +193,12 @@
 }
 .ao-sidepanel-state {
   font-size: 11px;
-  color: #22c55e;
+  color: #94a3b8;
+}
+.ao-sidepanel-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 .ao-sidepanel-close {
   background: none;
@@ -205,6 +209,18 @@
   padding: 0 4px;
 }
 .ao-sidepanel-close:hover { color: #fff; }
+/* 전체 화면 토글 — 모바일 전용 (데스크톱에서는 숨김) */
+.ao-sidepanel-expand {
+  display: none;
+  background: none;
+  border: none;
+  color: #888;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+.ao-sidepanel-expand:hover { color: #fff; }
 
 /* Tabs */
 .ao-sidepanel-tabs {
@@ -378,19 +394,31 @@
     bottom: 0;
     left: 0;
     right: 0;
+    top: auto;
     width: 100%;
+    height: 55vh;
     max-height: 55vh;
     border-left: none;
     border-top: 1px solid #333;
     border-radius: 16px 16px 0 0;
     animation: slideUp 0.25s ease-out;
     z-index: 100;
+    transition: height 0.25s ease, max-height 0.25s ease, border-radius 0.25s ease;
+  }
+  /* 전체 화면으로 확장 */
+  .ao-sidepanel.expanded {
+    top: 0;
+    height: 100dvh;
+    max-height: 100dvh;
+    border-radius: 0;
+    border-top: none;
   }
   @keyframes slideUp {
     from { transform: translateY(100%); }
     to { transform: translateY(0); }
   }
 
+  .ao-sidepanel-expand { display: inline-block; }
   .ao-sidepanel-header { padding: 8px 12px; }
   .ao-sidepanel-header::before {
     content: '';

src/pages/agent-office/AgentOffice.jsx

@@ -10,7 +10,7 @@ import './AgentOffice.css';
 
 export default function AgentOffice() {
   const {
-    agents, pendingTasks, notifications, connected,
+    agents, pendingTasks, notifications, connected, reconnectAttempt,
     refreshTrigger, clearNotifications
   } = useAgentManager();
 
@@ -53,7 +53,7 @@ export default function AgentOffice() {
 
   return (
     <div className="ao-root">
-      <TopBar connected={connected} />
+      <TopBar connected={connected} reconnectAttempt={reconnectAttempt} />
       <div className="ao-main">
         <div className="ao-grid-wrap">
           <AgentGrid

src/pages/agent-office/components/CommandTab.jsx

@@ -5,7 +5,7 @@ import { sendAgentCommand, approveAgentTask } from '../../../api';
 const QUICK_ACTIONS = {
   stock:      [{ action: 'fetch_news', label: 'Fetch News' }, { action: 'test_telegram', label: 'Test Telegram' }],
   music:      [{ action: 'credits', label: 'Check Credits' }],
-  blog:       [{ action: 'list_trend_keywords', label: 'List Keywords' }],
+  insta:      [{ action: 'extract', label: 'Extract News' }, { action: 'collect_trends', label: 'Collect Trends' }],
   realestate: [{ action: 'dashboard', label: 'Dashboard' }],
   lotto:      [{ action: 'status', label: 'Status' }, { action: 'curate_now', label: 'Curate Now' }]
 };
@@ -13,7 +13,7 @@ const QUICK_ACTIONS = {
 const PARAM_ACTIONS = {
   stock:      { action: 'add_alert', label: 'Add Alert', placeholder: '{"symbol":"005930","target_price":70000,"direction":"above"}' },
   music:      { action: 'compose', label: 'Compose', placeholder: 'jazzy lo-fi piano beat' },
-  blog:       { action: 'research', label: 'Research', placeholder: 'keyword to research' },
+  insta:      { action: 'render', label: 'Render Slate', placeholder: 'keyword_id (예: 42)' },
   realestate: { action: 'fetch_matches', label: 'Fetch Matches', placeholder: '' },
   lotto:      null
 };
@@ -46,6 +46,8 @@ export default function CommandTab({ agentId, agentState, pendingTask, onCommand
         params = { prompt: paramInput };
       } else if (paramAction.action === 'research') {
         params = { keyword: paramInput };
+      } else if (paramAction.action === 'render') {
+        params = { keyword_id: parseInt(paramInput, 10) };
       } else {
         try { params = JSON.parse(paramInput); } catch { params = { value: paramInput }; }
       }
@@ -87,7 +89,7 @@ export default function CommandTab({ agentId, agentState, pendingTask, onCommand
   return (
     <div className="ao-command-tab">
       {/* 승인 대기 UI */}
-      {agentState === 'waiting' && pendingTask && (
+      {agentState === 'waiting_approval' && pendingTask && (
         <div className="ao-approval-card">
           <div className="ao-approval-title">Awaiting Approval</div>
           <div className="ao-approval-desc">{pendingTask.task_type}: {pendingTask.detail || JSON.stringify(pendingTask.input_data)}</div>

src/pages/agent-office/components/CommandTab.test.jsx

@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import CommandTab from './CommandTab.jsx';
+
+vi.mock('../../../api', () => ({
+  sendAgentCommand: vi.fn(),
+  approveAgentTask: vi.fn(),
+}));
+
+describe('CommandTab approval card', () => {
+  const samplePendingTask = {
+    id: 'task-123',
+    task_type: 'lotto_briefing',
+    input_data: { draw_no: 1234 },
+  };
+
+  it('agentState가 waiting_approval이고 pendingTask가 있으면 승인 카드를 표시', () => {
+    render(
+      <CommandTab
+        agentId="lotto"
+        agentState="waiting_approval"
+        pendingTask={samplePendingTask}
+      />
+    );
+    expect(screen.getByText('Awaiting Approval')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Approve' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Reject' })).toBeInTheDocument();
+  });
+
+  it('agentState가 working이면 승인 카드를 표시하지 않음', () => {
+    render(
+      <CommandTab
+        agentId="lotto"
+        agentState="working"
+        pendingTask={samplePendingTask}
+      />
+    );
+    expect(screen.queryByText('Awaiting Approval')).toBeNull();
+  });
+
+  it('pendingTask가 null이면 waiting_approval이어도 승인 카드를 표시하지 않음', () => {
+    render(
+      <CommandTab
+        agentId="lotto"
+        agentState="waiting_approval"
+        pendingTask={null}
+      />
+    );
+    expect(screen.queryByText('Awaiting Approval')).toBeNull();
+  });
+});

src/pages/agent-office/components/LogTab.jsx

@@ -15,7 +15,7 @@ export default function LogTab({ agentId, refreshTrigger }) {
   useEffect(() => {
     let cancelled = false;
     getAgentLogs(agentId, 50).then(data => {
-      if (!cancelled) setLogs(data || []);
+      if (!cancelled) setLogs(Array.isArray(data) ? data : (data?.logs || []));
     });
     return () => { cancelled = true; };
   }, [agentId, refreshTrigger]);

src/pages/agent-office/components/SidePanel.jsx

@@ -10,6 +10,7 @@ const TABS = ['Commands', 'Tasks', 'Tokens', 'Logs'];
 
 export default function SidePanel({ agentId, agentState, pendingTask, onClose, refreshTrigger }) {
   const [activeTab, setActiveTab] = useState('Commands');
+  const [expanded, setExpanded] = useState(false);
   const meta = AGENT_META[agentId];
   if (!meta) return null;
 
@@ -18,7 +19,7 @@ export default function SidePanel({ agentId, agentState, pendingTask, onClose, r
     : agentState?.state || 'unknown';
 
   return (
-    <div className="ao-sidepanel">
+    <div className={`ao-sidepanel${expanded ? ' expanded' : ''}`}>
       <div className="ao-sidepanel-header">
         <div className="ao-sidepanel-agent">
           <div className="ao-sidepanel-icon" style={{ borderColor: meta.color }}>
@@ -29,7 +30,17 @@ export default function SidePanel({ agentId, agentState, pendingTask, onClose, r
             <div className="ao-sidepanel-state">● {stateText}</div>
           </div>
         </div>
-        <button className="ao-sidepanel-close" onClick={onClose}>×</button>
+        <div className="ao-sidepanel-actions">
+          <button
+            className="ao-sidepanel-expand"
+            onClick={() => setExpanded(e => !e)}
+            aria-label={expanded ? '축소' : '전체 화면'}
+            title={expanded ? '축소' : '전체 화면'}
+          >
+            {expanded ? '⤡' : '⤢'}
+          </button>
+          <button className="ao-sidepanel-close" onClick={onClose}>×</button>
+        </div>
       </div>
 
       <div className="ao-sidepanel-tabs">

src/pages/agent-office/components/TaskTab.jsx

@@ -11,6 +11,22 @@ const STATUS_STYLE = {
   rejected:  { bg: '#7f1d1d', fg: '#fca5a5' }
 };
 
+// result_data는 백엔드에서 dict 또는 string 둘 다 올 수 있다.
+// React child로 직접 못 그리는 객체는 stringify, string은 parse 시도 후 pretty,
+// 둘 다 안 되면 원본 문자열을 그대로 표시.
+function formatResultData(rd) {
+  if (rd == null) return '';
+  if (typeof rd === 'object') {
+    try { return JSON.stringify(rd, null, 2); }
+    catch { return String(rd); }
+  }
+  if (typeof rd === 'string') {
+    try { return JSON.stringify(JSON.parse(rd), null, 2); }
+    catch { return rd; }
+  }
+  return String(rd);
+}
+
 function formatTime(ts) {
   if (!ts) return '';
   const d = new Date(ts);
@@ -27,7 +43,7 @@ export default function TaskTab({ agentId, refreshTrigger }) {
   useEffect(() => {
     let cancelled = false;
     getAgentTasks(agentId, 20).then(data => {
-      if (!cancelled) setTasks(data || []);
+      if (!cancelled) setTasks(Array.isArray(data) ? data : (data?.tasks || []));
     });
     return () => { cancelled = true; };
   }, [agentId, refreshTrigger]);
@@ -46,10 +62,7 @@ export default function TaskTab({ agentId, refreshTrigger }) {
             </div>
             {expanded === task.id && task.result_data && (
               <pre className="ao-task-result">
-                {(() => {
-                  try { return JSON.stringify(JSON.parse(task.result_data), null, 2); }
-                  catch { return task.result_data; }
-                })()}
+                {formatResultData(task.result_data)}
               </pre>
             )}
           </div>

src/pages/agent-office/components/TaskTab.test.jsx

@@ -0,0 +1,87 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import TaskTab from './TaskTab.jsx';
+
+const mockGetAgentTasks = vi.fn();
+vi.mock('../../../api', () => ({
+  getAgentTasks: (...args) => mockGetAgentTasks(...args),
+}));
+
+describe('TaskTab response shape handling', () => {
+  it('백엔드가 {tasks: [...]} 객체로 wrapping해서 응답해도 .map 깨지지 않음', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce({
+      tasks: [
+        { id: 't1', task_type: 'compose', status: 'succeeded', created_at: '2026-05-18T08:00:00Z' },
+        { id: 't2', task_type: 'fetch_news', status: 'failed', created_at: '2026-05-18T08:05:00Z' },
+      ],
+    });
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    await waitFor(() => expect(screen.getByText('compose')).toBeInTheDocument());
+    expect(screen.getByText('fetch_news')).toBeInTheDocument();
+  });
+
+  it('백엔드가 bare array를 반환해도 동작 (backward compat)', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce([
+      { id: 't9', task_type: 'compose', status: 'succeeded', created_at: '2026-05-18T08:00:00Z' },
+    ]);
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    await waitFor(() => expect(screen.getByText('compose')).toBeInTheDocument());
+  });
+
+  it('응답이 falsy/empty이면 No tasks yet 표시', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce({ tasks: [] });
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    await waitFor(() => expect(screen.getByText('No tasks yet')).toBeInTheDocument());
+  });
+
+  it('task 클릭 → result_data가 객체일 때도 stringify되어 안전하게 렌더', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce({
+      tasks: [{
+        id: 't_compose',
+        task_type: 'compose',
+        status: 'succeeded',
+        created_at: '2026-05-18T08:00:00Z',
+        result_data: { music_task_id: 'abc-123', tracks: [] },
+      }],
+    });
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    const row = await screen.findByText('compose');
+    fireEvent.click(row.closest('.ao-task-item'));
+    const pre = await screen.findByText(/music_task_id/);
+    expect(pre.textContent).toContain('"music_task_id": "abc-123"');
+    expect(pre.textContent).toContain('"tracks": []');
+  });
+
+  it('task 클릭 → result_data가 JSON 문자열일 때 parse 후 pretty 렌더', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce({
+      tasks: [{
+        id: 't_str',
+        task_type: 'compose',
+        status: 'succeeded',
+        created_at: '2026-05-18T08:00:00Z',
+        result_data: '{"foo":"bar"}',
+      }],
+    });
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    const row = await screen.findByText('compose');
+    fireEvent.click(row.closest('.ao-task-item'));
+    const pre = await screen.findByText(/foo/);
+    expect(pre.textContent).toContain('"foo": "bar"');
+  });
+
+  it('task 클릭 → result_data가 plain string이면 그대로 표시 (parse 실패 fallback)', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce({
+      tasks: [{
+        id: 't_plain',
+        task_type: 'fetch_news',
+        status: 'succeeded',
+        created_at: '2026-05-18T08:00:00Z',
+        result_data: 'Just a log line',
+      }],
+    });
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    const row = await screen.findByText('fetch_news');
+    fireEvent.click(row.closest('.ao-task-item'));
+    expect(await screen.findByText('Just a log line')).toBeInTheDocument();
+  });
+});

src/pages/agent-office/components/TopBar.jsx

@@ -1,11 +1,19 @@
 // src/pages/agent-office/components/TopBar.jsx
-export default function TopBar({ connected }) {
+export default function TopBar({ connected, reconnectAttempt = 0 }) {
+  let statusText;
+  if (connected) {
+    statusText = 'Connected';
+  } else if (reconnectAttempt === 0) {
+    statusText = 'Connecting…';
+  } else {
+    statusText = `Disconnected · 재연결 시도 #${reconnectAttempt}`;
+  }
   return (
     <div className="ao-topbar">
       <div className="ao-topbar-left">
         <span className="ao-topbar-title">Agent Office</span>
         <span className={`ao-topbar-status ${connected ? 'connected' : 'disconnected'}`}>
-          ● {connected ? 'Connected' : 'Disconnected'}
+          ● {statusText}
         </span>
       </div>
     </div>

src/pages/agent-office/constants.js

@@ -1,10 +1,10 @@
 // src/pages/agent-office/constants.js
-import stockImg from './assets/agent_stock.png';
-import musicImg from './assets/agent_music.png';
-import instaImg from './assets/agent_insta.png';
-import realestateImg from './assets/agent_realestate.png';
-import lottoImg from './assets/agent_lotto.png';
-import undeterminedImg from './assets/agent_undetermined.png';
+import stockImg from './assets/agent_stock.webp';
+import musicImg from './assets/agent_music.webp';
+import instaImg from './assets/agent_insta.webp';
+import realestateImg from './assets/agent_realestate.webp';
+import lottoImg from './assets/agent_lotto.webp';
+import undeterminedImg from './assets/agent_undetermined.webp';
 
 export const AGENT_META = {
   stock:      { displayName: '주식 트레이더',   color: '#4488cc', image: stockImg },
@@ -38,7 +38,6 @@ export const STATE_COLORS = {
   working:          { color: '#22c55e', pulse: true  },
   error:            { color: '#ef4444', pulse: false },
   waiting_approval: { color: '#f59e0b', pulse: true  },
-  break:            { color: '#94a3b8', pulse: false },
 };
 
 export const DEFAULT_STATE_COLOR = STATE_COLORS.idle;

src/pages/agent-office/hooks/useAgentManager.js

@@ -1,24 +1,34 @@
 // src/pages/agent-office/hooks/useAgentManager.js
 import { useState, useEffect, useRef, useCallback } from 'react';
 
-const WS_RECONNECT_DELAY = 3000;
+// Exponential backoff with cap. 1s → 2s → 4s → 8s → 16s → 30s (cap)
+const WS_BACKOFF_BASE_MS = 1000;
+const WS_BACKOFF_CAP_MS = 30000;
+const WS_BACKOFF_MAX_EXP = 5;
 
 export function useAgentManager() {
   const [agents, setAgents] = useState({});           // { agentId: { state, detail, task_id } }
   const [pendingTasks, setPendingTasks] = useState([]); // [{id, agent_id, task_type, input_data}]
   const [notifications, setNotifications] = useState({}); // { agentId: count }
   const [connected, setConnected] = useState(false);
+  const [reconnectAttempt, setReconnectAttempt] = useState(0);
   const [refreshTrigger, setRefreshTrigger] = useState(0); // 탭 데이터 리프레시용
 
   const wsRef = useRef(null);
   const reconnectRef = useRef(null);
+  const connectRef = useRef(null);
+  const attemptRef = useRef(0);
 
   const connect = useCallback(() => {
     const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
     const ws = new WebSocket(`${protocol}://${window.location.host}/api/agent-office/ws`);
     wsRef.current = ws;
 
-    ws.onopen = () => setConnected(true);
+    ws.onopen = () => {
+      setConnected(true);
+      attemptRef.current = 0;
+      setReconnectAttempt(0);
+    };
 
     ws.onmessage = (e) => {
       const msg = JSON.parse(e.data);
@@ -68,12 +78,23 @@ export function useAgentManager() {
 
     ws.onclose = () => {
       setConnected(false);
-      reconnectRef.current = setTimeout(connect, WS_RECONNECT_DELAY);
+      const exp = Math.min(attemptRef.current, WS_BACKOFF_MAX_EXP);
+      const delay = Math.min(WS_BACKOFF_BASE_MS * 2 ** exp, WS_BACKOFF_CAP_MS);
+      attemptRef.current += 1;
+      setReconnectAttempt(attemptRef.current);
+      reconnectRef.current = setTimeout(() => connectRef.current?.(), delay);
     };
 
-    ws.onerror = () => ws.close();
+    // onerror fires before onclose; swallow so the browser doesn't print an
+    // unhandled-error pair for every retry. onclose still runs and schedules
+    // the next attempt.
+    ws.onerror = () => {};
   }, []);
 
+  useEffect(() => {
+    connectRef.current = connect;
+  }, [connect]);
+
   useEffect(() => {
     connect();
     return () => {
@@ -103,6 +124,7 @@ export function useAgentManager() {
     pendingTasks,
     notifications,
     connected,
+    reconnectAttempt,
     refreshTrigger,
     sendCommand,
     sendApproval,

src/pages/insta/InstaCards.css

@@ -1,5 +1,8 @@
 /* ── InstaCards ──────────────────────────────────────────────────────────── */
-.ic { max-width: 1100px; margin: 0 auto; padding: 24px 16px 80px; }
+.ic { max-width: 1100px; margin: 0 auto; padding: 16px 12px 80px; }
+@media (min-width: 768px) {
+  .ic { padding: 24px 16px 80px; }
+}
 
 /* 헤더 */
 .ic-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
@@ -24,10 +27,12 @@
 .ic-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: ic-spin .6s linear infinite; display: inline-block; }
 @keyframes ic-spin { to { transform: rotate(360deg); } }
 
-/* 레이아웃: 모바일 1컬럼, 데스크탑 2컬럼 */
-.ic-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
+/* 레이아웃: 모바일 1컬럼, 데스크탑 2컬럼.
+   minmax(0, 1fr)로 자식 overflow가 부모를 밀어내지 않도록 함 */
+.ic-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
+.ic-layout > * { min-width: 0; }
 @media (min-width: 768px) {
-  .ic-layout { grid-template-columns: 320px 1fr; }
+  .ic-layout { grid-template-columns: 320px minmax(0, 1fr); }
 }
 
 /* 섹션 카드 */
@@ -54,8 +59,27 @@
 .ic-keyword-row__meta { font-size: 0.72rem; color: rgba(255,255,255,.35); white-space: nowrap; }
 .ic-keyword-row__score { font-size: 0.75rem; font-weight: 700; color: #ec4899; min-width: 36px; text-align: right; }
 
-/* 슬레이트 그리드 */
-.ic-slates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
+/* 키워드 페이저 (10개씩, 이전/다음) */
+.ic-keywords__pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
+.ic-pager-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 36px; height: 36px; border-radius: 99px;
+  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
+  color: rgba(255,255,255,.7); font-size: 1.1rem; cursor: pointer; transition: all .15s;
+}
+.ic-pager-btn:hover:not(:disabled) { background: rgba(236,72,153,.18); border-color: #ec4899; color: #ec4899; }
+.ic-pager-btn:disabled { opacity: .3; cursor: not-allowed; }
+.ic-pager-info { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,.55); min-width: 48px; text-align: center; }
+
+/* 슬레이트 그리드 — 모바일 2칸 강제, 데스크탑 auto-fill */
+.ic-slates-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+@media (min-width: 640px) {
+  .ic-slates-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
+}
 .ic-slate-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .15s; }
 .ic-slate-card:hover { border-color: rgba(236,72,153,.4); }
 .ic-slate-card--active { border-color: #ec4899; }
@@ -73,14 +97,90 @@
 .ic-status-badge--sent { background: rgba(16,185,129,.15); color: #10b981; }
 .ic-status-badge--failed { background: rgba(239,68,68,.12); color: #ef4444; }
 
-/* 슬레이트 상세 패널 */
-.ic-detail { margin-top: 20px; padding: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; }
+/* 슬레이트 상세 패널 — min-width: 0으로 자식 overflow가 부모 밀지 않게 */
+.ic-detail {
+  margin-top: 20px; padding: 16px;
+  background: rgba(255,255,255,.04);
+  border: 1px solid rgba(255,255,255,.06); border-radius: 12px;
+  min-width: 0; max-width: 100%;
+}
 .ic-detail__header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
-.ic-detail__title { font-size: 1rem; font-weight: 700; color: var(--text-primary, #e4e4e7); flex: 1; }
+.ic-detail__title { font-size: 1rem; font-weight: 700; color: var(--text-primary, #e4e4e7); flex: 1; min-width: 0; }
 .ic-detail__actions { display: flex; gap: 8px; }
 
-.ic-pages-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 14px; scroll-snap-type: x mandatory; }
-.ic-page-img { width: 120px; flex-shrink: 0; aspect-ratio: 4/5; border-radius: 6px; object-fit: cover; scroll-snap-align: start; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
+/* ── pages strip wrapper (chevron + fade + indicator 캐러셀) ── */
+.ic-pages-wrap {
+  position: relative;
+  margin-bottom: 14px;
+  min-width: 0;
+}
+.ic-pages-strip {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  padding: 4px 48px 12px;
+  -webkit-overflow-scrolling: touch;
+  /* 양옆 fade로 "더 있다" affordance */
+  mask-image: linear-gradient(to right,
+    transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to right,
+    transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
+}
+.ic-pages-strip::-webkit-scrollbar { height: 6px; }
+.ic-pages-strip::-webkit-scrollbar-thumb { background: rgba(236,72,153,.4); border-radius: 3px; }
+.ic-pages-strip::-webkit-scrollbar-track { background: transparent; }
+
+.ic-page-img {
+  width: clamp(140px, 42vw, 220px);
+  flex-shrink: 0;
+  aspect-ratio: 4/5;
+  border-radius: 8px;
+  object-fit: cover;
+  scroll-snap-align: center;
+  border: 2px solid rgba(255,255,255,.08);
+  background: rgba(255,255,255,.04);
+  cursor: pointer;
+  transition: transform .15s, border-color .15s;
+}
+.ic-page-img.is-active {
+  border-color: #ec4899;
+  transform: scale(1.03);
+}
+
+.ic-pages-nav {
+  position: absolute;
+  top: calc(50% - 6px);
+  transform: translateY(-50%);
+  width: 40px; height: 40px;
+  border-radius: 50%; border: 0;
+  background: rgba(0,0,0,.65); color: #fff;
+  font-size: 24px; font-weight: 700; line-height: 1;
+  cursor: pointer; z-index: 2;
+  display: flex; align-items: center; justify-content: center;
+  backdrop-filter: blur(4px);
+  transition: opacity .15s, background .15s;
+}
+.ic-pages-nav:hover:not(:disabled) { background: rgba(236,72,153,.9); }
+.ic-pages-nav:disabled { opacity: .2; cursor: not-allowed; }
+.ic-pages-nav--prev { left: 0; }
+.ic-pages-nav--next { right: 0; }
+
+.ic-pages-indicator {
+  display: inline-flex; align-items: baseline; gap: 4px;
+  margin: 4px auto 0;
+  padding: 4px 12px;
+  background: rgba(255,255,255,.06);
+  border-radius: 99px;
+  font-size: 0.78rem;
+  color: rgba(255,255,255,.7);
+  font-variant-numeric: tabular-nums;
+}
+.ic-pages-indicator-row { display: flex; justify-content: center; }
+.ic-pages-indicator__current { color: #ec4899; font-weight: 700; }
+.ic-pages-indicator__sep { opacity: 0.5; }
+.ic-pages-indicator__total { opacity: 0.7; }
 
 .ic-caption-box { background: rgba(255,255,255,.03); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
 .ic-caption-box__label { font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; margin-bottom: 6px; }

src/pages/insta/InstaCards.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import PullToRefresh from '../../components/PullToRefresh';
 import {
   getInstaStatus,
@@ -521,11 +521,13 @@ function TriggerPanel() {
 
 /* ══════════════════════ 키워드 목록 ══════════════════════════════════════ */
 const CATEGORIES = ['전체', 'economy', 'psychology', 'celebrity'];
+const KEYWORDS_PER_PAGE = 10;
 
 function KeywordsPanel({ onCreateSlate }) {
   const [category, setCategory] = useState('전체');
   const [keywords, setKeywords] = useState([]);
   const [creating, setCreating] = useState(null); // keyword_id being created
+  const [page, setPage] = useState(0);
 
   const load = useCallback(() => {
     const cat = category === '전체' ? undefined : category;
@@ -533,6 +535,23 @@ function KeywordsPanel({ onCreateSlate }) {
   }, [category]);
 
   useEffect(() => { load(); }, [load]);
+  useEffect(() => { setPage(0); }, [category]); // 카테고리 변경 시 첫 페이지로
+
+  // 동일 keyword 중복 제거(최고 score 1개만 유지) + score 내림차순
+  const deduped = useMemo(() => {
+    const best = new Map();
+    for (const kw of keywords) {
+      const name = (kw.keyword || '').trim();
+      if (!name) continue;
+      const prev = best.get(name);
+      if (!prev || (kw.score ?? 0) > (prev.score ?? 0)) best.set(name, kw);
+    }
+    return [...best.values()].sort((a, b) => (b.score ?? 0) - (a.score ?? 0));
+  }, [keywords]);
+
+  const totalPages = Math.max(1, Math.ceil(deduped.length / KEYWORDS_PER_PAGE));
+  const safePage = Math.min(page, totalPages - 1);
+  const pageItems = deduped.slice(safePage * KEYWORDS_PER_PAGE, safePage * KEYWORDS_PER_PAGE + KEYWORDS_PER_PAGE);
 
   // 부모(InstaCards)의 handleCreateSlate에 위임 — progress 배너 + 스크롤 + 자동 미리보기 공통화
   async function handleCreate(kw) {
@@ -568,27 +587,47 @@ function KeywordsPanel({ onCreateSlate }) {
 
       {/* progress 표시는 상단 ic-slate-progress 배너에서 일괄 처리 */}
 
-      {keywords.length === 0 ? (
+      {deduped.length === 0 ? (
         <div className="ic-empty">키워드가 없습니다. 키워드 추출을 실행하세요.</div>
       ) : (
-        <div className="ic-keywords">
-          {keywords.map((kw) => (
-            <div key={kw.id} className="ic-keyword-row">
-              <span className="ic-keyword-row__kw">{kw.keyword}</span>
-              <span className="ic-keyword-row__meta">
-                {kw.category} · {kw.articles_count ?? 0}건
-              </span>
-              <span className="ic-keyword-row__score">{kw.score?.toFixed(1) ?? '-'}</span>
+        <>
+          <div className="ic-keywords">
+            {pageItems.map((kw) => (
+              <div key={kw.id} className="ic-keyword-row">
+                <span className="ic-keyword-row__kw">{kw.keyword}</span>
+                <span className="ic-keyword-row__meta">
+                  {kw.category} · {kw.articles_count ?? 0}건
+                </span>
+                <span className="ic-keyword-row__score">{kw.score?.toFixed(1) ?? '-'}</span>
+                <button
+                  className="ic-btn ic-btn--primary ic-btn--sm"
+                  onClick={() => handleCreate(kw)}
+                  disabled={!!creating}
+                >
+                  {creating === kw.id ? <span className="ic-spinner" /> : '🎴'}
+                </button>
+              </div>
+            ))}
+          </div>
+
+          {totalPages > 1 && (
+            <div className="ic-keywords__pager">
               <button
-                className="ic-btn ic-btn--primary ic-btn--sm"
-                onClick={() => handleCreate(kw)}
-                disabled={!!creating}
-              >
-                {creating === kw.id ? <span className="ic-spinner" /> : '🎴'}
-              </button>
+                className="ic-pager-btn"
+                onClick={() => setPage((p) => Math.max(0, p - 1))}
+                disabled={safePage === 0}
+                aria-label="이전 키워드"
+              >←</button>
+              <span className="ic-pager-info">{safePage + 1} / {totalPages}</span>
+              <button
+                className="ic-pager-btn"
+                onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
+                disabled={safePage >= totalPages - 1}
+                aria-label="다음 키워드"
+              >→</button>
             </div>
-          ))}
-        </div>
+          )}
+        </>
       )}
     </div>
   );
@@ -689,6 +728,91 @@ function SlatesPanel({ selectedId, onSelect }) {
   );
 }
 
+/* ══════════════════════ 페이지 스트립 (chevron + indicator) ═══════════ */
+function PagesStrip({ slateId, pageCount }) {
+  const stripRef = useRef(null);
+  const [activePage, setActivePage] = useState(1);
+
+  const scrollToPage = useCallback((pageNo) => {
+    const strip = stripRef.current;
+    if (!strip) return;
+    const next = Math.max(1, Math.min(pageCount, pageNo));
+    const child = strip.children[next - 1];
+    if (child) {
+      child.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+      setActivePage(next);
+    }
+  }, [pageCount]);
+
+  // 스크롤/드래그 시 가운데 카드 감지
+  const onScroll = useCallback(() => {
+    const strip = stripRef.current;
+    if (!strip) return;
+    const rect = strip.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    let best = 1, bestDist = Infinity;
+    Array.from(strip.children).forEach((child, i) => {
+      const cRect = child.getBoundingClientRect();
+      const cCenter = cRect.left + cRect.width / 2;
+      const dist = Math.abs(cCenter - centerX);
+      if (dist < bestDist) { bestDist = dist; best = i + 1; }
+    });
+    if (best !== activePage) setActivePage(best);
+  }, [activePage]);
+
+  // 키보드 ←/→
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+      if (e.key === 'ArrowLeft') { scrollToPage(activePage - 1); e.preventDefault(); }
+      else if (e.key === 'ArrowRight') { scrollToPage(activePage + 1); e.preventDefault(); }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [activePage, scrollToPage]);
+
+  return (
+    <div className="ic-pages-wrap">
+      <button
+        className="ic-pages-nav ic-pages-nav--prev"
+        onClick={() => scrollToPage(activePage - 1)}
+        disabled={activePage <= 1}
+        aria-label="이전 페이지"
+        type="button"
+      >‹</button>
+
+      <div className="ic-pages-strip" ref={stripRef} onScroll={onScroll}>
+        {Array.from({ length: pageCount }, (_, i) => i + 1).map((page) => (
+          <img
+            key={page}
+            className={`ic-page-img ${activePage === page ? 'is-active' : ''}`}
+            src={getInstaAssetUrl(slateId, page)}
+            alt={`Page ${page}`}
+            loading="lazy"
+            onClick={() => scrollToPage(page)}
+          />
+        ))}
+      </div>
+
+      <button
+        className="ic-pages-nav ic-pages-nav--next"
+        onClick={() => scrollToPage(activePage + 1)}
+        disabled={activePage >= pageCount}
+        aria-label="다음 페이지"
+        type="button"
+      >›</button>
+
+      <div className="ic-pages-indicator-row">
+        <span className="ic-pages-indicator">
+          <span className="ic-pages-indicator__current">{activePage}</span>
+          <span className="ic-pages-indicator__sep">/</span>
+          <span className="ic-pages-indicator__total">{pageCount}</span>
+        </span>
+      </div>
+    </div>
+  );
+}
+
 /* ══════════════════════ 슬레이트 상세 ══════════════════════════════════ */
 function SlateDetail({ slate, onDelete, onRender }) {
   const pages = slate.assets || [];
@@ -712,19 +836,9 @@ function SlateDetail({ slate, onDelete, onRender }) {
         </div>
       </div>
 
-      {/* 페이지 이미지 스트립 */}
+      {/* 페이지 이미지 스트립 (캐러셀: chevron + indicator + ←/→ 키보드) */}
       {(slate.status === 'rendered' || slate.status === 'sent') ? (
-        <div className="ic-pages-strip">
-          {Array.from({ length: pageCount }, (_, i) => i + 1).map((page) => (
-            <img
-              key={page}
-              className="ic-page-img"
-              src={getInstaAssetUrl(slate.id, page)}
-              alt={`Page ${page}`}
-              loading="lazy"
-            />
-          ))}
-        </div>
+        <PagesStrip slateId={slate.id} pageCount={pageCount} />
       ) : (
         <div className="ic-empty" style={{ padding: '20px 0' }}>
           {slate.status === 'failed' ? '렌더 실패 — 재렌더를 시도하세요.' : '렌더링 전입니다.'}

src/pages/lotto/Evolver.css

@@ -0,0 +1,194 @@
+/* Evolver tab — dark theme matching Lotto.css patterns */
+
+.lotto-evolver { display: flex; flex-direction: column; gap: 16px; }
+.lotto-evolver-muted { color: #94a3b8; }
+
+.lotto-evolver-intro {
+    display: flex; justify-content: space-between; align-items: center;
+    gap: 12px; flex-wrap: wrap;
+}
+.lotto-evolver-sub { margin: 0; color: #94a3b8; font-size: 0.9rem; flex: 1; }
+.lotto-evolver-refresh {
+    padding: 6px 12px;
+    background: rgba(255,255,255,0.06);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 6px;
+    color: #cbd5e1;
+    cursor: pointer;
+    font-size: 0.85rem;
+}
+.lotto-evolver-refresh:hover { background: rgba(255,255,255,0.1); }
+
+/* Generic card */
+.evolver-card {
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 12px;
+    padding: 18px 20px;
+    color: #e2e8f0;
+}
+.evolver-card h2 {
+    margin: 0 0 12px;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #f1f5f9;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+}
+.evolver-card .badge {
+    background: rgba(52,211,153,0.15);
+    color: #34d399;
+    padding: 2px 10px;
+    border-radius: 4px;
+    font-size: 0.7rem;
+    font-weight: 500;
+}
+.evolver-card.empty .muted, .evolver-card .muted { color: #64748b; }
+
+.lotto-evolver-empty h3 { margin: 0 0 6px; color: #f1f5f9; }
+.lotto-evolver-empty p { color: #94a3b8; margin: 0 0 12px; }
+
+/* WinnerCard */
+.winner-card .winner-meta {
+    display: flex; gap: 16px; flex-wrap: wrap;
+    color: #94a3b8; font-size: 0.85rem; margin-bottom: 14px;
+}
+.winner-card .winner-meta strong { color: #f1f5f9; font-weight: 600; }
+.winner-card .winner-chart { background: rgba(0,0,0,0.15); border-radius: 8px; padding: 8px; }
+
+/* TrialsGrid */
+.trials-grid .grid {
+    display: grid; grid-template-columns: repeat(6, 1fr);
+    gap: 8px; height: 140px; align-items: end;
+}
+.trial-cell {
+    border: 1px solid rgba(255,255,255,0.06);
+    background: rgba(255,255,255,0.03);
+    border-radius: 6px;
+    padding: 8px 4px;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: end;
+    cursor: pointer;
+    height: 100%;
+    color: #cbd5e1;
+    transition: background 0.15s;
+}
+.trial-cell:hover { background: rgba(255,255,255,0.06); }
+.trial-cell.winner { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); }
+.trial-cell .bar {
+    width: 80%;
+    background: #475569;
+    border-radius: 3px 3px 0 0;
+    min-height: 4px;
+}
+.trial-cell.winner .bar { background: #34d399; }
+.trial-cell .label { font-size: 0.85rem; margin-top: 6px; color: #e2e8f0; }
+.trial-cell .max-correct { font-size: 0.7rem; color: #94a3b8; }
+.trial-detail {
+    margin-top: 14px; padding: 12px;
+    background: rgba(0,0,0,0.15);
+    border-radius: 6px;
+    color: #cbd5e1;
+    font-size: 0.85rem;
+}
+.trial-detail h3 { margin: 0 0 8px; font-size: 0.9rem; color: #f1f5f9; }
+.trial-detail ul { margin: 8px 0 0; padding-left: 18px; }
+.trial-detail li { margin-bottom: 4px; }
+
+/* BaseDiff */
+.base-diff .diff-grid {
+    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
+}
+.metric-card {
+    padding: 12px 8px;
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(255,255,255,0.06);
+    border-radius: 8px;
+    text-align: center;
+    color: #cbd5e1;
+}
+.metric-card .metric-name {
+    color: #94a3b8;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+.metric-card .metric-values { margin: 6px 0; font-size: 0.8rem; }
+.metric-card .metric-values strong { color: #f1f5f9; }
+.metric-card .metric-diff { font-weight: 600; font-size: 0.8rem; }
+.metric-card.up .metric-diff, .metric-card.up-big .metric-diff { color: #34d399; }
+.metric-card.down .metric-diff, .metric-card.down-big .metric-diff { color: #f87171; }
+.metric-card.eq .metric-diff { color: #64748b; }
+
+/* BaseHistory chart container */
+.base-history { background: rgba(255,255,255,0.04); }
+
+/* ActivityCard — scrollable */
+.activity-card .activity-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    max-height: 420px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+.activity-card .activity-list::-webkit-scrollbar { width: 6px; }
+.activity-card .activity-list::-webkit-scrollbar-thumb {
+    background: rgba(255,255,255,0.15); border-radius: 3px;
+}
+.activity-item {
+    display: grid;
+    grid-template-columns: 24px 1fr auto;
+    gap: 10px;
+    padding: 10px 4px;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+    color: #cbd5e1;
+    font-size: 0.85rem;
+}
+.activity-item:last-child { border-bottom: none; }
+.activity-item .icon { font-size: 1rem; text-align: center; }
+.activity-item .body .line { color: #e2e8f0; }
+.activity-item .body strong { color: #f1f5f9; }
+.activity-item .ts {
+    color: #64748b;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    align-self: center;
+}
+.activity-item .status.ok { color: #34d399; }
+.activity-item .status.err { color: #f87171; }
+.activity-item .status.pending { color: #fbbf24; }
+.activity-item .detail { color: #94a3b8; font-size: 0.78rem; margin-top: 2px; }
+
+/* EvolverActions */
+.actions-card .action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
+.actions-card button {
+    padding: 8px 14px;
+    background: rgba(52,211,153,0.15);
+    color: #34d399;
+    border: 1px solid rgba(52,211,153,0.3);
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.85rem;
+}
+.actions-card button:hover:not(:disabled) { background: rgba(52,211,153,0.25); }
+.actions-card button:disabled { opacity: 0.5; cursor: wait; }
+.action-output {
+    background: rgba(0,0,0,0.3);
+    color: #94a3b8;
+    padding: 12px;
+    border-radius: 6px;
+    margin-top: 12px;
+    max-height: 200px;
+    overflow: auto;
+    font-size: 0.75rem;
+}
+
+@media (max-width: 640px) {
+    .trials-grid .grid { grid-template-columns: repeat(3, 1fr); height: auto; }
+    .base-diff .diff-grid { grid-template-columns: repeat(3, 1fr); }
+    .lotto-evolver-intro { flex-direction: column; align-items: stretch; }
+    .activity-card .activity-list { max-height: 360px; }
+}

src/pages/lotto/Evolver.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import Lotto from './Lotto';
+
+// /lotto/evolver URL → Lotto 페이지가 useLocation으로 활성 탭 자동 선택
+export default function Evolver() {
+    return <Lotto />;
+}

src/pages/lotto/Functions.jsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react';
 import BriefingTab from './tabs/BriefingTab';
 import AnalysisTab from './tabs/AnalysisTab';
 import PurchaseTab from './tabs/PurchaseTab';
+import EvolverTab from './tabs/EvolverTab';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import SwipeableView from '../../components/SwipeableView';
 
@@ -9,10 +10,19 @@ const TABS = [
     { id: 'briefing', label: '🗓 이번 주 브리핑' },
     { id: 'analysis', label: '📚 자료실 / Deep Dive' },
     { id: 'purchase', label: '💰 구매·성과' },
+    { id: 'evolver',  label: '🧬 자율 학습' },
 ];
 
-export default function Functions() {
-    const [tab, setTab] = useState('briefing');
+function renderTab(id) {
+    if (id === 'briefing') return <BriefingTab />;
+    if (id === 'analysis') return <AnalysisTab />;
+    if (id === 'purchase') return <PurchaseTab />;
+    if (id === 'evolver')  return <EvolverTab />;
+    return null;
+}
+
+export default function Functions({ initialTab = 'briefing' }) {
+    const [tab, setTab] = useState(initialTab);
     const isMobile = useIsMobile();
 
     const tabIndex = TABS.findIndex(t => t.id === tab);
@@ -28,7 +38,7 @@ export default function Functions() {
                     tabs={TABS.map(t => ({
                         key: t.id,
                         label: t.label,
-                        content: t.id === 'briefing' ? <BriefingTab /> : t.id === 'analysis' ? <AnalysisTab /> : <PurchaseTab />,
+                        content: renderTab(t.id),
                     }))}
                     activeIndex={tabIndex}
                     onTabChange={handleTabChange}
@@ -45,9 +55,7 @@ export default function Functions() {
                         ))}
                     </nav>
                     <div className="lotto-tab-body">
-                        {tab === 'briefing' && <BriefingTab />}
-                        {tab === 'analysis' && <AnalysisTab />}
-                        {tab === 'purchase' && <PurchaseTab />}
+                        {renderTab(tab)}
                     </div>
                 </>
             )}

src/pages/lotto/Lotto.jsx

@@ -1,8 +1,12 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 import Functions from './Functions';
 import './Lotto.css';
 
 const Lotto = () => {
+    const location = useLocation();
+    const initialTab = location.pathname.endsWith('/evolver') ? 'evolver' : 'briefing';
+
     return (
         <div className="lotto">
             <header className="lotto-header">
@@ -15,16 +19,17 @@ const Lotto = () => {
                     </p>
                 </div>
                 <div className="lotto-card">
-                    <p className="lotto-card__title">시뮬레이션 추천 시스템</p>
+                    <p className="lotto-card__title">자율 학습 시뮬레이션</p>
                     <ul>
-                        <li>하루 6회 몬테카를로 시뮬레이션 자동 실행</li>
-                        <li>20,000개 후보를 5가지 통계 기법으로 스코어링</li>
-                        <li>핫·콜드·오버듀 번호 통계 분석 제공</li>
+                        <li>매주 6가지 가중치 시도 → 토요일 회고로 best base 학습</li>
+                        <li>능동 시그널 모니터링 (Sim·Drift·Confidence z-score) + 텔레그램 알림</li>
+                        <li>4시간마다 몬테카를로 20,000 후보 × 5종 점수 가중 평가</li>
+                        <li>AI 큐레이터 + 핫·콜드·오버듀 통계 분석</li>
                     </ul>
                 </div>
             </header>
 
-            <Functions />
+            <Functions initialTab={initialTab} />
         </div>
     );
 };

src/pages/lotto/evolver/BaseDiff.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+const METRIC_NAMES = ['freq', 'finger', 'gap', 'cooccur', 'divers'];
+
+function diffMarker(diff) {
+    if (Math.abs(diff) < 0.005) return { mark: '=', cls: 'eq' };
+    if (diff > 0) return diff < 0.05 ? { mark: '↑', cls: 'up' } : { mark: '↑↑', cls: 'up-big' };
+    return diff > -0.05 ? { mark: '↓', cls: 'down' } : { mark: '↓↓', cls: 'down-big' };
+}
+
+export default function BaseDiff({ previousBase, newBase, updateReason }) {
+    if (!previousBase || !newBase) {
+        return (
+            <div className="evolver-card base-diff empty">
+                <h2>다음주 base 변경</h2>
+                <p className="muted">아직 base 변경 이력 없음.</p>
+            </div>
+        );
+    }
+    return (
+        <div className="evolver-card base-diff">
+            <h2>다음주 base 변경 {updateReason && <span className="badge">{updateReason}</span>}</h2>
+            <div className="diff-grid">
+                {METRIC_NAMES.map((name, i) => {
+                    const prev = previousBase[i] || 0;
+                    const next = newBase[i] || 0;
+                    const diff = next - prev;
+                    const { mark, cls } = diffMarker(diff);
+                    return (
+                        <div key={name} className={`metric-card ${cls}`}>
+                            <div className="metric-name">{name}</div>
+                            <div className="metric-values">
+                                {prev.toFixed(2)} → <strong>{next.toFixed(2)}</strong>
+                            </div>
+                            <div className="metric-diff">
+                                {mark} {diff >= 0 ? '+' : ''}{(diff * 100).toFixed(0)}%p
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}

src/pages/lotto/evolver/BaseHistory.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
+} from 'recharts';
+
+const METRIC_NAMES = ['freq', 'finger', 'gap', 'cooccur', 'divers'];
+const COLORS = ['#34d399', '#60a5fa', '#fbbf24', '#f43f5e', '#c084fc'];
+
+export default function BaseHistory({ history }) {
+    if (!history || history.length === 0) {
+        return (
+            <div className="evolver-card base-history empty">
+                <h2>12주 Base 변화</h2>
+                <p className="muted">학습 이력이 부족합니다.</p>
+            </div>
+        );
+    }
+
+    const data = history
+        .slice()
+        .reverse()
+        .map(h => {
+            const w = h.weight || [0, 0, 0, 0, 0];
+            return {
+                date: (h.effective_from || '').slice(5),
+                freq: w[0], finger: w[1], gap: w[2], cooccur: w[3], divers: w[4],
+                reason: h.update_reason,
+            };
+        });
+
+    return (
+        <div className="evolver-card base-history">
+            <h2>Base 변화 (최근 {history.length}주)</h2>
+            <ResponsiveContainer width="100%" height={280}>
+                <LineChart data={data}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="date" />
+                    <YAxis domain={[0, 0.5]} />
+                    <Tooltip />
+                    <Legend />
+                    {METRIC_NAMES.map((name, i) => (
+                        <Line key={name} type="monotone" dataKey={name} stroke={COLORS[i]} dot />
+                    ))}
+                </LineChart>
+            </ResponsiveContainer>
+        </div>
+    );
+}

src/pages/lotto/evolver/EvolverActions.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { triggerEvolverGenerate, triggerEvolverEvaluate } from '../../../api';
+
+export default function EvolverActions({ onChange }) {
+    const [busy, setBusy] = useState(null);
+    const [out, setOut] = useState(null);
+
+    async function run(kind) {
+        setBusy(kind);
+        setOut(null);
+        try {
+            const fn = kind === 'generate' ? triggerEvolverGenerate : triggerEvolverEvaluate;
+            const res = await fn();
+            setOut(res);
+            onChange && onChange();
+        } catch (e) {
+            setOut({ error: String(e) });
+        } finally {
+            setBusy(null);
+        }
+    }
+
+    return (
+        <div className="evolver-card actions-card">
+            <h2>수동 트리거 (dev)</h2>
+            <div className="action-buttons">
+                <button disabled={!!busy} onClick={() => run('generate')}>
+                    {busy === 'generate' ? '생성 중...' : 'generate-now (월요일 후보 생성)'}
+                </button>
+                <button disabled={!!busy} onClick={() => run('evaluate')}>
+                    {busy === 'evaluate' ? '평가 중...' : 'evaluate-now (회고 + base 갱신)'}
+                </button>
+            </div>
+            {out && <pre className="action-output">{JSON.stringify(out, null, 2)}</pre>}
+        </div>
+    );
+}

src/pages/lotto/evolver/LottoActivityTimeline.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+
+const ICONS = {
+    curate_weekly: '📋',
+    signal_check: '🔍',
+    daily_digest: '📊',
+    weekly_evolution_report: '🧬',
+    evolver_generate: '🌱',
+    evolver_apply: '🎲',
+};
+
+const STATUS_CLS = {
+    succeeded: 'ok',
+    failed: 'err',
+    working: 'pending',
+    pending: 'pending',
+};
+
+function formatTaskDetail(t) {
+    const r = t.result_data || {};
+    switch (t.task_type) {
+        case 'signal_check': return `${r.source} → ${r.overall_fire} (${r.n_results} results)`;
+        case 'daily_digest': return `평가 ${r.evaluated} / 발화 ${r.fired}`;
+        case 'weekly_evolution_report': return `draw=${r.draw_no} reason=${r.update_reason}`;
+        case 'evolver_apply': return `${r.n_picks}세트 추출`;
+        case 'evolver_generate': return `${r.trials_count} trials 생성`;
+        case 'curate_weekly': return `draw=${r.draw_no || '?'} conf=${r.confidence || '?'}`;
+        default: return '';
+    }
+}
+
+function renderItem(item) {
+    const ts = (item.ts || '').replace('T', ' ').slice(0, 19);
+    if (item.kind === 'task') {
+        const t = item.payload;
+        const icon = ICONS[t.task_type] || '⚙️';
+        const cls = STATUS_CLS[t.status] || '';
+        const detail = formatTaskDetail(t);
+        return (
+            <li key={`task-${t.id}`} className={`activity-item task ${cls}`}>
+                <span className="icon">{icon}</span>
+                <div className="body">
+                    <div className="line"><strong>{t.task_type}</strong> · <span className={`status ${cls}`}>{t.status}</span></div>
+                    {detail && <div className="detail">{detail}</div>}
+                </div>
+                <span className="ts">{ts}</span>
+            </li>
+        );
+    }
+    if (item.kind === 'log') {
+        const l = item.payload;
+        return (
+            <li key={`log-${l.id}`} className={`activity-item log level-${l.level}`}>
+                <span className="icon">{l.level === 'error' ? '❌' : l.level === 'warning' ? '⚠️' : '·'}</span>
+                <div className="body"><div className="line">{l.message}</div></div>
+                <span className="ts">{ts}</span>
+            </li>
+        );
+    }
+    if (item.kind === 'evolver') {
+        const e = item.payload;
+        return (
+            <li key={`evolver-${e.id}`} className="activity-item evolver">
+                <span className="icon">⚖️</span>
+                <div className="body">
+                    <div className="line"><strong>weight_evolver_eval</strong> (lotto-lab)</div>
+                    <div className="detail">reason={e.update_reason} winner_max={e.winner_max_correct}</div>
+                </div>
+                <span className="ts">{ts}</span>
+            </li>
+        );
+    }
+    return null;
+}
+
+export default function LottoActivityTimeline({ activity = [], days = 7 }) {
+    if (!activity || activity.length === 0) {
+        return (
+            <div className="evolver-card activity-card empty">
+                <h2>최근 활동</h2>
+                <p className="muted">지난 {days}일 활동 없음.</p>
+            </div>
+        );
+    }
+    return (
+        <div className="evolver-card activity-card">
+            <h2>최근 {days}일 에이전트 활동 ({activity.length})</h2>
+            <ul className="activity-list">{activity.map(renderItem)}</ul>
+        </div>
+    );
+}

src/pages/lotto/evolver/TrialsGrid.jsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+
+const DAY_NAMES = ['월', '화', '수', '목', '금', '토'];
+
+export default function TrialsGrid({ trials, perDay, winnerTrialId }) {
+    const [expanded, setExpanded] = useState(null);
+
+    const byDow = {};
+    for (const t of trials || []) byDow[t.day_of_week] = t;
+
+    const perDayByDow = {};
+    for (const d of perDay || []) perDayByDow[d.day_of_week] = d;
+
+    const maxScore = Math.max(...(perDay || []).map(d => d.avg_score || 0), 0.001);
+
+    return (
+        <div className="evolver-card trials-grid">
+            <h2>이번주 6일 Trials</h2>
+            <div className="grid">
+                {DAY_NAMES.map((name, dow) => {
+                    const trial = byDow[dow];
+                    const day = perDayByDow[dow];
+                    const isWinner = trial && trial.id === winnerTrialId;
+                    const heightPct = day ? (day.avg_score / maxScore) * 100 : 0;
+                    return (
+                        <button
+                            key={dow}
+                            type="button"
+                            className={`trial-cell ${isWinner ? 'winner' : ''} ${expanded === dow ? 'expanded' : ''}`}
+                            onClick={() => setExpanded(expanded === dow ? null : dow)}
+                        >
+                            <div className="bar" style={{ height: `${heightPct}%` }} />
+                            <span className="label">{name}{isWinner && '⭐'}</span>
+                            {day && <span className="max-correct">max={day.max_correct}</span>}
+                        </button>
+                    );
+                })}
+            </div>
+            {expanded !== null && byDow[expanded] && (
+                <div className="trial-detail">
+                    <h3>{DAY_NAMES[expanded]}요일 상세</h3>
+                    <p>W = [{(byDow[expanded].weight || []).map(w => w.toFixed(2)).join(', ')}]</p>
+                    <ul>
+                        {(byDow[expanded].picks || []).map(p => (
+                            <li key={p.id}>
+                                {(p.numbers || []).join(', ')} —
+                                score {(p.meta_score || 0).toFixed(3)}
+                                {p.correct != null && ` · 적중 ${p.correct}개`}
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+}

src/pages/lotto/evolver/WinnerCard.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+    RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis,
+    Radar, ResponsiveContainer, Legend,
+} from 'recharts';
+
+const DAY_NAMES = ['월', '화', '수', '목', '금', '토'];
+const METRIC_NAMES = ['freq', 'finger', 'gap', 'cooccur', 'divers'];
+
+export default function WinnerCard({ winner, previousBase, updateReason, drawNo }) {
+    if (!winner) {
+        return (
+            <div className="evolver-card winner-card empty">
+                <h2>🏆 Winner</h2>
+                <p className="muted">아직 회고 결과가 없습니다.</p>
+            </div>
+        );
+    }
+
+    const dayName = DAY_NAMES[winner.day_of_week] || '?';
+    const W = winner.weight || [];
+    const prev = previousBase || [0.2, 0.2, 0.2, 0.2, 0.2];
+
+    const data = METRIC_NAMES.map((name, i) => ({
+        metric: name,
+        winner: W[i] || 0,
+        previous: prev[i] || 0,
+    }));
+
+    return (
+        <div className="evolver-card winner-card">
+            <header>
+                <h2>🏆 Winner: {dayName}요일</h2>
+                {updateReason && <span className="badge">{updateReason}</span>}
+            </header>
+            <div className="winner-meta">
+                <span>최고 적중 <strong>{winner.max_correct}개</strong></span>
+                <span>평균 점수 <strong>{(winner.avg_score || 0).toFixed(2)}</strong></span>
+                <span>{winner.n_picks}/5 picks</span>
+                {drawNo && <span>{drawNo}회차</span>}
+            </div>
+            <div className="winner-chart">
+                <ResponsiveContainer width="100%" height={300}>
+                    <RadarChart data={data}>
+                        <PolarGrid />
+                        <PolarAngleAxis dataKey="metric" />
+                        <PolarRadiusAxis angle={90} domain={[0, 0.5]} />
+                        <Radar name="이번주 winner" dataKey="winner" stroke="#34d399" fill="#34d399" fillOpacity={0.4} />
+                        <Radar name="이전 base" dataKey="previous" stroke="#999" fill="#999" fillOpacity={0.1} />
+                        <Legend />
+                    </RadarChart>
+                </ResponsiveContainer>
+            </div>
+        </div>
+    );
+}

src/pages/lotto/evolver/useEvolverApi.js

@@ -0,0 +1,60 @@
+import { useEffect, useState, useCallback } from 'react';
+import {
+    fetchEvolverStatus,
+    fetchEvolverHistory,
+    fetchLottoTasks,
+    fetchLottoLogs,
+} from '../../../api';
+
+
+function mergeActivityStream({ logs, tasks, evolverEvents }) {
+    const stream = [];
+    for (const l of logs.items || []) {
+        stream.push({ ts: l.created_at, kind: 'log', payload: l });
+    }
+    for (const t of tasks.items || tasks.tasks || []) {
+        stream.push({ ts: t.created_at, kind: 'task', payload: t });
+    }
+    for (const e of evolverEvents) {
+        stream.push({ ts: e.created_at, kind: 'evolver', payload: e });
+    }
+    stream.sort((a, b) => (b.ts || '').localeCompare(a.ts || ''));
+    return stream;
+}
+
+
+export function useEvolverApi({ days = 7, weeks = 12 } = {}) {
+    const [status, setStatus] = useState(null);
+    const [history, setHistory] = useState({ items: [] });
+    const [activity, setActivity] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    const refetch = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const [s, h, t, l] = await Promise.all([
+                fetchEvolverStatus(),
+                fetchEvolverHistory(weeks),
+                fetchLottoTasks({ days }),
+                fetchLottoLogs({ days }),
+            ]);
+            setStatus(s);
+            setHistory(h);
+            setActivity(mergeActivityStream({
+                logs: l,
+                tasks: t,
+                evolverEvents: h.items || [],
+            }));
+        } catch (e) {
+            setError(e);
+        } finally {
+            setLoading(false);
+        }
+    }, [days, weeks]);
+
+    useEffect(() => { refetch(); }, [refetch]);
+
+    return { status, history, activity, loading, error, refetch };
+}

src/pages/lotto/tabs/EvolverTab.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import '../Evolver.css';
+import { useEvolverApi } from '../evolver/useEvolverApi';
+import WinnerCard from '../evolver/WinnerCard';
+import TrialsGrid from '../evolver/TrialsGrid';
+import BaseDiff from '../evolver/BaseDiff';
+import BaseHistory from '../evolver/BaseHistory';
+import LottoActivityTimeline from '../evolver/LottoActivityTimeline';
+import EvolverActions from '../evolver/EvolverActions';
+
+export default function EvolverTab() {
+    const { status, history, activity, loading, error, refetch } = useEvolverApi({ days: 7, weeks: 12 });
+
+    if (loading) return <div className="lotto-evolver"><p className="lotto-evolver-muted">로딩 중...</p></div>;
+    if (error) return <div className="lotto-evolver"><p className="lotto-evolver-muted">에러: {String(error)}</p></div>;
+
+    const latestBase = (history.items || [])[0];
+    const previousBase = (history.items || [])[1]?.weight || status?.current_base || [0.2, 0.2, 0.2, 0.2, 0.2];
+    const newBase = latestBase?.weight || status?.current_base;
+
+    const trials = status?.trials || [];
+    const winnerTrialId = latestBase?.source_trial_id;
+    const winnerTrial = trials.find(t => t.id === winnerTrialId);
+    const winnerInfo = winnerTrial ? {
+        day_of_week: winnerTrial.day_of_week,
+        weight: winnerTrial.weight,
+        avg_score: latestBase?.winner_score,
+        max_correct: latestBase?.winner_max_correct,
+        n_picks: (winnerTrial.picks || []).length,
+    } : null;
+
+    const perDay = trials.map(t => ({
+        day_of_week: t.day_of_week,
+        trial_id: t.id,
+        avg_score: (t.picks || []).reduce((s, p) => s + (p.meta_score || 0), 0) / Math.max(1, (t.picks || []).length),
+        max_correct: Math.max(0, ...(t.picks || []).map(p => p.correct || 0)),
+    }));
+
+    const hasBase = (history.items || []).length > 0;
+
+    return (
+        <div className="lotto-evolver">
+            <div className="lotto-evolver-intro">
+                <p className="lotto-evolver-sub">
+                    매주 6가지 가중치를 시도해서 best 조합을 다음주 base로 학습합니다.
+                    {status?.latest_draw && ` 마지막 회차: ${status.latest_draw}회.`}
+                </p>
+                <button className="lotto-evolver-refresh" onClick={refetch}>↻ 새로고침</button>
+            </div>
+
+            {!hasBase ? (
+                <div className="evolver-card lotto-evolver-empty">
+                    <h3>아직 학습 시작 전</h3>
+                    <p>다음 월요일 09:00에 자동 시작 또는 수동 트리거 사용.</p>
+                    <EvolverActions onChange={refetch} />
+                </div>
+            ) : (
+                <>
+                    <WinnerCard
+                        winner={winnerInfo}
+                        previousBase={previousBase}
+                        updateReason={latestBase?.update_reason}
+                        drawNo={status?.latest_draw}
+                    />
+                    <TrialsGrid trials={trials} perDay={perDay} winnerTrialId={winnerTrialId} />
+                    <BaseDiff
+                        previousBase={previousBase}
+                        newBase={newBase}
+                        updateReason={latestBase?.update_reason}
+                    />
+                    <BaseHistory history={history.items || []} />
+                    <LottoActivityTimeline activity={activity} days={7} />
+                    <EvolverActions onChange={refetch} />
+                </>
+            )}
+        </div>
+    );
+}

src/pages/stock/StockTrade.jsx

@@ -6,7 +6,7 @@ import SwipeableView from '../../components/SwipeableView';
 import {
     formatNumber, formatPercent,
     toNumeric, profitColorClass,
-    TAB_PORTFOLIO, TAB_AI, TAB_REPORT, TAB_ADVISOR,
+    TAB_PORTFOLIO, TAB_REPORT, TAB_ADVISOR,
 } from './stockUtils';
 
 /* ── hooks ──────────────────────────────────────────────────────── */
@@ -15,13 +15,11 @@ import useSellHistory from './hooks/useSellHistory';
 import useAiCoach from './hooks/useAiCoach';
 import useAssetHistory from './hooks/useAssetHistory';
 import useMarketContext from './hooks/useMarketContext';
-import useAiBalance from './hooks/useAiBalance';
 import useReportData from './hooks/useReportData';
 import useAdvisor from './hooks/useAdvisor';
 
 /* ── tab components ─────────────────────────────────────────────── */
 import PortfolioTab from './components/PortfolioTab';
-import AiTradeTab from './components/AiTradeTab';
 import ReportTab from './components/ReportTab';
 import AdvisorTab from './components/AdvisorTab';
 import SellHistoryDrawer from './components/SellHistoryDrawer';
@@ -32,8 +30,8 @@ const StockTrade = () => {
     const [activeTab, setActiveTab] = React.useState(TAB_REPORT);
     const isMobile = useIsMobile();
 
-    const TAB_ORDER = [TAB_PORTFOLIO, TAB_AI, TAB_REPORT, TAB_ADVISOR];
-    const tabLabels = ['포트폴리오', 'AI 트레이드', '리포트', '어드바이저'];
+    const TAB_ORDER = [TAB_PORTFOLIO, TAB_REPORT, TAB_ADVISOR];
+    const tabLabels = ['포트폴리오', '리포트', '어드바이저'];
     const tabIndex = TAB_ORDER.indexOf(activeTab);
     const handleTabChange = useCallback((idx) => setActiveTab(TAB_ORDER[idx]), []); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -49,7 +47,6 @@ const StockTrade = () => {
         totalAssets: pf.totalAssets,
         marketCtx,
     });
-    const aib = useAiBalance();
     const report = useReportData({
         portfolioHoldings: pf.portfolioHoldings,
         portfolioSummary: pf.portfolioSummary,
@@ -97,12 +94,10 @@ const StockTrade = () => {
         if (activeTab === TAB_PORTFOLIO && !pf.portfolioLoaded) {
             pf.loadPortfolio();
             sell.loadSellHistory();
-        } else if (activeTab === TAB_AI && !aib.balanceLoaded) {
-            aib.loadBalance();
         } else if ((activeTab === TAB_REPORT || activeTab === TAB_ADVISOR) && !pf.portfolioLoaded) {
             pf.loadPortfolio();
         }
-    }, [activeTab, pf.portfolioLoaded, aib.balanceLoaded]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [activeTab, pf.portfolioLoaded]); // eslint-disable-line react-hooks/exhaustive-deps
 
     useEffect(() => {
         if (activeTab === TAB_PORTFOLIO) asset.loadAssetHistory(asset.assetHistoryDays);
@@ -135,42 +130,29 @@ const StockTrade = () => {
                     </div>
                 </div>
                 <div className="stock-card">
-                    <p className="stock-card__title">
-                        {activeTab === TAB_AI ? 'AI 투자 요약' : '쟁승토리 계좌 요약'}
-                    </p>
-                    {activeTab === TAB_PORTFOLIO || activeTab === TAB_REPORT ? (
-                        <div className="stock-status">
-                            <div><span>총 매입</span><strong>{formatNumber(pf.portfolioSummary.total_buy)}</strong></div>
-                            <div><span>총 평가</span><strong>{formatNumber(pf.portfolioSummary.total_eval)}</strong></div>
-                            <div>
-                                <span>총 손익</span>
-                                <strong className={`stock-profit ${profitColorClass(toNumeric(pf.portfolioSummary.total_profit))}`}>
-                                    {formatNumber(pf.portfolioSummary.total_profit)}
-                                    {pf.portfolioSummary.total_profit_rate != null && (
-                                        <small style={{ marginLeft: 4, fontSize: 11 }}>
-                                            ({formatPercent(pf.portfolioSummary.total_profit_rate)})
-                                        </small>
-                                    )}
-                                </strong>
-                            </div>
-                            <div><span>보유 종목</span><strong>{pf.portfolioHoldings.length}</strong></div>
-                            {pf.totalCash != null && (
-                                <div><span>예수금 합계</span><strong style={{ color: '#93c5fd' }}>{formatNumber(pf.totalCash)}원</strong></div>
-                            )}
-                            {pf.totalAssets != null && (
-                                <div><span>총 자산</span><strong style={{ fontWeight: 700 }}>{formatNumber(pf.totalAssets)}원</strong></div>
-                            )}
+                    <p className="stock-card__title">쟁승토리 계좌 요약</p>
+                    <div className="stock-status">
+                        <div><span>총 매입</span><strong>{formatNumber(pf.portfolioSummary.total_buy)}</strong></div>
+                        <div><span>총 평가</span><strong>{formatNumber(pf.portfolioSummary.total_eval)}</strong></div>
+                        <div>
+                            <span>총 손익</span>
+                            <strong className={`stock-profit ${profitColorClass(toNumeric(pf.portfolioSummary.total_profit))}`}>
+                                {formatNumber(pf.portfolioSummary.total_profit)}
+                                {pf.portfolioSummary.total_profit_rate != null && (
+                                    <small style={{ marginLeft: 4, fontSize: 11 }}>
+                                        ({formatPercent(pf.portfolioSummary.total_profit_rate)})
+                                    </small>
+                                )}
+                            </strong>
                         </div>
-                    ) : (
-                        <div className="stock-status">
-                            <div><span>총 평가금액</span><strong>{formatNumber(aib.totalEval)}</strong></div>
-                            <div><span>예수금</span><strong>{formatNumber(aib.deposit)}</strong></div>
-                            <div><span>보유 종목</span><strong>{aib.holdings.length}</strong></div>
-                        </div>
-                    )}
-                    {activeTab === TAB_AI && aib.summary.note ? (
-                        <p className="stock-status__note">{aib.summary.note}</p>
-                    ) : null}
+                        <div><span>보유 종목</span><strong>{pf.portfolioHoldings.length}</strong></div>
+                        {pf.totalCash != null && (
+                            <div><span>예수금 합계</span><strong style={{ color: '#93c5fd' }}>{formatNumber(pf.totalCash)}원</strong></div>
+                        )}
+                        {pf.totalAssets != null && (
+                            <div><span>총 자산</span><strong style={{ fontWeight: 700 }}>{formatNumber(pf.totalAssets)}원</strong></div>
+                        )}
+                    </div>
                 </div>
             </header>
 
@@ -182,11 +164,9 @@ const StockTrade = () => {
                         label: tabLabels[i],
                         content: tabId === TAB_PORTFOLIO
                             ? <PortfolioTab pf={pf} asset={asset} handleSell={handleSell} handleSaveSnapshot={handleSaveSnapshot} />
-                            : tabId === TAB_AI
-                                ? <AiTradeTab aib={aib} />
-                                : tabId === TAB_REPORT
-                                    ? <ReportTab pf={pf} report={report} ai={ai} marketCtx={marketCtx} />
-                                    : <AdvisorTab pf={pf} advisor={advisor} />,
+                            : tabId === TAB_REPORT
+                                ? <ReportTab pf={pf} report={report} ai={ai} marketCtx={marketCtx} />
+                                : <AdvisorTab pf={pf} advisor={advisor} />,
                     }))}
                     activeIndex={tabIndex}
                     onTabChange={handleTabChange}
@@ -196,7 +176,6 @@ const StockTrade = () => {
                     <div className="stock-main-tabs">
                         {[
                             { id: TAB_PORTFOLIO, icon: '💼', label: '쟁승토리 계좌', badge: pf.portfolioHoldings.length || null },
-                            { id: TAB_AI, icon: '🤖', label: 'AI 투자', sub: '모의투자' },
                             { id: TAB_REPORT, icon: '📊', label: '리포트', sub: '분석·AI코치' },
                             { id: TAB_ADVISOR, icon: '🧠', label: 'AI 어드바이저', sub: 'Gemini Pro', className: 'stock-main-tab--advisor' },
                         ].map(({ id, icon, label, sub, badge, className: cls }) => (
@@ -217,7 +196,6 @@ const StockTrade = () => {
                     {activeTab === TAB_PORTFOLIO && (
                         <PortfolioTab pf={pf} asset={asset} handleSell={handleSell} handleSaveSnapshot={handleSaveSnapshot} />
                     )}
-                    {activeTab === TAB_AI && <AiTradeTab aib={aib} />}
                     {activeTab === TAB_REPORT && <ReportTab pf={pf} report={report} ai={ai} marketCtx={marketCtx} />}
                     {activeTab === TAB_ADVISOR && <AdvisorTab pf={pf} advisor={advisor} />}
                 </>

src/pages/stock/components/AiTradeTab.jsx

@@ -1,220 +0,0 @@
-import React from 'react';
-import {
-    formatNumber, formatPercent,
-    getQty, getBuyPrice, getCurrentPrice, getProfitRate, getProfitLoss,
-    toNumeric, profitColorClass,
-} from '../stockUtils';
-
-const AiTradeTab = ({ aib }) => (
-    <>
-        {aib.balanceError ? <p className="stock-error">{aib.balanceError}</p> : null}
-
-        {/* AI Balance section */}
-        <section className="stock-panel stock-panel--wide">
-            <div className="stock-panel__head">
-                <div>
-                    <p className="stock-panel__eyebrow">AI 모의투자</p>
-                    <h3>보유 현황</h3>
-                    <p className="stock-panel__sub">
-                        AI가 운용 중인 모의투자 계좌의 잔고와 보유 종목을 확인합니다.
-                    </p>
-                </div>
-                <div className="stock-panel__actions">
-                    {aib.balanceLoading ? (
-                        <span className="stock-chip">조회 중</span>
-                    ) : null}
-                    <button
-                        className="button ghost small"
-                        onClick={aib.loadBalance}
-                        disabled={aib.balanceLoading}
-                    >
-                        새로고침
-                    </button>
-                </div>
-            </div>
-            <div className="stock-balance">
-                <div className="stock-balance__summary">
-                    {[
-                        { label: '총 평가', value: aib.totalEval },
-                        { label: '예수금', value: aib.deposit },
-                    ].map((item) => (
-                        <div key={item.label} className="stock-balance__card">
-                            <span>{item.label}</span>
-                            <strong>{formatNumber(item.value)}</strong>
-                        </div>
-                    ))}
-                </div>
-                {aib.holdings.length ? (
-                    <div className="stock-holdings">
-                        {aib.holdings.map((item, idx) => {
-                            const profitLoss = getProfitLoss(item);
-                            const profitLossNumeric = toNumeric(profitLoss);
-                            const profitClass = profitColorClass(profitLossNumeric);
-                            const profitRate = getProfitRate(item);
-                            const profitRateNumeric = toNumeric(profitRate);
-                            const profitRateClass = profitColorClass(profitRateNumeric);
-                            return (
-                                <div
-                                    key={item.code ?? `${item.name}-${idx}`}
-                                    className="stock-holdings__item"
-                                >
-                                    <div>
-                                        <p className="stock-holdings__name">
-                                            {item.name ?? item.code ?? 'N/A'}
-                                        </p>
-                                        <span className="stock-holdings__code">
-                                            {item.code ?? ''}
-                                        </span>
-                                    </div>
-                                    <div className="stock-holdings__metric">
-                                        <span>수량</span>
-                                        <strong>{formatNumber(getQty(item))}</strong>
-                                    </div>
-                                    <div className="stock-holdings__metric">
-                                        <span>매입가</span>
-                                        <strong>{formatNumber(getBuyPrice(item))}</strong>
-                                    </div>
-                                    <div className="stock-holdings__metric">
-                                        <span>현재가</span>
-                                        <strong>{formatNumber(getCurrentPrice(item))}</strong>
-                                    </div>
-                                    <div className="stock-holdings__metric">
-                                        <span>평가금액</span>
-                                        <strong>
-                                            {getCurrentPrice(item) != null && getQty(item) != null
-                                                ? formatNumber(toNumeric(getCurrentPrice(item)) * toNumeric(getQty(item)))
-                                                : '-'}
-                                        </strong>
-                                    </div>
-                                    <div className="stock-holdings__metric">
-                                        <span>수익률</span>
-                                        <strong className={`stock-profit ${profitRateClass}`}>
-                                            {formatPercent(profitRate)}
-                                        </strong>
-                                    </div>
-                                    <div className="stock-holdings__metric">
-                                        <span>평가손익</span>
-                                        <strong className={`stock-profit ${profitClass}`}>
-                                            {formatNumber(profitLoss)}
-                                        </strong>
-                                    </div>
-                                </div>
-                            );
-                        })}
-                    </div>
-                ) : (
-                    <p className="stock-empty">보유 종목이 없습니다.</p>
-                )}
-            </div>
-        </section>
-
-        {/* Manual order section */}
-        <section className="stock-panel stock-panel--wide">
-            <div className="stock-panel__head">
-                <div>
-                    <p className="stock-panel__eyebrow">수동 주문</p>
-                    <h3>직접 매수/매도</h3>
-                    <p className="stock-panel__sub">
-                        종목명 또는 종목코드를 입력하고 매수/매도 주문을 요청합니다.
-                    </p>
-                </div>
-            </div>
-            <form className="stock-order" onSubmit={aib.submitManualOrder}>
-                <label>
-                    종목명/코드
-                    <input
-                        type="text"
-                        value={aib.manualForm.code}
-                        onChange={(e) =>
-                            aib.setManualForm((prev) => ({ ...prev, code: e.target.value }))
-                        }
-                        placeholder="005930 또는 삼성전자"
-                        required
-                    />
-                </label>
-                <label>
-                    매수/매도
-                    <select
-                        value={aib.manualForm.type}
-                        onChange={(e) =>
-                            aib.setManualForm((prev) => ({ ...prev, type: e.target.value }))
-                        }
-                    >
-                        <option value="buy">매수</option>
-                        <option value="sell">매도</option>
-                    </select>
-                </label>
-                <label>
-                    수량
-                    <input
-                        type="number"
-                        min={1}
-                        step={1}
-                        value={aib.manualForm.qty}
-                        onChange={(e) =>
-                            aib.setManualForm((prev) => ({ ...prev, qty: Number(e.target.value) }))
-                        }
-                        required
-                    />
-                </label>
-                <label>
-                    금액(원)
-                    <input
-                        type="number"
-                        min={0}
-                        step={1}
-                        value={aib.manualForm.price}
-                        onChange={(e) =>
-                            aib.setManualForm((prev) => ({ ...prev, price: Number(e.target.value) }))
-                        }
-                    />
-                </label>
-                <button
-                    className="button primary"
-                    type="submit"
-                    disabled={aib.manualLoading}
-                >
-                    {aib.manualLoading ? '요청 중...' : '주문 요청'}
-                </button>
-                {aib.manualError ? (
-                    <p className="stock-error">{aib.manualError}</p>
-                ) : null}
-                {aib.manualResult ? (
-                    <div className="stock-result">
-                        <p className="stock-result__title">요청 결과</p>
-                        <pre>
-                            {typeof aib.manualResult === 'string'
-                                ? aib.manualResult
-                                : JSON.stringify(aib.manualResult, null, 2)}
-                        </pre>
-                    </div>
-                ) : null}
-            </form>
-        </section>
-
-        {/* KIS modal */}
-        {aib.kisModal ? (
-            <div className="stock-modal" role="dialog" aria-modal="true">
-                <div
-                    className="stock-modal__backdrop"
-                    onClick={() => aib.setKisModal('')}
-                />
-                <div className="stock-modal__card">
-                    <div className="stock-modal__head">
-                        <h4>주문 결과</h4>
-                        <button
-                            type="button"
-                            className="button ghost small"
-                            onClick={() => aib.setKisModal('')}
-                        >
-                            닫기
-                        </button>
-                    </div>
-                    <pre>{aib.kisModal}</pre>
-                </div>
-            </div>
-        ) : null}
-    </>
-);
-
-export default AiTradeTab;

src/pages/stock/hooks/useAiBalance.js

@@ -1,84 +0,0 @@
-import { useState, useCallback, useMemo } from 'react';
-import { getTradeBalance, createTradeOrder } from '../../../api';
-import { getQty, getBuyPrice, getCurrentPrice, getProfitRate, getProfitLoss } from '../stockUtils';
-
-export default function useAiBalance() {
-    const [balance, setBalance] = useState(null);
-    const [balanceLoading, setBalanceLoading] = useState(false);
-    const [balanceError, setBalanceError] = useState('');
-    const [balanceLoaded, setBalanceLoaded] = useState(false);
-
-    const [manualForm, setManualForm] = useState({
-        code: '',
-        qty: 1,
-        price: 0,
-        type: 'buy',
-    });
-    const [manualLoading, setManualLoading] = useState(false);
-    const [manualError, setManualError] = useState('');
-    const [manualResult, setManualResult] = useState(null);
-    const [kisModal, setKisModal] = useState('');
-
-    const loadBalance = useCallback(async () => {
-        setBalanceLoading(true);
-        setBalanceError('');
-        try {
-            const data = await getTradeBalance();
-            setBalance(data);
-            setBalanceLoaded(true);
-        } catch (err) {
-            setBalanceError(err?.message ?? String(err));
-        } finally {
-            setBalanceLoading(false);
-        }
-    }, []);
-
-    const submitManualOrder = async (event) => {
-        event.preventDefault();
-        setManualLoading(true);
-        setManualError('');
-        setManualResult(null);
-        try {
-            const payload = {
-                ticker: manualForm.code.trim(),
-                action: manualForm.type === 'sell' ? 'SELL' : 'BUY',
-                quantity: Number(manualForm.qty),
-                price: Number(manualForm.price),
-            };
-            const result = await createTradeOrder(payload);
-            setManualResult(result ?? { ok: true });
-            if (result?.kis_result !== undefined) {
-                const message =
-                    typeof result.kis_result === 'string'
-                        ? result.kis_result
-                        : JSON.stringify(result.kis_result, null, 2);
-                setKisModal(message);
-            }
-            await loadBalance();
-        } catch (err) {
-            setManualError(err?.message ?? String(err));
-        } finally {
-            setManualLoading(false);
-        }
-    };
-
-    /* derived */
-    const holdings = useMemo(() => {
-        if (!balance) return [];
-        if (Array.isArray(balance.holdings)) return balance.holdings;
-        if (Array.isArray(balance.positions)) return balance.positions;
-        if (Array.isArray(balance.items)) return balance.items;
-        return [];
-    }, [balance]);
-
-    const summary = balance?.summary ?? {};
-    const totalEval = summary.total_eval ?? balance?.total_eval ?? balance?.total_value;
-    const deposit = summary.deposit ?? balance?.deposit ?? balance?.available_cash;
-
-    return {
-        balance, balanceLoading, balanceError, balanceLoaded, loadBalance,
-        holdings, summary, totalEval, deposit,
-        manualForm, setManualForm, manualLoading, manualError, manualResult,
-        kisModal, setKisModal, submitManualOrder,
-    };
-}

src/pages/stock/hooks/usePortfolio.js

@@ -3,7 +3,7 @@ import {
     getPortfolio, addPortfolio, updatePortfolio, deletePortfolio,
     upsertCash, deleteCash,
 } from '../../../api';
-import { emptyPortfolioForm } from '../stockUtils';
+import { emptyPortfolioForm, computeBrokerSummary } from '../stockUtils';
 
 export default function usePortfolio() {
     const [portfolio, setPortfolio] = useState(null);
@@ -38,7 +38,12 @@ export default function usePortfolio() {
 
     /* derived */
     const portfolioHoldings = portfolio?.holdings ?? [];
-    const portfolioSummary = portfolio?.summary ?? {};
+    // 총 매입은 "각 종목 매입가의 단순 합(수량 미곱산)"으로 표시 (박재오 정의).
+    // 백엔드 summary.total_buy(매입가×수량)는 무시하고 프론트에서 재계산해
+    // 요약카드·증권사별·AI 프롬프트가 모두 같은 값을 쓰도록 통일.
+    const portfolioSummary = portfolioHoldings.length
+        ? { ...(portfolio?.summary ?? {}), total_buy: computeBrokerSummary(portfolioHoldings).totalBuy }
+        : (portfolio?.summary ?? {});
     const cashList = portfolio?.cash ?? [];
     const totalCash = portfolioSummary.total_cash ?? null;
     const totalAssets = portfolioSummary.total_assets ?? null;
@@ -69,23 +74,7 @@ export default function usePortfolio() {
         return map;
     }, [brokerGroups]);
 
-    const getBrokerSummary = (items) => {
-        // totalBuy: 요약 표시용 (매입가 purchase_price 기준)
-        // totalCostBasis: 손익 계산용 (평균단가 avg_price 기준)
-        let totalBuy = 0, totalCostBasis = 0, totalEvalAmt = 0, hasNullPrice = false;
-        for (const item of items) {
-            const qty = item.quantity ?? 0;
-            const purchase = item.purchase_price ?? item.avg_price ?? 0;
-            // 총 매입 = 종목별 매입가의 단순 합 (수량 미곱산)
-            totalBuy += purchase;
-            totalCostBasis += (item.avg_price ?? 0) * qty;
-            if (item.eval_amount != null) totalEvalAmt += item.eval_amount;
-            else hasNullPrice = true;
-        }
-        const totalProfit = totalEvalAmt - totalCostBasis;
-        const totalProfitRate = totalCostBasis > 0 ? (totalProfit / totalCostBasis) * 100 : 0;
-        return { totalBuy, totalEval: totalEvalAmt, totalProfit, totalProfitRate, hasNullPrice };
-    };
+    const getBrokerSummary = computeBrokerSummary;
 
     /* loaders */
     const loadPortfolio = useCallback(async () => {

src/pages/stock/stockUtils.js

@@ -125,9 +125,27 @@ export const emptySellForm = () => ({
     sold_at: toLocalDatetimeValue(new Date().toISOString()),
 });
 
+/* ── 증권사별 요약 집계 ──────────────────────────────────────────── */
+// totalBuy: 총 매입 = 각 종목 매입가(purchase_price)의 단순 합 (수량 미곱산, 박재오 정의).
+//           매입가 미설정 시 avg_price 폴백. 백엔드 total_buy(×수량)는 표시에 쓰지 않음.
+// totalCostBasis: 손익 계산용 매입원가 = SUM(avg_price × quantity) — 손익은 수량 곱산 유지.
+export const computeBrokerSummary = (items) => {
+    let totalBuy = 0, totalCostBasis = 0, totalEval = 0, hasNullPrice = false;
+    for (const item of items) {
+        const qty = item.quantity ?? 0;
+        const purchase = item.purchase_price ?? item.avg_price ?? 0;
+        totalBuy += purchase;
+        totalCostBasis += (item.avg_price ?? 0) * qty;
+        if (item.eval_amount != null) totalEval += item.eval_amount;
+        else hasNullPrice = true;
+    }
+    const totalProfit = totalEval - totalCostBasis;
+    const totalProfitRate = totalCostBasis > 0 ? (totalProfit / totalCostBasis) * 100 : 0;
+    return { totalBuy, totalEval, totalProfit, totalProfitRate, hasNullPrice };
+};
+
 /* ── TAB IDs ─────────────────────────────────────────────────────── */
 
 export const TAB_PORTFOLIO = 'portfolio';
-export const TAB_AI = 'ai';
 export const TAB_REPORT = 'report';
 export const TAB_ADVISOR = 'advisor';

src/pages/stock/stockUtils.test.js

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import { computeBrokerSummary } from './stockUtils.js';
+
+describe('computeBrokerSummary - 총 매입(total_buy) 계산', () => {
+    it('총 매입 = 각 종목 매입가(purchase_price)의 단순 합 (수량 미곱산)', () => {
+        const items = [
+            { quantity: 100, avg_price: 72000, purchase_price: 70000, eval_amount: 7450000 },
+        ];
+        // 매입가 70000 (수량 곱하지 않음)
+        expect(computeBrokerSummary(items).totalBuy).toBe(70_000);
+    });
+
+    it('purchase_price 미설정 시 avg_price로 폴백 (단순 합)', () => {
+        const items = [
+            { quantity: 100, avg_price: 72000, purchase_price: null, eval_amount: 7450000 },
+        ];
+        // 매입가 미입력 → 평균단가 72000 폴백
+        expect(computeBrokerSummary(items).totalBuy).toBe(72_000);
+    });
+
+    it('여러 종목 합산: 각 매입가의 단순 합', () => {
+        const items = [
+            { quantity: 100, avg_price: 70000, purchase_price: 70000, eval_amount: 7500000 },
+            { quantity: 50, avg_price: 130000, purchase_price: 130000, eval_amount: 6800000 },
+        ];
+        // 70000 + 130000 = 200,000 (수량 미곱산)
+        expect(computeBrokerSummary(items).totalBuy).toBe(200_000);
+    });
+
+    it('손익 = 총 평가 - 매입원가(avg_price × qty) — 손익은 수량 곱산 유지', () => {
+        const items = [
+            { quantity: 10, avg_price: 100000, purchase_price: 90000, eval_amount: 1_200_000 },
+        ];
+        const s = computeBrokerSummary(items);
+        // cost_basis = 100000 × 10 = 1,000,000; profit = 1,200,000 - 1,000,000 = 200,000
+        expect(s.totalEval).toBe(1_200_000);
+        expect(s.totalProfit).toBe(200_000);
+        expect(s.totalProfitRate).toBeCloseTo(20, 5);
+        expect(s.hasNullPrice).toBe(false);
+    });
+
+    it('eval_amount가 null인 종목이 있으면 hasNullPrice=true', () => {
+        const items = [
+            { quantity: 10, avg_price: 100000, purchase_price: 100000, eval_amount: null },
+        ];
+        expect(computeBrokerSummary(items).hasNullPrice).toBe(true);
+    });
+});

src/routes.jsx

@@ -16,6 +16,7 @@ import {
 const Home = lazy(() => import('./pages/home/Home'));
 const Blog = lazy(() => import('./pages/blog/Blog'));
 const Lotto = lazy(() => import('./pages/lotto/Lotto'));
+const Evolver = lazy(() => import('./pages/lotto/Evolver'));
 const Travel = lazy(() => import('./pages/travel/Travel'));
 const Stock = lazy(() => import('./pages/stock/Stock'));
 const StockTrade = lazy(() => import('./pages/stock/StockTrade'));
@@ -153,6 +154,10 @@ export const appRoutes = [
         path: 'lotto',
         element: <Lotto />,
     },
+    {
+        path: 'lotto/evolver',
+        element: <Evolver />,
+    },
     {
         path: 'stock',
         element: <Stock />,