feat(evolver): WinnerCard — Radar + 이전 base overlay + 메타 정보

This commit is contained in:
2026-05-23 02:14:58 +09:00
parent 5fd32030ab
commit 734bc6532e

View File

@@ -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>
);
}