feat(ntfy): Phase 2 — sendPushToUsers() ntfy 연동 + 구독 관리 UI

- ntfy_subscriptions 테이블 마이그레이션 추가
- ntfySender.js 유틸 (ntfy HTTP POST 래퍼)
- sendPushToUsers() ntfy 우선 분기 (ntfy 구독자 → ntfy, 나머지 → Web Push)
- ntfy subscribe/unsubscribe/status API 엔드포인트
- notification-bell.js ntfy 토글 버튼 + 앱 설정 안내 모달
- docker-compose system1-api에 NTFY 환경변수 추가

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

gateway/html/shared/notification-bell.js

@@ -44,6 +44,7 @@
   var unreadCount = 0;
   var dropdownOpen = false;
   var pushSubscribed = false;
+  var ntfySubscribed = false;
 
   /* ========== UI: Bell injection ========== */
   function injectBell() {
@@ -67,7 +68,8 @@
         '<div style="padding:12px 16px;border-bottom:1px solid #F3F4F6;display:flex;justify-content:space-between;align-items:center;">' +
           '<span style="font-weight:600;font-size:14px;color:#111827;">알림</span>' +
           '<div style="display:flex;gap:8px;align-items:center;">' +
-            '<button id="notif-push-toggle" style="font-size:12px;color:#6B7280;background:none;border:1px solid #D1D5DB;border-radius:4px;padding:2px 8px;cursor:pointer;" title="Push 알림 설정">🔔 Push</button>' +
+            '<button id="notif-ntfy-toggle" style="font-size:12px;color:#6B7280;background:none;border:1px solid #D1D5DB;border-radius:4px;padding:2px 8px;cursor:pointer;" title="ntfy 앱 알림">ntfy</button>' +
+            '<button id="notif-push-toggle" style="font-size:12px;color:#6B7280;background:none;border:1px solid #D1D5DB;border-radius:4px;padding:2px 8px;cursor:pointer;" title="Push 알림 설정">Push</button>' +
             '<button id="notif-read-all" style="font-size:12px;color:#3B82F6;background:none;border:none;cursor:pointer;">모두 읽음</button>' +
           '</div>' +
         '</div>' +
@@ -97,6 +99,7 @@
     document.getElementById('notif-bell-btn').addEventListener('click', toggleDropdown);
     document.getElementById('notif-read-all').addEventListener('click', markAllRead);
     document.getElementById('notif-push-toggle').addEventListener('click', handlePushToggle);
+    document.getElementById('notif-ntfy-toggle').addEventListener('click', handleNtfyToggle);
 
     // 외부 클릭 시 닫기
     document.addEventListener('click', function (e) {
@@ -161,6 +164,7 @@
     window.addEventListener('scroll', onScrollWhileOpen, { once: true });
     loadNotifications();
     updatePushToggleUI();
+    updateNtfyToggleUI();
   }
 
   function closeDropdown() {
@@ -356,17 +360,134 @@
   function updatePushToggleUI() {
     var btn = document.getElementById('notif-push-toggle');
     if (!btn) return;
-    if (pushSubscribed) {
-      btn.textContent = '🔕 Push 해제';
+    if (ntfySubscribed) {
+      // ntfy 활성화 시 Web Push 비활성화
+      btn.textContent = 'Push';
+      btn.style.borderColor = '#E5E7EB';
+      btn.style.color = '#D1D5DB';
+      btn.disabled = true;
+      btn.title = 'ntfy 사용 중에는 Push를 사용할 수 없습니다';
+    } else if (pushSubscribed) {
+      btn.textContent = 'Push 해제';
+      btn.style.borderColor = '#EF4444';
+      btn.style.color = '#EF4444';
+      btn.disabled = false;
+      btn.title = 'Push 알림 해제';
+    } else {
+      btn.textContent = 'Push';
+      btn.style.borderColor = '#D1D5DB';
+      btn.style.color = '#6B7280';
+      btn.disabled = false;
+      btn.title = 'Push 알림 설정';
+    }
+  }
+
+  /* ========== ntfy ========== */
+  function handleNtfyToggle(e) {
+    e && e.stopPropagation();
+    if (ntfySubscribed) {
+      unsubscribeNtfy();
+    } else {
+      subscribeNtfy();
+    }
+  }
+
+  function subscribeNtfy() {
+    _authFetch(PUSH_API_BASE + '/ntfy/subscribe', { method: 'POST' })
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        if (!data.success) {
+          alert('ntfy 구독 등록 실패');
+          return;
+        }
+        ntfySubscribed = true;
+        updateNtfyToggleUI();
+        updatePushToggleUI();
+        showNtfySetupModal(data.data);
+      })
+      .catch(function (err) {
+        console.error('[notification-bell] ntfy subscribe error:', err);
+      });
+  }
+
+  function unsubscribeNtfy() {
+    _authFetch(PUSH_API_BASE + '/ntfy/unsubscribe', { method: 'DELETE' })
+      .then(function (r) { return r.json(); })
+      .then(function () {
+        ntfySubscribed = false;
+        updateNtfyToggleUI();
+        updatePushToggleUI();
+        checkPushStatus();
+      })
+      .catch(function (err) {
+        console.error('[notification-bell] ntfy unsubscribe error:', err);
+      });
+  }
+
+  function checkNtfyStatus() {
+    _authFetch(PUSH_API_BASE + '/ntfy/status')
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        if (data.success && data.data.subscribed) {
+          ntfySubscribed = true;
+          updateNtfyToggleUI();
+          updatePushToggleUI();
+        }
+      })
+      .catch(function () {});
+  }
+
+  function updateNtfyToggleUI() {
+    var btn = document.getElementById('notif-ntfy-toggle');
+    if (!btn) return;
+    if (ntfySubscribed) {
+      btn.textContent = 'ntfy 해제';
       btn.style.borderColor = '#EF4444';
       btn.style.color = '#EF4444';
     } else {
-      btn.textContent = '🔔 Push';
+      btn.textContent = 'ntfy';
       btn.style.borderColor = '#D1D5DB';
       btn.style.color = '#6B7280';
     }
   }
 
