{/* curl */}
curl
{' '}
{/* URL */}
"{url}
{paramEntries.map(([k, v], i) => (
{i === 0 ? '?' : '&'}
{k}
=
{v}
))}
"
{' \\\n '}
{/* -H flag */}
-H {/* header value */}
"Authorization
: Bearer{' '}
{token ? token.slice(0, 8) + '…' + token.slice(-4) : ''}
"
{/* 스케줄 */}
{/* 임계값 */}
setThreshold(+e.target.value)}
style={{ width: '100%', accentColor: 'var(--accent)' }}
/>
{/* 출력 채널 */}
{/* Webhook */}
{/* 저장 */}
);
}
function DetailApi({ scraper }) {
const [settings, setSettings] = React.useState(null);
const [tokenVisible, setTokenVisible] = React.useState(false);
const [copied, setCopied] = React.useState('');
const [params, setParams] = React.useState({
from: '',
to: '',
status: '',
limit: '',
});
React.useEffect(() => {
fetch('/api/settings')
.then((r) => r.json())
.then(setSettings)
.catch(() => {});
}, []);
const token = settings?.apiToken;
const baseUrl = settings?.baseUrl || window.location.origin;
const endpoint = `${baseUrl}/api/v1/scrapers/${scraper.id}/data`;
const activeParams = Object.fromEntries(
Object.entries(params).filter(([, v]) => v !== ''),
);
const copy = (text, key) => {
navigator.clipboard.writeText(text).then(() => {
setCopied(key);
setTimeout(() => setCopied(''), 1800);
});
};
const CopyBtn = ({ text, id }) => (
);
const inputStyle = {
fontFamily: 'var(--mono)',
fontSize: 12.5,
background: 'var(--bg-3)',
border: '1px solid var(--border-mid)',
borderRadius: 'var(--r-1)',
padding: '6px 10px',
color: 'var(--text)',
width: '100%',
outline: 'none',
};
return (
실행 스케줄
{SCHEDULE_OPTIONS.map((opt) => (
))}
{scheduleKey === 'custom' && (
setCustomCron(e.target.value)}
placeholder="0 */30 * * * * (초 분 시 일 월 요일)"
style={{
marginTop: 4,
padding: '8px 12px',
borderRadius: 8,
fontSize: 12,
border: '1px solid var(--border)',
background: 'var(--bg-2)',
color: 'var(--text)',
fontFamily: 'var(--mono)',
width: '100%',
}}
/>
)}
'매일 09:00'은 정각 기준 실행. '매시간' / '15분마다'는 저장 시점
기준으로 다음 실행이 계산됩니다.
자동 복구 신뢰도 임계값
{threshold}
AI 신뢰도가 이 값 이상이면 자동 복구, 미만이면 수동 승인 큐로
이동합니다.
출력 채널
{CHANNEL_KEYS.map((k) => (
))}
Webhook 알람
setWebhookUrl(e.target.value)}
placeholder="https://hooks.slack.com/services/..."
style={{
flex: 1,
padding: '8px 12px',
borderRadius: 8,
fontSize: 12,
border: '1px solid var(--border)',
background: 'var(--bg-2)',
color: 'var(--text)',
fontFamily: 'var(--mono)',
}}
/>
{[
['generic', 'Generic JSON'],
['slack', 'Slack'],
].map(([val, label]) => (
))}
{/* 알람 조건 */}
{/* 텍스트 조건 */}
{/* 숫자 — 변동폭 */}
setAlertDelta(
e.target.checked ? (scraper.alertDelta ?? '') : '',
)
}
/>
{/* 숫자 — 범위 이탈 */}
변동폭 초과
setAlertDelta(e.target.value)}
style={{
width: 120,
padding: '6px 10px',
borderRadius: 7,
fontSize: 12,
border: '1px solid var(--border)',
background: 'var(--bg-2)',
color: 'var(--text)',
}}
/>
│현재 − 이전│ 초과 시
{
if (!e.target.checked) {
setAlertMin('');
setAlertMax('');
}
}}
/>
범위 이탈
setAlertMin(e.target.value)}
style={{
width: 100,
padding: '6px 10px',
borderRadius: 7,
fontSize: 12,
border: '1px solid var(--border)',
background: 'var(--bg-2)',
color: 'var(--text)',
}}
/>
~
setAlertMax(e.target.value)}
style={{
width: 100,
padding: '6px 10px',
borderRadius: 7,
fontSize: 12,
border: '1px solid var(--border)',
background: 'var(--bg-2)',
color: 'var(--text)',
}}
/>
범위 벗어날 때
{msg && (
{msg.text}
)}
{/* 엔드포인트 */}
{/* 인증 토큰 */}
);
}
function DetailRuns({ scraperId }) {
const [runs, setRuns] = React.useState(null);
React.useEffect(() => {
if (!scraperId) {
setRuns([]);
return;
}
fetch(`/api/scrapers/${scraperId}/results`)
.then((r) => r.json())
.then((data) => setRuns(Array.isArray(data) ? data : []))
.catch(() => setRuns(null));
}, [scraperId]);
if (runs === null) {
return (
Endpoint
GET
{endpoint}
API Token
{!token ? (
서버에{' '}
) : (
DOMA_API_TOKEN
이 설정되지 않았습니다.
{tokenVisible
? token
: token.slice(0, 8) +
' •••••••••••••••••••••••• ' +
token.slice(-4)}
파라미터 설정
{/* from */}
{/* to */}
{/* status */}
{/* limit */}
{/* 리셋 버튼 */}
{Object.values(params).some((v) => v !== '') && (
)}
GENERATED COMMAND
실행 이력 로드 중…
수집 시각
상태
추출값
신뢰도
응답시간
로그
{r.ts}
{r.value}
{r.valueChanged && (
변경
)}
{r.score == null ? '—' : Number(r.score).toFixed(1)}
{r.dur}
{r.note}
아직 실행 이력이 없습니다. "지금 실행"을 눌러 첫 수집을 시작하세요.
)}
{/* Y-axis labels (HTML, avoids SVG text distortion) */}
);
}
function ValueTrendCard({ results, scraperId }) {
if (!results || results.length === 0) return null;
const annotated = results.map((r, i) => ({
...r,
changed:
i < results.length - 1 && !!r.value && r.value !== results[i + 1].value,
}));
const changeCount = annotated.filter((r) => r.changed).length;
const parseNum = (v) => parseFloat(String(v || '').replace(/[^0-9.-]/g, ''));
const numericRuns = [...results]
.reverse()
.filter(
(r) =>
r.value &&
r.status !== 'failed' &&
!isNaN(parseNum(r.value)) &&
parseNum(r.value) !== 0,
);
const isNumeric = numericRuns.length >= 2;
// ±% change from oldest to latest numeric sample
let pctChange = null;
if (isNumeric && numericRuns.length >= 2) {
const first = parseNum(numericRuns[0].value);
const last = parseNum(numericRuns[numericRuns.length - 1].value);
if (first !== 0) pctChange = ((last - first) / Math.abs(first)) * 100;
}
const isUp = pctChange !== null && pctChange >= 0;
return (
{[...yTicks].reverse().map((t, i) => (
{/* Chart */}
{fmtVal(t.val)}
))}
{/* Tooltip — HTML div to avoid SVG text distortion */}
{hov && (
0.62
? { right: `${((W - hov.x) / W) * 100 + 1.2}%` }
: { left: `${(hov.x / W) * 100 + 1.2}%` }),
background: 'var(--bg-2)',
border: '1px solid var(--border)',
borderRadius: 8,
padding: '6px 11px',
boxShadow: '0 4px 16px rgba(0,0,0,0.18)',
pointerEvents: 'none',
zIndex: 10,
whiteSpace: 'nowrap',
}}>
)}
{/* X-axis time labels */}
{fmtVal(hov.val)}
{hov.time?.slice(5, 16) || ''}
{xIdxs.map((i, j) => (
{times[i]?.slice(5, 16) || ''}
))}
{/* Header */}
);
}
// ─── New Scraper Wizard ────────────────────────────────────────────────────
function NewScraperScreen({ onClose, onRegister }) {
const [step, setStep] = React.useState(0);
const [url, setUrl] = React.useState('coupang.com/np/categories/178794');
const [intent, setIntent] = React.useState(
'쿠팡 노트북 카테고리 베스트 페이지의 실시간 1위 상품명',
);
const [domain, setDomain] = React.useState('commerce');
const [threshold, setThreshold] = React.useState(85);
const [schedule, setSchedule] = React.useState('daily-9');
const [customCron, setCustomCron] = React.useState('');
const [channels, setChannels] = React.useState(['api']);
const [selected, setSelected] = React.useState(null);
const steps = [
{ id: 0, label: '대상 페이지', sub: 'URL 입력 및 렌더링' },
{ id: 1, label: '추출 의도', sub: '무엇을 가져올지 자연어로' },
{ id: 2, label: '요소 선택', sub: '클릭으로 수집 대상 지정' },
{ id: 3, label: '운영 정책', sub: '임계값 · 스케줄 · 출력' },
];
const isValidCron = (expr) =>
/^(\S+)\s+(\S+)\s+(\S+)\s+(\S+)\s+(\S+)$/.test(expr.trim());
const canNext = () => {
if (step === 0) return url.trim().length > 3;
if (step === 1) return intent.trim().length > 2;
if (step === 2) return !!selected?.selector;
if (step === 3 && schedule === 'custom') return isValidCron(customCron);
return true;
};
const next = () =>
canNext() && setStep((s) => Math.min(s + 1, steps.length - 1));
const prev = () => setStep((s) => Math.max(s - 1, 0));
const SCHEDULE_LABEL = {
'daily-9': '매일 09:00',
hourly: '매시간',
'15m': '15분마다',
};
const DOMAIN_ALTS = {
commerce: '소비 수요',
labor: '노동 시장',
realestate: '부동산',
regulatory: '규제·공시',
media: '미디어',
finance: '금융',
};
const CHANNEL_LABEL = {
api: 'REST API',
webhook: 'Webhook',
slack: 'Slack',
csv: 'CSV',
};
const handleCreate = () => {
const scheduleVal = schedule === 'custom' ? customCron.trim() : schedule;
const channelVals = channels.map((c) => CHANNEL_LABEL[c] || c);
const newScraper = {
id: 'cr_' + Math.random().toString(36).slice(2, 6),
name: intent.slice(0, 40) || url,
url,
org: '',
domain,
type: domain,
altCategory: DOMAIN_ALTS[domain] || domain,
threshold,
css_selector: selected?.selector || '',
user_intent: intent,
schedule: scheduleVal,
scheduleKey: scheduleVal,
channels: channelVals,
delivery: channelVals,
owner: 'me',
status: 'pending',
score: 0,
lastValue: '—',
lastRun: '—',
healed: 0,
runs7d: 0,
spark: [],
};
if (onRegister) onRegister(newScraper);
onClose();
};
return (
값 추이
{pctChange !== null && (
{isUp ? '▲' : '▼'} {Math.abs(pctChange).toFixed(2)}%
)}
{changeCount > 0
? `${changeCount}회 값 변경 감지됨`
: '수집 간 값 변화 이력'}
{annotated.slice(0, 15).map((r, i) => (
{r.value || '—'}
{r.changed && (
변경
)}
{r.runAt || '—'}
{steps.map((s, i) => (
{i < steps.length - 1 && (
)}
))}
{i < step ? (
{s.label}
{s.sub}
{step === 0 && (
{step > 0 && (
)}
{step < steps.length - 1 && (
)}
{step === steps.length - 1 && (
)}
공개 페이지는 즉시 분석됩니다. 로그인이 필요하면{' '}
인증 프로파일을 먼저
등록하세요.
DOMA는{' '}
Playwright headless 렌더
로 페이지를 가져온 뒤
{' '}
모든 DOM 노드를 후보 풀
로 사용합니다. JS로 그려지는 콘텐츠도 안전합니다.
{[
'coupang.com/np/categories/178794',
'dart.fss.or.kr/dsab001',
'jobkorea.co.kr/recruit/joblist',
'land.naver.com/complexes/8928',
].map((u) => (
))}
{/* 브라우저 크롬 헤더 */}
{/* idle */}
{imgState === 'idle' && (
setImgState('ok')}
onError={() => setImgState('err')}
/>
)}
{/* error */}
{imgState === 'err' && (
{/* 하단 상태 바 */}
URL을 입력하면
실제 페이지 미리보기가 표시됩니다
실제 페이지 미리보기가 표시됩니다
페이지 렌더링 중…
미리보기를 불러올 수 없습니다
URL을 다시 확인해 주세요
URL을 다시 확인해 주세요
{imgState === 'ok' ? (
<>
렌더 완료 · 4,872개 DOM 노드 수집
) : imgState === 'loading' ? (
렌더 중…
) : imgState === 'err' ? (
<>
렌더 실패
) : (
URL 입력 대기
)}
{label}
{val}
{tone === 'ok' ? '▲' : '▼'} 0.{Math.floor(Math.random() * 40) + 10}%
{title}
{sub}
금융·매크로 리서치에서 자주 쓰는 데이터를 골라 시작하세요. 사이트별
하드코딩 없이 일반화된 파이프라인으로 동작합니다.
{cats.map((c) => (
))}
{tpls.map((t) => {
const on = intent === t.intent;
return (
);
})}
템플릿은 출발점일
뿐입니다. 새 사이트나 예외 케이스에서도 같은 파이프라인으로 동작 —
사이트별 프롬프트 튜닝은 없습니다.
시각적 위치나 모양이 아니라{' '}
'역할'을 적어주세요.
이 문장이 그대로 LLM 추론 기준(
user_intent)이 됩니다.