API·웹훅 자동화

<div class="wh-demo"><div class="wh-row"><div class="wh-box">ORDER<br><b>#4821</b></div><div class="wh-wire"><i></i></div><div class="wh-box">WEBHOOK<br><b id="wh-attempt">ATTEMPT 1</b></div><div class="wh-wire"><i></i></div><div class="wh-box">CRM<br><b id="wh-result">WAITING</b></div></div><div class="wh-log" id="wh-log">EVENT ID 4821 · SENDING</div></div>

:root{--font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",sans-serif}.wh-demo{width:min(94%,650px);font:800 clamp(13px,3.5vmin,16px)/1.25 var(--font-sans)}.wh-row{display:flex;align-items:center}.wh-box{flex:1;min-width:0;text-align:center;border:2px solid var(--line);background:var(--surface);padding:clamp(9px,2.5vmin,23px) 2px}.wh-box b{display:block;color:var(--accent);margin-top:5px}.wh-wire{width:clamp(17px,6vmin,60px);height:3px;background:var(--line);position:relative}.wh-wire i{position:absolute;width:clamp(9px,2vmin,16px);aspect-ratio:1;background:var(--accent);border-radius:50%;top:50%;transform:translateY(-50%);animation:wh-move 2.4s linear infinite}.wh-wire:nth-of-type(4) i{animation-delay:.7s}.wh-log{margin-top:clamp(10px,3vmin,25px);padding:clamp(8px,2vmin,16px);background:var(--fg);color:var(--bg);text-align:center}@keyframes wh-move{0%{left:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:80%;opacity:0}}

const states=[['ATTEMPT 1','WAITING','EVENT ID 4821 · SENDING'],['FAILED','WAITING','TIMEOUT · RETRY QUEUED'],['ATTEMPT 2','WAITING','SAME EVENT ID · RETRY'],['DELIVERED','UPDATED','IDEMPOTENT · ONE RECORD']];let i=0;function render(){document.querySelector('#wh-attempt').textContent=states[i][0];document.querySelector('#wh-result').textContent=states[i][1];document.querySelector('#wh-log').textContent=states[i][2]}render();setInterval(()=>{i=(i+1)%states.length;render()},1100);