Functions.jsx 컴포넌트 분할: 1,583→460줄 (3훅+8컴포넌트+유틸)

- lottoUtils.jsx: 공통 유틸·상수 추출 (Ball, NumberRow, 통계 헬퍼 등)
- hooks/useLottoData.js: 핵심 데이터 로드 (최신회차, 통계, 시뮬레이션, 리포트)
- hooks/usePurchases.js: 구매 기록 CRUD
- hooks/useManualRecommend.js: 수동 추천 + 히스토리
- components/: MetricBlock, FrequencyChart, PerformanceBanner,
  ConfidenceRing, CombinedRecommendPanel, ReportPanel,
  PersonalAnalysisPanel, PurchasePanel 분리
- getReport import 누락 버그 수정

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/pages/lotto/components/CombinedRecommendPanel.jsx

@@ -0,0 +1,157 @@
+import React, { useState } from 'react';
+import { ballClass, NumberRow, METHOD_META, METHOD_ORDER, SCORE_META, fmtKST } from '../lottoUtils';
+
+const CombinedRecommendPanel = ({ combined, history, loading, histLoading, onRun, onCopy }) => {
+    const [histExpand, setHistExpand] = useState(false);
+
+    return (
+        <section className="lotto-panel lotto-panel--wide lotto-combined">
+            <div className="lotto-panel__head">
+                <div>
+                    <p className="lotto-panel__eyebrow">AI · 종합 추론</p>
+                    <h3>종합 추론 번호 추천</h3>
+                    <p className="lotto-panel__sub">
+                        5가지 통계 기법(빈도·지문·갭·공동출현·다양성)을 가중 투표로 합산해
+                        최적 6개 번호를 도출합니다.
+                    </p>
+                </div>
+                <div className="lotto-panel__actions">
+                    {loading && <span className="lotto-chip">분석 중…</span>}
+                    <button className="button primary small" onClick={onRun} disabled={loading}>
+                        {loading ? '추론 중…' : '🔮 종합 추론 실행'}
+                    </button>
+                    {history.length > 0 && (
+                        <button className="button ghost small" onClick={() => setHistExpand(p => !p)}>
+                            이력 {history.length}건 {histExpand ? '▲' : '▼'}
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            {!combined && !loading && (
+                <p className="lotto-empty">버튼을 눌러 종합 추론을 실행하세요.</p>
+            )}
+
+            {combined && (
+                <>
+                    {/* 기법별 추천 번호 */}
+                    <div className="lotto-combined__methods">
+                        {METHOD_ORDER.map((key) => {
+                            const meta = METHOD_META[key];
+                            const m = combined.methods?.[key];
+                            if (!m) return null;
+                            return (
+                                <div key={key} className="lotto-combined__method">
+                                    <div className="lotto-combined__method-head">
+                                        <span className="lotto-combined__method-icon">{meta.icon}</span>
+                                        <div>
+                                            <p className="lotto-combined__method-name" style={{ color: meta.color }}>
+                                                {meta.label}
+                                                <span className="lotto-combined__method-weight"> ({m.weight_pct}%)</span>
+                                            </p>
+                                            <p className="lotto-combined__method-desc">{meta.desc}</p>
+                                        </div>
+                                    </div>
+                                    <div className="lotto-combined__method-nums">
+                                        {m.numbers.map((n) => {
+                                            const inFinal = combined.final_numbers.includes(n);
+                                            return (
+                                                <span
+                                                    key={n}
+                                                    className={`lotto-ball ${ballClass(n).replace('lotto-ball ', '')} ${inFinal ? 'is-final' : 'is-dim'}`}
+                                                >
+                                                    {n}
+                                                </span>
+                                            );
+                                        })}
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+
+                    {/* 최종 추론 결과 */}
+                    <div className="lotto-combined__final">
+                        <div className="lotto-combined__final-head">
+                            <span className="lotto-combined__final-badge">종합 추론 결과</span>
+                            {combined.deduped && (
+                                <span className="lotto-chip lotto-chip--muted">중복 (이미 저장됨)</span>
+                            )}
+                            <button className="button ghost small" onClick={() => onCopy(combined.final_numbers)}>
+                                복사
+                            </button>
+                        </div>
+                        <div className="lotto-combined__final-balls">
+                            {combined.final_numbers.map((n) => {
+                                const votes = combined.vote_counts?.[String(n)] ?? 0;
+                                return (
+                                    <div key={n} className="lotto-combined__final-ball-wrap">
+                                        <span className={ballClass(n)}>{n}</span>
+                                        <span className="lotto-combined__vote-dots">
+                                            {Array.from({ length: 5 }).map((_, i) => (
+                                                <span key={i} className={`lotto-combined__vote-dot ${i < votes ? 'is-on' : ''}`} />
+                                            ))}
+                                        </span>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                        <p className="lotto-combined__final-sub">
+                            ● 점은 해당 번호가 채택된 기법 수 (최대 5개)
+                        </p>
+                    </div>
+
+                    {/* 점수 바 */}
+                    <div className="lotto-combined__scores">
+                        <p className="lotto-combined__scores-title">조합 품질 점수</p>
+                        {SCORE_META.map(({ key, label, color, weight }) => {
+                            const val = combined.scores?.[key] ?? 0;
+                            const pct = Math.round(val * 100);
+                            return (
+                                <div key={key} className="lotto-combined__score-row">
+                                    <span className="lotto-combined__score-label">{label}</span>
+                                    <span className="lotto-combined__score-weight">{weight}%</span>
+                                    <div className="lotto-combined__score-bar-wrap">
+                                        <div
+                                            className="lotto-combined__score-bar"
+                                            style={{ width: `${pct}%`, background: color }}
+                                        />
+                                    </div>
+                                    <span className="lotto-combined__score-val">{pct}</span>
+                                </div>
+                            );
+                        })}
+                        <div className="lotto-combined__score-total">
+                            종합 점수 <strong>{Math.round((combined.scores?.score_total ?? 0) * 100)}</strong> / 100
+                        </div>
+                    </div>
+
+                    <p className="lotto-combined__disclaimer">
+                        ※ 이 추천은 역대 통계 패턴 기반 참고 자료이며, 당첨을 보장하지 않습니다.
+                    </p>
+                </>
+            )}
+
+            {/* 추천 이력 */}
+            {histExpand && (
+                <div className="lotto-combined__history">
+                    <p className="lotto-combined__history-title">종합 추론 이력</p>
+                    {histLoading && <p className="lotto-empty">로딩 중…</p>}
+                    {history.map((item) => (
+                        <div key={item.id} className="lotto-combined__history-item">
+                            <div className="lotto-combined__history-meta">
+                                <span>#{item.id}</span>
+                                <span>{fmtKST(item.created_at)}</span>
+                                <span>기준 {item.based_on_draw ?? '-'}회</span>
+                            </div>
+                            <NumberRow nums={item.numbers} />
+                            <button className="button ghost small" onClick={() => onCopy(item.numbers)}>복사</button>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </section>
+    );
+};
+
+export default CombinedRecommendPanel;

src/pages/lotto/components/ConfidenceRing.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const ConfidenceRing = ({ score }) => {
+    const r = 28, c = 2 * Math.PI * r;
+    const fill = (score / 100) * c;
+    const color = score >= 80 ? '#97c9aa' : score >= 60 ? '#fdd4b1' : '#f7a8a5';
+    return (
+        <svg width="72" height="72" viewBox="0 0 72 72" className="lotto-confidence-ring" aria-hidden>
+            <circle cx="36" cy="36" r={r} stroke="rgba(255,255,255,0.08)" strokeWidth="6" fill="none" />
+            <circle
+                cx="36" cy="36" r={r}
+                stroke={color} strokeWidth="6" fill="none"
+                strokeDasharray={`${fill} ${c - fill}`}
+                strokeLinecap="round"
+                transform="rotate(-90 36 36)"
+            />
+            <text x="36" y="41" textAnchor="middle" fill={color} fontSize="16" fontWeight="600"
+                style={{ fontFamily: 'inherit' }}>
+                {score}
+            </text>
+        </svg>
+    );
+};
+
+export default ConfidenceRing;

src/pages/lotto/components/FrequencyChart.jsx

@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+import { buildFrequencySeries } from '../lottoUtils';
+
+const FrequencyChart = ({ stats }) => {
+    const { series, max } = useMemo(() => buildFrequencySeries(stats?.frequency), [stats]);
+    const ticks = useMemo(() => [max, Math.round(max * 0.5), 0], [max]);
+    if (!stats) return null;
+
+    return (
+        <div className="lotto-chart">
+            <div className="lotto-chart__y">
+                <span>횟수</span>
+                <div className="lotto-chart__ticks">
+                    {ticks.map((value) => <span key={value}>{value}</span>)}
+                </div>
+            </div>
+            <div className="lotto-chart__plot" role="list">
+                {series.map((item) => {
+                    const showLabel = item.number === 1 || item.number % 5 === 0;
+                    return (
+                        <div key={item.number} className="lotto-chart__col" role="listitem">
+                            <span
+                                className="lotto-chart__bar"
+                                style={{ height: `${(item.count / max) * 100}%` }}
+                                title={`${item.number}번: ${item.count}회`}
+                                aria-label={`${item.number}번 ${item.count}회`}
+                            />
+                            <span className="lotto-chart__x" aria-hidden={!showLabel}>
+                                {showLabel ? item.number : ''}
+                            </span>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+export default FrequencyChart;

src/pages/lotto/components/MetricBlock.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { toBucketEntries } from '../lottoUtils';
+
+const MetricBlock = ({ title, metrics }) => {
+    if (!metrics) return null;
+    const buckets = toBucketEntries(metrics);
+    const maxBucket = buckets.length ? Math.max(...buckets.map(([, v]) => Number(v) || 0), 1) : 1;
+    const odd = Number(metrics.odd) || 0;
+    const even = Number(metrics.even) || 0;
+    const totalOE = odd + even || 1;
+    const oddPct = (odd / totalOE) * 100;
+
+    return (
+        <div className="lotto-metrics">
+            <div className="lotto-metrics__head">
+                <p className="lotto-metrics__title">{title}</p>
+                <span className="lotto-metrics__sum">총 출현 횟수 {metrics.sum ?? '-'}</span>
+            </div>
+            <div className="lotto-metric-cards">
+                <div className="lotto-metric-card">
+                    <p className="lotto-metric-card__label">최소 출현</p>
+                    <p className="lotto-metric-card__value">{metrics.min ?? '-'}</p>
+                </div>
+                <div className="lotto-metric-card">
+                    <p className="lotto-metric-card__label">최대 출현</p>
+                    <p className="lotto-metric-card__value">{metrics.max ?? '-'}</p>
+                </div>
+                <div className="lotto-metric-card">
+                    <p className="lotto-metric-card__label">출현 편차</p>
+                    <p className="lotto-metric-card__value">{metrics.range ?? '-'}</p>
+                </div>
+            </div>
+            <div className="lotto-odd-even">
+                <div className="lotto-odd-even__labels">
+                    <span>홀 {odd}</span><span>짝 {even}</span>
+                </div>
+                <div className="lotto-odd-even__bar" aria-hidden>
+                    <span className="lotto-odd-even__odd" style={{ width: `${oddPct}%` }} />
+                    <span className="lotto-odd-even__even" style={{ width: `${100 - oddPct}%` }} />
+                </div>
+            </div>
+            {buckets.length ? (
+                <div className="lotto-buckets">
+                    {buckets.map(([label, value]) => (
+                        <div key={label} className="lotto-bucket">
+                            <span className="lotto-bucket__label">{label}</span>
+                            <div className="lotto-bucket__bar" aria-hidden>
+                                <span style={{ width: `${((Number(value) || 0) / maxBucket) * 100}%` }} />
+                            </div>
+                            <span className="lotto-bucket__value">{value}</span>
+                        </div>
+                    ))}
+                </div>
+            ) : null}
+        </div>
+    );
+};
+
+export default MetricBlock;

src/pages/lotto/components/PerformanceBanner.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+const PerformanceBanner = ({ perf }) => {
+    if (!perf || perf.total_checked === 0) return null;
+    const imp = perf.vs_random?.improvement_pct ?? 0;
+    const prizeHits = (perf.by_rank?.rank_3 ?? 0) + (perf.by_rank?.rank_4 ?? 0) + (perf.by_rank?.rank_5 ?? 0);
+    return (
+        <div className="lotto-perf-banner">
+            <span className="lotto-perf-banner__label">신뢰도 지표</span>
+            <div className="lotto-perf-banner__items">
+                <div className="lotto-perf-banner__item">
+                    <span className="lotto-perf-banner__val">{perf.total_checked}</span>
+                    <span className="lotto-perf-banner__lbl">검증 회차</span>
+                </div>
+                <div className="lotto-perf-banner__divider" />
+                <div className="lotto-perf-banner__item">
+                    <span className="lotto-perf-banner__val">{(perf.avg_correct ?? 0).toFixed(1)}</span>
+                    <span className="lotto-perf-banner__lbl">평균 일치수</span>
+                </div>
+                <div className="lotto-perf-banner__divider" />
+                <div className="lotto-perf-banner__item">
+                    <span className={`lotto-perf-banner__val ${imp > 0 ? 'is-pos' : ''}`}>
+                        {imp > 0 ? '+' : ''}{imp.toFixed(1)}%
+                    </span>
+                    <span className="lotto-perf-banner__lbl">무작위 대비</span>
+                </div>
+                <div className="lotto-perf-banner__divider" />
+                <div className="lotto-perf-banner__item">
+                    <span className="lotto-perf-banner__val">
+                        {((perf.rate_3plus ?? 0) * 100).toFixed(1)}%
+                    </span>
+                    <span className="lotto-perf-banner__lbl">3개↑ 일치율</span>
+                </div>
+                {prizeHits > 0 && (
+                    <>
+                        <div className="lotto-perf-banner__divider" />
+                        <div className="lotto-perf-banner__item">
+                            <span className="lotto-perf-banner__val is-prize">{prizeHits}건</span>
+                            <span className="lotto-perf-banner__lbl">3~5등 당첨</span>
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default PerformanceBanner;

src/pages/lotto/components/PersonalAnalysisPanel.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { NumberRow } from '../lottoUtils';
+
+const PersonalAnalysisPanel = ({ data, loading }) => {
+    const zones = Object.entries(data?.pattern?.zone_avg ?? {});
+    const maxZone = zones.length ? Math.max(...zones.map(([, v]) => Number(v) || 0), 1) : 1;
+
+    return (
+        <section className="lotto-panel lotto-panel--wide">
+            <div className="lotto-panel__head">
+                <div>
+                    <p className="lotto-panel__eyebrow">My Pattern</p>
+                    <h3>내 번호 패턴</h3>
+                    {data && data.total_analyzed > 0 && (
+                        <p className="lotto-panel__sub">총 {data.total_analyzed}회 추천 기반 분석</p>
+                    )}
+                </div>
+            </div>
+
+            {(loading || !data || data.total_analyzed === 0) ? (
+                <p className="lotto-empty">
+                    {loading ? '불러오는 중...' : '추천 이력이 없습니다.'}
+                </p>
+            ) : (
+                <div className="lotto-analysis">
+                    <div className="lotto-analysis__row">
+                        <div className="lotto-analysis__group">
+                            <p className="lotto-analysis__label">
+                                내가 자주 선택한 번호 <span>TOP 10</span>
+                            </p>
+                            <NumberRow nums={data.top_picks ?? []} />
+                        </div>
+
+                        <div className="lotto-analysis__group">
+                            <p className="lotto-analysis__label">선택 성향</p>
+                            <div className="lotto-personal-tendency">
+                                {data.vs_draw_avg?.odd_tendency && (
+                                    <span className="lotto-personal-tendency__badge">
+                                        {data.vs_draw_avg.odd_tendency}
+                                    </span>
+                                )}
+                                {data.vs_draw_avg?.sum_tendency && (
+                                    <span className="lotto-personal-tendency__badge">
+                                        {data.vs_draw_avg.sum_tendency}
+                                    </span>
+                                )}
+                            </div>
+                            <div className="lotto-analysis__stats">
+                                <span>홀수 평균 <strong>{data.pattern?.avg_odd_count?.toFixed(1)}</strong></span>
+                                <span>합계 평균 <strong>{data.pattern?.avg_sum?.toFixed(1)}</strong></span>
+                                <span>
+                                    연속번호 포함률{' '}
+                                    <strong>
+                                        {((data.pattern?.consecutive_rate ?? 0) * 100).toFixed(0)}%
+                                    </strong>
+                                </span>
+                            </div>
+                        </div>
+
+                        {zones.length > 0 && (
+                            <div className="lotto-analysis__group">
+                                <p className="lotto-analysis__label">구간별 선택 비율</p>
+                                <div className="lotto-buckets">
+                                    {zones.map(([zone, avg]) => (
+                                        <div key={zone} className="lotto-bucket">
+                                            <span className="lotto-bucket__label">{zone}</span>
+                                            <div className="lotto-bucket__bar" aria-hidden>
+                                                <span style={{ width: `${((Number(avg) || 0) / maxZone) * 100}%` }} />
+                                            </div>
+                                            <span className="lotto-bucket__value">{Number(avg).toFixed(1)}</span>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+        </section>
+    );
+};
+
+export default PersonalAnalysisPanel;

src/pages/lotto/components/PurchasePanel.jsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { fmtWon } from '../lottoUtils';
+
+const PurchasePanel = ({
+    records, stats, loading,
+    formOpen, form, formSaving, formError, editId,
+    onFormOpen, onFormClose, onFormChange, onFormSubmit,
+    onEditStart, onDelete,
+}) => {
+    const winRate = stats?.total_records > 0
+        ? ((stats.prize_count / stats.total_records) * 100).toFixed(1)
+        : '0.0';
+    const netColor = (stats?.net ?? 0) >= 0 ? 'is-pos' : 'is-neg';
+
+    return (
+        <section className="lotto-panel lotto-panel--wide">
+            <div className="lotto-panel__head">
+                <div>
+                    <p className="lotto-panel__eyebrow">Purchase Tracker</p>
+                    <h3>구매 기록</h3>
+                    <p className="lotto-panel__sub">구매 내역 기록 및 수익률 추적</p>
+                </div>
+                <div className="lotto-panel__actions">
+                    {loading && <span className="lotto-chip">로딩 중</span>}
+                    <button className="button small" onClick={onFormOpen} disabled={formOpen}>
+                        + 추가
+                    </button>
+                </div>
+            </div>
+
+            {/* 통계 바 */}
+            {stats && stats.total_records > 0 && (
+                <div className="lotto-purchase-stats">
+                    <div className="lotto-purchase-stat">
+                        <span className="lotto-purchase-stat__val">{fmtWon(stats.total_invested)}</span>
+                        <span className="lotto-purchase-stat__lbl">총 투자</span>
+                    </div>
+                    <div className="lotto-purchase-stat">
+                        <span className="lotto-purchase-stat__val">{fmtWon(stats.total_prize)}</span>
+                        <span className="lotto-purchase-stat__lbl">총 당첨금</span>
+                    </div>
+                    <div className="lotto-purchase-stat">
+                        <span className={`lotto-purchase-stat__val ${netColor}`}>
+                            {(stats.net ?? 0) >= 0 ? '+' : ''}{fmtWon(stats.net)}
+                        </span>
+                        <span className="lotto-purchase-stat__lbl">순손익</span>
+                    </div>
+                    <div className="lotto-purchase-stat">
+                        <span className="lotto-purchase-stat__val">{stats.return_rate?.toFixed(1)}%</span>
+                        <span className="lotto-purchase-stat__lbl">회수율</span>
+                    </div>
+                    <div className="lotto-purchase-stat">
+                        <span className="lotto-purchase-stat__val">{winRate}%</span>
+                        <span className="lotto-purchase-stat__lbl">당첨률</span>
+                    </div>
+                    {stats.max_prize > 0 && (
+                        <div className="lotto-purchase-stat">
+                            <span className="lotto-purchase-stat__val is-prize">{fmtWon(stats.max_prize)}</span>
+                            <span className="lotto-purchase-stat__lbl">최대 당첨금</span>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* 입력 폼 */}
+            {formOpen && (
+                <form className="lotto-purchase-form" onSubmit={onFormSubmit}>
+                    <p className="lotto-purchase-form__title">
+                        {editId != null ? '기록 수정' : '구매 기록 추가'}
+                    </p>
+                    <div className="lotto-purchase-form__grid">
+                        <label className="lotto-field">
+                            회차
+                            <input
+                                type="number" min={1}
+                                value={form.draw_no}
+                                onChange={(e) => onFormChange('draw_no', e.target.value)}
+                                placeholder="예: 1181"
+                                required
+                            />
+                        </label>
+                        <label className="lotto-field">
+                            구매금액
+                            <input
+                                type="number" step={1000} min={1000}
+                                value={form.amount}
+                                onChange={(e) => onFormChange('amount', Number(e.target.value))}
+                            />
+                        </label>
+                        <label className="lotto-field">
+                            세트 수
+                            <input
+                                type="number" min={1} max={20}
+                                value={form.sets}
+                                onChange={(e) => onFormChange('sets', Number(e.target.value))}
+                            />
+                        </label>
+                        <label className="lotto-field">
+                            당첨금
+                            <input
+                                type="number" min={0}
+                                value={form.prize}
+                                onChange={(e) => onFormChange('prize', Number(e.target.value))}
+                            />
+                        </label>
+                        <label className="lotto-field lotto-purchase-form__note">
+                            메모
+                            <input
+                                type="text"
+                                value={form.note}
+                                onChange={(e) => onFormChange('note', e.target.value)}
+                                placeholder="예: 5등 1개"
+                            />
+                        </label>
+                    </div>
+                    {formError && (
+                        <p className="lotto-empty" style={{ color: '#f9b6b1' }}>{formError}</p>
+                    )}
+                    <div className="lotto-purchase-form__actions">
+                        <button type="button" className="button ghost small" onClick={onFormClose}>
+                            취소
+                        </button>
+                        <button type="submit" className="button primary small" disabled={formSaving}>
+                            {formSaving ? '저장 중...' : editId != null ? '수정 완료' : '추가'}
+                        </button>
+                    </div>
+                </form>
+            )}
+
+            {/* 기록 목록 */}
+            {records.length === 0 ? (
+                <p className="lotto-empty">구매 기록이 없습니다.</p>
+            ) : (
+                <div className="lotto-purchase-list">
+                    <div className="lotto-purchase-list__head">
+                        <span>회차</span>
+                        <span>투자금</span>
+                        <span>당첨금</span>
+                        <span>손익</span>
+                        <span>메모</span>
+                        <span />
+                    </div>
+                    {records.map((rec) => {
+                        const net = (rec.prize ?? 0) - (rec.amount ?? 0);
+                        return (
+                            <div key={rec.id} className="lotto-purchase-row">
+                                <span className="lotto-purchase-row__drw">{rec.draw_no}회</span>
+                                <span>{fmtWon(rec.amount)}</span>
+                                <span className={(rec.prize ?? 0) > 0 ? 'is-prize' : ''}>
+                                    {fmtWon(rec.prize)}
+                                </span>
+                                <span className={net >= 0 ? 'is-pos' : 'is-neg'}>
+                                    {net >= 0 ? '+' : ''}{fmtWon(net)}
+                                </span>
+                                <span className="lotto-purchase-row__note">{rec.note || '-'}</span>
+                                <div className="lotto-purchase-row__actions">
+                                    <button className="button ghost small" onClick={() => onEditStart(rec)}>
+                                        수정
+                                    </button>
+                                    <button className="button danger small" onClick={() => onDelete(rec.id)}>
+                                        삭제
+                                    </button>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+        </section>
+    );
+};
+
+export default PurchasePanel;

src/pages/lotto/components/ReportPanel.jsx

@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import { NumberRow } from '../lottoUtils';
+import ConfidenceRing from './ConfidenceRing';
+
+const ReportPanel = ({ report, history, loading, onRefresh, onSelectDrw }) => {
+    const [histExpand, setHistExpand] = useState(false);
+
+    return (
+        <section className="lotto-panel lotto-panel--wide">
+            <div className="lotto-panel__head">
+                <div>
+                    <p className="lotto-panel__eyebrow">Weekly Report</p>
+                    <h3>이번 주 공략 리포트</h3>
+                    {report && (
+                        <p className="lotto-panel__sub">
+                            {report.target_drw_no}회 대상 · {report.based_on_draw}회 기준
+                        </p>
+                    )}
+                </div>
+                <div className="lotto-panel__actions">
+                    {loading && <span className="lotto-chip">로딩 중</span>}
+                    <button className="button ghost small" onClick={onRefresh} disabled={loading}>
+                        새로고침
+                    </button>
+                    {history?.length > 0 && (
+                        <button className="button ghost small" onClick={() => setHistExpand((p) => !p)}>
+                            지난 리포트 {histExpand ? '▲' : '▼'}
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            {/* 지난 리포트 목록 */}
+            {histExpand && history?.length > 0 && (
+                <div className="lotto-report-history">
+                    {history.map((h) => (
+                        <button
+                            key={h.drw_no}
+                            className="button ghost small"
+                            onClick={() => { onSelectDrw(h.drw_no); setHistExpand(false); }}
+                        >
+                            {h.drw_no}회
+                        </button>
+                    ))}
+                </div>
+            )}
+
+            {!report && !loading && (
+                <p className="lotto-empty">리포트 데이터가 없습니다.</p>
+            )}
+            {loading && !report && (
+                <p className="lotto-empty">불러오는 중...</p>
+            )}
+
+            {report && (
+                <>
+                    {/* 신뢰도 + 패턴 요약 */}
+                    <div className="lotto-report-top">
+                        <div className="lotto-report-confidence">
+                            <ConfidenceRing score={report.confidence_score ?? 0} />
+                            <div>
+                                <p className="lotto-report-confidence__title">신뢰도 점수</p>
+                                <div className="lotto-report-confidence__factors">
+                                    {Object.entries(report.confidence_factors ?? {}).map(([k, v]) => (
+                                        <div key={k} className="lotto-report-confidence__factor">
+                                            <span className="lotto-report-confidence__factor-lbl">
+                                                {k === 'data_volume' ? '데이터 충분도'
+                                                    : k === 'pattern_consistency' ? '패턴 안정성'
+                                                    : k === 'recent_trend' ? '최근 트렌드' : k}
+                                            </span>
+                                            <div className="lotto-pick__bar">
+                                                <span style={{ width: `${v}%` }} />
+                                            </div>
+                                            <span className="lotto-report-confidence__factor-val">{v}</span>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="lotto-report-pattern">
+                            <p className="lotto-report-pattern__title">최근 패턴</p>
+                            <div className="lotto-report-pattern__stats">
+                                <div className="lotto-report-pattern__stat">
+                                    <span>합계 평균</span>
+                                    <strong>{report.recent_pattern?.recent_sum_avg?.toFixed(1) ?? '-'}</strong>
+                                </div>
+                                <div className="lotto-report-pattern__stat">
+                                    <span>홀수 평균</span>
+                                    <strong>{report.recent_pattern?.recent_odd_avg?.toFixed(1) ?? '-'}</strong>
+                                </div>
+                                {(report.recent_pattern?.triple_appear ?? []).length > 0 && (
+                                    <div className="lotto-report-pattern__stat">
+                                        <span>3회 연속 출현</span>
+                                        <NumberRow nums={report.recent_pattern.triple_appear} />
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* 핫 / 콜드 / 오버듀 */}
+                    <div className="lotto-analysis__row">
+                        <div className="lotto-analysis__group">
+                            <p className="lotto-analysis__label">
+                                🔥 핫 번호 <span>최근 10회 과출현</span>
+                            </p>
+                            <NumberRow nums={report.hot_numbers ?? []} />
+                        </div>
+                        <div className="lotto-analysis__group">
+                            <p className="lotto-analysis__label">
+                                🧊 콜드 번호 <span>역대 저빈도 10개</span>
+                            </p>
+                            <NumberRow nums={report.cold_numbers ?? []} />
+                        </div>
+                        <div className="lotto-analysis__group">
+                            <p className="lotto-analysis__label">
+                                ⏰ 오버듀 <span>가장 오래 미출현</span>
+                            </p>
+                            <NumberRow nums={report.overdue_numbers ?? []} />
+                        </div>
+                    </div>
+
+                    {/* 전략 추천 세트 */}
+                    {(report.recommended_sets ?? []).length > 0 && (
+                        <div className="lotto-strategy-cards">
+                            {report.recommended_sets.map((set, i) => (
+                                <div key={i} className="lotto-strategy-card">
+                                    <p className="lotto-strategy-card__name">{set.strategy}</p>
+                                    <NumberRow nums={set.numbers} />
+                                    <p className="lotto-strategy-card__desc">{set.description}</p>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </>
+            )}
+        </section>
+    );
+};
+
+export default ReportPanel;

src/pages/lotto/hooks/useLottoData.js

@@ -0,0 +1,162 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+    getLatest, getStats, getBestPicks, getAnalysis,
+    getPerformanceStats, getLatestReport, getReportHistory, getReport,
+    getPersonalAnalysis, getCombinedRecommend, getCombinedHistory,
+} from '../../../api';
+import { readStatsCache, writeStatsCache } from '../lottoUtils';
+
+export default function useLottoData() {
+    const [latest, setLatest] = useState(null);
+    const [stats, setStats] = useState(() => readStatsCache());
+    const [statsLoading, setStatsLoading] = useState(false);
+    const [statsError, setStatsError] = useState('');
+    const [loading, setLoading] = useState({
+        latest: false, bestPicks: false, analysis: false,
+    });
+    const [error, setError] = useState('');
+    const [bestPicks, setBestPicks] = useState([]);
+    const [bestPicksExpanded, setBestPicksExpanded] = useState(false);
+    const [analysis, setAnalysis] = useState(null);
+    const [simulating, setSimulating] = useState(false);
+    const [simResult, setSimResult] = useState(null);
+
+    // 종합 추론
+    const [combined, setCombined] = useState(null);
+    const [combinedLoading, setCombinedLoading] = useState(false);
+    const [combinedHistory, setCombinedHistory] = useState([]);
+    const [combinedHistLoading, setCombinedHistLoading] = useState(false);
+
+    // 신뢰도·리포트·개인분석
+    const [perfStats, setPerfStats] = useState(null);
+    const [report, setReport] = useState(null);
+    const [reportHistory, setReportHistory] = useState([]);
+    const [reportLoading, setReportLoading] = useState(false);
+    const [personalAnalysis, setPersonalAnalysis] = useState(null);
+    const [personalLoading, setPersonalLoading] = useState(false);
+
+    const refreshLatest = useCallback(async () => {
+        setLoading((s) => ({ ...s, latest: true }));
+        setError('');
+        try { setLatest(await getLatest()); }
+        catch (e) { setError(e?.message ?? String(e)); }
+        finally { setLoading((s) => ({ ...s, latest: false })); }
+    }, []);
+
+    const refreshStats = useCallback(async () => {
+        setStatsLoading(true); setStatsError('');
+        try {
+            const cached = readStatsCache();
+            if (cached && !stats) setStats(cached);
+            const data = await getStats();
+            if (!cached || cached.total_draws !== data?.total_draws) {
+                setStats(data); writeStatsCache(data);
+            }
+        } catch (e) { setStatsError(e?.message ?? String(e)); }
+        finally { setStatsLoading(false); }
+    }, [stats]);
+
+    const refreshBestPicks = useCallback(async () => {
+        setLoading((s) => ({ ...s, bestPicks: true }));
+        try { setBestPicks((await getBestPicks(20)).items ?? []); }
+        catch {}
+        finally { setLoading((s) => ({ ...s, bestPicks: false })); }
+    }, []);
+
+    const refreshAnalysis = useCallback(async () => {
+        setLoading((s) => ({ ...s, analysis: true }));
+        try { setAnalysis(await getAnalysis()); }
+        catch {}
+        finally { setLoading((s) => ({ ...s, analysis: false })); }
+    }, []);
+
+    const refreshPerfStats = useCallback(async () => {
+        try { setPerfStats(await getPerformanceStats()); } catch {}
+    }, []);
+
+    const refreshReport = useCallback(async () => {
+        setReportLoading(true);
+        try {
+            const [rep, hist] = await Promise.all([
+                getLatestReport(),
+                getReportHistory(10),
+            ]);
+            setReport(rep);
+            setReportHistory(hist?.reports ?? []);
+        } catch {}
+        finally { setReportLoading(false); }
+    }, []);
+
+    const loadSpecificReport = useCallback(async (drwNo) => {
+        setReportLoading(true);
+        try { setReport(await getReport(drwNo)); }
+        catch {}
+        finally { setReportLoading(false); }
+    }, []);
+
+    const runCombinedRecommend = useCallback(async () => {
+        setCombinedLoading(true);
+        try {
+            const data = await getCombinedRecommend();
+            setCombined(data);
+            const hist = await getCombinedHistory(30);
+            setCombinedHistory(hist?.items ?? []);
+        } catch (e) { setError(e?.message ?? String(e)); }
+        finally { setCombinedLoading(false); }
+    }, []);
+
+    const loadCombinedHistory = useCallback(async () => {
+        setCombinedHistLoading(true);
+        try {
+            const hist = await getCombinedHistory(30);
+            setCombinedHistory(hist?.items ?? []);
+        } catch {}
+        finally { setCombinedHistLoading(false); }
+    }, []);
+
+    const refreshPersonalAnalysis = useCallback(async () => {
+        setPersonalLoading(true);
+        try { setPersonalAnalysis(await getPersonalAnalysis()); }
+        catch {}
+        finally { setPersonalLoading(false); }
+    }, []);
+
+    const onSimulate = useCallback(async () => {
+        const ok = confirm('시뮬레이션을 즉시 실행할까요?\n20,000개 후보를 분석합니다. (약 1~3분 소요)');
+        if (!ok) return;
+        setSimulating(true); setSimResult(null); setError('');
+        try {
+            const { triggerSimulate } = await import('../../../api');
+            const data = await triggerSimulate();
+            setSimResult(data);
+            await refreshBestPicks();
+        } catch (e) { setError(e?.message ?? String(e)); }
+        finally { setSimulating(false); }
+    }, [refreshBestPicks]);
+
+    // 초기 로드
+    useEffect(() => {
+        refreshLatest();
+        refreshStats();
+        refreshBestPicks();
+        refreshAnalysis();
+        refreshPerfStats();
+        refreshReport();
+        refreshPersonalAnalysis();
+        loadCombinedHistory();
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return {
+        latest, loading, error, setError,
+        stats, statsLoading, statsError, refreshStats,
+        refreshLatest,
+        bestPicks, bestPicksExpanded, setBestPicksExpanded, refreshBestPicks,
+        analysis, refreshAnalysis,
+        simulating, simResult, onSimulate,
+        combined, combinedLoading, combinedHistory, combinedHistLoading,
+        runCombinedRecommend,
+        perfStats,
+        report, reportHistory, reportLoading, refreshReport, loadSpecificReport,
+        personalAnalysis, personalLoading,
+    };
+}

src/pages/lotto/hooks/useManualRecommend.js

@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { deleteHistory, getHistory, recommend } from '../../../api';
+import { buildMetricsFromHistory } from '../lottoUtils';
+
+export default function useManualRecommend() {
+    const [params, setParams] = useState({
+        recent_window: 200, recent_weight: 2.0, avoid_recent_k: 5,
+    });
+    const presets = useMemo(() => [
+        { name: '기본', recent_window: 200, recent_weight: 2.0, avoid_recent_k: 5 },
+        { name: '최근 가중치↑', recent_window: 100, recent_weight: 3.0, avoid_recent_k: 10 },
+        { name: '안전(분산)', recent_window: 300, recent_weight: 1.6, avoid_recent_k: 8 },
+        { name: '공격(최근)', recent_window: 80, recent_weight: 3.5, avoid_recent_k: 12 },
+    ], []);
+    const [result, setResult] = useState(null);
+    const [history, setHistory] = useState([]);
+    const [historyExpanded, setHistoryExpanded] = useState(false);
+    const historyEndRef = useRef(null);
+    const prevHistoryExpandedRef = useRef(false);
+    const [loading, setLoading] = useState({ recommend: false, history: false });
+    const [error, setError] = useState('');
+
+    const historyMetrics = useMemo(() => buildMetricsFromHistory(history), [history]);
+    const visibleHistory = historyExpanded ? history : history.slice(0, 5);
+
+    const refreshHistory = useCallback(async () => {
+        setLoading((s) => ({ ...s, history: true }));
+        setError('');
+        try {
+            const limit = 100; let offset = 0; const allItems = [];
+            while (true) {
+                const data = await getHistory(limit, offset);
+                const items = data.items ?? [];
+                allItems.push(...items);
+                if (items.length < limit) break;
+                offset += limit;
+            }
+            setHistory(allItems);
+        } catch (e) { setError(e?.message ?? String(e)); }
+        finally { setLoading((s) => ({ ...s, history: false })); }
+    }, []);
+
+    const onRecommend = useCallback(async () => {
+        setLoading((s) => ({ ...s, recommend: true })); setError('');
+        try { const data = await recommend(params); setResult(data); await refreshHistory(); }
+        catch (e) { setError(e?.message ?? String(e)); }
+        finally { setLoading((s) => ({ ...s, recommend: false })); }
+    }, [params, refreshHistory]);
+
+    const onDelete = useCallback(async (id) => {
+        if (!confirm(`히스토리 #${id}를 삭제할까요?`)) return;
+        setError('');
+        try { await deleteHistory(id); setHistory((prev) => prev.filter((item) => item.id !== id)); }
+        catch (e) { setError(e?.message ?? String(e)); }
+    }, []);
+
+    useEffect(() => {
+        if (historyExpanded && !prevHistoryExpandedRef.current) {
+            requestAnimationFrame(() => {
+                historyEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+            });
+        }
+        prevHistoryExpandedRef.current = historyExpanded;
+    }, [historyExpanded, visibleHistory.length]);
+
+    useEffect(() => { refreshHistory(); }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return {
+        params, setParams, presets,
+        result, history, historyExpanded, setHistoryExpanded,
+        historyEndRef, loading, error, setError,
+        historyMetrics, visibleHistory,
+        refreshHistory, onRecommend, onDelete,
+    };
+}

src/pages/lotto/hooks/usePurchases.js

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+    getPurchases, getPurchaseStats, addPurchase, updatePurchase, deletePurchase,
+} from '../../../api';
+import { emptyPurchaseForm } from '../lottoUtils';
+
+export default function usePurchases() {
+    const [purchases, setPurchases] = useState([]);
+    const [purchaseStats, setPurchaseStats] = useState(null);
+    const [purchaseLoading, setPurchaseLoading] = useState(false);
+
+    // 폼 상태
+    const [purchaseFormOpen, setPurchaseFormOpen] = useState(false);
+    const [purchaseForm, setPurchaseForm] = useState(emptyPurchaseForm);
+    const [purchaseFormSaving, setPurchaseFormSaving] = useState(false);
+    const [purchaseFormError, setPurchaseFormError] = useState('');
+    const [purchaseEditId, setPurchaseEditId] = useState(null);
+
+    const refreshPurchases = useCallback(async () => {
+        setPurchaseLoading(true);
+        try {
+            const [recs, st] = await Promise.all([getPurchases(), getPurchaseStats()]);
+            setPurchases(recs?.records ?? []);
+            setPurchaseStats(st);
+        } catch {}
+        finally { setPurchaseLoading(false); }
+    }, []);
+
+    const handlePurchaseFormOpen = useCallback(() => {
+        setPurchaseEditId(null);
+        setPurchaseForm(emptyPurchaseForm());
+        setPurchaseFormError('');
+        setPurchaseFormOpen(true);
+    }, []);
+
+    const handlePurchaseFormClose = useCallback(() => {
+        setPurchaseFormOpen(false);
+        setPurchaseEditId(null);
+        setPurchaseFormError('');
+    }, []);
+
+    const handlePurchaseFormChange = useCallback((field, value) => {
+        setPurchaseForm((prev) => ({ ...prev, [field]: value }));
+    }, []);
+
+    const handlePurchaseEditStart = useCallback((rec) => {
+        setPurchaseEditId(rec.id);
+        setPurchaseForm({
+            draw_no: String(rec.draw_no ?? ''),
+            amount: rec.amount ?? 5000,
+            sets: rec.sets ?? 5,
+            prize: rec.prize ?? 0,
+            note: rec.note ?? '',
+        });
+        setPurchaseFormError('');
+        setPurchaseFormOpen(true);
+    }, []);
+
+    const handlePurchaseFormSubmit = useCallback(async (e) => {
+        e.preventDefault();
+        setPurchaseFormSaving(true); setPurchaseFormError('');
+        const payload = {
+            draw_no: Number(purchaseForm.draw_no),
+            amount: Number(purchaseForm.amount),
+            sets: Number(purchaseForm.sets),
+            prize: Number(purchaseForm.prize),
+            note: purchaseForm.note.trim(),
+        };
+        try {
+            if (purchaseEditId != null) {
+                const updated = await updatePurchase(purchaseEditId, payload);
+                setPurchases((prev) =>
+                    prev.map((r) => r.id === purchaseEditId ? (updated ?? { ...payload, id: purchaseEditId }) : r)
+                );
+            } else {
+                const saved = await addPurchase(payload);
+                setPurchases((prev) => [saved ?? { ...payload, id: Date.now() }, ...prev]);
+            }
+            try { setPurchaseStats(await getPurchaseStats()); } catch {}
+            handlePurchaseFormClose();
+        } catch (err) {
+            setPurchaseFormError(err?.message ?? String(err));
+        } finally {
+            setPurchaseFormSaving(false);
+        }
+    }, [purchaseForm, purchaseEditId, handlePurchaseFormClose]);
+
+    const handlePurchaseDelete = useCallback(async (id) => {
+        if (!confirm('이 구매 기록을 삭제할까요?')) return;
+        setPurchases((prev) => prev.filter((r) => r.id !== id));
+        try {
+            await deletePurchase(id);
+            try { setPurchaseStats(await getPurchaseStats()); } catch {}
+        } catch { refreshPurchases(); }
+    }, [refreshPurchases]);
+
+    useEffect(() => { refreshPurchases(); }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return {
+        purchases, purchaseStats, purchaseLoading,
+        purchaseFormOpen, purchaseForm, purchaseFormSaving, purchaseFormError, purchaseEditId,
+        handlePurchaseFormOpen, handlePurchaseFormClose, handlePurchaseFormChange,
+        handlePurchaseFormSubmit, handlePurchaseEditStart, handlePurchaseDelete,
+    };
+}

src/pages/lotto/lottoUtils.jsx

@@ -0,0 +1,141 @@
+/* ─────────────────────────────────────────────
+   로또 공통 유틸리티
+───────────────────────────────────────────── */
+import React from 'react';
+
+export const fmtKST = (value) => value?.replace('T', ' ') ?? '';
+
+export const fmtWon = (n) => {
+    if (n == null || isNaN(Number(n))) return '-';
+    return new Intl.NumberFormat('ko-KR').format(Math.round(Number(n))) + '원';
+};
+
+export const ballClass = (n) => {
+    if (n <= 10) return 'lotto-ball range-a';
+    if (n <= 20) return 'lotto-ball range-b';
+    if (n <= 30) return 'lotto-ball range-c';
+    if (n <= 40) return 'lotto-ball range-d';
+    return 'lotto-ball range-e';
+};
+
+export const Ball = ({ n }) => <span className={ballClass(n)}>{n}</span>;
+
+export const NumberRow = ({ nums }) => (
+    <div className="lotto-row">
+        {nums.map((n) => <Ball key={n} n={n} />)}
+    </div>
+);
+
+/* ─────────────────────────────────────────────
+   통계 헬퍼
+───────────────────────────────────────────── */
+export const bucketOrder = ['1-10', '11-20', '21-30', '31-40', '41-45'];
+export const STATS_CACHE_KEY = 'lotto_stats_v1';
+export const BEST_PICKS_DEFAULT_SHOW = 5;
+
+export const readStatsCache = () => {
+    if (typeof window === 'undefined') return null;
+    try {
+        const raw = localStorage.getItem(STATS_CACHE_KEY);
+        if (!raw) return null;
+        const parsed = JSON.parse(raw);
+        if (!parsed || !Array.isArray(parsed.frequency)) return null;
+        return parsed;
+    } catch { return null; }
+};
+
+export const writeStatsCache = (data) => {
+    if (typeof window === 'undefined') return;
+    try { localStorage.setItem(STATS_CACHE_KEY, JSON.stringify(data)); } catch {}
+};
+
+export const buildFrequencySeries = (frequency) => {
+    const map = new Map();
+    (frequency ?? []).forEach((item) => {
+        const number = Number(item?.number);
+        const count = Number(item?.count) || 0;
+        if (Number.isFinite(number) && number >= 1 && number <= 45) map.set(number, count);
+    });
+    const series = Array.from({ length: 45 }, (_, idx) => ({
+        number: idx + 1, count: map.get(idx + 1) ?? 0,
+    }));
+    const max = Math.max(1, ...series.map((item) => item.count));
+    return { series, max };
+};
+
+export const buildMetricsFromCounts = (counts) => {
+    if (!counts?.length) return null;
+    const total = counts.reduce((acc, v) => acc + v, 0);
+    if (!total) return null;
+    const min = Math.min(...counts), max = Math.max(...counts);
+    const odd = counts.reduce((acc, v, idx) => (idx % 2 === 0 ? acc + v : acc), 0);
+    const even = total - odd;
+    const buckets = {
+        '1-10': counts.slice(0, 10).reduce((a, b) => a + b, 0),
+        '11-20': counts.slice(10, 20).reduce((a, b) => a + b, 0),
+        '21-30': counts.slice(20, 30).reduce((a, b) => a + b, 0),
+        '31-40': counts.slice(30, 40).reduce((a, b) => a + b, 0),
+        '41-45': counts.slice(40, 45).reduce((a, b) => a + b, 0),
+    };
+    return { sum: total, min, max, range: max - min, odd, even, buckets };
+};
+
+export const buildMetricsFromFrequency = (frequency) => {
+    if (!frequency?.length) return null;
+    const counts = Array.from({ length: 45 }, () => 0);
+    frequency.forEach((item) => {
+        const number = Number(item?.number), count = Number(item?.count) || 0;
+        if (number >= 1 && number <= 45) counts[number - 1] = count;
+    });
+    return buildMetricsFromCounts(counts);
+};
+
+export const buildMetricsFromHistory = (items) => {
+    if (!items?.length) return null;
+    const counts = Array.from({ length: 45 }, () => 0);
+    items.forEach((item) => {
+        (item?.numbers ?? []).forEach((value) => {
+            const number = Number(value);
+            if (number >= 1 && number <= 45) counts[number - 1] += 1;
+        });
+    });
+    return buildMetricsFromCounts(counts);
+};
+
+export const toBucketEntries = (metrics) => {
+    if (!metrics?.buckets) return [];
+    const ordered = bucketOrder
+        .filter((key) => Object.prototype.hasOwnProperty.call(metrics.buckets, key))
+        .map((key) => [key, metrics.buckets[key]]);
+    const rest = Object.entries(metrics.buckets)
+        .filter(([key]) => !bucketOrder.includes(key))
+        .sort((a, b) => Number(a[0].split('-')[0]) - Number(b[0].split('-')[0]));
+    return [...ordered, ...rest];
+};
+
+export const emptyPurchaseForm = () => ({ draw_no: '', amount: 5000, sets: 5, prize: 0, note: '' });
+
+export const copyNumbers = async (nums) => {
+    const text = nums.join(', ');
+    try { await navigator.clipboard.writeText(text); alert(`복사 완료: ${text}`); }
+    catch { prompt('복사해서 사용하세요:', text); }
+};
+
+/* 종합 추론 상수 */
+export const METHOD_META = {
+    frequency:   { label: '빈도 Z-score',  desc: '역대 출현 빈도가 기댓값보다 높은 번호', color: '#818cf8', icon: '📊' },
+    fingerprint: { label: '조합 지문',     desc: '역대 당첨 조합의 합계·홀짝·구간 분포에 맞는 번호', color: '#fbbf24', icon: '🔏' },
+    gap:         { label: '갭 분석',       desc: '가장 오래 등장하지 않은 오버듀 번호', color: '#34d399', icon: '⏳' },
+    cooccur:     { label: '공동 출현',     desc: '역대에 함께 출현한 빈도가 높은 번호', color: '#f472b6', icon: '🔗' },
+    diversity:   { label: '다양성',        desc: '구간 커버리지와 번호 범위를 극대화한 번호', color: '#fb923c', icon: '🌈' },
+};
+
+export const METHOD_ORDER = ['fingerprint', 'frequency', 'gap', 'cooccur', 'diversity'];
+
+export const SCORE_META = [
+    { key: 'score_fingerprint', label: '조합 지문',  color: '#fbbf24', weight: 30 },
+    { key: 'score_frequency',   label: '빈도 Z',     color: '#818cf8', weight: 25 },
+    { key: 'score_gap',         label: '갭 분석',    color: '#34d399', weight: 20 },
+    { key: 'score_cooccur',     label: '공동 출현',  color: '#f472b6', weight: 15 },
+    { key: 'score_diversity',   label: '다양성',     color: '#fb923c', weight: 10 },
+];