feat(subscription): NotificationSettings — 임계값 슬라이더 + 알림 토글
This commit is contained in:
52
src/pages/subscription/components/NotificationSettings.jsx
Normal file
52
src/pages/subscription/components/NotificationSettings.jsx
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
export default function NotificationSettings({ minScore, notifyEnabled, onChange }) {
|
||||||
|
const score = minScore ?? 70;
|
||||||
|
const enabled = notifyEnabled ?? true;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="sub-panel">
|
||||||
|
<div className="sub-panel__head">
|
||||||
|
<p className="sub-panel__eyebrow">알림 설정</p>
|
||||||
|
<h3>🔔 텔레그램 알림</h3>
|
||||||
|
</div>
|
||||||
|
<div className="sub-panel__body" style={{ display: "grid", gap: 16 }}>
|
||||||
|
<label className="ns-row">
|
||||||
|
<span className="ns-row__label">텔레그램 알림</span>
|
||||||
|
<span className="ns-toggle">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="sub-toggle"
|
||||||
|
checked={enabled}
|
||||||
|
onChange={(e) => onChange({ notify_enabled: e.target.checked })}
|
||||||
|
/>
|
||||||
|
<span className="sub-toggle__label">{enabled ? "ON" : "OFF"}</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label className="ns-row ns-row--column">
|
||||||
|
<span className="ns-row__label">매칭 임계값 — {score}점</span>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="100"
|
||||||
|
step="5"
|
||||||
|
value={score}
|
||||||
|
onChange={(e) => onChange({ min_match_score: Number(e.target.value) })}
|
||||||
|
className="ns-slider"
|
||||||
|
disabled={!enabled}
|
||||||
|
/>
|
||||||
|
<div className="ns-scale">
|
||||||
|
<span>0</span>
|
||||||
|
<span>50</span>
|
||||||
|
<span>100</span>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<p className="ns-hint">
|
||||||
|
{enabled
|
||||||
|
? `💡 ${score}점 이상 매치 시 텔레그램에 자동 알림합니다.`
|
||||||
|
: "⚠️ 알림 OFF — 임계값을 통과한 매칭이 있어도 메시지가 발송되지 않습니다."}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user