gahusb/web-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge feature/lotto-curator-evolution: Lotto Curator Evolution (frontend)

Browse Source 
7 commits for Phase F + G:
- api.js: getLatestReview / getReviewHistory / bulkPurchase 헬퍼
- useReview 훅 + useBriefing 4계층 normalize
- DecisionCard + RetrospectiveBox + TierModeToggle + TierSection + PickCard + BulkPurchaseButton
- BriefingTab 단일 화면 재구성
- 분석탭 → 자료실 라벨 + 9개 패널 details 접힘
- PurchasePanel 자동 채점 일치수 배지 + 4등↑ 플래그
- 4주 추세 차트(너 vs 큐레이터 평균 일치)

자세한 컨셉/계획: docs/superpowers/{specs,plans}/2026-05-11-*.md
This commit is contained in:
gahusb
2026-05-11 09:39:08 +09:00
parent 42073a5bf3 baf34dd7aa
commit 3fa4dbda3c
18 changed files with 488 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/api.js
View File

@@ -680,3 +680,18 @@ export const getBatchJob = (id) => apiGet(`/api/music/generate-b
export const listBatchJobs = (status='all') => apiGet(`/api/music/generate-batch?status=${status}`);
export const listGenres = () => apiGet('/api/music/genres');
// === 주간 회고 (weekly_review) ===
// apiGet은 비-2xx 응답에서 `HTTP <status> ...` 메시지로 Error를 throw 하므로
// 404 케이스는 메시지를 파싱하여 null로 변환한다.
export const getLatestReview = () => apiGet('/api/lotto/review/latest').catch(e => {
if (e?.status === 404 || /^HTTP 404\b/.test(e?.message || '')) return null;
throw e;
});
export const getReviewHistory = (limit = 4) =>
apiGet(`/api/lotto/review/history?limit=${limit}`).then(d => d.reviews || []);
// === 큐레이터 4계층 원클릭 구매 ===
export const bulkPurchase = ({ draw_no, tier_mode, sets, amount }) =>
apiPost('/api/lotto/purchase/bulk', { draw_no, tier_mode, sets, amount });

2
src/pages/lotto/Functions.jsx
View File

@@ -7,7 +7,7 @@ import SwipeableView from '../../components/SwipeableView';
const TABS = [
{ id: 'briefing', label: '🗓 이번 주 브리핑' },
{ id: 'analysis', label: '📊 분석·통계' },
{ id: 'analysis', label: '📚 자료실 / Deep Dive' },
{ id: 'purchase', label: '💰 구매·성과' },
];

36
src/pages/lotto/Lotto.css
View File

@@ -1020,7 +1020,7 @@
.lotto-purchase-list__head {
display: grid;
grid-template-columns: 60px 100px 100px 100px minmax(0, 1fr) 120px;
grid-template-columns: 60px 100px 100px 100px minmax(0, 160px) minmax(0, 1fr) 120px;
gap: 8px;
padding: 10px 14px;
font-size: 11px;
@@ -1033,7 +1033,7 @@
.lotto-purchase-row {
display: grid;
grid-template-columns: 60px 100px 100px 100px minmax(0, 1fr) 120px;
grid-template-columns: 60px 100px 100px 100px minmax(0, 160px) minmax(0, 1fr) 120px;
gap: 8px;
align-items: center;
padding: 12px 14px;
@@ -1068,6 +1068,21 @@
justify-content: flex-end;
}
.lotto-purchase-row__hits {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px;
overflow: hidden;
}
.hit-badge { display: inline-block; min-width: 16px; padding: 1px 4px; margin-right: 2px;
font-size: 10px; border-radius: 4px; background: rgba(255,255,255,0.06); text-align: center; }
.hit-badge.hit-3 { background: rgba(80, 200, 120, 0.2); color: #76e09a; }
.hit-badge.hit-4 { background: rgba(255, 200, 80, 0.25); color: #ffce6e; font-weight: 700; }
.hit-badge.hit-5, .hit-badge.hit-6 { background: rgba(255, 100, 130, 0.3); color: #ff8aa0; font-weight: 700; }
.prize-flag { font-size: 10px; color: #ff8aa0; margin-left: 6px; }
.is-pos { color: #97c9aa; }
.is-neg { color: #f7a8a5; }
.is-prize { color: #fdd4b1; }
@@ -1098,8 +1113,8 @@
gap: 8px;
}
.lotto-purchase-list__head span:nth-child(n+3):nth-child(-n+5),
.lotto-purchase-row span:nth-child(n+3):nth-child(-n+5) {
.lotto-purchase-list__head span:nth-child(n+3):nth-child(-n+6),
.lotto-purchase-row span:nth-child(n+3):nth-child(-n+6) {
display: none;
}
@@ -1143,7 +1158,7 @@
.lotto-purchase-list__head,
.lotto-purchase-row {
grid-template-columns: 56px 90px 90px minmax(0, 1fr) 100px;
grid-template-columns: 56px 90px 90px minmax(0, 120px) minmax(0, 1fr) 100px;
}
.lotto-purchase-list__head span:nth-child(4),
@@ -1526,3 +1541,14 @@
font-size: 13px;
}
}
.lotto-section-fold { margin-bottom: 14px; }
.lotto-section-fold > summary { cursor: pointer; padding: 12px 16px; background: rgba(255,255,255,0.03);
border-radius: 10px; font-weight: 600; font-size: 14px; opacity: 0.85; }
.lotto-section-fold[open] > summary { margin-bottom: 12px; opacity: 1; }
.trend-chart { display: block; margin: 0 auto; }
.trend-legend { display: flex; gap: 16px; justify-content: center; font-size: 11px; opacity: 0.7; margin-top: 8px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.dot--curator { background: #b8a8ff; }
.dot--user { background: #76e09a; }

9
src/pages/lotto/components/PurchasePanel.jsx
View File

@@ -137,6 +137,7 @@ const PurchasePanel = ({
<span>투자금</span>
<span>당첨금</span>
<span>손익</span>
<span>채점</span>
<span>메모</span>
<span />
</div>
@@ -152,6 +153,14 @@ const PurchasePanel = ({
<span className={net >= 0 ? 'is-pos' : 'is-neg'}>
{net >= 0 ? '+' : ''}{fmtWon(net)}
</span>
<span className="lotto-purchase-row__hits">
{(rec.results || []).map((r, i) => (
<span key={i} className={`hit-badge hit-${r.correct}`}>{r.correct}</span>
))}
{(rec.results || []).some((r) => r.correct >= 4) && (
<span className="prize-flag">🚨 4등↑ 확인 필요</span>
)}
</span>
<span className="lotto-purchase-row__note">{rec.note || '-'}</span>
<div className="lotto-purchase-row__actions">
<button className="button ghost small" onClick={() => onEditStart(rec)}>

44
src/pages/lotto/components/PurchaseTrendChart.jsx Normal file
View File

@@ -0,0 +1,44 @@
import { useEffect, useState } from 'react';
import { getReviewHistory } from '../../../api';
export default function PurchaseTrendChart() {
const [reviews, setReviews] = useState([]);
useEffect(() => {
getReviewHistory(4).then(rs => setReviews(rs.reverse())); // asc
}, []);
if (reviews.length === 0) return null;
const maxAvg = Math.max(
...reviews.flatMap(r => [r.curator_avg_match || 0, r.user_avg_match || 0]),
2.5
);
const w = 320, h = 80, pad = 16;
const xs = (i) => pad + (i / Math.max(reviews.length - 1, 1)) * (w - 2 * pad);
const ys = (v) => v == null ? null : h - pad - (v / maxAvg) * (h - 2 * pad);
const line = (key) => reviews
.map((r, i) => ({ x: xs(i), y: ys(r[key]) }))
.filter(p => p.y != null)
.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`)
.join(' ');
return (
<section className="lotto-panel">
<div className="lotto-panel__head">
<div>
<p className="lotto-panel__eyebrow">Trend (last 4 weeks)</p>
<h3>너 vs 큐레이터 평균 일치 수</h3>
</div>
</div>
<svg width={w} height={h} className="trend-chart">
<path d={line('curator_avg_match')} stroke="#b8a8ff" strokeWidth="2" fill="none" />
<path d={line('user_avg_match')} stroke="#76e09a" strokeWidth="2" fill="none" />
</svg>
<div className="trend-legend">
<span><span className="dot dot--curator" /> 큐레이터</span>
<span><span className="dot dot--user" /> 너</span>
</div>
</section>
);
}