+  function showNtfySetupModal(info) {
+    // 기존 모달 제거
+    var existing = document.getElementById('ntfy-setup-modal');
+    if (existing) existing.remove();
+
+    var overlay = document.createElement('div');
+    overlay.id = 'ntfy-setup-modal';
+    overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:10000;display:flex;align-items:center;justify-content:center;';
+
+    var modal = document.createElement('div');
+    modal.style.cssText = 'background:#fff;border-radius:12px;padding:24px;max-width:380px;width:90%;box-shadow:0 20px 40px rgba(0,0,0,.2);';
+    modal.innerHTML =
+      '<h3 style="margin:0 0 16px;font-size:16px;color:#111827;">ntfy 앱 설정 안내</h3>' +
+      '<div style="font-size:13px;color:#374151;line-height:1.6;">' +
+        '<p style="margin:0 0 12px;"><strong>1.</strong> ntfy 앱 설치<br>' +
+          '<span style="color:#6B7280;">Android: Play Store / iOS: App Store</span></p>' +
+        '<p style="margin:0 0 12px;"><strong>2.</strong> 앱에서 서버 추가<br>' +
+          '<code style="background:#F3F4F6;padding:2px 6px;border-radius:3px;font-size:12px;">' + _escHtml(info.serverUrl) + '</code></p>' +
+        '<p style="margin:0 0 12px;"><strong>3.</strong> 계정 로그인<br>' +
+          '아이디: <code style="background:#F3F4F6;padding:2px 6px;border-radius:3px;font-size:12px;">' + _escHtml(info.username) + '</code><br>' +
+          '비밀번호: <code style="background:#F3F4F6;padding:2px 6px;border-radius:3px;font-size:12px;">' + _escHtml(info.password) + '</code></p>' +
+        '<p style="margin:0;"><strong>4.</strong> 토픽 구독<br>' +
+          '<code style="background:#F3F4F6;padding:2px 6px;border-radius:3px;font-size:12px;">' + _escHtml(info.topic) + '</code></p>' +
+      '</div>' +
+      '<button id="ntfy-modal-close" style="margin-top:16px;width:100%;padding:10px;background:#3B82F6;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;">확인</button>';
+
+    overlay.appendChild(modal);
+    document.body.appendChild(overlay);
+
+    document.getElementById('ntfy-modal-close').addEventListener('click', function () {
+      overlay.remove();
+    });
+    overlay.addEventListener('click', function (e) {
+      if (e.target === overlay) overlay.remove();
+    });
+  }
+
   /* ========== Push SW message handler ========== */
   function listenForPushMessages() {
     if (!('serviceWorker' in navigator)) return;
@@ -424,6 +545,7 @@
 
     injectBell();
     startPolling();
+    checkNtfyStatus();
     checkPushStatus();
     listenForPushMessages();
   }