From 344caace3a2e3299357c9fc3ba55268ed16c1c62 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Tue, 28 Apr 2026 10:58:45 +0900
Subject: [PATCH] =?UTF-8?q?feat(subscription):=20NotificationSettings=20?=
 =?UTF-8?q?=E2=80=94=20=EC=9E=84=EA=B3=84=EA=B0=92=20=EC=8A=AC=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B4=EB=8D=94=20+=20=EC=95=8C=EB=A6=BC=20=ED=86=A0?=
 =?UTF-8?q?=EA=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/NotificationSettings.jsx       | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/pages/subscription/components/NotificationSettings.jsx

diff --git a/src/pages/subscription/components/NotificationSettings.jsx b/src/pages/subscription/components/NotificationSettings.jsx
new file mode 100644
index 0000000..d65443e
--- /dev/null
+++ b/src/pages/subscription/components/NotificationSettings.jsx
@@ -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>
+    );
+}