crawlmanager/views/admin/sites.ejs

<%- include('layout', { page: 'sites', pageTitle: '사이트 관리', body: `

<div class="card">
  <div class="card-header">
    <h2>크롤링 대상 사이트</h2>
    <button class="btn btn-primary" onclick="openAddModal()">+ 사이트 추가</button>
  </div>
  <table>
    <thead><tr><th>ID</th><th>사이트명</th><th>URL</th><th>슬러그</th><th>스케줄</th><th>마지막 크롤링</th><th>액션</th></tr></thead>
    <tbody id="sites-tbody"></tbody>
  </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" 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: /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/tag/토렌트순위">
    </div>

    <div class="form-group">
      <label>설명</label>
      <input id="f-desc" placeholder="사이트 설명 (공개 페이지 meta description)">
    </div>

    <div class="form-group">
      <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" },
    "name": { "selector": "td:nth-child(2)", "type": "text" },
    "url": { "selector": "td:nth-child(3) a", "type": "attr", "attr": "href" },
    "url_text": { "selector": "td:nth-child(3)", "type": "text" },
    "features": { "selector": "td:nth-child(4)", "type": "text" }
  },
  "meta": {
    "title": { "selector": "h1.entry-title", "type": "text" },
    "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>
    </div>
  </div>
</div>

<script>
let sites = [];
let adsenseList = [];

async function loadSites() {
  [sites, adsenseList] = await Promise.all([
    api('GET', '/api/sites'),
    api('GET', '/api/adsense'),
  ]);

  // AdSense 드롭다운
  const sel = document.getElementById('f-adsense');
  sel.innerHTML = '<option value="">없음</option>' + adsenseList.map(a =>
    '<option value="' + a.id + '">' + a.name + ' (' + a.client_id + ')</option>'
  ).join('');

  document.getElementById('sites-tbody').innerHTML = sites.map(s => {
    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><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 ? '<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" 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>';
  }).join('') || '<tr><td colspan="7" style="text-align:center;padding:2rem" class="text-muted">사이트를 추가하세요</td></tr>';
}

function openAddModal() {
  document.getElementById('modal-title').textContent = '사이트 추가';
  document.getElementById('edit-id').value = '';
  document.getElementById('f-name').value = '';
  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');
}

function editSite(id) {
  const s = sites.find(x => x.id === id);
  if (!s) return;
  document.getElementById('modal-title').textContent = '사이트 수정';
  document.getElementById('edit-id').value = s.id;
  document.getElementById('f-name').value = s.name;
  document.getElementById('f-url').value = s.url;
  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');
}

function closeModal() {
  document.getElementById('siteModal').classList.remove('active');
}

async function saveSite() {
  let rules;
  try {
    rules = JSON.parse(document.getElementById('f-rules').value || '{}');
  } catch(e) {
    toast('파싱 규칙 JSON이 올바르지 않습니다: ' + e.message, 'error');
    return;
  }

  const data = {
    name: document.getElementById('f-name').value,
    url: document.getElementById('f-url').value,
    slug: document.getElementById('f-slug').value || null,
    description: document.getElementById('f-desc').value,
    parse_rules: rules,
    adsense_config_id: document.getElementById('f-adsense').value || null,
  };

  if (!data.name || !data.url) { toast('사이트명과 URL은 필수입니다', 'error'); return; }

  const editId = document.getElementById('edit-id').value;
  let result;
  if (editId) {
    result = await api('PUT', '/api/sites/' + editId, data);
  } else {
    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();
  await loadSites();
}

async function deleteSite(id) {
  if (!confirm('정말 삭제하시겠습니까? 모든 크롤링 데이터가 삭제됩니다.')) return;
  await api('DELETE', '/api/sites/' + id);
  toast('삭제되었습니다');
  await loadSites();
}

async function doCrawl(id, btn) {
  btn.disabled = true;
  btn.textContent = '진행중...';
  try {
    const r = await api('POST', '/api/sites/' + id + '/crawl');
    if (r.error) throw new Error(r.error);
    toast('크롤링 완료! ' + (r.itemCount || 0) + '개 항목' + (r.crawledUrl ? ' (' + r.crawledUrl.substring(0, 50) + ')' : ''));
  } catch(e) {
    toast('크롤링 실패: ' + e.message, 'error');
  }
  btn.disabled = false;
  btn.textContent = '크롤링';
  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();
</script>
` }) %>