fix: 사이트 관리 페이지 개선 + 디스커버리 크롤링 + 광고 슬롯 선택화
- 디스커버리 크롤링: 태그/목록 페이지 URL에서 최신 글 링크 자동 탐색 (parse_rules.discovery.link_selector로 Read more 링크 찾기) - AdSense 슬롯 ID 선택사항: client_id만 있으면 자동 광고 동작 - 사이트 관리: 저장 후 목록 즉시 갱신 (await loadSites) - 사이트 관리: 크롤링 스케줄 설정 UI 추가 (크론 프리셋 버튼) - 사이트 관리: 미리보기 버튼 추가 (렌더링 + 파싱 데이터 확인) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chpark
+112
-21
@@ -11,32 +11,55 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 미리보기 모달 -->
|
||||
<div class="modal-overlay" id="previewModal">
|
||||
<div class="modal" style="max-width:900px">
|
||||
<div class="flex-between mb-1">
|
||||
<h3>공개 페이지 미리보기</h3>
|
||||
<button class="btn btn-outline btn-sm" onclick="document.getElementById('previewModal').classList.remove('active')">닫기</button>
|
||||
</div>
|
||||
<div id="preview-tabs" class="flex mb-1">
|
||||
<button class="btn btn-sm btn-primary" onclick="showTab('rendered')">렌더링</button>
|
||||
<button class="btn btn-sm btn-outline" onclick="showTab('parsed')">파싱 데이터</button>
|
||||
</div>
|
||||
<div id="tab-rendered"><iframe id="preview-iframe" style="width:100%;height:500px;border:1px solid var(--border);border-radius:var(--radius);background:#fff"></iframe></div>
|
||||
<div id="tab-parsed" style="display:none"><pre id="preview-parsed" style="background:var(--bg);padding:1rem;border-radius:var(--radius);max-height:500px;overflow:auto;font-size:.78rem;white-space:pre-wrap"></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 사이트 추가/수정 모달 -->
|
||||
<div class="modal-overlay" id="siteModal">
|
||||
<div class="modal">
|
||||
<div class="modal" style="max-width:700px">
|
||||
<h3 id="modal-title">사이트 추가</h3>
|
||||
<input type="hidden" id="edit-id">
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>사이트명 *</label>
|
||||
<input id="f-name" placeholder="예: 토렌트 순위">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>슬러그 (공개 URL용)</label>
|
||||
<label>슬러그 (공개 URL: /s/여기)</label>
|
||||
<input id="f-slug" placeholder="예: torrent-rank">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>크롤링 URL *</label>
|
||||
<input id="f-url" placeholder="http://jaewook.net/archives/2613">
|
||||
<input id="f-url" placeholder="http://jaewook.net/archives/tag/토렌트순위">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>설명</label>
|
||||
<input id="f-desc" placeholder="사이트 설명">
|
||||
<input id="f-desc" placeholder="사이트 설명 (공개 페이지 meta description)">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>파싱 규칙 (JSON) - 아래 예시를 참고하세요</label>
|
||||
<textarea id="f-rules" rows="12" style="font-size:.78rem">{
|
||||
<label>파싱 규칙 (JSON)</label>
|
||||
<textarea id="f-rules" rows="14" style="font-size:.78rem">{
|
||||
"discovery": {
|
||||
"link_selector": ".entry-title a"
|
||||
},
|
||||
"container": "table.easy-table tbody tr",
|
||||
"fields": {
|
||||
"rank": { "selector": "td:nth-child(1)", "type": "text" },
|
||||
@@ -50,11 +73,39 @@
|
||||
"date": { "selector": "time.entry-date", "type": "attr", "attr": "datetime" }
|
||||
}
|
||||
}</textarea>
|
||||
<div style="margin-top:.4rem;font-size:.75rem;color:var(--muted)">
|
||||
<strong>discovery</strong>: 목록 페이지 URL을 넣고, 최신 글 링크를 자동 탐색.<br>
|
||||
예) URL에 태그 페이지를 넣으면 → "Read more" 링크를 찾아 → 본문 크롤링
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 크롤링 스케줄 -->
|
||||
<div class="form-group">
|
||||
<label>크롤링 스케줄 (크론 표현식)</label>
|
||||
<div class="form-row">
|
||||
<input id="f-cron" placeholder="0 6 * * * (비워두면 수동)">
|
||||
<div style="display:flex;align-items:center;gap:.5rem">
|
||||
<label style="display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;font-size:.85rem;white-space:nowrap">
|
||||
<input type="checkbox" id="f-sched-active" style="width:auto"> 활성화
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cron-presets">
|
||||
<span class="preset" onclick="document.getElementById('f-cron').value='*/5 * * * *'">5분마다</span>
|
||||
<span class="preset" onclick="document.getElementById('f-cron').value='0 * * * *'">매시간</span>
|
||||
<span class="preset" onclick="document.getElementById('f-cron').value='0 */6 * * *'">6시간마다</span>
|
||||
<span class="preset" onclick="document.getElementById('f-cron').value='0 6 * * *'">매일 06시</span>
|
||||
<span class="preset" onclick="document.getElementById('f-cron').value='0 6,12,18 * * *'">하루 3회</span>
|
||||
<span class="preset" onclick="document.getElementById('f-cron').value='0 0 * * *'">매일 자정</span>
|
||||
<span class="preset" onclick="document.getElementById('f-cron').value='0 6 * * 1'">매주 월요일</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>AdSense 설정</label>
|
||||
<select id="f-adsense"><option value="">없음</option></select>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="justify-content:flex-end;gap:.5rem;margin-top:1rem">
|
||||
<button class="btn btn-outline" onclick="closeModal()">취소</button>
|
||||
<button class="btn btn-primary" onclick="saveSite()">저장</button>
|
||||
@@ -64,10 +115,13 @@
|
||||
|
||||
<script>
|
||||
let sites = [];
|
||||
let adsenseList = [];
|
||||
|
||||
async function loadSites() {
|
||||
sites = await api('GET', '/api/sites');
|
||||
const adsenseList = await api('GET', '/api/adsense');
|
||||
[sites, adsenseList] = await Promise.all([
|
||||
api('GET', '/api/sites'),
|
||||
api('GET', '/api/adsense'),
|
||||
]);
|
||||
|
||||
// AdSense 드롭다운
|
||||
const sel = document.getElementById('f-adsense');
|
||||
@@ -79,15 +133,17 @@ async function loadSites() {
|
||||
const sched = s.schedule_active
|
||||
? '<span class="badge badge-success">' + s.cron_schedule + '</span>'
|
||||
: '<span class="badge badge-danger">OFF</span>';
|
||||
const hasResult = parseInt(s.crawl_count) > 0;
|
||||
return '<tr>' +
|
||||
'<td>' + s.id + '</td>' +
|
||||
'<td><a href="/admin/sites/' + s.id + '" style="color:var(--primary);font-weight:600">' + s.name + '</a></td>' +
|
||||
'<td><strong style="color:var(--text)">' + s.name + '</strong></td>' +
|
||||
'<td class="text-muted" style="max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + s.url + '</td>' +
|
||||
'<td>' + (s.slug || '<span class="text-muted">-</span>') + '</td>' +
|
||||
'<td>' + (s.slug ? '<a href="/s/' + s.slug + '" target="_blank" style="color:var(--primary)">' + s.slug + '</a>' : '<span class="text-muted">-</span>') + '</td>' +
|
||||
'<td>' + sched + '</td>' +
|
||||
'<td>' + timeAgo(s.last_crawled_at) + '</td>' +
|
||||
'<td class="flex">' +
|
||||
'<td class="flex" style="flex-wrap:nowrap">' +
|
||||
'<button class="btn btn-success btn-sm" onclick="doCrawl(' + s.id + ',this)">크롤링</button>' +
|
||||
(hasResult ? '<button class="btn btn-outline btn-sm" onclick="previewSite(' + s.id + ')">미리보기</button>' : '') +
|
||||
'<button class="btn btn-outline btn-sm" onclick="editSite(' + s.id + ')">수정</button>' +
|
||||
'<button class="btn btn-danger btn-sm" onclick="deleteSite(' + s.id + ')">삭제</button>' +
|
||||
'</td></tr>';
|
||||
@@ -101,7 +157,10 @@ function openAddModal() {
|
||||
document.getElementById('f-url').value = '';
|
||||
document.getElementById('f-slug').value = '';
|
||||
document.getElementById('f-desc').value = '';
|
||||
document.getElementById('f-cron').value = '';
|
||||
document.getElementById('f-sched-active').checked = false;
|
||||
document.getElementById('f-adsense').value = '';
|
||||
// 기본 파싱 규칙은 textarea에 이미 있으므로 건드리지 않음
|
||||
document.getElementById('siteModal').classList.add('active');
|
||||
}
|
||||
|
||||
@@ -115,6 +174,8 @@ function editSite(id) {
|
||||
document.getElementById('f-slug').value = s.slug || '';
|
||||
document.getElementById('f-desc').value = s.description || '';
|
||||
document.getElementById('f-rules').value = JSON.stringify(s.parse_rules || {}, null, 2);
|
||||
document.getElementById('f-cron').value = s.cron_schedule || '';
|
||||
document.getElementById('f-sched-active').checked = s.schedule_active || false;
|
||||
document.getElementById('f-adsense').value = s.adsense_config_id || '';
|
||||
document.getElementById('siteModal').classList.add('active');
|
||||
}
|
||||
@@ -128,7 +189,7 @@ async function saveSite() {
|
||||
try {
|
||||
rules = JSON.parse(document.getElementById('f-rules').value || '{}');
|
||||
} catch(e) {
|
||||
toast('파싱 규칙 JSON이 올바르지 않습니다', 'error');
|
||||
toast('파싱 규칙 JSON이 올바르지 않습니다: ' + e.message, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -144,38 +205,68 @@ async function saveSite() {
|
||||
if (!data.name || !data.url) { toast('사이트명과 URL은 필수입니다', 'error'); return; }
|
||||
|
||||
const editId = document.getElementById('edit-id').value;
|
||||
let result;
|
||||
if (editId) {
|
||||
await api('PUT', '/api/sites/' + editId, data);
|
||||
toast('사이트가 수정되었습니다');
|
||||
result = await api('PUT', '/api/sites/' + editId, data);
|
||||
} else {
|
||||
await api('POST', '/api/sites', data);
|
||||
toast('사이트가 추가되었습니다');
|
||||
result = await api('POST', '/api/sites', data);
|
||||
}
|
||||
|
||||
if (result.error) { toast('저장 실패: ' + result.error, 'error'); return; }
|
||||
|
||||
// 스케줄 저장
|
||||
const siteId = editId || result.id;
|
||||
const cronVal = document.getElementById('f-cron').value;
|
||||
const schedActive = document.getElementById('f-sched-active').checked;
|
||||
if (cronVal || schedActive) {
|
||||
await api('PUT', '/api/sites/' + siteId + '/schedule', {
|
||||
cron_schedule: cronVal,
|
||||
schedule_active: schedActive,
|
||||
});
|
||||
}
|
||||
|
||||
toast(editId ? '사이트 수정 완료' : '사이트 추가 완료');
|
||||
closeModal();
|
||||
loadSites();
|
||||
await loadSites();
|
||||
}
|
||||
|
||||
async function deleteSite(id) {
|
||||
if (!confirm('정말 삭제하시겠습니까? 모든 크롤링 데이터가 삭제됩니다.')) return;
|
||||
await api('DELETE', '/api/sites/' + id);
|
||||
toast('삭제되었습니다');
|
||||
loadSites();
|
||||
await loadSites();
|
||||
}
|
||||
|
||||
async function doCrawl(id, btn) {
|
||||
btn.disabled = true;
|
||||
btn.textContent = '크롤링 중...';
|
||||
btn.textContent = '진행중...';
|
||||
try {
|
||||
const r = await api('POST', '/api/sites/' + id + '/crawl');
|
||||
if (r.error) throw new Error(r.error);
|
||||
toast('크롤링 완료! ' + (r.itemCount || 0) + '개 항목');
|
||||
toast('크롤링 완료! ' + (r.itemCount || 0) + '개 항목' + (r.crawledUrl ? ' (' + r.crawledUrl.substring(0, 50) + ')' : ''));
|
||||
} catch(e) {
|
||||
toast('크롤링 실패: ' + e.message, 'error');
|
||||
}
|
||||
btn.disabled = false;
|
||||
btn.textContent = '크롤링';
|
||||
loadSites();
|
||||
await loadSites();
|
||||
}
|
||||
|
||||
async function previewSite(siteId) {
|
||||
// 최신 크롤링 결과 가져오기
|
||||
const results = await api('GET', '/api/sites/' + siteId + '/results?limit=1');
|
||||
if (!results.length) { toast('크롤링 결과가 없습니다', 'error'); return; }
|
||||
|
||||
const detail = await api('GET', '/api/results/' + results[0].id);
|
||||
document.getElementById('preview-iframe').srcdoc = detail.rendered_html || '<p>렌더링 데이터 없음</p>';
|
||||
document.getElementById('preview-parsed').textContent = JSON.stringify(detail.parsed_data, null, 2);
|
||||
document.getElementById('previewModal').classList.add('active');
|
||||
showTab('rendered');
|
||||
}
|
||||
|
||||
function showTab(name) {
|
||||
document.getElementById('tab-rendered').style.display = name === 'rendered' ? 'block' : 'none';
|
||||
document.getElementById('tab-parsed').style.display = name === 'parsed' ? 'block' : 'none';
|
||||
}
|
||||
|
||||
loadSites();
|
||||
|
||||
Reference in New Issue
Block a user