33
src/pages/lotto/components/decision/BulkPurchaseButton.jsx Normal file
View File

@@ -0,0 +1,33 @@
import { useState } from 'react';
import { bulkPurchase } from '../../../../api';
import { MODES } from './TierModeToggle';
export default function BulkPurchaseButton({ drawNo, tierMode, onSuccess }) {
const [busy, setBusy] = useState(false);
const mode = MODES.find(m => m.key === tierMode) || MODES[0];
const onClick = async () => {
if (busy) return;
setBusy(true);
try {
await bulkPurchase({
draw_no: drawNo,
tier_mode: tierMode,
sets: mode.sets,
amount: mode.amount,
});
onSuccess?.();
alert(`${mode.sets}세트 구매 기록 완료!`);
} catch (e) {
alert(`구매 기록 실패: ${e?.message || e}`);
} finally {
setBusy(false);
}
};
return (
<button className="lc-btn lc-btn--prim" onClick={onClick} disabled={busy || !drawNo}>
{busy ? '저장 중...' : `이대로 ${mode.sets}세트 구매했음`}
</button>
);
}

102
src/pages/lotto/components/decision/DecisionCard.jsx Normal file
View File

@@ -0,0 +1,102 @@
import { useEffect, useMemo, useState } from 'react';
import RetrospectiveBox from './RetrospectiveBox';
import TierModeToggle, { MODES } from './TierModeToggle';
import TierSection from './TierSection';
import BulkPurchaseButton from './BulkPurchaseButton';
import './decision.css';
const TIER_CHAIN = {
core: ['core'],
core_bonus: ['core', 'bonus'],
core_bonus_extended: ['core', 'bonus', 'extended'],
full: ['core', 'bonus', 'extended', 'pool'],
};
const STORAGE_KEY = 'lotto.tier_mode';
export default function DecisionCard({ briefing, review, onPurchaseSuccess }) {
const [tierMode, setTierMode] = useState(() =>
localStorage.getItem(STORAGE_KEY) || 'core'
);
useEffect(() => {
localStorage.setItem(STORAGE_KEY, tierMode);
}, [tierMode]);
const visibleTiers = TIER_CHAIN[tierMode];
const totalSets = useMemo(
() => visibleTiers.reduce((sum, t) => sum + (briefing?.picks?.[t]?.length || 0), 0),
[briefing, visibleTiers]
);
// 분배 칩 — 보이는 계층의 risk_tag 합산
const balance = useMemo(() => {
const acc = { '안정': 0, '균형': 0, '공격': 0 };
for (const t of visibleTiers) {
for (const p of (briefing?.picks?.[t] || [])) {
if (acc[p.risk_tag] !== undefined) acc[p.risk_tag]++;
}
}
return acc;
}, [briefing, visibleTiers]);
if (!briefing) return null;
let cursor = 0;
return (
<div className="lc-card">
<header className="lc-head">
<div>
<p className="lc-eyebrow">Curator Briefing · {briefing.draw_no}회</p>
<h3 className="lc-title">{briefing.narrative.headline}</h3>
</div>
<div className="lc-conf">
<div className="lc-conf__num">{briefing.confidence}</div>
<div className="lc-conf__lbl">CONFIDENCE</div>
</div>
</header>
<RetrospectiveBox briefing={briefing} review={review} />
<p className="lc-headline-3">
{(briefing.narrative.summary_3lines || []).join(' · ')}
</p>
<div className="lc-balance">
<div className="lc-balance__chips">
{balance['안정'] > 0 && <span className="lc-chip lc-chip--stable">안정 ×{balance['안정']}</span>}
{balance['균형'] > 0 && <span className="lc-chip lc-chip--balance">균형 ×{balance['균형']}</span>}
{balance['공격'] > 0 && <span className="lc-chip lc-chip--aggro">공격 ×{balance['공격']}</span>}
</div>
</div>
<TierModeToggle value={tierMode} onChange={setTierMode} />
{visibleTiers.map(tier => {
const picks = briefing.picks?.[tier] || [];
const idxBase = cursor;
cursor += picks.length;
return (
<TierSection
key={tier}
tier={tier}
picks={picks}
rationale={briefing.tier_rationale?.[tier]}
indexBase={idxBase}
totalSets={totalSets}
/>
);
})}
<div className="lc-actions">
<BulkPurchaseButton
drawNo={briefing.draw_no}
tierMode={tierMode}
onSuccess={onPurchaseSuccess}
/>
</div>
</div>
);
}

