feat(evolver): TrialsGrid + BaseDiff + BaseHistory 3 컴포넌트

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

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/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>
+    );
+}