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>

docker-compose.yml

@@ -107,6 +107,10 @@ services:
       - VAPID_PRIVATE_KEY=${VAPID_PRIVATE_KEY}
       - VAPID_SUBJECT=${VAPID_SUBJECT:-mailto:admin@technicalkorea.net}
       - INTERNAL_SERVICE_KEY=${INTERNAL_SERVICE_KEY}
+      - NTFY_BASE_URL=${NTFY_BASE_URL:-http://ntfy:80}
+      - NTFY_PUBLISH_TOKEN=${NTFY_PUBLISH_TOKEN}
+      - NTFY_EXTERNAL_URL=${NTFY_EXTERNAL_URL:-https://ntfy.technicalkorea.net}
+      - TKFB_BASE_URL=${TKFB_BASE_URL:-https://tkfb.technicalkorea.net}
     volumes:
       - system1_uploads:/usr/src/app/uploads
       - system1_logs:/usr/src/app/logs

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) {
+    if (ntfySubscribed) {
-      btn.textContent = '🔕 Push 해제';
+      // 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();
   }

system1-factory/api/controllers/pushSubscriptionController.js

@@ -43,6 +43,64 @@ const pushSubscriptionController = {
       console.error('Push 구독 해제 오류:', error);
       res.status(500).json({ success: false, message: 'Push 구독 해제 중 오류가 발생했습니다.' });
     }
+  },
+
+  // === ntfy ===
+
+  // ntfy 구독 등록
+  async ntfySubscribe(req, res) {
+    try {
+      const userId = req.user?.id;
+      await pushSubscriptionModel.ntfySubscribe(userId);
+
+      const topic = `tkfactory-user-${userId}`;
+      res.json({
+        success: true,
+        message: 'ntfy 구독이 등록되었습니다.',
+        data: {
+          topic,
+          serverUrl: process.env.NTFY_EXTERNAL_URL || 'https://ntfy.technicalkorea.net',
+          username: 'subscriber',
+          password: 'tkfactory-sub-2026'
+        }
+      });
+    } catch (error) {
+      console.error('ntfy 구독 오류:', error);
+      res.status(500).json({ success: false, message: 'ntfy 구독 중 오류가 발생했습니다.' });
+    }
+  },
+
+  // ntfy 구독 해제
+  async ntfyUnsubscribe(req, res) {
+    try {
+      const userId = req.user?.id;
+      await pushSubscriptionModel.ntfyUnsubscribe(userId);
+      res.json({ success: true, message: 'ntfy 구독이 해제되었습니다.' });
+    } catch (error) {
+      console.error('ntfy 구독 해제 오류:', error);
+      res.status(500).json({ success: false, message: 'ntfy 구독 해제 중 오류가 발생했습니다.' });
+    }
+  },
+
+  // ntfy 구독 상태 확인
+  async ntfyStatus(req, res) {
+    try {
+      const userId = req.user?.id;
+      const subscribed = await pushSubscriptionModel.isNtfySubscribed(userId);
+      const topic = `tkfactory-user-${userId}`;
+
+      res.json({
+        success: true,
+        data: {
+          subscribed,
+          topic,
+          serverUrl: process.env.NTFY_EXTERNAL_URL || 'https://ntfy.technicalkorea.net'
+        }
+      });
+    } catch (error) {
+      console.error('ntfy 상태 확인 오류:', error);
+      res.status(500).json({ success: false, message: 'ntfy 상태 확인 중 오류가 발생했습니다.' });
+    }
   }
 };
 

system1-factory/api/db/migrations/20260317001000_create_ntfy_subscriptions.sql

@@ -0,0 +1,5 @@
+-- ntfy 구독 테이블
+CREATE TABLE IF NOT EXISTS ntfy_subscriptions (
+  user_id INT PRIMARY KEY,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);

system1-factory/api/models/notificationModel.js

@@ -24,19 +24,44 @@ function getWebPush() {
   return vapidConfigured ? webpush : null;
 }
 
-// Push 전송 헬퍼 — 알림 생성 후 호출
+// Push 전송 헬퍼 — 알림 생성 후 호출 (ntfy 우선, 나머지 Web Push)
 async function sendPushToUsers(userIds, payload) {
-  const wp = getWebPush();
+  const pushModel = require('./pushSubscriptionModel');
-  if (!wp) return;
+  const { sendNtfy } = require('../utils/ntfySender');
 
   try {
-    const pushModel = require('./pushSubscriptionModel');
+    // 1) ntfy 구독자 분리
-    const subscriptions = userIds && userIds.length > 0
+    const ntfyUserIds = userIds && userIds.length > 0
-      ? await pushModel.getByUserIds(userIds)
+      ? await pushModel.getNtfyUserIds(userIds)
-      : await pushModel.getAll(); // broadcast
+      : await pushModel.getAllNtfyUserIds();
+
+    const ntfySet = new Set(ntfyUserIds);
+
+    // 2) ntfy 병렬 발송
+    if (ntfyUserIds.length > 0) {
+      await Promise.allSettled(
+        ntfyUserIds.map(uid =>
+          sendNtfy(uid, { title: payload.title, body: payload.body, url: payload.url })
+        )
+      );
+    }
+
+    // 3) Web Push — ntfy 구독자 제외
+    const wp = getWebPush();
+    if (!wp) return;
+
+    let subscriptions;
+    if (userIds && userIds.length > 0) {
+      const webPushUserIds = userIds.filter(id => !ntfySet.has(id));
+      subscriptions = webPushUserIds.length > 0
+        ? await pushModel.getByUserIds(webPushUserIds)
+        : [];
+    } else {
+      // broadcast: 전체 구독 가져온 뒤 ntfy 사용자 제외
+      subscriptions = (await pushModel.getAll()).filter(s => !ntfySet.has(s.user_id));
+    }
 
     const payloadStr = JSON.stringify(payload);
-
     for (const sub of subscriptions) {
       try {
         await wp.sendNotification({
@@ -44,7 +69,6 @@ async function sendPushToUsers(userIds, payload) {
           keys: { p256dh: sub.p256dh, auth: sub.auth }
         }, payloadStr);
       } catch (err) {
-        // 만료 구독 (410 Gone, 404 Not Found) 자동 정리
         if (err.statusCode === 410 || err.statusCode === 404) {
           await pushModel.deleteByEndpoint(sub.endpoint).catch(() => {});
         }

system1-factory/api/models/pushSubscriptionModel.js

@@ -46,6 +46,46 @@ const pushSubscriptionModel = {
   async deleteByEndpoint(endpoint) {
     const db = await getDb();
     await db.query('DELETE FROM push_subscriptions WHERE endpoint = ?', [endpoint]);
+  },
+
+  // === ntfy 구독 관련 ===
+
+  async getNtfyUserIds(userIds) {
+    if (!userIds || userIds.length === 0) return [];
+    const db = await getDb();
+    const [rows] = await db.query(
+      'SELECT user_id FROM ntfy_subscriptions WHERE user_id IN (?)',
+      [userIds]
+    );
+    return rows.map(r => r.user_id);
+  },
+
+  async getAllNtfyUserIds() {
+    const db = await getDb();
+    const [rows] = await db.query('SELECT user_id FROM ntfy_subscriptions');
+    return rows.map(r => r.user_id);
+  },
+
+  async ntfySubscribe(userId) {
+    const db = await getDb();
+    await db.query(
+      'INSERT IGNORE INTO ntfy_subscriptions (user_id) VALUES (?)',
+      [userId]
+    );
+  },
+
+  async ntfyUnsubscribe(userId) {
+    const db = await getDb();
+    await db.query('DELETE FROM ntfy_subscriptions WHERE user_id = ?', [userId]);
+  },
+
+  async isNtfySubscribed(userId) {
+    const db = await getDb();
+    const [rows] = await db.query(
+      'SELECT 1 FROM ntfy_subscriptions WHERE user_id = ? LIMIT 1',
+      [userId]
+    );
+    return rows.length > 0;
   }
 };
 

system1-factory/api/routes/pushSubscriptionRoutes.js

@@ -11,4 +11,9 @@ router.get('/vapid-public-key', pushController.getVapidPublicKey);
 router.post('/subscribe', requireAuth, pushController.subscribe);
 router.delete('/unsubscribe', requireAuth, pushController.unsubscribe);
 
+// ntfy 구독 관리
+router.post('/ntfy/subscribe', requireAuth, pushController.ntfySubscribe);
+router.delete('/ntfy/unsubscribe', requireAuth, pushController.ntfyUnsubscribe);
+router.get('/ntfy/status', requireAuth, pushController.ntfyStatus);
+
 module.exports = router;

system1-factory/api/utils/ntfySender.js

@@ -0,0 +1,31 @@
+// utils/ntfySender.js — ntfy HTTP POST 래퍼
+const NTFY_BASE_URL = process.env.NTFY_BASE_URL || 'http://ntfy:80';
+const NTFY_PUBLISH_TOKEN = process.env.NTFY_PUBLISH_TOKEN;
+const TKFB_BASE_URL = process.env.TKFB_BASE_URL || 'https://tkfb.technicalkorea.net';
+
+async function sendNtfy(userId, { title, body, url }) {
+  if (!NTFY_PUBLISH_TOKEN) return;
+
+  const topic = `tkfactory-user-${userId}`;
+  const headers = {
+    'Authorization': `Bearer ${NTFY_PUBLISH_TOKEN}`,
+    'Title': title || '',
+    'Tags': 'bell',
+  };
+  if (url) {
+    headers['Click'] = url.startsWith('http') ? url : `${TKFB_BASE_URL}${url}`;
+  }
+
+  try {
+    const resp = await fetch(`${NTFY_BASE_URL}/${topic}`, {
+      method: 'POST',
+      headers,
+      body: body || '',
+    });
+    if (!resp.ok) console.warn(`[ntfy] ${userId} 발송 실패: ${resp.status}`);
+  } catch (e) {
+    console.error(`[ntfy] ${userId} 발송 오류:`, e.message);
+  }
+}
+
+module.exports = { sendNtfy };