feat(ui): AI 결과 배지 3단계 — 정확/적중/빗나감

스코어까지 맞으면 '정확 ✓'(강조), 승패만 맞으면 '적중 ✓', 그 외 '빗나감'.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
develop
hbyang 2026-06-12 10:25:56 +09:00
parent 7a2affe10a
commit 86290a7c69
2 changed files with 14 additions and 4 deletions

View File

@ -261,13 +261,20 @@ export default function Arena({
</div> </div>
<div className="mt-3 flex flex-col gap-1.5"> <div className="mt-3 flex flex-col gap-1.5">
{predictions.map((p) => { {predictions.map((p) => {
const hit = p.outcome === match.result!.outcome; const r = match.result!;
const exact = p.scoreA === r.scoreA && p.scoreB === r.scoreB;
const outcomeHit = p.outcome === r.outcome;
// 3단계: 정확(스코어까지) / 적중(승패만) / 빗나감
const label = exact ? t.exactHit : outcomeHit ? t.hit : t.miss;
const cls = exact
? "rounded bg-[var(--green)]/15 px-1.5 py-0.5 font-extrabold text-[var(--green)]"
: outcomeHit
? "font-bold text-[var(--green)]"
: "text-white/45";
return ( return (
<div key={p.model} className="flex items-center justify-between text-[13px]"> <div key={p.model} className="flex items-center justify-between text-[13px]">
<span className="font-bold text-white/85">{p.model}</span> <span className="font-bold text-white/85">{p.model}</span>
<span className={hit ? "font-bold text-[var(--green)]" : "text-white/45"}> <span className={cls}>{label}</span>
{hit ? t.hit : t.miss}
</span>
</div> </div>
); );
})} })}

View File

@ -85,6 +85,7 @@ type Dict = {
rulesCloseBtn: string; rulesCloseBtn: string;
crowdSub: string; crowdSub: string;
finalResult: string; finalResult: string;
exactHit: string;
hit: string; hit: string;
miss: string; miss: string;
matchEnded: string; matchEnded: string;
@ -154,6 +155,7 @@ export const DICT: Record<Lang, Dict> = {
rulesCloseBtn: "확인", rulesCloseBtn: "확인",
crowdSub: "| 참여자들의 선택", crowdSub: "| 참여자들의 선택",
finalResult: "최종 결과", finalResult: "최종 결과",
exactHit: "정확 ✓",
hit: "적중 ✓", hit: "적중 ✓",
miss: "빗나감", miss: "빗나감",
matchEnded: "경기 종료 · 최종 결과", matchEnded: "경기 종료 · 최종 결과",
@ -222,6 +224,7 @@ export const DICT: Record<Lang, Dict> = {
rulesCloseBtn: "Got it", rulesCloseBtn: "Got it",
crowdSub: "| What the crowd picked", crowdSub: "| What the crowd picked",
finalResult: "Final result", finalResult: "Final result",
exactHit: "Exact ✓",
hit: "Hit ✓", hit: "Hit ✓",
miss: "Miss", miss: "Miss",
matchEnded: "Match ended · Final", matchEnded: "Match ended · Final",