hyungi/tk-factory-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
Hyungi Ahn
2026-03-17 15:01:03 +09:00
parent e50ff3fb63
commit 1cef745cc9
8 changed files with 302 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docker-compose.yml
View File

@@ -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

130
gateway/html/shared/notification-bell.js
View File

@@ -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();
}

58
system1-factory/api/controllers/pushSubscriptionController.js
View File

@@ -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 상태 확인 중 오류가 발생했습니다.' });
}
}
};

5
system1-factory/api/db/migrations/20260317001000_create_ntfy_subscriptions.sql Normal file
View File

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

42
system1-factory/api/models/notificationModel.js
View File

@@ -24,19 +24,44 @@ function getWebPush() {
return vapidConfigured ? webpush : null;
}
// Push 전송 헬퍼 — 알림 생성 후 호출
// Push 전송 헬퍼 — 알림 생성 후 호출 (ntfy 우선, 나머지 Web Push)
async function sendPushToUsers(userIds, payload) {
const wp = getWebPush();
if (!wp) return;
const pushModel = require('./pushSubscriptionModel');
const { sendNtfy } = require('../utils/ntfySender');
try {
const pushModel = require('./pushSubscriptionModel');
const subscriptions = userIds && userIds.length > 0
? await pushModel.getByUserIds(userIds)
: await pushModel.getAll(); // broadcast
// 1) ntfy 구독자 분리
const ntfyUserIds = userIds && userIds.length > 0
? await pushModel.getNtfyUserIds(userIds)
: 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(() => {});
}

40
system1-factory/api/models/pushSubscriptionModel.js
View File

@@ -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;
}
};

5
system1-factory/api/routes/pushSubscriptionRoutes.js
View File

@@ -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;

31
system1-factory/api/utils/ntfySender.js Normal file
View File

@@ -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 };