결정적 시간 제어는 실제로 기다리지 않고 브라우저가 보는 날짜·타이머 시간을 고정하거나 진행시킵니다. 예약 종료와 자정 경계를 반복 가능하게 검증할 수 있습니다.
데모는 가상 시계가 마감 시각으로 점프할 때 상태가 열림에서 닫힘으로 바뀝니다. 서버 시간이나 외부 서비스 시계는 별도이므로 테스트 범위에서 함께 고정할지 확인해야 합니다.
언제 쓰나
예약·만료·카운트다운처럼 시간에 민감한 동작을 재현할 때 사용합니다.
결정적 시간 제어
Deterministic clock
테스트의 가상 시계를 움직여 시간 경계와 타이머 동작을 재현합니다.
···
<div class="stage"><div class="title">VIRTUAL CLOCK</div><div class="canvas"><div class="clockTrack"><span>09:00</span><i id="clockHand"></i><span>12:00</span></div><div class="clockNow" id="clockNow">09:00</div><div class="clockState" id="clockState">booking OPEN</div></div></div>.stage{width:min(94vw,820px);height:min(88vh,330px);box-sizing:border-box;padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:600 clamp(12px,2.5vmin,16px)/1.28 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;color:var(--fg);overflow:hidden}.title{color:var(--accent);letter-spacing:.035em;flex:none}.canvas{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,monospace}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(5px,1.4vmin,12px);text-align:center}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important}.canvas{flex-direction:column;gap:clamp(7px,3vmin,17px)}.clockTrack{position:relative;width:min(88%,530px);border-top:3px solid var(--line);display:flex;justify-content:space-between;padding-top:7px}.clockTrack i{position:absolute;top:-9px;left:0;width:15px;height:15px;background:var(--accent);border-radius:50%;transition:left .4s}.clockNow{font-size:clamp(20px,5vmin,32px);font-family:ui-monospace,monospace;color:var(--accent)}.clockState{border:1px solid var(--accent);border-radius:5px;padding:clamp(5px,1.5vmin,10px)}.clockState.closed{border-color:var(--accent-3);color:var(--accent-3)}let n=0;function jump(){const step=n++%3;document.getElementById('clockHand').style.left=['0%','51%','97%'][step];document.getElementById('clockNow').textContent=['09:00','10:30','12:00'][step];document.getElementById('clockState').textContent=step===2?'booking CLOSED':'booking OPEN';document.getElementById('clockState').classList.toggle('closed',step===2)}jump();setInterval(jump,700)