19
src/pages/lotto/components/decision/PickCard.jsx Normal file
View File

@@ -0,0 +1,19 @@
const ROLE_COLOR = { '안정': 'stable', '균형': 'balance', '공격': 'aggro' };
export default function PickCard({ pick, index, total }) {
const role = pick.risk_tag;
return (
<div className="lc-set">
<div className="lc-set__head">
<span className={`lc-set__role lc-set__role--${ROLE_COLOR[role]}`}>● {role}</span>
<span className="lc-set__idx">Set {index + 1} / {total}</span>
</div>
<div className="lc-balls">
{pick.numbers.map(n => (
<span key={n} className={`ball ball--${Math.ceil(n / 10)}`}>{n}</span>
))}
</div>
<p className="lc-set__reason">{pick.reason}</p>
</div>
);
}

11
src/pages/lotto/components/decision/RetrospectiveBox.jsx Normal file
View File

@@ -0,0 +1,11 @@
export default function RetrospectiveBox({ briefing, review }) {
const retro = briefing?.narrative?.retrospective;
if (!retro) return null;
const drawNo = review?.draw_no ?? (briefing?.draw_no ? briefing.draw_no - 1 : null);
return (
<aside className="lc-retro">
<p className="lc-retro__time">▸ 지난 주 {drawNo ? `${drawNo}회` : ''} 회고</p>
<p className="lc-retro__body">{retro}</p>
</aside>
);
}

