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