디자인 스프린트

<div class="stage">
  <div class="days" id="days"></div>
  <div class="panel" id="panel">
    <div class="day-name" id="dayName">Monday</div>
    <div class="day-act" id="dayAct">Map</div>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;flex-direction:column;gap:14px}
.days{display:flex;gap:6px;height:40%}
.day{flex:1;border-radius:8px;background:var(--line);display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:6px;font:700 9px/1 monospace;color:var(--muted);transition:background .4s,color .4s}
.day.on{background:var(--accent);color:#fff}
.panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1px solid var(--line);border-radius:10px}
.day-name{font:700 11px/1 monospace;color:var(--muted)}
.day-act{font:800 20px/1 sans-serif;color:var(--fg)}

const names = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
const full = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
const acts = ['Map', 'Sketch', 'Decide', 'Prototype', 'Test'];
const days = document.getElementById('days');
const dayEls = names.map((n) => {
  const d = document.createElement('div');
  d.className = 'day';
  d.textContent = n;
  days.appendChild(d);
  return d;
});
const dayName = document.getElementById('dayName');
const dayAct = document.getElementById('dayAct');
let i = 0;
function step() {
  dayEls.forEach((d, k) => d.classList.toggle('on', k === i));
  dayName.textContent = full[i];
  dayAct.textContent = acts[i];
  i = (i + 1) % names.length;
}
step();
setInterval(step, 1100);