28
src/pages/lotto/components/decision/TierModeToggle.jsx Normal file
View File

@@ -0,0 +1,28 @@
const MODES = [
{ key: 'core', label: '코어', sets: 5, amount: 5000 },
{ key: 'core_bonus', label: '+ 보너스', sets: 10, amount: 10000 },
{ key: 'core_bonus_extended', label: '+ 확장', sets: 15, amount: 15000 },
{ key: 'full', label: '+ 풀', sets: 20, amount: 20000 },
];
export default function TierModeToggle({ value, onChange }) {
return (
<div className="lc-toggle" role="tablist">
{MODES.map((m, i) => (
<button
key={m.key}
role="tab"
aria-selected={value === m.key}
className={`lc-toggle__chip ${value === m.key ? 'is-active' : ''}`}
onClick={() => onChange(m.key)}
>
<span className="lc-toggle__dots">{'●'.repeat(i + 1) + '○'.repeat(3 - i)}</span>
<span className="lc-toggle__lbl">{m.label}</span>
<span className="lc-toggle__sub">{m.sets}세트 · {m.amount.toLocaleString()}원</span>
</button>
))}
</div>
);
}
export { MODES };

25
src/pages/lotto/components/decision/TierSection.jsx Normal file
View File

@@ -0,0 +1,25 @@
import PickCard from './PickCard';
const TIER_TITLE = {
core: '코어 (필수, 5세트)',
bonus: '보너스 (+5)',
extended: '확장 (+5)',
pool: '풀 (+5)',
};
export default function TierSection({ tier, picks, rationale, indexBase = 0, totalSets }) {
if (!picks?.length) return null;
return (
<section className={`lc-tier lc-tier--${tier}`}>
<header className="lc-tier__head">
<h4>{TIER_TITLE[tier]}</h4>
{rationale && tier !== 'core' && (
<p className="lc-tier__rationale">{rationale}</p>
)}
</header>
{picks.map((p, i) => (
<PickCard key={i} pick={p} index={indexBase + i} total={totalSets} />
))}
</section>
);
}

