diff --git a/src/pages/lotto/Lotto.css b/src/pages/lotto/Lotto.css index 48d98c7..2f99c9b 100644 --- a/src/pages/lotto/Lotto.css +++ b/src/pages/lotto/Lotto.css @@ -1546,3 +1546,9 @@ .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; } diff --git a/src/pages/lotto/components/PurchaseTrendChart.jsx b/src/pages/lotto/components/PurchaseTrendChart.jsx new file mode 100644 index 0000000..01c2e37 --- /dev/null +++ b/src/pages/lotto/components/PurchaseTrendChart.jsx @@ -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 ( +
+
+
+

Trend (last 4 weeks)

+

너 vs 큐레이터 평균 일치 수

+
+
+ + + + +
+ 큐레이터 + +
+
+ ); +} diff --git a/src/pages/lotto/tabs/PurchaseTab.jsx b/src/pages/lotto/tabs/PurchaseTab.jsx index c967414..074f072 100644 --- a/src/pages/lotto/tabs/PurchaseTab.jsx +++ b/src/pages/lotto/tabs/PurchaseTab.jsx @@ -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 ( - + <> + + + ); }