feat: 알림 채널 다중 관리 UI 추가
Some checks failed
Build and Push Images / build-backend (push) Has been cancelled
Some checks failed
Build and Push Images / build-backend (push) Has been cancelled
This commit is contained in:
qorgh529
@@ -364,50 +364,87 @@
|
||||
<!-- Admin: 알림 설정 -->
|
||||
<div id="page-admin-notify" class="page">
|
||||
<div class="page-header">
|
||||
<div><h2>🔔 알림 설정</h2><p>Discord Webhook 및 이메일 알림 수신 설정을 관리합니다.</p></div>
|
||||
<div><h2>🔔 알림 채널 관리</h2><p>Discord Webhook 및 이메일 알림 채널을 추가·수정·삭제합니다.</p></div>
|
||||
<button class="btn btn-sm btn-purple" onclick="testNotify()">📨 테스트 발송</button>
|
||||
</div>
|
||||
<div class="table-wrapper" style="padding:28px;max-width:640px;">
|
||||
<div style="margin-bottom:24px;">
|
||||
<h3 style="font-size:1rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px;">
|
||||
<span style="background:#5865f2;color:#fff;border-radius:8px;padding:4px 10px;font-size:.85rem;">Discord</span>
|
||||
Webhook 설정
|
||||
</h3>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;">
|
||||
|
||||
<!-- 좌측: 입력 폼 -->
|
||||
<div class="table-wrapper" style="padding:24px;">
|
||||
<h3 id="notify-form-title" style="font-size:1rem;font-weight:700;margin-bottom:20px;">➕ 채널 추가</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Webhook URL</label>
|
||||
<input type="text" id="nc-discord-url" placeholder="https://discord.com/api/webhooks/..."/>
|
||||
<p style="font-size:.78rem;color:var(--muted);margin-top:4px">채널 설정 → 연동 → 웹후크에서 URL을 복사하세요.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top:1px solid var(--border);padding-top:24px;margin-bottom:24px;">
|
||||
<h3 style="font-size:1rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px;">
|
||||
<span style="background:#ea4335;color:#fff;border-radius:8px;padding:4px 10px;font-size:.85rem;">Gmail</span>
|
||||
이메일 설정
|
||||
</h3>
|
||||
<div class="form-group">
|
||||
<label>발송 Gmail 계정</label>
|
||||
<input type="email" id="nc-gmail-user" placeholder="sender@gmail.com"/>
|
||||
<label>채널 이름 *</label>
|
||||
<input type="text" id="nc-name" placeholder="예: Discord 운영채널, Gmail 알림"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Gmail 앱 비밀번호</label>
|
||||
<div class="pw-wrap">
|
||||
<input type="password" id="nc-gmail-pw" placeholder="변경 시에만 입력 (xxxx xxxx xxxx xxxx)"/>
|
||||
<button class="pw-toggle" onclick="togglePw('nc-gmail-pw',this)">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
</button>
|
||||
<label>채널 유형 *</label>
|
||||
<select id="nc-type" onchange="onNotifyTypeChange()" style="width:100%;padding:11px 14px;border:2px solid var(--border);border-radius:8px;font-size:.95rem;">
|
||||
<option value="both">Discord + Gmail 둘 다</option>
|
||||
<option value="discord">Discord 전용</option>
|
||||
<option value="email">Gmail 전용</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Discord 설정 -->
|
||||
<div id="nc-discord-section">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin:16px 0 12px;">
|
||||
<span style="background:#5865f2;color:#fff;border-radius:6px;padding:3px 10px;font-size:.8rem;font-weight:700;">Discord</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Webhook URL</label>
|
||||
<input type="text" id="nc-discord-url" placeholder="https://discord.com/api/webhooks/..."/>
|
||||
</div>
|
||||
<p style="font-size:.78rem;color:var(--muted);margin-top:4px">myaccount.google.com/apppasswords 에서 발급하세요. 변경하지 않을 경우 비워두세요.</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>수신 이메일 주소</label>
|
||||
<input type="email" id="nc-alert-to" placeholder="receiver@gmail.com"/>
|
||||
|
||||
<!-- Gmail 설정 -->
|
||||
<div id="nc-email-section">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin:16px 0 12px;">
|
||||
<span style="background:#ea4335;color:#fff;border-radius:6px;padding:3px 10px;font-size:.8rem;font-weight:700;">Gmail</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>발송 Gmail 계정</label>
|
||||
<input type="email" id="nc-gmail-user" placeholder="sender@gmail.com"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Gmail 앱 비밀번호</label>
|
||||
<div class="pw-wrap">
|
||||
<input type="password" id="nc-gmail-pw" placeholder="편집 시 변경할 경우에만 입력"/>
|
||||
<button class="pw-toggle" onclick="togglePw('nc-gmail-pw',this)">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>수신 이메일 주소</label>
|
||||
<input type="email" id="nc-alert-to" placeholder="receiver@gmail.com"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="display:flex;align-items:center;gap:10px;">
|
||||
<input type="checkbox" id="nc-enabled" checked style="width:16px;height:16px;accent-color:var(--primary)"/>
|
||||
<label for="nc-enabled" style="cursor:pointer;margin:0;">활성화</label>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:10px;justify-content:flex-end;margin-top:8px;">
|
||||
<button class="btn btn-sm btn-gray" onclick="resetNotifyForm()">초기화</button>
|
||||
<button class="btn btn-sm" id="nc-save-btn" onclick="saveNotifyChannel()">💾 저장</button>
|
||||
</div>
|
||||
<div id="notify-save-msg" style="margin-top:10px;font-size:.85rem;text-align:right;"></div>
|
||||
<input type="hidden" id="nc-editing-id" value=""/>
|
||||
</div>
|
||||
|
||||
<!-- 우측: 채널 리스트 -->
|
||||
<div class="table-wrapper" style="overflow:hidden;">
|
||||
<div style="padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;">
|
||||
<h3 style="font-size:1rem;font-weight:700;">등록된 채널 목록</h3>
|
||||
<span id="nc-count" style="font-size:.8rem;color:var(--muted);"></span>
|
||||
</div>
|
||||
<div id="notify-channel-list" style="max-height:520px;overflow-y:auto;">
|
||||
<div style="padding:40px;text-align:center;color:var(--muted);">등록된 채널이 없습니다.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px;justify-content:flex-end;">
|
||||
<button class="btn btn-sm btn-gray" onclick="loadNotifyConfig()">초기화</button>
|
||||
<button class="btn btn-sm" onclick="saveNotifyConfig()">💾 저장</button>
|
||||
</div>
|
||||
<div id="notify-save-msg" style="margin-top:12px;font-size:.85rem;text-align:right;"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -960,36 +997,131 @@ async function saveAccess(){
|
||||
closeModal('access-modal');alert('권한이 저장되었습니다.');
|
||||
}
|
||||
|
||||
// ── 알림 설정 ──────────────────────────────────────────────
|
||||
async function loadNotifyConfig(){
|
||||
try{
|
||||
const data = await apiFetch('/admin/notify-config');
|
||||
document.getElementById('nc-discord-url').value = data.discord_webhook_url || '';
|
||||
document.getElementById('nc-gmail-user').value = data.gmail_user || '';
|
||||
document.getElementById('nc-gmail-pw').value = data.gmail_app_password || '';
|
||||
document.getElementById('nc-alert-to').value = data.alert_email_to || '';
|
||||
document.getElementById('notify-save-msg').textContent = '';
|
||||
}catch(e){alert('알림 설정 불러오기 실패: '+e.message);}
|
||||
// ── 알림 채널 관리 ─────────────────────────────────────────
|
||||
let notifyChannels = [];
|
||||
|
||||
function onNotifyTypeChange(){
|
||||
const type = document.getElementById('nc-type').value;
|
||||
document.getElementById('nc-discord-section').style.display = (type==='email') ? 'none' : '';
|
||||
document.getElementById('nc-email-section').style.display = (type==='discord') ? 'none' : '';
|
||||
}
|
||||
|
||||
async function saveNotifyConfig(){
|
||||
async function loadNotifyConfig(){
|
||||
try{
|
||||
notifyChannels = await apiFetch('/admin/notify-channels');
|
||||
renderNotifyChannelList();
|
||||
document.getElementById('nc-count').textContent = `총 ${notifyChannels.length}개`;
|
||||
}catch(e){ console.error('알림 채널 로드 실패:', e.message); }
|
||||
}
|
||||
|
||||
function renderNotifyChannelList(){
|
||||
const el = document.getElementById('notify-channel-list');
|
||||
if(!notifyChannels.length){
|
||||
el.innerHTML = '<div style="padding:40px;text-align:center;color:var(--muted);">등록된 채널이 없습니다.</div>';
|
||||
return;
|
||||
}
|
||||
const typeLabel = {both:'Discord+Gmail', discord:'Discord', email:'Gmail'};
|
||||
const typeColor = {both:'#7c3aed', discord:'#5865f2', email:'#ea4335'};
|
||||
el.innerHTML = notifyChannels.map(ch => `
|
||||
<div id="nc-row-${ch.id}" style="padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .15s;"
|
||||
onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background=''"
|
||||
onclick="selectNotifyChannel(${ch.id})">
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">
|
||||
<span style="font-weight:600;font-size:.9rem;">${escHtml(ch.name)}</span>
|
||||
<span style="background:${typeColor[ch.type]};color:#fff;border-radius:4px;padding:1px 7px;font-size:.72rem;">${typeLabel[ch.type]||ch.type}</span>
|
||||
${ch.enabled ? '' : '<span style="background:#94a3b8;color:#fff;border-radius:4px;padding:1px 7px;font-size:.72rem;">비활성</span>'}
|
||||
</div>
|
||||
<div style="font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
|
||||
${ch.discord_webhook_url ? '🔗 Webhook 설정됨' : ''}
|
||||
${ch.discord_webhook_url && ch.gmail_user ? ' · ' : ''}
|
||||
${ch.gmail_user ? `📧 ${escHtml(ch.gmail_user)} → ${escHtml(ch.alert_email_to)}` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px;flex-shrink:0;">
|
||||
<button class="btn btn-sm btn-gray" style="padding:5px 10px;" onclick="event.stopPropagation();selectNotifyChannel(${ch.id})">✏️</button>
|
||||
<button class="btn btn-sm btn-danger" style="padding:5px 10px;" onclick="event.stopPropagation();deleteNotifyChannel(${ch.id})">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function selectNotifyChannel(id){
|
||||
const ch = notifyChannels.find(c => c.id === id);
|
||||
if(!ch) return;
|
||||
// 기존 선택 해제
|
||||
document.querySelectorAll('[id^=nc-row-]').forEach(el => el.style.background = '');
|
||||
document.getElementById('nc-row-'+id).style.background = '#eff6ff';
|
||||
|
||||
document.getElementById('nc-editing-id').value = ch.id;
|
||||
document.getElementById('nc-name').value = ch.name;
|
||||
document.getElementById('nc-type').value = ch.type;
|
||||
document.getElementById('nc-discord-url').value = ch.discord_webhook_url || '';
|
||||
document.getElementById('nc-gmail-user').value = ch.gmail_user || '';
|
||||
document.getElementById('nc-gmail-pw').value = ''; // 보안상 비움
|
||||
document.getElementById('nc-alert-to').value = ch.alert_email_to || '';
|
||||
document.getElementById('nc-enabled').checked = ch.enabled;
|
||||
document.getElementById('notify-form-title').textContent = '✏️ 채널 편집';
|
||||
document.getElementById('nc-save-btn').textContent = '💾 수정 저장';
|
||||
document.getElementById('notify-save-msg').textContent = '';
|
||||
onNotifyTypeChange();
|
||||
}
|
||||
|
||||
function resetNotifyForm(){
|
||||
document.getElementById('nc-editing-id').value = '';
|
||||
document.getElementById('nc-name').value = '';
|
||||
document.getElementById('nc-type').value = 'both';
|
||||
document.getElementById('nc-discord-url').value = '';
|
||||
document.getElementById('nc-gmail-user').value = '';
|
||||
document.getElementById('nc-gmail-pw').value = '';
|
||||
document.getElementById('nc-alert-to').value = '';
|
||||
document.getElementById('nc-enabled').checked = true;
|
||||
document.getElementById('notify-form-title').textContent = '➕ 채널 추가';
|
||||
document.getElementById('nc-save-btn').textContent = '💾 저장';
|
||||
document.getElementById('notify-save-msg').textContent = '';
|
||||
document.querySelectorAll('[id^=nc-row-]').forEach(el => el.style.background = '');
|
||||
onNotifyTypeChange();
|
||||
}
|
||||
|
||||
async function saveNotifyChannel(){
|
||||
const msgEl = document.getElementById('notify-save-msg');
|
||||
const editingId = document.getElementById('nc-editing-id').value;
|
||||
const name = document.getElementById('nc-name').value.trim();
|
||||
if(!name){ msgEl.style.color='var(--danger)'; msgEl.textContent='❌ 채널 이름을 입력하세요.'; return; }
|
||||
|
||||
const payload = {
|
||||
name,
|
||||
type: document.getElementById('nc-type').value,
|
||||
discord_webhook_url: document.getElementById('nc-discord-url').value.trim(),
|
||||
gmail_user: document.getElementById('nc-gmail-user').value.trim(),
|
||||
gmail_app_password: document.getElementById('nc-gmail-pw').value,
|
||||
alert_email_to: document.getElementById('nc-alert-to').value.trim(),
|
||||
enabled: document.getElementById('nc-enabled').checked,
|
||||
};
|
||||
try{
|
||||
await apiFetch('/admin/notify-config',{method:'PUT',body:JSON.stringify(payload)});
|
||||
msgEl.style.color = 'var(--success)';
|
||||
msgEl.textContent = '✅ 설정이 저장되었습니다.';
|
||||
if(editingId){
|
||||
await apiFetch(`/admin/notify-channels/${editingId}`, {method:'PUT', body:JSON.stringify(payload)});
|
||||
msgEl.style.color='var(--success)'; msgEl.textContent='✅ 수정되었습니다.';
|
||||
} else {
|
||||
await apiFetch('/admin/notify-channels', {method:'POST', body:JSON.stringify(payload)});
|
||||
msgEl.style.color='var(--success)'; msgEl.textContent='✅ 채널이 추가되었습니다.';
|
||||
}
|
||||
await loadNotifyConfig();
|
||||
resetNotifyForm();
|
||||
}catch(e){
|
||||
msgEl.style.color = 'var(--danger)';
|
||||
msgEl.textContent = '❌ 저장 실패: '+e.message;
|
||||
msgEl.style.color='var(--danger)'; msgEl.textContent='❌ 저장 실패: '+e.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteNotifyChannel(id){
|
||||
if(!confirm('이 채널을 삭제하시겠습니까?')) return;
|
||||
try{
|
||||
await apiFetch(`/admin/notify-channels/${id}`, {method:'DELETE'});
|
||||
await loadNotifyConfig();
|
||||
resetNotifyForm();
|
||||
}catch(e){ alert('삭제 실패: '+e.message); }
|
||||
}
|
||||
|
||||
async function testNotify(){
|
||||
try{
|
||||
await apiFetch('/admin/notify-test');
|
||||
|
||||
Reference in New Issue
Block a user