52
src/pages/lotto/components/decision/decision.css Normal file
View File

@@ -0,0 +1,52 @@
.lc-card { max-width: 720px; margin: 0 auto; background: linear-gradient(180deg, #161220 0%, #1a1426 100%);
border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px; color: #ece6f7; }
.lc-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; }
.lc-eyebrow { font-size: 10px; letter-spacing: 2px; opacity: 0.5; text-transform: uppercase; margin: 0 0 4px; }
.lc-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.lc-conf { display: flex; flex-direction: column; align-items: flex-end; }
.lc-conf__num { font-family: 'Courier New', monospace; font-size: 28px; font-weight: 700; color: #b8a8ff; letter-spacing: -0.04em; }
.lc-conf__lbl { font-size: 9px; letter-spacing: 1.5px; opacity: 0.55; }
.lc-retro { background: rgba(184, 168, 255, 0.06); border-left: 2px solid rgba(184, 168, 255, 0.4);
padding: 10px 14px; margin: 14px 0; border-radius: 4px; }
.lc-retro__time { font-size: 9px; letter-spacing: 1.5px; color: #b8a8ff; opacity: 0.7; margin: 0 0 4px; }
.lc-retro__body { font-size: 13px; line-height: 1.55; opacity: 0.85; margin: 0; }
.lc-headline { font-size: 16px; font-weight: 600; line-height: 1.5; margin: 18px 0 4px; }
.lc-headline-3 { font-size: 12px; opacity: 0.65; line-height: 1.55; margin: 0 0 18px; }
.lc-balance { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px;
background: rgba(255,255,255,0.03); border-radius: 8px; margin-bottom: 16px; font-size: 11px; }
.lc-balance__chips { display: flex; gap: 8px; }
.lc-chip { padding: 3px 8px; border-radius: 100px; font-weight: 600; font-size: 11px; }
.lc-chip--stable { background: rgba(80, 200, 120, 0.15); color: #76e09a; }
.lc-chip--balance { background: rgba(255, 200, 80, 0.15); color: #ffce6e; }
.lc-chip--aggro { background: rgba(255, 100, 130, 0.15); color: #ff8aa0; }
.lc-toggle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; }
.lc-toggle__chip { padding: 10px 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px; color: #ece6f7; cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.lc-toggle__chip.is-active { background: rgba(184, 168, 255, 0.15); border-color: rgba(184, 168, 255, 0.5); }
.lc-toggle__dots { letter-spacing: 2px; font-size: 10px; opacity: 0.7; }
.lc-toggle__lbl { font-size: 12px; font-weight: 600; }
.lc-toggle__sub { font-size: 10px; opacity: 0.55; }
.lc-tier { margin-bottom: 14px; }
.lc-tier__head { padding: 8px 0; border-top: 1px dashed rgba(255,255,255,0.1); margin-bottom: 8px; }
.lc-tier:first-of-type .lc-tier__head { border-top: none; }
.lc-tier__head h4 { font-size: 12px; font-weight: 600; margin: 0 0 4px; opacity: 0.75; letter-spacing: 0.5px; }
.lc-tier__rationale { font-size: 11px; opacity: 0.55; margin: 0; }
.lc-set { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
padding: 14px; margin-bottom: 10px; }
.lc-set__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.lc-set__role { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; }
.lc-set__role--stable { color: #76e09a; }
.lc-set__role--balance { color: #ffce6e; }
.lc-set__role--aggro { color: #ff8aa0; }
.lc-set__idx { font-size: 10px; opacity: 0.4; }
.lc-balls { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.lc-set__reason { font-size: 12px; opacity: 0.7; line-height: 1.45; margin: 0; }
.lc-actions { display: flex; gap: 10px; margin-top: 18px; }
.lc-btn { padding: 12px 16px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer;
font-size: 14px; min-width: 160px; }
.lc-btn--prim { background: linear-gradient(135deg, #b8a8ff, #8a78db); color: #14101e; }
.lc-btn--prim:disabled { opacity: 0.5; cursor: not-allowed; }
.lc-btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: #ece6f7; }
@media (max-width: 480px) {
.lc-toggle { grid-template-columns: repeat(2, 1fr); }
}

16
src/pages/lotto/hooks/useBriefing.js
View File

@@ -1,6 +1,18 @@
import { useState, useEffect, useCallback, useRef } from 'react';
import { getLatestBriefing, triggerLottoCurate } from '../../../api';
const normalizePicks = (picks) => {
if (Array.isArray(picks)) {
return { core: picks, bonus: [], extended: [], pool: [] };
}
return {
core: picks?.core || [],
bonus: picks?.bonus || [],
extended: picks?.extended || [],
pool: picks?.pool || [],
};
};
export default function useBriefing() {
const [briefing, setBriefing] = useState(null);
const [loading, setLoading] = useState(true);
@@ -12,7 +24,7 @@ export default function useBriefing() {
setLoading(true); setError('');
try {
const data = await getLatestBriefing();
setBriefing(data);
setBriefing(data ? { ...data, picks: normalizePicks(data.picks) } : data);
} catch (e) {
setError(e.message);
} finally {
@@ -33,7 +45,7 @@ export default function useBriefing() {
try {
const data = await getLatestBriefing();
if (data && data.generated_at !== prevGen) {
setBriefing(data);
setBriefing({ ...data, picks: normalizePicks(data.picks) });
setRegenerating(false);
clearInterval(pollingRef.current);
}

8
src/pages/lotto/hooks/usePurchases.js
View File

@@ -1,6 +1,7 @@
import { useCallback, useEffect, useState } from 'react';
import {
getPurchases, getPurchaseStats, addPurchase, updatePurchase, deletePurchase,
bulkPurchase as apiBulkPurchase,
} from '../../../api';
import { emptyPurchaseForm } from '../lottoUtils';
@@ -94,6 +95,12 @@ export default function usePurchases() {
} catch { refreshPurchases(); }
}, [refreshPurchases]);
const handleBulkPurchase = useCallback(async (params) => {
const result = await apiBulkPurchase(params);
await refreshPurchases();
return result;
}, [refreshPurchases]);
useEffect(() => { refreshPurchases(); }, []); // eslint-disable-line react-hooks/exhaustive-deps
return {
@@ -101,5 +108,6 @@ export default function usePurchases() {
purchaseFormOpen, purchaseForm, purchaseFormSaving, purchaseFormError, purchaseEditId,
handlePurchaseFormOpen, handlePurchaseFormClose, handlePurchaseFormChange,
handlePurchaseFormSubmit, handlePurchaseEditStart, handlePurchaseDelete,
handleBulkPurchase,
};
}

23
src/pages/lotto/hooks/useReview.js Normal file
View File

@@ -0,0 +1,23 @@
import { useEffect, useState } from 'react';
import { getLatestReview, getReviewHistory } from '../../../api';
export default function useReview() {
const [latest, setLatest] = useState(null);
const [history, setHistory] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
let cancel = false;
Promise.all([getLatestReview(), getReviewHistory(4)])
.then(([l, h]) => {
if (cancel) return;
setLatest(l);
setHistory(h);
})
.catch(() => {})
.finally(() => !cancel && setLoading(false));
return () => { cancel = true; };
}, []);
return { latest, history, loading };
}

74
src/pages/lotto/tabs/AnalysisTab.jsx
View File

@@ -40,18 +40,21 @@ export default function AnalysisTab() {
<PerformanceBanner perf={ld.perfStats} />
{/* 종합 추론 번호 추천 */}
<CombinedRecommendPanel
combined={ld.combined}
history={ld.combinedHistory}
loading={ld.combinedLoading}
histLoading={ld.combinedHistLoading}
onRun={ld.runCombinedRecommend}
onCopy={copyNumbers}
/>
<details className="lotto-section-fold">
<summary>종합 추론 추천</summary>
<CombinedRecommendPanel
combined={ld.combined}
history={ld.combinedHistory}
loading={ld.combinedLoading}
histLoading={ld.combinedHistLoading}
onRun={ld.runCombinedRecommend}
onCopy={copyNumbers}
/>
</details>
{/* 최신 회차 + 시뮬레이션 추천 */}
<div className="lotto-grid">
{/* Latest Draw */}
{/* 최신 회차 */}
<details className="lotto-section-fold">
<summary>최신 회차</summary>
<section className="lotto-panel">
<div className="lotto-panel__head">
<div>
@@ -87,8 +90,11 @@ export default function AnalysisTab() {
<p className="lotto-empty">최신 회차 데이터가 없습니다.</p>
)}
</section>
</details>
{/* Simulation Picks */}
{/* Simulation Picks */}
<details className="lotto-section-fold">
<summary>시뮬레이션 추천</summary>
<section className="lotto-panel">
<div className="lotto-panel__head">
<div>
@@ -163,19 +169,24 @@ export default function AnalysisTab() {
</>
)}
</section>
</div>
</details>
{/* 이번 주 공략 리포트 */}
<ReportPanel
report={ld.report}
history={ld.reportHistory}
loading={ld.reportLoading}
onRefresh={ld.refreshReport}
onSelectDrw={ld.loadSpecificReport}
/>
<details className="lotto-section-fold">
<summary>이번 주 공략 리포트</summary>
<ReportPanel
report={ld.report}
history={ld.reportHistory}
loading={ld.reportLoading}
onRefresh={ld.refreshReport}
onSelectDrw={ld.loadSpecificReport}
/>
</details>
{/* 통계 분석 */}
<section className="lotto-panel lotto-panel--wide">
<details className="lotto-section-fold">
<summary>통계 분석</summary>
<section className="lotto-panel lotto-panel--wide">
<div className="lotto-panel__head">
<div>
<p className="lotto-panel__eyebrow">Analysis</p>
@@ -237,9 +248,12 @@ export default function AnalysisTab() {
</p>
)}
</section>
</details>
{/* 전체 번호 분포 */}
<section className="lotto-panel lotto-panel--wide">
<details className="lotto-section-fold">
<summary>전체 회차 번호 분포</summary>
<section className="lotto-panel lotto-panel--wide">
<div className="lotto-panel__head">
<div>
<p className="lotto-panel__eyebrow">Distribution</p>
@@ -263,12 +277,18 @@ export default function AnalysisTab() {
<p className="lotto-empty">통계 데이터를 불러오지 못했습니다.</p>
)}
</section>
</details>
{/* 내 번호 패턴 */}
<PersonalAnalysisPanel data={ld.personalAnalysis} loading={ld.personalLoading} />
<details className="lotto-section-fold">
<summary>내 번호 패턴</summary>
<PersonalAnalysisPanel data={ld.personalAnalysis} loading={ld.personalLoading} />
</details>
{/* 수동 추천 */}
<section className="lotto-panel">
<details className="lotto-section-fold">
<summary>수동 추천</summary>
<section className="lotto-panel">
<div className="lotto-panel__head">
<div>
<p className="lotto-panel__eyebrow">Manual Recommendation</p>
@@ -365,9 +385,12 @@ export default function AnalysisTab() {
<p className="lotto-empty">아직 추천 결과가 없습니다.</p>
)}
</section>
</details>
{/* 추천 히스토리 */}
<section className="lotto-panel">
<details className="lotto-section-fold">
<summary>추천 히스토리</summary>
<section className="lotto-panel">
<div className="lotto-panel__head">
<div>
<p className="lotto-panel__eyebrow">History</p>
@@ -423,6 +446,7 @@ export default function AnalysisTab() {
</div>
)}
</section>
</details>
</>
);
}

15
src/pages/lotto/tabs/BriefingTab.jsx
View File

@@ -1,25 +1,18 @@
import useBriefing from '../hooks/useBriefing';
import BriefingHeader from '../components/briefing/BriefingHeader';
import BriefingSummary from '../components/briefing/BriefingSummary';
import PickSetCard from '../components/briefing/PickSetCard';
import useReview from '../hooks/useReview';
import DecisionCard from '../components/decision/DecisionCard';
import BriefingEmpty from '../components/briefing/BriefingEmpty';
import CuratorUsageFooter from '../components/briefing/CuratorUsageFooter';
export default function BriefingTab() {
const { briefing, loading, error, regenerating, regenerate } = useBriefing();
const { latest: review } = useReview();
if (loading) return <div className="briefing-empty"><p>로딩 중...</p></div>;
if (!briefing) return <BriefingEmpty regenerating={regenerating} onRegenerate={regenerate} error={error} />;
return (
<div className="briefing-tab">
<BriefingHeader briefing={briefing} regenerating={regenerating} onRegenerate={regenerate} />
<BriefingSummary narrative={briefing.narrative} />
<div className="briefing-picks">
<h3>이번 주 5세트</h3>
{briefing.picks.map((p, i) => <PickSetCard key={i} pick={p} index={i} />)}
</div>
<CuratorUsageFooter />
<DecisionCard briefing={briefing} review={review} />
</div>
);
}

36
src/pages/lotto/tabs/PurchaseTab.jsx
View File

@@ -1,25 +1,29 @@
import usePurchases from '../hooks/usePurchases';
import PurchasePanel from '../components/PurchasePanel';
import PurchaseTrendChart from '../components/PurchaseTrendChart';
export default function PurchaseTab() {
const pur = usePurchases();
return (
<PurchasePanel
records={pur.purchases}
stats={pur.purchaseStats}
loading={pur.purchaseLoading}
formOpen={pur.purchaseFormOpen}
form={pur.purchaseForm}
formSaving={pur.purchaseFormSaving}
formError={pur.purchaseFormError}
editId={pur.purchaseEditId}
onFormOpen={pur.handlePurchaseFormOpen}
onFormClose={pur.handlePurchaseFormClose}
onFormChange={pur.handlePurchaseFormChange}
onFormSubmit={pur.handlePurchaseFormSubmit}
onEditStart={pur.handlePurchaseEditStart}
onDelete={pur.handlePurchaseDelete}
/>
<>
<PurchaseTrendChart />
<PurchasePanel
records={pur.purchases}
stats={pur.purchaseStats}
loading={pur.purchaseLoading}
formOpen={pur.purchaseFormOpen}
form={pur.purchaseForm}
formSaving={pur.purchaseFormSaving}
formError={pur.purchaseFormError}
editId={pur.purchaseEditId}
onFormOpen={pur.handlePurchaseFormOpen}
onFormClose={pur.handlePurchaseFormClose}
onFormChange={pur.handlePurchaseFormChange}
onFormSubmit={pur.handlePurchaseFormSubmit}
onEditStart={pur.handlePurchaseEditStart}
onDelete={pur.handlePurchaseDelete}
/>
</>
);
}